Web design experience: Make the navigation system thin

<br />When discussing with my friends, I mentioned a point of view that the most core of all framework layer designs is navigation design. Recently, I have seen some foreign colleagues say that "80% of usability is navigation!" Because good navigation can ensure that users can find any information. In other words, providing the possibility of reaching something is far more important than providing the means of reaching it.
I am used to dividing navigation into one-dimensional, two-dimensional, and multi-dimensional for simple understanding. One-dimensional corresponds to linear structure, two-dimensional corresponds to hierarchical structure, and multi-dimensional corresponds to disordered structure. This may sound a bit abstract, but in fact, they are all well-known applications. Let's take an example to illustrate the design intentions:

The most primitive one-to-many tree-like application that is limited to the first, second, and third levels is "layered navigation", which is basically a necessary element. Tracking user behavior and recording the user's activity footprint on the website is "linear navigation", commonly known as breadcrumbs. In the background of the management system, the links across hierarchical structures added to the homepage are called "unordered navigation", commonly known as shortcuts.
When the two-dimensional structure becomes complex to a certain extent, it will inevitably lead to excessive navigation depth, making it more difficult for users to reach their destination. At this point, it is necessary to consider the comprehensive implementation of other solutions. The specific design can be summarized as follows:
The accumulation process from nothing to something takes out all the resources that can be scheduled at present.
The process of sequencing from more to less, decomposing tasks to find clues to primary and secondary tasks and reorganizing them.
Recalling Flickr’s revisions, the version code was changed for the first few important navigation changes, which shows that Flickr attaches great importance to the navigation system. At the same time, the upgrades of the Beta and Gamma versions also correspond to my ideas, refer to the header navigation fragment:
Make the navigation system thin

The characteristic of Beta is that you can see whatever you want. Functions have been continuously added since Alpha, although adjustments to task decomposition have also been made during this period. But obviously, if the quantity is too large, it will be complicated to adjust. The characteristic of Gamma is that you can get whatever you want, but the right to choose or not is returned to the user.
If we explain it from the perspective of user experience, Beta has satisfied the user's cognitive experience and is fun and useful enough; Gamma has improved the user's operating experience and is playable and easy to use. If you compare carefully, you can find similar traces of Douban's revision.
With operational data, problems can be easily exposed. For example, for Beijing's traffic, the ideal situation is to divide Beijing into N small areas, with high-speed transportation such as subways and urban railways used between areas, and low-speed transportation such as buses used within each area. At the same time, subways and urban railways and bus stations are integrated vertically and horizontally. In this way, large-scale intersections of bus routes can be avoided as much as possible (flat structure), and active prevention rather than passive pressure relief can be achieved.
We are faced with the fact that the capital cannot be rebuilt, but the products can be completely rebuilt.

<<: How to deploy MySQL master and slave in Docker

>>: CSS multi-column layout solution

Example code for implementing anti-shake in Vue

Web design experience: Make the navigation system thin

Example code for implementing anti-shake in Vue

Jenkins Docker static agent node build process

MySQL optimization solution: enable slow query log

How to modify Ubuntu's source list (source list) detailed explanation

Loading animation implemented with CSS3

Solution to Linux QT Kit missing and Version empty problem

Detailed steps to delete environment variables in Linux

Tutorial on using Multitail command on Linux

Native js imitates mobile phone pull-down refresh

Detailed Analysis of Explain Execution Plan in MySQL

Recommend

Detailed installation process of MySQL 8.0 Windows zip package version

React Native reports "Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞" error (solution)

Virtual domain name configuration and test verification under Linux\Nginx environment

The linkage method between menu and tab of vue+iview

Building FastDFS file system in Docker (multi-image tutorial)

How to deploy MongoDB container with Docker

MySQL code execution structure example analysis [sequence, branch, loop structure]

JavaScript to achieve digital clock effects

A brief introduction to VUE uni-app basic components

About MYSQL, you need to know the data types and operation tables

Two methods to implement MySQL group counting and range aggregation

How to verify whether MySQL is installed successfully

Example of how to generate random numbers and concatenate strings in MySQL

Summary of common HTML elements including basic structure, document type, header, body, etc.

How to find websites with SQL injection (must read)