IPhone Web App navigation design review

Recently on the iphone Web App to do the project. Because the product form novel, the technical environment is not mature, give a company loose development time. In a month of interaction design stage, every link get DuoCi discuss deliberate, from which I feel quite a lot. Navigation system design is a more typical point, take it out to share with you discuss.

Navigation system had the challenge

Iphone Native App more familiar navigation as below:

Cell phone to the bottom of the screen: A, B, C, D four TAB of the Native App global navigation, this is we often see the TAB navigation.

Mobile phone the top of the screen: there are four main forms. The first (1) in the form is the center position show that the product logo; Can also will adjust position logo, the common operations or quick entry on the location of the right. The first (2) in the form is position have two or three TAB options. The first (3) in the form is middle position display the current task title, in the left or right side navigation control or function control placed. The first (4) in this position form is placed the search box.

With above Native App navigation way in, Web App navigation way has the huge different, as below:

Safari browser's toolbar will always occupy a position at the bottom of the screen, global navigation can only passive move to the top of the screen position. This is the effect of Web App navigation design is the most important factors.

If the product's function is less, and not particularly want to highlight the function of time, can be designed in the figure above the first (1) the kind of navigation way. Now the problems are how to show the product brand, after all, Safari browser in a website login than running a Native App to brand identity weak a lot.

If the product logo expression comes out, and the product will need to users the common functions outstanding (such as renovatesthe function or distribute entrance), need to design into the first (2) above of navigation way.

If in A function plate, also need to set up child category options, the navigation bar and A group of more TAB. At this time of navigation way as the first (3) above.

Of course, in carrying out a task, global navigation can temporarily "society", only keep title bar and a line on a left navigation control or function control. If the diagram above the first (4) kind of navigation way below.

In the product design, for convenience of customers in each function plates cost effectively fast switching, designers hope global navigation bar can be keep long and hovering, don't like general wap pages like let navigation with web rolling disappear. So, based on the browser's Web App navigation system is convenient and Native App comparable.

However, the browser toolbar will global navigation force to the top of the screen, but also causes the navigation head too heavy. As below:

If the column of the logo common functions (such as refresh or publish entrance) and global navigation is designed for suspension stay in the form of the display space information content than Native App reduce a row of height, such as the (1) above. Also, some pages in the bottom of the global navigation to appear level 2 navigation; Hovering motionless 3 lines navigation greatly devoured the screen was very valuable content display space, such as the (2) above.

Let users in such a narrow space had to frequent sliding screen browse information, such experience is too bad. This serious problem is let stylist distress, so need to design the navigation system. Design process mainly includes: excellent competing goods analysis, project selection.

Excellent competing goods analysis

First of all, analyzes the three excellent Web App: Google +, 

ft-series Web App, Twitter's navigation way. Browse the environment for iphone Safari browser are.

Navigation system features:

￭ global navigation separate form a page, other page does not appear global navigation;

￭ navigation follows the ios system in the form of primary control: title + navigation or function control;

￭ title bar in the page hovering didn't move

Advantages analysis:

Ensure the information of each page views the navigation bar concise frivolous, as far as possible the occupation of the details of information display space; Ensure the core function (here is the bo browsing) use of good experience.

Faults analysis:

Global navigation hidden deep, reduce the users in different function to quickly switch plates of the convenience of; Global navigation hidden deep, users can't see the other plate function, and greatly reduce the user clicks on the possibility of using other function.

2. FT Web App

Navigation system features:

￭ Safari browser URL column has been hovering exist, and will brand FT Web App displayed in words the top;

￭ global navigation is hidden, click the function key in the top page appear;

￭ level 2 navigation appeared in the top page;

￭ global navigation and secondary navigation from the news of the large number plate, by adopting a separate space is not fully presenting forms, can choose sliding one;

￭ all navigation page with rolling, not in the screen keep hovering;

Advantages analysis:

FT Web App navigation design the biggest advantage is heavy navigation lightweight processing. Global navigation and secondary navigation in news plate is very much, if these plates are displayed, I'm afraid to take up half of the screen display space. FT Web App so will global navigation hidden in a function keys later, level 2 navigation is also gave only a line display space.

Faults analysis:

Show the user navigation just all of its news plate the tip of the iceberg, can't give users the chance to browse all general situation, also cannot be good incentive to try to be hidden news edition piece; At the same time, the user looking for a news section or in the bottom of the page to return to the top of the page slightly higher operating costs.

3.Twitter

Navigation design features:

￭ global navigation only one line, brand show concentrated in the home page of ICONS (Twitter bird icon);

￭ global navigation has remained at the top of the screen hovering motionless, not as rolling and scrolling page;

￭ level 2 navigation in click on global navigation after a TAB to menu list form.

Advantages analysis:

At the top of the screen hovering motionless global navigation, users can easily in different function between fast switching plate, and to reduce the user's information search for cost; Twitter Web App navigation only one line, for users to ensure that the as far as possible big of text display space.

Faults analysis:

Some commonly used function keys is hidden in the secondary navigation (such as new information release entrance), on the one hand, increase the user looking for cost, on the other hand reduces the common functions to users of the incentive to use utility.

Based on the above three paragraphs Web App product navigation system analysis, and designer to target the navigation system project design form the following SSC:

￭ global navigation users quick look and function plate the handoff;

￭ navigation try to lightweight processing, try to ensure enough of text display space area;

￭ will users often use the function keys present in the front.

Scheme choice stage

Based on the actual requirements of the project and to competing goods analysis thinking summary, designers try to three of navigation design scheme, and for each one of the place of the merits of the scheme are analyzed in detail.