Shulou(Shulou.com)06/01 Report--

Today, I would like to introduce to you what are the suggestions for the jump design of WAP pages on mobile websites. The content of the article is good. Now I would like to share it with you. Friends who feel in need can understand it. I hope it will be helpful to you. Let's read it along with the editor's ideas.

It is normal for pages on PC to jump from one page to another, from the home page to the search results page, to the details page, and then to the details page of the relevant content. But when it comes to mobile phones, uncontrolled jumping is a bit of a problem.

From the home page list-> single Weibo details page-> personal home page-> single Weibo details page-> personal home page … You can go deep one after another, but after jumping three or four times, looking at the "back" button in the upper left corner, it's hard to tell where you're going back.

If it is a traditional PC site, can show the level of navigation, can jump to other columns when the account is clear, of course, such a situation should be reduced as much as possible, but still be able to explain clearly.

The page is small, and there is not much room for multi-layer tabs navigation or breadcrumb navigation, leaving only a "back" button in the upper left corner as navigation. In the case of Weibo, it is obviously not enough. But also like the traditional PC site as intricate links, it is easier to get dizzy.

More levels, more click operations, reducing the efficiency of use.

Even if there is no halo, more levels, more depth, more click operations, but also reduce the efficiency of use.

In the mobile version of digging photos, you can see pictures and open videos directly on the list page:

You must have been attracted by the chemistry teacher above. In fact, I saw the chemistry teacher drink water from a 500ml beaker in high school. What I want to say here is: this mobile version of the website does not need to enter the details page, just browse the list, see the video you are interested in, click directly to open the full-screen video playback page.

If each article shows only a small part of the previous content on the list page, you have to go to the details page to watch the full text and broadcast the video. There's nothing wrong with that, but it's tiring to use.

Compared with the mobile version of some websites, which only makes the page smaller, the mobile version of Diaotuzhi takes more account of the use of mobile phone users, which not only looks simple, but also efficient.

There are too many levels to understand; even if you can understand them, it will be troublesome to use them, so if you don't jump on your phone, you won't jump. Then let's see if there is any way to reduce the jump.

In the case of opening the details page from the list page, the old Google reader approach is typical:

Expand directly in the page, there is no such thing as entering the details page, and naturally there is no effort to enter and then return.

Google reader turns the problem of navigation between pages into that of intra-page navigation. As a result, there is a small problem with the navigation on its page: after opening a long article, I see half of it and don't want to read it. It's hard to roll down or roll up. (of course, this also stems from the web page that was originally designed for PC. Fortunately, this problem does not need to be solved, google reader is going to be closed.

However, this design is not unique to google reader, using products deployed within similar pages may be able to do some of their own unique intra-page navigation functions for deployment within their own pages, so that users can put away the long text directly when they expand the long text and scroll to the middle.

Change "enter the details page" to "expand within the current page", which is specifically for the list-> details. Weibo mentioned earlier, with this approach does not seem to solve any problem, in fact, most of the products we face are very difficult to guarantee a page.

If you can not jump, try not to jump. If you have to, do you have to jump?

If you have to jump, you can pretend it's not a jump.

There are also many such examples:

The details of pretending not to jump the example 1:Feedly surfaced.

After clicking, it appears, click the left arrow button, or click any unlinked location on the details page to put it away.

To understand this approach as opening a pop-up window, or perhaps, it is a heinous model window, in fact, the traditional entry into the details page can be regarded as equivalent to a pattern window, or, the concept of pattern window is no longer so meaningful in today's design. (er, this topic seems to be quite complicated. We should take it out alone and have a good chat. Let's not go any further here. It is not clear in this parenthesis. )

If this form is understood as a more visual way of showing details, then it looks pretty cute. The original list page doesn't seem to disappear, it's just covered, and the opening of the details page is not so scary.

This form is more like clicking on a picture in Weibo on a mobile phone, the picture appears directly, and then clicking on the picture will restore it.

Pretend not to jump to the left and right of the example 2:Path.

Click on a tab, and the page on the right slides over, but it still jumps to the page, but this form makes the jump look more like a slide, rather than leaving the current page to another page.

In addition, slide to the feeds page, and then click on an image, which is the effect of the image floating in Weibo, or the floating details of feedly. Cow X, combination of punches.

Pretend not to flip example 3 "I".

The "I" page appears upside down and is on the back of the current page.

