Take the requirement in the background as an example

Essence Concentrate

1. Four steps to navigation design:

2. Clarify user roles and task processes;

3. Build a clear and reasonable information structure;

4. Flexible use of navigation modes;

5. Simplify with recommendation algorithms b2b data and innovate by focusing on thumb-operated hotspots.

Navigation Design Principles

"Navigation organizes content so it makes it easier for users to find the information they need in your app. To make navigation more app-specific, start by defining your users, their typical paths through your app, and how you want them to use them. Function." - Material Design

Define users and core tasks

Before designing your navigation, you need to be clear about who your users are and what they do most.

Take the requirement in the background as an example:

This demand has made it clear that users are a certain type of business group. In the early stage of this answer, actual analysis can be carried out by means of demand mining and user research. Commonly used methods include user portraits, in-depth interviews, questionnaires, focus groups, etc. The specific operation methods are specially introduced on the Internet, and will not be expanded here.

After obtaining the core pain points and demands of merchants, what operations will these groups do? After a task teardown, we came up with a list of their required actions:

Then sort out their main functional processes:

After the user groups and core tasks are clarified, the functional process can be deconstructed, and the skeleton of the APP can be built through the information architecture.

Reasonable Information Architecture

The information architecture reflects the composition of the entire content of the APP. A reasonable grouping and classification can make the product easier to understand and browse; it also allows the functional framework to have good scalability.

You may face dozens or even hundreds of function points in the initial organization, so how to organize the information effectively?

(1) Starting from user cognition

The most classic way is the card sorting method, which allows users to organize function points according to their own cognition. The specific operations are further divided into closed classification and open classification. The former establishes some categories according to the characteristics of the product itself, and the latter is completely classified by the user. In this way, the information architecture of the user version is obtained, and then similar items are merged through the information architecture of multiple user versions to obtain the functional structure that conforms to the user's cognition.

(2) Prioritize

Identify what is most important, what is secondary, and what is not. Generally, it can be evaluated from these three dimensions: demand strength, frequency of use, number of tasks, and decision-making tools to assist in obtaining the optimal solution. When there are many functions, there will be a dilemma, but if each function is important, it means that each is not important, and it is easy for users to lose focus.

(3) Grasp the scene type of the task

Different task scenarios correspond to different organizational methods, which can generally be divided into browsing type and task type. For browsing scenarios, the product may need to display more objects so that users can quickly gain a clear understanding. For example, an information-based APP spreads many news categories; while for task-based scenarios, it is necessary to highlight key processes. Nodes allow users to successfully complete what they want to do, such as the shopping cart and order mechanism of e-commerce APPs.

Finally, we might tease out the information architecture of these three cases, and then start the interface design according to the navigation pattern.

Common Navigation Patterns

The iOS design guidelines have pointed us to 3 classic navigation patterns: hierarchical navigation, flat navigation, content-driven navigation, and of course, the drawer navigation advocated by Android. The navigation of most APPs on the market is also based on these categories for evolution or combination.

Flat navigation (usually used as primary navigation)

The most common is tabbed navigation. Labels can be located either at the top of the screen or at the bottom, and are generally placed at the bottom for the convenience of user finger operations.

Applicable scenarios: Multiple top-level modules are independent of each other, and there are frequent switching between modules

Features:

1. Visibility is good, and functions are easier to be discovered by users;

2. Good operability, easy to operate with fingers in the bottom area;

3. In line with most user habits.

Hierarchical Navigation

A typical representative is the settings of iOS, which are essentially parent-child presentations of functional architecture, with each page having a child until it reaches the end. To go to another destination, you have to go back to the parent and select another child from the beginning.

Applicable scenarios: There are a large number of tasks, which are independent of each other, and do not need to switch frequently between tasks.

Features: