Navigation Design of iphone Web App

Recently done iphone-side Web App projects. Due to the new product form, immature technical environment, the company has given more relaxed research and development time. In a month's interactive design phase, each session has been discussed many times, I learned a lot. Navigation system design is a more typical point, come up and share with you to discuss.
The challenges encountered by the navigation system

iphone Native App more common navigation as shown below:

Bottom of the phone screen: A, B, C, D four tabs constitute the Native App global navigation, which we often see the tab navigation bar.

Phone screen top: There are four main forms. The first form is the center of the product display logo; you can also logo the appropriate position, the common operation or shortcut entrance on the right side of the location. The second form is the location of two or three tab options. The third form is in the middle of the current task title display, placed in the left and right navigation controls or function controls. The fourth form is to place a search box at that location.

Compared with the above Native App navigation methods, Web App navigation has a huge difference, as shown below:

Safari's toolbar will always occupy the bottom of the screen, global navigation can only passively move to the top of the screen. This is the most important factor affecting Web App navigation design.

If the product features less, and no special features to highlight when, you can design the first chart in the first ① navigation. At this point the question is how to show the product brand, after all, log in to a website in the Safari browser is much weaker than running a Native App brand.

If the product logo displayed, and the product needs to highlight the common features of the user (such as refresh function or release portal), you need to design the first two kinds of navigation on the map.

If you need to set sub-category options under the A function section, there will be another set of tabs in the navigation bar. At this point the navigation is similar to the first three kinds of the figure above.

Of course, in the implementation of a task, the global navigation can temporarily "hidden", leaving only a row of the title bar and left and right navigation controls or function controls. As shown in the first four kinds of navigation shown.

In the product design, in order to facilitate the user to quickly and easily switch between the various functional sections, designers hope that the global navigation bar can maintain a long hover, do not like the general wap page like to scroll with the web page disappears. In this case, browser-based Web App navigation system and Native App comparable convenience.

However, the browser toolbar pushes the global navigation to the top of the screen, causing the navigation head too heavy. As shown below:

If you design common features (such as refresh or publish portals) and global navigation in the logo column as floating stops, the content display space is reduced by one line from the Native App, as in ① above. Also, some pages require a second level of navigation below the global navigation; the 3-line hovering swallows up the content display space where the screen is inherently valuable, as in (2) above.

So that users in such a small space have to slide the screen frequently browse information, this experience is too bad. This serious problem is very annoying to designers, so you need to redesign the navigation system. The design process includes: excellent competing product analysis, program selection.

First of all, it analyzes and compares the three excellent Web App: Google +, FT Web App, Twitter navigation. Browse environment are iphone Safari browser.

Navigation system features:

■ Global navigation alone form a page, other pages do not appear global navigation;

■ navigation bar follows the ios system in the form of native controls: title + navigation or function control;

■ The title bar hovers over the page

Advantages analysis:

It ensures that the navigation bar of each information browsing page is simple and light, and occupies less display space of information details as much as possible; and the good use experience of its core functions (here, the browsing function of the weibo) is guaranteed.

Disadvantages analysis:

Global navigation hidden deeper, reducing the user quickly switch between different functional sections of the convenience; Global navigation hidden deep, the user can not see the other plate functions, greatly reducing the possibility of users click to use other features.

Navigation system features:

■ Safari browser URL column has been hovering and branded text FT Web App displayed at the top;

■ global navigation is hidden, click on the function key at the top of the page appears;

■ Secondary navigation appears at the top of the page;

■ Global navigation and secondary navigation Due to the large number of news sections, they all take a single line of space is not completely presented way to slide select one of them;

■ All navigation scrolls through the page without hovering over the screen;

Advantages analysis:

FT Web App navigation design is the biggest advantage of heavy navigation light weight processing. Global news and secondary navigation in the news section are very large, if these plates are displayed, I am afraid to take up half of the screen display space. FT Web App then hides the global navigation behind a function key, and the second level navigation gives only one line of display space.

Disadvantages analysis:

