Seven main navigation modes in Mobile UI design

Just as well-designed, excellent navigation is also invisible to elephants. Whether browsing friend information or renting a car, the perfect navigation design allows users to use applications intuitively and easily complete all tasks. The navigation of an application can be designed into various styles, but I would like to introduce six main navigation modes, that is, the navigation mode of the main menu (see Figure 1-1 ).

Figure 1-1 main navigation mode

Hop typeHop navigation has no special requirements on the operating system and has good performance on various devices. It is also known as the launchpad ). The hop navigation feature is that the menu options on the logon interface are the starting point for each application. The Facebook app follows the hop-type design on the IOS main interface, and other apps follow suit (see Figure 1-2 to Figure 1-4 ).

Figure 1-2 Facebook's hop navigation and OVI Maps application

Figure 1-3 navigation design of trulia and LinkedIn

Figure 1-4 newsroom on the palm mobile phone and Yahoo on the Nokia mobile phone!

The custom hop Navigation Pane displays the user's personal data while displaying the menu options. A custom function is usually provided to allow users to change the layout of hop navigation (see Figure 1-5)

Figure 1-5 PayPal users' personalized hop navigation and earlier versions of the gowalla Application

Common la s are 3x3, 2x3, 2x2, and 1X2 grids (see Figure 1-6 ). However, hop navigation does not have to stick to the grid layout. You can zoom in some options in proportion to show their importance. In the iPhone app masters, the video option is 2 ~ of other menu options ~ 3 times larger (see Figure 1-7)

Figure 1-6 grid layout of hop-type navigation

Figure 1-7 Norton mobile's 2x2 grid layout and irregular masters Layout

Use grid layout for equally important content items and irregular layout for more important content items. Use personalized settings and custom options as needed.

List menuThe list menu navigation and hop navigation have the same thing in mind that each menu item is the entry point for entering various functions of the application. This type of navigation has many forms of variation, including the personalized list menu, the grouped list, and the enhanced list. The enhanced list is formed by adding search, browse, or filter functions on the simple list menu (see Figure 1-8 to Figure 1-11 ).

Figure 1-8 list menu: valspar paint and Kayak app

Figure 1-9 list menu: radiotime and cozi applications on the palm mobile phone

Figure 1-10 personalized list: Blackboard and zoho CRM applications

Figure 1-11 enhancement list: Amazon MP3 application; group list: stratus Application

The list menu is suitable for displaying titles with long or sub-text content. An application that uses the list menu should provide an option in all secondary screens to return to the menu list. Generally, a button with a list icon or menu is displayed on the title bar.

Option format

Option-based navigation varies with operating systems. For the positioning and Design of tabs, different operating systems have different rules (see Figure 1-12 ). If you want to select this navigation mode for your application, you need to define the location of tabs for different operating systems.

Figure 1-12 location of tabs in different operating systems

The tabs of iOS, WebOS, and BlackBerry are all placed at the bottom of the screen, so that you can perform operations with your thumb (see Figure 1-13 and Figure 1-14 ).

Figure 1-13 tabs at the bottom of the screen: Jamie Oliver recipes and molome applications

Figure 1-14 tabs at the bottom of the screen: Application World and worldmate of the BlackBerry System

The horizontal scrolling tab at the bottom of the screen is a very good design. The Starbucks and blue mobile apps in 1-15 provide more operation options on the same screen.

Figure 1-15 rolling tabs at the bottom of the screen: Starbucks and blue mobile applications

In Android, Symbian, and Windows systems, tabs are positioned at the top of the screen. This form looks familiar because it imitates the standard website navigation mode. Nokia and windows have designed a scroll tab at the top of the screen. After you move the tab, you can see more menu items (see Figure 1-16 and Figure 1-17 ).

Figure 1-16 rolling tab at the top of the screen: harvest timetractor application and Fring application on Nokia

Figure 1-17 tabs at the top of the screen: Foursquare and hitpost applications

Set different visual effects for selected menu items so that you can clearly know which item you have selected. Easy to recognize or use icons with labels.

Exhibition Hall Style

The exhibition hall design enables navigation by displaying various content items on the plane. It is mainly used to display articles, recipes, photos, products, etc, you can deploy a disk, a grid, or a slide presentation (see Figure 1-18 to Figure 1-20 ).

Figure 1-18 BBC and pulse applications

Figure 1-19 the Flickr application and the pictureit application on the palm mobile phone

Sometimes, grouping these contents makes it easier for users to browse. Dwell uses the side tabs to organize the content in the gallery navigation into content blocks that can be managed by users.

Figure 1-20 dwell Application

The gallery navigation can be well applied to frequently viewed and updated content.

Instrument Type

Instrument navigation provides a way to measure whether key performance indicators (KPIs) meet the requirements. After the design, each measurement can display additional information. This main navigation mode is useful for commercial applications, analysis tools, and sales and marketing applications (see Figure 1-21 ).

Figure 1-21 instrumentation navigation in mint and ego applications

Do not use too many instruments for navigation. You need to conduct research to determine which key metrics should be guided in an instrument-based navigation.

Metaphor

This kind of navigation feature is to use pages to imitate the metaphor objects of applications. This kind of navigation is mainly used in games, but it is helping people organize things (such as diaries, books, red wine, etc ), you can also see it in the application that classifies it (see Figure 1-22 to Figure 1-25 ).

Figure 1-22 Awesome Note Application

Figure 1-23 cellar applications

Figure 1-24 doittomorrow and tripjournal applications

Figure 1-25 aldiko book reader Application

Be careful with the use of metaphorical navigation. Poor imitation is likely to result in anti-pattern in section 10.1 ).

Super menu

The super menu navigation on a mobile device is similar to the super menu navigation used by the website. It displays the menu options in the predefined format in a large coverage board group. The ripcurl website uses the super menu to display the secondary category of the apparel (see Figure 1-26 ).

Figure 1-26 ripcurlshop.com

Facebook of WebOS uses the supermenu to streamline navigation, avoiding excessive options in Hop navigation. Walmart also uses a super menu style in their android applications (see Figure 1-27 ).

Before selecting the navigation mode, you must first determine the information architecture. If you want to navigate only a few objects in the application, you can use navigation modes such as tabs.

Figure 1-27 Facebook in WebOS and Walmart in Android

This article is excerpted from the UI design mode of mobile apps.