Although these special ways can not reduce the jump between pages, but the jump embellishment is not so stiff, making the jump more vivid and easier to understand. Their common idea is to make the relationship between the current page and the target page more concrete. The target page covers the current page; the target page pushes the current page aside; the target page is on the back of the current page.

The key is to simplify the structure of the product.

If you use these ways of expression, can you deal with the problem of constantly jumping in Weibo at the beginning? It might help, but to be perfect, I'm afraid it's tough.

If you click on the link in the feedly details page, you still have to open the new page properly, and the other examples above are similar. In other words, these clever designs can only deal with a limited level of page relationships.

Of course, I do not agree with the existing limitations as the basis for product design, what the product should do, what not to do, should still be based on the user's goals, usage scenarios, and user tasks. The limitations of mobile phones may be understood as: we have to do "user-centered design" under such limitations.

About Anchor Link

Anchor links are generally used for longer web pages, and internal links are used to establish an on-page directory. Click the directory to jump to the appropriate location of the text, the most common such as "back to the top, jump between modules" and so on.

With regard to anchor links, Jakob Nielsen, the master of usability research, wrote an article called Avoid Within-Page Links, which rejected anchor links as harmful to the health of the page. The most typical example is "back to the top". The reasons for objection can be summarized as follows:

Interfere with users browsing the page

Do not think it is necessary, the browser or keyboard is sufficient to complete this function

The result of the operation is not clear, and the user's cognition of the "top" is not fixed.

For mobile WAP pages, many phones do not support scripts, so most of the time we can only expect users' browsers to jump quickly. For keystrokes, the focus jump can be quite painful. Now many wap have tried to use anchor links, such as some information sites, which have a lot of information and long pages, which profoundly reflects the necessity of anchor links.

Two Application forms of Anchor Link

At present, there are two main applications for anchor links:

1. Fast jump between modules

two。 Jump to the top

Advantages: the page is too long, this fast jump can reduce the work done by keystrokes

Disadvantages: the target location is not clearly communicated, and the user cannot predict where the focus will fall after the jump.

Due to the limitation of the screen size of the mobile phone, the user cannot understand the overall situation and will lose his sense of direction after jumping.

Similarly, for search results pages, because multiple results list are presented to the user, the page will be very long, so the proper use of anchor links will reduce the user's operational burden.

Application of Anchor Link in search results Page

Generally speaking, there are two situations where the ribbon is located on the search results page: at the top of the search results list and at the bottom of the search results list, the pros and cons of the two situations are analyzed below.

1. The ribbon is at the top of the search results list

The focus switching order of the ribbon at the top

Advantages: it is convenient for repeated screening. If users want to choose "eating and drinking in Xihu District" or "Mall in Hangzhou area", first select one of the conditions, after the page is refreshed, and then choose another condition at the top of the page, it will be easy to operate.

Cons: after each page refresh, the focus stops on the first link on the page. Users have to go a long way to get to the search list. At this time, we can only rely on the execution order of the link focus on the phone itself, and the result is very uncontrollable (many phones do not support fast jump, in addition, not all users know this feature very well).

two。 The ribbon is at the bottom of the search results list

Advantages: after refreshing the page, users can go directly to the result list at the top of the page.

Disadvantages: the cost of repeated screening can become very high. After refreshing the page, the user must bypass the result list and go to the bottom of the page to complete these filtering operations.

The focus switching order of the ribbon at the bottom

How to balance functionality and results on the SERP page

The purpose of this revision is:

Balance the priority of list results and "filter area" on the SERP page (for us looking for merchants, the former is higher than the latter)

Minimize the number of page refreshes, so do not link to a new page

The final optimization method is:

Add an anchor point above the search results page list and link to the filter function when the user needs to re-filter.

When the user does not need it, directly ignore this focus and reach the result list.

In order to enhance the user's sense of direction after jumping, the visual expression at the entrance of the anchor point is designed to be the same as the screening function area.

Focus switching order of anchor links on the search results page

Summary

In Wap web page design, due to browser or hardware limitations, it is necessary to use anchor links, but also pay attention to the following points:

Balance the importance of search results and the ribbon to users and release anchor links in place

Find out the actual intention of the user when using the anchor link, and convey it with a clear copy.

In order to improve the sense of direction after jumping, the visual expression of anchor position and target position can be unified.

The above is the mobile website WAP page jump design suggestions have all the content, more and more mobile site WAP page jump design suggestions which related content can search the previous articles or browse the following articles to learn ha! I believe the editor will add more knowledge to you. I hope you can support it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.