Tips for designing photo preview navigation on web pages
|
<br />Navigation does not just refer to the navigation bar that is often located at the top of the website. Roadside signs, shopping mall signs, etc. are all a kind of navigation. It can be said that navigation is everywhere in life. Without these navigations, we will be lost, lost in the ocean of Internet information, lost in the criss-crossing roads, and lost among the dazzling array of merchandise shelves. When the so-called WEB2.0 trend was blowing wildly from abroad to China, the successful models of some successful foreign websites were also blowing wildly to the eyes of domestic imitators. Yupoo is currently the best online photo album company in China, or to be more fashionable, WEB2.0 online photo album company. It is also the most similar and successful imitator of the flickr model in China - in fact, yupoo is almost a flickr version in another language. Leaving aside other factors such as commercial operations, let's just compare the differences between the two in terms of the photo preview navigation system (I don't know the correct name, so I named it myself), or the differences in their understanding of how users use them.  From the above picture, we can see that the photo preview navigation system of the flickr album is quite simple. There are only thumbnail links of "previous" and "next" photos, the total number of photos in the current album, and a button for playing a slide show. The thumbnail of the current photo is not available in the preview navigation. Look at the screenshot of Yupoo below. In the preview navigation, there is an additional thumbnail of the current photo but the total number of photos in the current album is missing.  Putting aside the question of whether the thumbnail of the current photo should appear in the preview navigation, the fact that Yupoo does not mark the total number of photos in the current album on the preview navigation shows its failure. Every user will inevitably want to know how many photos are in the current album when looking at it. This is actually related to human psychology. People are born with such a desire - the more information they have about a thing, the better. Only when they have enough information about it will they feel at ease or safe. This is an innate instinctive desire. However, Yupoo does not indicate the total number of photos in the current album. It is like leaving a question waiting for users to search for the answer. Although it may arouse the curiosity of some people and make them click on it continuously, in the end they still find that they have no idea how many photos are in this album. Should the thumbnail of the current photo appear in the preview navigation? Yupoo's photo preview navigation system is designed completely according to the website's navigation system. In the website's navigation system, users need to know where they are currently or which column they are in. At this time, the navigation system needs to mark this place or column to prompt the user, so that the user will not get lost in the complex information of the website. However, for a relatively simple navigation system such as the photo preview navigation system, it seems a bit complicated to design it according to the website navigation system. First, the photo preview navigation does not need to indicate the current location. It is not like the website navigation system that may have subordinate or sub-sub-level navigation. The photo preview only displays one photo. In other words, all columns in this preview navigation are equal. There is no subordinate or deeper relationship. Users will not get lost in such a page. Secondly, the real function of the navigation system is to guide users and mark locations. Since the photo preview navigation does not need to mark locations, the remaining function of the photo preview navigation system is to guide users - guide users to click on the thumbnails on the navigation system to view photos. Problems will arise at this time. If you do not look closely at the thumbnails on the preview navigation and click the mouse directly, it is very likely that you will click on the thumbnail of the current photo. After clicking, the user will find that it is still the current photo. After checking the reason, the user will understand that the thumbnail in the middle is the thumbnail of the current photo - it is still the current photo after clicking, which means that this thumbnail is useless. If it is useless, why does it exist? Finally, for the same space, when more items are placed in the space, the space occupied by each item will naturally be less. The most successful point of the photo preview navigation is that it displays photo thumbnails instead of text, allowing users to clearly know the approximate shapes of two similar photos. Therefore, how to ensure the clarity of thumbnails becomes the real key to preview navigation. When the size of the photo is larger, the clarity of the thumbnail will be lower, and it may even become blurred in the end. At this time, you need to increase the size of the thumbnail, but the size of the preview navigation is limited, so removing the thumbnail of the current photo can make the thumbnails of the two adjacent photos clearer. Considering users from the details is the key to product success! |
<<: Implementation code for adding slash to Vue element header
>>: CSS sets Overflow to hide the scroll bar while allowing scrolling
Recommend
Some methods to optimize query speed when MySQL processes massive data
In the actual projects I participated in, I found...
Solution to the failure of MySQL to use innobackupex to backup the connection server
What should I do if MySQL fails to connect to the...
Step by step guide to build a calendar component with React
Table of contents Business Background Using Techn...
About the correct way to convert time in js when importing excel
Table of contents 1. Basics 2. Problem Descriptio...
Implementation steps for installing FTP server in Ubuntu 14.04
Table of contents Install Software Management Ano...
Automatic line breaks in html pre tags
At this time, you can use overflow:auto; (when the...
Web design dimensions and rules for advertising design on web pages
1. Under 800*600, if the width of the web page is...
Text pop-up effects implemented with CSS3
Achieve resultsImplementation Code html <div&g...
8 Reasons Why You Should Use Xfce Desktop Environment for Linux
For several reasons (including curiosity), I star...
Detailed description of common events and methods of html text
Event Description onactivate: Fired when the objec...
The standard HTML writing method is different from the one automatically generated by Dreamweaver
Copy code The code is as follows: <!--doctype ...
Detailed Example of Row-Level Locking in MySQL
Preface Locks are synchronization mechanisms used...
How to configure MySQL on Ubuntu 16.04 server and enable remote connection
background I am learning nodejs recently, and I r...
Example of how to build a Harbor public repository with Docker
The previous blog post talked about the Registry ...
In-depth understanding of JavaScript event execution mechanism
Table of contents Preface The principle of browse...