iOS development: A discussion on Web app navigation design

The challenges of the navigation system

The more common navigation of the IPhone Native app is shown in the following illustration:

Mobile Screen Bottom: A, B, C, D four tab composition of the native app's global navigation, which we often see the tab navigation bar.

Top of mobile screen: There are four main forms. The ① form is to display the logo of the product at the center of the location, or you can adjust the logo appropriately and place the common operation or shortcut entry on the right side of the position. The ② form has two or three tab options at this location. The ③ form is to display the current task title in the middle of the location, and to place the navigation or functional controls on both sides of the page. The ④ form is to place the search box at that location.

Compared to the above native app navigation, Web app navigation is a huge difference, as the following illustration shows:

The Safari browser's toolbar will always occupy the bottom position of the screen, and global navigation can only be moved to the top of the screen. This is the most important factor that affects the Web App navigation design.

If the product function is less, and there is no special to highlight the features of the time, you can design the above figure in the ① navigation mode. The problem at this point is how to show the product brand, after all, in Safari browser login to a site than running a native app gives people a much weaker brand identity.

If the product logo is displayed, and the product needs to be the user's common function highlighting (such as refresh function or publishing portal), you need to design the above figure in the first ② navigation mode.

If you need to set the subcategory option under the A functional section, then one more Group of tab in the navigation bar. In this case, the navigation is like the first ③ in the image above.

Of course, when performing a task, global navigation can temporarily "retire", leaving only one row of the title bar and the left and right navigation controls or function controls. As shown in the ④ navigation method above.

In the product design, in order to facilitate the user in the functional plate between the quick and easy to switch, designers hope that the global navigation bar can maintain a long hover, do not like the General WAP page so that navigation with the Web scroll disappear. In this way, the browser-based Web App navigation system is comparable to the native app.

However, the browser toolbar pushed the global navigation to the top of the screen, but it caused the problem of too heavy a navigation head. As shown in the following illustration:

If the common features in the logo bar (such as refreshing or publishing portal) and global navigation are designed to suspend the form, the content area of the information display space than the native app to reduce the height of a row, as shown in the ①. Also, some pages require a level two navigation below the global navigation, and a 3-line navigation that hovers over the screen is much more valuable than the content display space, as shown in the ② above.

The experience is so bad that users have to swipe through the screen frequently in such a small space. This serious problem is very confusing to the designer, so we need to redesign the navigation system. The design process mainly includes: Excellent competition analysis, selection of the scheme.

Analysis of outstanding competitive goods

First, the analysis contrasts three excellent web app:google+, FT Web apps, Twitter navigation. The browsing environment is the iphone Safari browser.

1.google+

Navigation system Features:

￭ Global navigation to form a separate page, other pages do not appear global navigation;

The ￭ navigation bar is in the form of a native control of the iOS system: Title + navigation or functional controls;

￭ title bar hovers over page

Advantage Analysis:

Ensure that each information browsing page of the navigation bar concise and thin, as much as possible to occupy the information details of the display space, to ensure that its core functions (here is the microblogging browsing function) a good use of experience.

Disadvantage Analysis:

The global navigation is hidden deeply, which reduces the convenience for users to switch quickly in different function plates. Global navigation hidden deep, users can not see other plate functions, greatly reducing the user click to use other features of the possibility.

2. FT Web App

Navigation system Features:

￭safari Browser URL A column has been hovering, and the brand text ft Web app display at the top;

￭ Global navigation is hidden, click the function key at the top of the page appear;

￭ level Two navigation appears at the top of the page;

￭ Global navigation and level two navigation because of the number of news plate, all of them take the way of incomplete presentation of single line space, and can choose one of them by sliding.

￭ all navigation scrolls with the page and does not hover over the screen;

Advantage Analysis:

The biggest advantage of FT Web app navigation design is the lightweight processing of heavy navigation. Global navigation and two-level navigation in the news plate are very many, if these sections are displayed, I am afraid to occupy the screen half of the display space. FT Web App then hides global navigation behind a function key, and level two navigation gives only one line of display space.

Disadvantage Analysis:

