1、 Definition of navigation
The definition of navigation is actually the combination of elements, which allows users to walk freely in it.
2、 Purpose of navigation design
The purpose of navigation design is to highlight the core of the product, so that users can always know the location of their functions and how to go to the destination page.
Product navigation design is a way to show the information structure. There is no best way, only the most appropriate navigation design.
3、 The role of navigation design
The design of navigation is to let users know where they are, which interactive interface they are in, which page they can go to and which page they can return to. Of course, we should provide a way to jump to the page to express the relationship between users and browsing the page.
4、 9 common navigation designs
1. Bottom tab navigation
When the whole experience flow of the product runs through several commonly used function modules (generally no more than 5), it means that users need to switch back and forth in multiple tag entries.
In order to ensure the efficiency of switching, the process modules that run through the whole experience of the product are tiled in the tab bar to ensure the flat path of users' tasks, such as QQ and wechat.
Advantages: it belongs to the hot area of the thumb, with convenient operation, fast switching and good user experience.
Disadvantages: it can only accommodate 3-5, and the quantity is limited.
2. Top tag (TAB) navigation
The top tab was proposed by Google. In order to distinguish it from IOS, it is a navigation mode. Because it is difficult for fingers to touch the top, Google correspondingly proposed a solution of gesture operation: switch the tabs by sliding left and right on the screen, such as Tencent video and Zhihu
In actual projects, the top and bottom are used together.
Advantages: the top can slide, so it has strong expansibility and occupies less space than the bottom. It is convenient and fast to switch through sliding screen.
Disadvantages: because it can be expanded, it takes a long time to browse, and it is often forgotten.
3. Rudder navigation
Point and gather mode is a collection of core functions, which is convenient for users to call out. It will be equipped with other navigation styles (such as tag) to become rudder navigation, such as Weibo.
Similar to tag navigation, it is a combination of point navigation and tag navigation. It is equivalent to having a secondary navigation:
- This app navigation mode can be used when the page has several parts of content at the same level and requires a very important and frequently operated entry.
Advantages: the core is displayed in different colors or sizes, and the display method is flexible. Different colors and icons give users different visual impact and stimulate users' desire for interaction.
Disadvantages: it belongs to secondary interaction, which increases the interaction path of users, and too many displays will cause selection pressure to users.
4. Grid navigation
Palace format navigation is widely used in the central page of the platform system; Generally, secondary pages are used to display the content list, or as the aggregation of a series of tool entries;
Users have a low probability of using it, which is generally called springboard (icon card type) and magnetic sticker type. Advantages: it intuitively shows important functions in front of users, so that users can quickly choose.
Disadvantages: cumbersome operation and many functions.
5. Exhibition hall navigation
The variant of Gongge navigation can be used to present real-time content, such as news, articles, pictures, etc. it can be displayed in grid layout (such as live broadcast and INS) or roulette layout (such as Guevara movie) and slide mode.
Exhibition hall design mode is most suitable for presenting updated, intuitive and independent content
Advantages: displayed in the form of cards, a large number of labels can make it easy for users to read and choose.
Disadvantages: less presentation.
6. Drawer navigation
It is generally used to place functions that are less common to users or core to products, or applications that do not need to switch content frequently, such as hiding settings, about, personal information, etc;
- The "2/8" rule tells us that 80% of users only use those 20% functions, which are the core functions of information flow; If the 80% infrequently used functions also occupy the most important position, users will be disturbed, feel bloated, and even give up using the product.
Advantages: it can concentrate a large number of infrequently used functions without occupying the main vision, and users will not be disturbed.
Disadvantages: it is not easy to find functions for users who do not know the product, which is easy to lead to customer loss.
7. Pull down navigation / menu navigation
The same purpose as drawer navigation is to highlight the content. It is usually located on the top of the product and can be accessed by clicking the call out navigation menu;
- It is usually used to filter different types of information under the same information module, or quickly start some commonly used function modules without frequent page jumps;
Another variant of pull-down navigation is to display two or even multiple levels in the down menu, which is generally common in e-commerce.
Advantages: it has strong consistency with the interface, won't occupy an important interface, and users can click it easily. They can compare their goals in detail through comparison.
Disadvantages: generally, the pull-down key is relatively small, which is not easy to be found by users and easy to be ignored.
8. List navigation
It is suitable for displaying titles with long or secondary text content, and more information can be integrated into each line.
Similar to Gongge navigation, it is often used in secondary pages and will not display any substantive content by default. It is generally used in settings and personal center interfaces. At present, IOS also has existing component libraries.
Advantages: it has strong expansibility, can add many functions, and also conforms to the reading habits from top to bottom and from left to right.
Disadvantages: switching is inconvenient, and the replacement function needs to return to the upper level, which adds an interaction path.
9. Carousel navigation (banner map navigation)
When the page is flat enough, there is no focus and content that attracts the user's visual center, you can try to use the rotation navigation.
Advantages: good visual effect and prominent focus.
Disadvantages: the interface accounts for a large proportion, and increasing the interaction path requires sliding left and right to affect the experience.
5： Summary
In this Internet era, more and more novel and innovative navigation designs appear. No matter how diverse the navigation is, it is all about the user experience. Different products have different interactions, so you should choose the navigation design that suits you.
Powered by Froala Editor
