Navigation Design and Information Architecture
|
<br />Most of the time when we talk about navigation, we are talking about how navigation represents content and structure. That is to say, when we discuss navigation, we pay more attention to how to interact with it and how it looks visually. But navigation is not limited to interactive methods and visual forms. Narrowly defined navigation Think back to how we design navigation? Isn’t it designed based on the content and the structure of the content? Ultimately, navigation is probably a three-pronged effort: interaction design, visual design, and don’t forget, information architecture. It is the information architecture that determines the design of the navigation. Information architecture determines how many levels of classification we use, whether an item can belong to two or more categories, and so on. A large part of the work in information architecture is classification. Classification is the process of grouping and categorizing existing items and content based on known common attributes. Before computers and information systems were invented, people were constantly doing classification work. From daily life to scientific research, classification is everywhere. Why do we need to classify animals and plants? Oh, it is to form a scientific knowledge system. Of course, animals, plants, and microorganisms came into existence first, and then there were biological classification systems such as kingdom, phylum, class, order, family, genus, and species. Why is it divided into so many levels? This is because the complexity of the biological world requires such detailed division. So the view I have always supported is to classify according to content and information architecture. Therefore, I also highly recommend the use of card sorting, which is both a quantitative and qualitative analysis. If conditions permit, I recommend you to try it. Back to the topic at the beginning, if we only consider the interactive and visual forms when considering navigation, it is very likely to counteract the information architecture. For example, the following example. Tab navigation example Why do we use Tab navigation? This is because it can better represent the classification and the structure of the classification (usually two levels). It is not because of the tab navigation that people divide categories into two levels. Initially, it must have been because of the two-level classification that designers designed the ingenious tab-style navigation. The large-scale use of tab navigation also has a negative impact on the design of most information architectures. A few simple items could have been presented with a primary logic, but they were classified in two levels because the tab-style navigation looked better. It’s just like people are always used to using four Chinese characters as navigation copy. For example, it would be fine to use the word “news”, but you have to use “hot news”. The principle is the same. The interaction and visual design of the navigation should not affect the design of the information architecture. Is the Fisheye Menu really that useful? If a drop-down menu originally has ten menu items, would you choose to use a fisheye menu? Or maybe just because it's cool. It's still the same question: what kind of content determines what kind of navigation. It is important to note that what I am talking about here includes not only the classification of text materials, but also the user tasks and goals of functional websites. Navigation is more than just Tab We can see that in the Office 2007 series of products, the original menu has been replaced by brick-like buttons. These tiles, called Ribbon, or Context Navigation, are a classification of similar interactive operations. Obviously, contextual navigation has gone beyond simple classification of content. Is the search box a form of navigation? This seems a bit far-fetched. However, in information retrieval systems, search boxes, filters, etc. do play a navigation role. Or we can call it assisted navigation. Going back to the origin, why does navigation exist? In all systems and applications, the purpose is to enable users to complete tasks and achieve goals efficiently. In this way, broadly speaking, links and buttons that guide users to complete tasks quickly can be considered part of the larger navigation system. Many friends may have this question: Should navigation design take business goals into consideration? I don't think this conflicts with the above. The details can be left for discussion. In summary, don’t navigate for the sake of navigation. The first navigation refers to the form of presentation, while the second navigation refers to the actual navigation system. For navigation design, information architecture is more important than interaction methods and visual forms. Navigation is not just a classification of content, but also a classification of similar interactive operations. The purpose of navigation is to enable users to complete tasks and achieve goals efficiently. Contextual navigation may be a development trend in navigation design. |
<<: Details of function nesting and closures in js
>>: js returns to the previous page and refreshes the code
Recommend
The implementation of event binding this in React points to three methods
1. Arrow Function 1. Take advantage of the fact t...
How to solve the DOS window garbled problem in MySQL
The garbled code problem is as follows: The reaso...
Nginx forward and reverse proxy and load balancing functions configuration code example
This article mainly introduces the configuration ...
Analysis of Nginx Rewrite usage scenarios and configuration methods
Nginx Rewrite usage scenarios 1. URL address jump...
Detailed description of component-based front-end development process
Background <br />Students who work on the fr...
How to implement dual-machine master and backup with Nginx+Keepalived
Preface First, let me introduce Keepalived, which...
HTML Tutorial: Collection of commonly used HTML tags (5)
Related articles: Beginners learn some HTML tags ...
Detailed explanation of dragging table columns using Vue Element Sortablejs
1. css: dragTable.css @charset "UTF-8";...
Steps to build a file server using Apache under Linux
1. About the file server In a project, if you wan...
Configure Java development environment in Ubuntu 20.04 LTS
Download the Java Development Kit jdk The downloa...
Fall in love with the simple CSS details, although insignificant, can improve efficiency
The future of CSS is so exciting: on the one hand,...
Detailed explanation of map overlay in openlayers6
1. Overlay Overview Overlay means covering, as th...
Introduction and usage of Angular pipeline PIPE
Preface PIPE, translated as pipeline. Angular pip...
Why should you be careful with Nginx's add_header directive?
Preface As we all know, the nginx configuration f...
Write a React-like framework from scratch
Recently I saw the article Build your own React o...