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

Linux kernel device driver address mapping notes

Simplify complex website navigation

Linux kernel device driver address mapping notes

Detailed process record of Vue2 initiating requests using Axios

SQL implements addition, subtraction, multiplication and division operations on two adjacent rows of data

How to install and configure the Apache Web server

Detailed explanation of using scp command to copy files remotely in Linux

Will CSS3 really replace SCSS?

Randomly generate an eight-digit discount code and save it to the MySQL database

Various types of MySQL indexes

JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)

How to make your own native JavaScript router

Recommend

A brief discussion on MySQL select optimization solution

WeChat Mini Program implements the likes service

Cross-host communication between docker containers-overlay-based implementation method

Specific usage of Vue's new toy VueUse

Docker image access to local elasticsearch port operation

The url value of the src or css background image is the base64 encoded code

JavaScript to achieve tab switching effect

Example of how to modify styles via CSS variables

Detailed explanation of basic syntax and data types of JavaScript

SQL fuzzy query report: ORA-00909: invalid number of parameters solution

JavaScript method to detect the type of file

Steps to deploy hyper-V to achieve desktop virtualization (graphic tutorial)

Example of setting up a whitelist in Nginx using the geo module

How to deploy nextcloud network disk using docker

Advanced and summary of commonly used sql statements in MySQL database