The navigation shown to the user is just the tip of the iceberg of all of its news plates, unable to give users full overview of the opportunity to browse, it is not good to motivate users to try to be hidden in the news section, at the same time, users look for a news section or at the bottom of the page back to the top of the operating costs slightly higher.

3.Twitter

Navigation design Features:

￭ Global navigation only one line, brand display condensed in the home page icon (Twitter bird icon);

￭ Global navigation has been kept at the top of the screen hover, do not scroll with the page scrolling;

￭ level two navigation after clicking the Global Navigation tab, in the form of a menu list.

Advantage Analysis:

The global navigation on the top of the screen is convenient for users to switch quickly between different functional plates, which reduces the cost of the user's information searching. The Twitter Web app has only one line of navigation, which guarantees the largest possible body content display space for the user.

Disadvantage Analysis:

Some commonly used function keys are hidden in level two navigation (such as new information Publishing portal), on the one hand, increase the user's search costs, on the other hand, reduce these common functions of the user's incentive to use utility.

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

￭ Global navigation is convenient for users to search quickly and switch between functional plates;

￭ navigation as thin as possible to deal with, as far as possible to ensure that enough text content area display space;

￭ renders the function keys that users often use in front of them.

Programme selection phase

Based on the actual needs of the project and a summary of the analysis of the competition, the designer tried 3 navigation design plans, and the pros and cons of each scheme is analyzed in detail.

Navigation Design Scheme A

Design Instructions:

￭ABCD is a product of four functional plates that make up global navigation.

￭ Global navigation stays on top of the screen.

￭e is the new message publishing portal, which belongs to the user's common functions.

￭e in translucent display mode.

￭e stays in the lower right corner of the screen.

The advantages of the scheme:

At the top of the screen, only the Global navigation column, the light of the navigation into the text content area to save as much space as possible, the global navigation hover, can facilitate users to quickly switch to different functional plates.

Disadvantages of the programme:

The lower right corner of the new information publishing portal makes browsing the page is not refreshing, will cause a certain visual interference to users; new information to publish the portal is not necessary on any page, so there is a crisis of the search, the brand logo can not be displayed, the brand feeling is weak.

Navigation Design Scheme II

Design Instructions:

￭e is the new message publishing portal, which belongs to the user's common functions.

￭ABCD is a product of four functional plates that make up global navigation.

The two-line navigation bar at the top of the ￭ screen appears when the user first enters the page and disappears when the user slides the screen to browse for information.

￭ screen in the lower right corner of the translucent function key after the navigation bar disappears, click the key navigation bar appears.

The advantages of the scheme:

When browsing the information, the navigation bar disappears, provides the biggest content display space for the user, can display the logo, the brand sense is stronger, the new information publishes the entrance to be good.

Disadvantages of the programme:

The lower right corner of the screen translucent function key causes the browsing page not refreshing, will cause certain visual interference to the user.

Navigation Design Scheme Three

Design Instructions:

￭e is the new message publishing portal, which belongs to the user's common functions.

￭ABCD is a product of four functional plates that make up global navigation.

The two lines of navigation bar at the top of the ￭ screen appear when the user just enters the page, the first column disappears when the user slides the screen, and the second column moves up to the top to keep the hover.

￭ manually drop-down the global navigation bar, you can pull down the first column navigation.

The advantages of the scheme:

When browsing the body information, only displays the global navigation one column, achieves the navigation the light and light, the global navigation hover does not move, may facilitate the user to switch quickly to the different function plate.

Disadvantages of the programme:

When you pull down the global navigation, there may be a risk of incorrect operation, albeit with little possibility.

Combined with the above analysis, taking into account the size of the text content area display space, the ease of operation of products and product brand sense of three factors, finally decided to plan three as the basic form of navigation design, and continue to further enrich the refinement.

Summarize:

The browser's toolbar always occupies the bottom position of the screen, and global navigation can only be moved to the top of the screen. How to balance the convenience of operation with the maximum of text information display space is the key of web app navigation design.

The best solution is always the result of a trade-off. Each design solution solves some problems and creates new problems. At this time the designer needs to know which functions are the most important, the highest priority, to ensure that the core function of a good user experience is the key to the evaluation of the design plan.