IPhone Web App navigation design

Challenges to the navigation system

Shows the common navigation of iPhone Native apps:

At the bottom of the mobile phone screen: tabs A, B, C, and D form the global navigation of the Native App, which we often see.

Mobile phone screen top: There are four main forms. The ① format is to display the product logo in the center of the location. You can also adjust the logo position and place the frequently used operations or shortcuts on the right of the location. The form ② is that there are two or three tab options at this position. In the form of ③, the current task title is displayed in the middle of the position, and navigation controls or functional controls are placed on the left and right sides. The fourth form is to place the search box at this position.

Compared with the Native App navigation method, the Web App navigation method is significantly different, as shown in:

The toolbar of the Safari browser occupies the bottom position of the screen, and the global navigation can only passively move to the top position of the screen. This is the most important factor affecting Web App navigation design.

If the product has fewer features and does not have any special features, you can design the first navigation method. The problem is how to display the product brand. After all, logging on to a website in Safari is much weaker than running a Native App.

If the product logo is displayed and common features of users need to be highlighted, such as the refresh function or the publishing portal, the ② navigation method in need to be designed.

If you also need to set the sub-category option under function A, there will be another group of tabs in the navigation bar. At this time, the navigation method is like the ③ In.

Of course, when executing a task, you can temporarily "hide" The Global Navigation, leaving only one line of title bar and navigation controls or functional controls on both sides of the left and right. As shown in the fourth navigation method in.

In this product design, to make it easier for users to quickly switch between functional sections, the designer hopes that the global navigation bar can remain on for a long time, do not make the navigation disappear as the web page scrolls like a wap page. In this way, the convenience of the browser-based Web App navigation system is comparable to that of the Native App.

However, the browser toolbar forces the global navigation to the top of the screen, but it causes the navigation header to be too heavy. As shown in:

If you design common functions in the logo bar, such as refresh or publish portal) and global navigation, the information display space in the content area reduces the height of a row than that in the Native App, for example, ①. In addition, some pages require secondary navigation at the bottom of the global navigation; the three navigation lines that remain unchanged greatly consume the display space of the screen, such as ②.

It is too bad for users to slide the screen frequently to browse information in such a small space. This serious problem has plagued designers, so we need to redesign the navigation system. The design process mainly includes: excellent competitive product analysis and solution selection.

Analysis of excellent competing products

First, we analyzed and compared the navigation methods of three excellent Web apps: Google +, FT Web App, and Twitter. The browser environment is iphone Safari.

1. Google +

Navigation System features:

￭ Global navigation is a separate page, and no global navigation is displayed on other pages;

The navigation bar follows the form of native controls in ios: Title + navigation or function controls;

The lifecycle title bar does not move on the page

Advantage Analysis:

It ensures that the navigation bar of each information page is simple and light, and the display space of information details is used as little as possible. It ensures that its core function is the Weibo browsing function) a good user experience.

Disadvantage analysis:

The Global Navigation hiding depth reduces the convenience of quick switch between different functional sections. The global navigation is hidden deeper, and users cannot see the functions of other sections, greatly reducing the possibility of users clicking to use other functions.

2. FT Web App

Navigation System features:

Hover the URL column of the Safari browser and display the brand text FT Web App at the top;

The ￭ global navigation is hidden. Click the function key and it appears at the top of the page;

The secondary navigation bar appears at the top of the page;

Because there are a large number of news sections in global navigation and secondary navigation, they all adopt the mode of incomplete single-row space presentation. you can slide to select one of them;

When all the navigation items scroll along the page, do not hover over the screen;

Advantage Analysis:

The biggest advantage of FT Web App navigation design is its lightweight processing of heavy navigation. There are many news sections in global navigation and secondary navigation. If you show these sections, I am afraid it will take up half of the display space on the screen. FT Web App hides the global navigation behind a function key, and the second-level navigation only gives a display space for one row.

Disadvantage analysis:

The navigation displayed to users is only the tip of the iceberg of all news sections. users cannot be given the opportunity to browse all the general information, and users cannot be encouraged to try hidden news sections. At the same time, the operation cost of searching for a news section or returning to the top of the page at the bottom of the page is slightly higher.

