Mobile Application UI design mode: User-friendly navigation mode

Article Description: Create a user-friendly interface: 6 main navigation modes in the mobile UI.

As a simple UI model reference book, mobile application UI design mode is ideal for mobile application developers, UI designers to read, and students who have not yet bought can take a look at the book's Experience sharing on navigation patterns in mobile UI design.

As well as sophisticated design, excellent navigation is also invisible to elephants. Whether it's browsing buddy information or renting cars, the perfect navigation design allows users to use the application intuitively, and make it easy for them to do all the work. An application of navigation can be designed in a variety of styles, but I would like to highlight 6 main navigation modes, that is, the main menu navigation mode.

Springboard Springboard navigation has no special requirements for the operating system and has good performance on all kinds of equipment. It is also sometimes referred to as the "Quick Launch Board" (Launchpad). The feature of Springboard navigation is that the menu option in the login interface is the starting point to enter each application. Facebook apps Use the springboard design on the iOS main interface, and other apps follow suit.

Facebook's springboard navigation and Ovi Maps apps

Navigation design for Trulia and LinkedIn

The newsroom on the Palm phone and Yahoo! On the Nokia phone!

Personalized Springboard navigation Displays the user's profile while displaying menu options. Custom features are often provided to allow users to change the layout of springboard navigation (see Figure 1-5)

PayPal User personalized Springboard navigation and early versions of Gowalla applications
Common layout forms are the 3x3, 2x3, 2x2, and 1x2 grids (see figure 1-6). But springboard navigation does not have to be rigidly tied to the grid layout, you can zoom in on certain options to highlight its importance. In the iphone app Masters, the video option is 2 to 3 times times the size of the other menu options.

Grid layout for Springboard navigation

The 2x2 grid layout of Norton Mobile and the irregular layout of the Masters.
Use grid layouts for equally important content items, and use irregular layouts for content items that are more important in comparison. Use Personalization and customization options as appropriate.
List Menu List menu-style navigation and springboard navigation have in common that each menu item is the entry point into the application function. There are many variations of this navigation, including personalized list menus (personalized list menu), grouped lists (grouped list), and enhanced lists (enhanced list). Enhanced lists are created by adding features such as search, browsing, or filtering on top of a simple list menu.

List menu: Valspar Paint and Kayak Apps

List menu: RadioTime and Cozi applications on Palm phones

Personalization list: Blackboard and Zoho CRM applications

Enhanced list: Amazon MP3 apps; grouping list: Stratus applications
List menus are ideal for displaying headings that are longer or have secondary text content. Use the List menu application to provide an option in all secondary screens to return to the menu list. The usual practice is to display a button with a list icon or a "menu" on the title bar.

Option Card

Tabbed navigation has different performance on different operating systems, and different operating systems have different rules for the location and design of tabs (see Figure 1-12). If you want to choose this navigation mode for your application, you need to specifically define the location of the tabs for different operating systems.

Location of tabs within different operating systems
IOS, WebOS, and BlackBerry Systems put tabs on the bottom of the screen so that users can manipulate them with their thumbs.

Tabs at the bottom of the screen: Jamie Oliver Recipes and Molome should

Tabs at the bottom of the screen: application of the BlackBerry system world and WorldMate
The Horizontal scrolling tab at the bottom of the screen is a very good design, like the Starbucks and blue Mobile apps in Figure 1-15, which can provide more operational options on the same screen.

Scrolling tabs at the bottom of the screen: Starbucks and blue Mobile apps.
Android, Symbian, and Windows systems all place tabs at the top of the screen, a form that looks familiar because it mimics the standard site navigation patterns. Both Nokia and Windows design a scrollable tab at the top of the screen, and users can see more menu items when they move the tabs.

Scrolling tabs at the top of the screen: Harvest timetractor applications and fring applications on Nokia

Tabs at the top of the screen: Foursquare and Hitpost applications
By setting a different visual effect on the menu item that you have selected, the user can clearly know which item they have selected. Use an easily identifiable or tagged icon.

Pavilion style

The pavilion-style design enables navigation by displaying items on a flat surface, mainly for displaying articles, recipes, photos, products, etc., which can be laid out as roulette, grid, or slideshow (see figure 1-18 to Figure 1-20).

BBC and Pulse applications

Flickr apps and PictureIt apps on palm phones
Sometimes, grouping these things is easier for users to browse. The dwell uses the side tabs to organize the contents of the pavilion navigation into content blocks that can be managed by the user.

Dwell Application
The pavilion-style navigation can be applied well to the content that users need to browse frequently and update frequently.

Instrument type

Instrumentation navigation provides a way to measure whether critical performance indicators (key performance INDICATORS,KPI) meet the requirements. After design, each metric can display additional information. This major navigation model is useful for business applications, analysis tools, and sales and marketing applications.

Instrumentation navigation in Mint and ego applications
Do not use too many dashboard navigation. You need to conduct research to determine which key metrics should be used for instrumentation navigation.

Metaphorical type

This kind of navigation is characterized by the use of Web pages to simulate the use of metaphorical objects. This kind of navigation is mainly used in games, but can also be seen in the application of helping to guide people to organize things (such as diaries, books, red wine, etc.) and classify them.

Awesome Note Application

Cellar Application

Doittomorrow and Tripjournal applications

Aldiko Book Reader Application
It is important to use metaphorical navigation carefully, and bad imitation is likely to result in a 10.1-section anti-pattern.

Super Menu Type

The Hyper-menu navigation on a mobile device is similar to the Super menu navigation used on a Web site, which groups a large coverage panel to display menu options that have been well defined. The Ripcurl website uses the Super menu to show the secondary categories of costumes.

The WebOS version of Facebook uses the Super menu to streamline navigation, avoiding the plethora of options in springboard navigation. Walmart also uses a Super menu in their Android apps.
Before you choose Navigation Mode, you first need to determine the information architecture. If the objects you want to navigate are just a few of the main things in your application, you can use navigation modes such as tabs.

Walmart under the WebOS system under the Facebook and Android system

This digest is from the "Mobile Application UI Design pattern"