Simplify complex website navigation

<br />Navigation design is one of the main tasks in structural design. In software, the quality of navigation design is directly related to whether users can use it smoothly. When faced with more complex navigation, our first reaction is to simplify it. Therefore, some complex enterprise-level management software (such as SAP, Kingdee ERP, Inspur ERP, etc.) provide users with a quick entry to a certain location; some software provides favorites, allowing users to collect frequently used addresses; some seek solutions from the perspective of navigation interaction.
1. Provide auxiliary navigation at the path level <br />When it comes to auxiliary navigation, we will immediately think of search boxes, quick entry points, favorites, etc. The reason why we think of these immediately is that these forms make our use more convenient.

Figure 1-1 Quick entry on the SAP interface
The quick entry on SAP provides a convenient entry for more experienced users, because SAP is a very complex enterprise management software, including financial management, personnel management, production management, etc., covering various industries in the enterprise, but usually a single user only uses one of them. For example, if you are an accountant, you usually only use the financial management module. At this time, you just want to enter the financial module when you open the software. The quick entry will undoubtedly relieve you of the pain of using the navigation tree.

Figure 1-2 Search box on Joyo.com (e-commerce mall) E-commerce mall websites are the type of websites with more content. If we simply use navigation to find a product, it will take us a lot of time. The search box can be used to search conveniently by keywords. I believe everyone has experienced its convenience.
From the above examples, we can see that novices can find what they want through the forms of "category pages, navigation trees and searches". However, since they are not familiar with the "terrain", it is impossible for them to have quick needs. Most users still prefer to use forms such as "simple navigation and favorites", so that I can pick what I want. If I have a certain degree of autonomy, I can directly use the "search box and quick entry" and jump directly to where I want. I am very urgent and don't want to waste more time.
2. The organizational form will also bring us a good experience . There are many organizational forms of navigation. In software, the path bar of the Vista system once gave me a bright feeling. We are usually bound by the traditional practices of the system. The Vista system breaks through this thinking and is worthy of our reference, not only in organizational form but also in thinking. The picture below is an example I captured.

Figure 1-3 Vista system path bar
3. What the fisheye menu gave me to think about <br />To navigate in a dictionary, we usually search, and then find the meaning of a word based on the search. However, when we only remember the first one or two letters and don’t remember the word at all, searching is very troublesome, whether we are flipping through a book dictionary or an electronic dictionary. There are so many search-based navigations, as shown in the following presentation by Kingsoft PowerWord.

Figure 1-4 Dragging the scroll bar on the Kingsoft PowerWord interface or turning pages will waste a lot of your time. Fisheye menus are one of the research results of HCIL (Human-Computer Interaction Laboratory, one of the subordinate laboratories of UMIACS). It is a solution proposed to make it easier and faster for viewers to use menus with more content. But to a certain extent, it can serve as a reference for dictionary navigation design. The picture below shows their Fisheye menu:

Figure 1-5 The fisheye menu allows large-scale navigation with the click of the mouse, and the triangle is a tool for fine-tuning. I believe that such a design will make it much smoother to use, and there is no need to drag the difficult-to-use scroll bar. I believe we will gain something from the search navigation with more content.
Imagine if you design such a search form for your electronic dictionary, you can easily search for a word in a small area, and you can also use it in conjunction with the search box. I believe that a simple idea will change the user's painful experience.
4. Summary: Cognitive limitations and navigation design <br />Human cognition is extremely limited and can only figure out simple problems easily. When designing navigation, we also follow the laws of human cognition and try to make it clear to users at a glance. If the navigation you design makes it difficult or takes a long time for users to figure it out, it is undoubtedly a failed experience (unless that is the design purpose).
That’s right! “Just focus on your users.” When designing navigation, it is necessary to conform to the corresponding user's awareness.

<<: Summary of MySQL InnoDB architecture

>>: Html long text automatically cuts off when it exceeds the tag width

Solution to the problem of Windows Server 2008 r2 server automatically restarting for no reason

Simplify complex website navigation

Solution to the problem of Windows Server 2008 r2 server automatically restarting for no reason

Front-end implementation of GBK and GB2312 encoding and decoding of strings (summary)

Detailed explanation of Linux mpstat command usage

Detailed explanation of the role of the new operator in Js

Use nginx + secondary domain name + https support

MySQL multi-table join query example explanation

vue+node+socket io realizes multi-person interaction and releases the entire process

Detailed explanation of gcc command usage under Linux system

MySQL implements enterprise-level log management, backup and recovery practical tutorial

Detailed explanation of building Nginx website server based on centos7 (including configuration of virtual web host)

Recommend

A brief discussion on the difference between MYSQL primary key constraint and unique constraint

Solution to Linux CentOS 6.5 ifconfig cannot query IP

Detailed explanation of Linux file permissions and group modification commands

Detailed explanation of BOM and DOM in JavaScript

Summary of several implementations of returning to the top in HTML pages

Detailed graphic explanation of sqlmap injection

An Incomplete Guide to JavaScript Toolchain

Nginx routing forwarding and reverse proxy location configuration implementation

HTML Tutorial: HTML horizontal line segment

HTML+CSS+JS to implement the Don't Step on the Whiteboard game

Linux user and group command example analysis [switching, adding users, permission control, etc.]

How to add vim implementation code examples in power shell

MySQL table auto-increment id overflow fault review solution

Detailed installation tutorial of mysql5.7.19 decompressed version (with pure cracked Chinese version SQLYog)

How to change the encoding of MySQL database to utf8mb4