3. Twitter

Navigation Design features:

There is only one line in the ￭ global navigation, and the brand is concentrated on the Twitter Bird icon on the home page );

The ￭ Global Navigation keeps hovering at the top of the screen and does not scroll with the page;

Click a tab in the global navigation bar and the tab appears in the menu list.

Advantage Analysis:

Global Navigation that does not move on the top of the screen allows users to quickly switch between different functional sections, reducing the cost of searching user information. The navigation of Twitter Web App is only one line, this ensures that the user can display as much text as possible.

Disadvantage analysis:

Some commonly used function keys are hidden in second-level navigation, such as the new information publishing portal). On the one hand, this increases users' search costs, and on the other hand, it reduces the incentive utility of these commonly used functions for users.

Based on the analysis of the navigation system of the above three Web apps, the designer has formulated the following rules for the navigation system design of the target project:

￭ Global Navigation allows you to quickly find and switch between Function Sections;

Refer navigation should be as light as possible to ensure sufficient display space in the text content area;

Worker displays the frequently used function keys in front.

Scheme selection stage

Based on the actual needs of the project and the consideration and summary of competing product analysis, the designer tried three navigation design schemes and analyzed the advantages and disadvantages of each scheme in detail.

Navigation Design Scheme 1

Design Description:

￭ ABCD is a product's four functional sections that form a global navigation.

Hover the global navigation bar at the top of the screen.

Ingress E is a common function for users to publish new messages.

￭ E adopts a translucent display mode.

Caffe stays at the bottom right corner of the screen

Advantages of this solution:

There is only one global navigation column at the top of the screen. The light-weight navigation saves as much space as possible for the text content area. The Global Navigation does not move, so that users can quickly switch to different functional sections.

Disadvantages of this solution:

The new information publishing portal in the lower-right corner makes browsing the page not fresh enough, which may cause visual interference to users. The new information publishing portal does not need to be displayed on any page, so the search is in crisis; brand logo cannot be displayed, and brand sense is weak.

Navigation Design Scheme 2

Design Description:

Ingress E is a common function for users to publish new messages.

￭ ABCD is a product's four functional sections that form a global navigation.

The navigation bar at the top of the screen appears when the user just enters the page, and disappears when the user slides the screen browsing information.

The semi-transparent function key in the lower-right corner of the screen appears after it disappears in the navigation bar. Click this key in the navigation bar.

Advantages of this solution:

When browsing the information, the navigation bar disappears, providing users with the largest space for displaying the body content; the logo can be displayed with a strong sense of brand; and the new information publishing portal can be found better.

Disadvantages of this solution:

The translucent function key in the lower-right corner of the screen makes browsing the page refreshing and may cause visual interference to users.

Navigation Design Scheme 3

Design Description:

Ingress E is a common function for users to publish new messages.

￭ ABCD is a product's four functional sections that form a global navigation.

The navigation bar at the top of the screen appears when the user just enters the page. When the user slides the screen browsing information, the first column disappears and the second column moves to the top of the screen to remain unchanged.

You can manually pull down the global navigation bar to pull out the first navigation bar.

Advantages of this solution:

When you browse the body information, only the global navigation column is displayed, which makes the navigation light and thin. The Global Navigation does not move, so that users can quickly switch to different functional sections.

Disadvantages of this solution:

The drop-down global navigation may cause misoperation, although the possibility is very small.

Based on the above analysis, taking into account the size of the display space in the text content area, the convenience of product operations, and the brand sense of the product, we finally decided to use solution 3 as the basic form of navigation design, and further enrich the details.

Summary:

The toolbar of the browser occupies the bottom position of the screen, and the global navigation can only passively move to the top position of the screen. How to balance the accessibility of operations with the maximization of text display space is the key to Web App navigation design.

The best solution always balances the results. Each design solution solves some problems while generating new problems. At this time, the designer needs to know which functions are the most important and have the highest priority. Ensuring the good user experience of core functions is an important criterion for judging the design scheme.