User Interface Design Research: Mobile website Navigation design Analysis

Article Description: Mobile interface commonly used navigation design analysis.

The so-called interactive design, in fact, is the design of how people send instructions to the machine, how the machine to convey information to people, Shilai is for interaction. When you want to convey a small amount of information, good to do, like Google's search box, to a white bottom on the line. But when the information is massive and difficult to render all on a screen, it is necessary to organize the information effectively, hide some of the information first, and then lead the user to it when they need it. In the interface design, broadly speaking, the process of transferring a group of information to another group of information is called navigation.

Clearly defined, we should know that a good navigation design should let users understand:

1. Where are you now?
2. Where I've been before.
3. Where to go in the future
4. How to
5. How to return

To determine whether a navigation design is reasonable, you can also use a few of these to compare. Now, let's take a look at the commonly used navigation methods in the mobile interface.

One, drag

definition: the finger is pressed on the screen and translated in a certain direction.

applicable scenario : To render the information beyond the scope of a screen can be accommodated, in accordance with the user's psychological model, can be content in one-dimensional or two-D direction of the layout, drag the screen content to browse all the information.

For example, a very long article, ebook, list (vertical one-dimensional), one-year detailed price line chart (horizontal one-dimensional), maps, 1:1 displayed pages and pictures (two-dimensional)

discussion: Yes, you're right, it's the simplest and most basic gesture on the touch screen phone. According to the definition of navigation, this is really a way of navigating, the user can drag a screen in a direction to browse information outside the current screen. It is easy for users to learn to use this kind of navigation, that is, the contents of the block outside the frame to see. The simplest way is often the most effective.

Perfect Endless :

Although this is the most popular way to navigate, there are still a lot of ideas to play in order to design a navigation that conforms to the 5 basic principles listed just now.

Knotguide on the same page shows the schematic and explanation of the knot. Too long narration text needs to hide a part first, drag to browse all. In order to let users know where to go in the future (3), it gives the bottom of the text a half-through effect, to imply that there is still a part of the show, you can continue to look down. Also, when you first enter the page, the scrollbar on the right side of the text area will be displayed for a short period of 2-3 seconds, and then disappear, which can have the same hint effect (this may be the default effect built into the Android platform).

The acurrency will be horizontally arranged across the screen for a variety of rates that cannot be displayed temporarily. To show where to go in the future (3), it leaks a bit of the hidden part and folds behind the current page. If you remember correctly, this design should be inspired by the Mac's files and album browsing.

The most classic drag-and-drop navigation should be the iphone's homescreen. On the homescreen, Apple designed a position indicator. This can help users to easily understand where (1) is currently, and where to go (3). At the same time, when dragging the screen, Apple also designed a translation of the transition animation, which is good to help users understand how to go (4), How to return (5).

When the content of the Web page is larger than the screen display, the Android built-in browser displays two gray scrollbar on the lower and right sides of the screen when the user drags the page, hinting at the current position of the user (1) and where it can be moved (2).

Two or one-D entry

definition: each piece of information is listed as a single item, displayed in a vertical entry.

Applicable scenario :

Information can be combed into many projects, the project and the project has no conceptual intersection, the total number of 15 or less, and then have to consider more than one level.

It is very suitable for the display hierarchy of hierarchical structure, a layer of drilldown down, clear and orderly.

discussion: One-dimension entry is a simple and common navigation method in mobile phone interface design. Each item can go to the next level after clicking. But the display of the project should not be too much, in the ocean of information dangling to find what you want is very annoying. If there are too many items on the first level, you can consider doing a classification, and then a level down.

Perfect Endless :

In order for the user to know which item to choose (3), the entry will display the title with the largest size. At the same time, there will be some ancillary content to help users determine, such as what the item contains, the current status of the item, the item is not read under the subproject, icon.

If you have too many projects and don't want to be graded, you can group items, add names, and visually process them.

Since there is no "back" on the iphone, it has designed a unified navigation rule. The key to the table "back" is always in the top corner of the screen (5), and the key to the table "Finish" is always in the upper-right corner. At the same time, the key will also write "back to where."

The project is distinguished from the items that have been entered, and the user can know where to go (2) and Where to go (3).

The piano simulator can also be viewed as a vertical one-dimensional entry. This position indicator on the right can be viewed as a personalized scrollbar, which can be dragged to change the current position (4,5) or to display the current position (1).

Sorting list items by a rule and showing the sorted headings increases the user's tolerance for long lists, as well as hinting at the user's current position (1) and how to go next (3) to find the appropriate item.

Small tips: On the entry can be added some commonly used action buttons, user-friendly click to meet the target.

It can be helpful to provide some tools for accelerating scrolling in a timely manner for long entries. When the user drags, it is possible to tell the current position (1) with a huge size.