The navigation displayed to the user is only the tip of the iceberg of all the news sections, which can not give the user a chance to browse the entire profile, and can not well encourage the user to try the hidden news section. At the same time, the user looks for a news section or on the page Bottom back to the top of the page slightly higher operating costs.

Navigation design features:

■ Global navigation only one line, the brand show concentrated in the home icon (Twitter icon);

■ Global navigation keeps hovering at the top of the screen without scrolling through the page;

■ Second-level navigation After clicking a tab in the global navigation, the menu list appears.

Advantages analysis:

Hover the top of the screen at the top of the global navigation, users can easily switch between different functional sections, reducing the user's information to find the cost; Twitter Web App navigation only one line, to ensure that the user as much as possible to display the body of the content space.

Disadvantages analysis:

Some commonly used function keys are hidden in the second-level navigation (such as the new information release portal), on the one hand increased the search cost of users, on the other hand reduces the utility of these commonly used functions on the user's incentive.

Based on the above three Web App product navigation system analysis, the designer of the target project navigation system design formed the following box:

■ global navigation to facilitate users to quickly find and switch between functional sections;

■ navigation as much as possible thin processing, as far as possible to ensure that the content of the body of the display area;

■ The user frequently used function keys appear in front.

Based on the actual needs of the project as well as the summary of competing product analysis, the designer tried three navigation design solutions and analyzed the advantages and disadvantages of each one.

Design Notes:

■ ABCD is the product of the four functional sections to form a global navigation.

■ Global navigation stays hovering at the top of the screen.

■ E is a new message publishing portal, which is commonly used by users.

■ E translucent display.

■ E stays in the lower right corner of the screen

Advantages of the program:

Only the top of the screen global navigation column, the navigation of the light weight of the text area as much as possible to save the display space; global navigation hovering, users can quickly switch to different functional sections.

Disadvantages of the program:

The lower right corner of the new information release of the entrance caused the browsing page is not refreshing enough, will cause some visual disturbance to the user; new information release entrance does not need to be displayed on any page, so the possibility of sexual crisis; brand logo can not be displayed, brand sense weak.

Design Notes:

■ E is a new message publishing portal, which is commonly used by users.

■ ABCD is the product of the four functional sections to form a global navigation.

■ The two-line navigation bar at the top of the screen appears as soon as the user enters the page and disappears when the user swipes the screen to browse the information.

■ The translucent function key at the lower right corner of the screen appears after the navigation bar disappears. Click the navigation bar of the key to appear.

Advantages of the program:

When browsing the information navigation disappears, providing users with the largest display of the body of the content; can display the logo, a strong sense of brand; new information release entrance is better.

Disadvantages of the program:

The translucent function keys in the lower right corner of the screen cause the browsing page to be not refreshing enough to cause some visual interference to the user.

Design Notes:

■ E is a new message publishing portal, which is commonly used by users.

■ ABCD is the product of the four functional sections to form a global navigation.

■ The two lines of navigation bar at the top of the screen appear as soon as the user enters the page. The first column disappears upward as the user swipes the screen, and the second column moves to the top to keep hovering.

■ Manual pull-down global navigation bar, you can pull out the first column navigation.

Advantages of the program:

When browsing the text information, only the global navigation column is displayed, so that the navigation is light and thin; the global navigation is hovering, which may be convenient for the user to quickly switch to different functional sections.

Disadvantages of the program:

When pulling down global navigation, there is a danger of mishandling, albeit with a low probability.

Based on the above analysis, taking into account the size of the display area of ​​the body of the content area, the convenience of the product and product brand sense of three factors, the final decision to program three as the basic form of navigation design, and continue to further refinement.

The toolbar of the browser always occupies the bottom of the screen, and the global navigation can only passively move to the top of the screen. How to Balance the Convenience of Operations with the Maximization of Information Display Space is the Key to Web App Navigation Design.

The best solution is always the result of a trade-off. Each design solution to some problems but also create new problems. At this point, designers need to know which functions are the most important and have the highest priority. A good user experience that guarantees core functions is an important criterion for judging the design.

Source: http://uedc.163.com/7998.html