How to design a Picture preview and navigation on a webpage

Navigation is not just a navigation bar that is often located in the head of a website. The roadside signs and shopping mall signs are all a kind of navigation. This article introduces the photo preview navigation design skills on the webpage to the coders, for more information about the coders, see. Navigation is not just a navigation bar that is often located in the head of a website. roadside signs and shopping mall signs are all a kind of navigation. It can be said that navigation is everywhere in life. If there is no such navigation, then we will be lost, lost in the ocean of Internet information, lost in the landscape of the road, lost in a wide array of goods shelves.
When the so-called WEB2.0 craze is blowing into China from abroad, the success modes of some successful foreign websites are also blowing into the eyes of domestic counterfeits. At present, in terms of online album or fashion in China, it is said that yupoo has done a good job in terms of Web album of WEB2.0, at the same time, it is also the most successful imitation of the flickr Model in China-in fact, yupoo is almost another language version of flickr. Aside from other factors such as business operations, I just want to compare the differences between the two on the photo preview navigation system (if I do not know the correct name, I will name it myself, or the two have different understandings of the user's usage.

It can be seen that the photo preview Navigation System of the photo album is quite simple, only the thumbnail links of the "previous" and "Next" images, as well as the total number of photos in the current album and a slide play button, the thumbnail of the current photo does not exist in the preview navigation. Let's look at the yupoo below. In the preview navigation, the thumbnail of the current photo is missing the total number of photos in the current album.

It is not said that the thumbnail of the current photo should not appear in the preview navigation. yupoo does not mark the total number of photos in the current album in the preview navigation, which means it fails.
Each user may inevitably want to know the number of photos in the current album when viewing the album. This is actually related to the human psychology, human beings have such a desire-the more information they need to master, the better. Only by having enough information can they feel steadfast or secure in their hearts. This is an inherent instinct.
However, yupoo does not indicate the total number of photos in the current album. It is like leaving a question to wait for the user to search for the answer, although it may arouse the curiosity of some people and keep clicking on it, I still don't know how many photos are in this album at the end.

Should the thumbnail of the current photo appear in the preview navigation?

Yupoo's photo preview navigation system is completely designed according to the website's navigation system. In the website's navigation system, you need to know where you are or under which topic, at this time, the navigation system should mark this location or topic to prompt users so that users will not be lost in the complicated information of the website.
However, for a relatively simple navigation system like photo preview navigation system, the design based on the website navigation system seems a little complicated.
First, you do not need to mark the current position in the photo preview navigation. It is not like the website navigation system that may have lower-level or lower-level navigation. Only one photo is displayed in the photo preview, that is to say, all the columns in this preview navigation are equal, and there is no lower-level or deeper attribution relationship. users do not get lost on such pages;

Secondly, the real function of the navigation system is to guide the user and mark the location. Since the photo preview navigation does not need to mark the location, the remaining function of the photo preview navigation system is to guide users to click thumbnails on the navigation system to view photos. At this time, the problem will occur. If you don't take a closer look at the thumbnail on the preview navigation, click the thumbnail of the current photo, after clicking this button, the user will find the current photo. After checking the reason, the user will understand that the thumbnail in the middle is the thumbnail of the current photo-click it and the current photo, that is to say, this thumbnail is useless. Since it is useless, why does it still exist?

Finally, when there are more items in the same space, the space occupied by each item is naturally less. The most successful aspect of the photo preview navigation is that the thumbnail of the photo is displayed on the navigation, rather than the text, so that you can understand the approximate shape of the two photos. Therefore, how to ensure the clarity of the thumbnail becomes the true key of the preview navigation. The larger the size of a photo, the smaller the definition of the thumbnail, or even the blur into a group. In this case, you need to increase the size of the thumbnail, but the preview navigation size is limited, so removing the thumbnail of the current photo can make the thumbnails of similar two photos clearer.

Considering Users in details is the key to product success!