When you click on the entry to the next level, if you anticipate that the user's needs are only temporary and will soon return to the other items, consider expanding the subproject on the current page rather than going to the next item. How to unfold, the pattern how to play, you can think of ideas.

Three or two-D icon

Definition: Arrange the item on a two-dimensional plane, click on the item, and enter the child level.

Applicable scenario :

Information used to identify project identities can be displayed in a square area. icons, for example, are not limited to icons. I write so abstract clumsy, is to let everyone put the idea open. Any information that satisfies this point can be presented in a way that allows the user to know what to do.

discussion: This is the most similar to the use of PC habits. Split the two-dimensional screen into a series of squares, placing a series of entries. In fact, when you can clearly predict the needs of users, should not be used in this way of navigation. The user should be directly directed to do the task. Only if you don't know what the user wants to do in this app, you have to show so many entrances at once.

Perfect Endless :

There should be a clear distinction between projects and projects in order to facilitate the user to find the project (3). When you cannot make an icon for each item, you may wish to use the ready-made one. Feedsquare will be loaded into the blog feed after the picture as the blog icon, very creative bar.

Who says the icon has to be static. In order to inform the user of a new content under a project, it is worth reading (3), Apple has designed a small red band to paste. This has a push, it looks very eye-catching. This is also easy to train a lot of "dot paste obsessive-compulsive disorder", do not eliminate it very uncomfortable ah.

If the strategy is more important to some of the entrances, it can be visually enhanced. At the same time, you can also do a group to help users find the desired portal faster (3). Alipay interface icon on the more, if you must use the icon, you can consider in these two points to do a little optimization.

Not every icon has to be the information level of the entrance, you can also place the appropriate action keys, such as the "new" here.

The most impressive two-dimensional display is the album on the ipad. Users can separate the photo heap with their fingers. Pictures of the scattered animation can be a good indication of how users should look at the next level (4), and how to go back (5)

Four, tab pagination

definition: use a few tabs that are always rendered on the screen as a gateway to a particular class

applicable Scenario : The information can be clearly divided into several categories, there is a big difference between the categories to be frequently switched

discussion: tab is a classic local navigation in Web interface design. It's taken from a notebook paging metaphor. The user can clearly know that the tab is the head of a certain page, and press it to show the complete page connected to it. A few tabs are always present, how to Chelai cut will not get lost.

Perfect Endless :

tab inside can still put two level tab. This will render the level two, n*n a project.

Five, accordion

definition: like an accordion, only show the details under an item, the contents of other items temporarily folded up.

Scenario : There are a lot of items to render and often switch between these items.

discussion: The most classic accordion design is also QQ, the 90 's QQ in the accordion group. It was later transformed into a tree-like structure, probably because of its visual volume.

Perfect Endless :

When browsing members of the QQ group, the group name Bar may be moved out of the screen. But in the QQ mobile phone version, the Group Name column will be moved out of the edge and the next layer off, always top the edge of the prison. This will always tell the user where the current grouping is.

Six, dropdown directory

definition: There is always an area on the screen, and when clicked, a navigation overview appears.

application Scenarios : often need to switch between multiple pages, the hierarchical structure is relatively large.

discussion: The area that always appears on the screen is the user's treasure map, which is used to view the panorama at any time and jump to other nodes. This is my personal favorite way of navigation. Its design concept is very much like the Amazon after the revision of the classification of navigation.

Perfect Endless :

The first design I saw on mobile devices was the ipad's mail vertical view mode. It indents the mailing list in the Inbox to the "Inbox" button to show more areas to view the message body.

This interface gives me the inspiration is that the navigation can also have a lot of tricks to play, not just a list.

Vii. steps

definition: show the Forward button, and guide the user to operate in a step-by-step way

Application Scenario : When you need to divide a task into steps

discussion: This is also a classic design in the Web, a long task process split into many small pages, to guide the user gradually to complete. Android puts "Next" on the right, which is in line with people's mental model of the timeline. and its position is constant and does not move as the user drags through the content below.

Perfect Endless :

When the user has not completed the task on the current page, the next step is grayed out, implying that the user's current job is not finished.

Show the title of the current task, let the user have a spectrum, know what to do. For subdivision steps, it is also necessary to show the title of the current step, preferably with a "4/6″" position indicating how many steps the user is going to take, and now the first few steps.  Or use the ".... 。。 ”

Eight, shortcut button

definition: A user can move directly to a tightly attached subkey in a subkey.

Application Scenario : You can clearly predict the user's progress trajectory and provide access to these anthologies.

discussion: Everything for the sake of the user's needs. The user wants to drill the wall, we hurriedly help others to dig good hole.

Perfect Endless : There are a lot of reading software to do a cool flip effect. A few days ago to see someone proposed, can let the user to the microphone blowing, flip a page. Very creative Oh, you cow!