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:
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:   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
Recommend
Simple implementation method of two-way data binding in js project
Table of contents Preface Publish-Subscriber Patt...
Instructions for using the database connection pool Druid
Replace it with the optimal database connection p...
Application of dynamic image loading technology and use case of jquery.lazyload plug-in
Application example website http://www.uhuigou.net...
Vue implements countdown between specified dates
This article example shares the specific code of ...
How to implement digital paging effect code and steps in CSS
A considerable number of websites use digital pagi...
Common methods of Vue componentization: component value transfer and communication
Related knowledge points Passing values from pa...
Analysis of the principle and usage of MySQL custom functions
This article uses examples to illustrate the prin...
Introduction and analysis of three Binlog formats in MySQL
one. Mysql Binlog format introduction Mysql binlo...
docker run -v mounts data volumes abnormally, and the container status is always restarting
Problems: After adding the -v parameter to docker...
CSS to achieve compatible text alignment in different browsers
In the front-end layout of the form, we often nee...
Implementation of dynamic rem for mobile layout
Dynamic rem 1. First, let’s introduce the current...
How to implement n-grid layout in CSS
Common application scenarios The interfaces of cu...
Solution to uninstalling Python and yum in CentOs system
Background of the accident: A few days ago, due t...
Mini Program Development to Implement Unified Management of Access_Token
Table of contents TOKEN Timer Refresher 2. Intern...
How to install Jenkins using Docker
Table of contents 1. Pull the image 2. Create a l...