Information Architecture for Navigation

This article by the Jiangnan University Design Institute graduate student Lu Bo translation, Author: Anastasios Karafillis, view the original

Although navigation is a vital part of the user experience, it is only one way to achieve the goal (find content). Users have different expectations of content and navigation, content should be unique, amazing or exciting, and navigation should be as simple and predictable as possible.

The articles in this series are divided into two parts, with four steps to simplify navigation effectively. By analyzing the type and number of content, select and carefully design the correct type of navigation menu.

Four steps to create an ideal navigation system

To build an available navigation system, web designers need to answer the following four questions:

How can

best organize content? How do you best explain navigation options? Which navigation menu type is the most suitable choice? How do I design the best navigation menu?

The first two issues relate to the structure and label of the content, often referred to as the information architecture. Information architects often visualize their work results in the site map.

The site map describes the navigation structure of the site. (Image source: Web tuts)

However, it may not be the best user experience to provide a site map to users, and these reasons will be explained in detail in this series of courses. It is also important to design a custom navigation menu that adapts to the user's choices and arranges options. Therefore, users can easily find content, browse content and jump to choose.

This navigation menu is designed to be successful when you answer the third and fourth questions mentioned earlier. These two issues relate to the interactive design in the navigation experience. The first two questions will be answered in part one, and the latter two will be answered in the second part.

Structured Content

The correct structure of a Web site content, the first thing to consider is the way users search information, and then according to these preferences to structured content.

How do users look for information?

When a user is looking for vehicles, recipes, financial services, clothing categories, news articles, fitness exercises, entertainment recipes or any other items or information-they may know or don't know the exact name of the item they are looking for. If we assume that the user always knows the exact name of the thing he's going to search for, we need to provide a large, full index (from A to Z) or simply let them type in the search box so they can find what they want. Of course, things are often not so simple. A more detailed explanation is shown in the second section.

Even if the user knows the name of the thing they are looking for, there are inherent interactions between the full index from A to Z and the search box, and it is not enough to make them the primary or only way to navigate. In addition, users usually do not know the exact name of the things searched, they do not even care about the name of the class or object, instead, they will have a search for the object of the key words related to.

Guiding the user to the right content is the first step, then, to differentiate the content category on the site.

Metadata is the basis of navigation system

Information about content items or fragments of content is often referred to as metadata-this is information about the content of the information.

Without looking at the details, the content entries may belong to different metadata categories. Whether it's the political focus of a news, the size of a display, the director of a video, the collar of a shirt, or the difficulty of a workout, these are different meta data. Of course, multiple entries can share the same category, such as price, visibility, and publication date.

These meta data types allow users to browse through content. However, as we have seen, it is unnecessary or useless to provide users with the full range of browsing content. Doing so will make the interface messy, slow browsing, complicate the navigation process, and, worse, confuse, fatigue and annoy the user, and then they will abandon the site.

Carefully consider whether or not to show the category to the user at which stage.

Three categories of metadata

Divides the metadata into three groups based on whether or when the metadata category is rendered: important, optional, irrelevant.

The challenge of the information architecture is to divide the categories into important, optional and irrelevant according to the target audience, the number of site goals and content. However, once you have selected a suitable category, some simple rules will help you decide when to show what categories.

Important category

For the target user, the most important category is the important one. These categories are rare, but there is at least one important category in each project that simplifies the work of the designer and the user's navigation experience.

Identify important categories

The meta data categories for recipes may include "dishes", "main ingredients", "special diets", "occasions", "cooking", "Time to cook". In these categories, "dish" is the most important. Not everyone is a special eater, not every meal is on a special occasion, but almost everyone has an appetizer, breakfast, main course, garnish, salad and dessert each day.

For the target user, the menu is the most important, which should be presented to them as the first category.

Dishes are important meta data categories in recipes. (Image source: our best bites)

However, as mentioned earlier, the target audience or site goals may affect the classification of categories, especially in the ideal Web site.

For example, in the mainstream recipe site, users may not be able to see the relevant content of the recipes. But if a website collects recipes from popular cuisines around the world, "recipes may be a very important category for target audiences, so it is important to consider whether adding" recipes "or substituting" recipes "for" cuisine "in addition to" cuisine "is the only significant category. Anyway, because "recipes" are the subject of a Web site, it would be better to show it first (instead of "dish").

The web site has meta data of different important classes. (Image source: Recipes by Nation)

Arranging important categories

The above example explains the case of only a single important category. However, a set of entries may contain several important categories.

For clothes. An important category may be the type of clothes, such as "shirts", "trousers", "shoes", "sweaters". Another important but mutually exclusive category is gender, "male" and "female". The third category may be related to the occasion, such as "Casual wear", "overalls", "dresses". We may have more important categories, but let's put them aside first.

The question then is how best to mediate or resolve conflicts between potentially multiple important categories.

First, it seems logical to put all the important categories at the same top level. After all, they are important. But to do the opposite. The important category is best to be displayed one after another at an incremental level. To better understand this, let's take a look at the information architecture of the site in the image below.

Horizontal navigation usually lists the type of product provided by the site. (Image source: LL BEAN)

The horizontal navigation bar lists the types of available products for ll beans, such as "home décor", "Li Yi and Fishing gear", "Outdoor Items", "footwear" and "clothing". However, designers have made some changes to "clothes". Instead of listing a dozen categories of clothes in the horizontal menu, the designers use a more streamlined classification as an important category. Users start with "male" and "female", and then see all the categories of clothes in the Pull-down menu. This allows for more options for horizontal navigation.

Create more space for the main navigation bar and use important categories under a streamlined classification. (Image source: LL Bean)

This presents a slightly inconsistent information architecture, but the designers accepted it and freed up more space on the horizontal navigation bar. In this case, this is a good solution as long as this inconsistency does not confuse the user. However, it is not a sensible decision to put the category "Shoes" (which can be understood as a pair of shoes into men's and women's shoes) on the same level of navigation.

Important categories should be rendered individually, not one next to another. (Image source: LL Bean)

The problem with this solution is that two important categories are placed at the same level. "Shoes → men's Shoes" and "men → shoes" are direct paths. Since two categories are important, users must have seen them. However, since they are placed on the same layer, the user has to choose between the two, which undermines the assumption that both categories are important. Therefore, the two paths to delete a--perhaps "shoes → men's shoes" need to be deleted.

Optional Type

If there are multiple important categories, there may not be other entries in the category. A Web site does not have more than a dozen clothing items, designers can make it easy for users to choose whether to see the male or female all the clothing. In many cases, however, the opposite is the case. Even though all the important categories have been selected, there are still a large number of entries. Therefore, additional categories should allow users to further filter. This is the optional category.

Optional categories are important for some, not all, users. For example, the two meta data categories of "car" may be "number of doors" and "Fuel type". Some people are concerned about fuel types but don't care how many doors there are. Others are the opposite.

Prioritize in optional categories

In general, you need to display an optional category after the user has selected an important category.

However, in many retail sites, like fashion and electronic retail outlets, a brand list (an optional category) of product types (an important category) is on the same level.

Important categories and optional categories should be displayed at different levels. (Image source: Flipkart)

The problem with this approach is that if a user chooses a brand on a clothing website, they may have to face hundreds of items, and then they have to choose a type of clothing to narrow it down. Therefore, placing the optional and important categories at the same level is like creating a path for an important category, adding complexity to the selection and making the navigation cluttered.

Providing many filtering options is a good way not to give users a lot of navigation options from the start, give them some important choices, and then provide them with options once they have selected an important category.

Therefore, in the above example, removing the brand from these hierarchies allows the user to select only one type of clothing may be better. At the next level, the user is given the option of branding.

The brand option can be seen after the user has selected an important type. (Image: Flipkart)

Dynamic Filter Selection

As mentioned earlier, important categories should be displayed progressively, but the optional categories are best displayed at the same level.

The only exception is that if the optional categories are mutually exclusive, they should be displayed in the next level of the same menu in the important category. However, if optional categories can be merged, they should implement dynamic filtering choices.

In the screenshot picture, pay attention to the important category in breadcrumbs Navigation, the optional category renders as dynamic filter selection.

Optional categories are likely to be merged, and they should implement dynamic filtering choices. (Image source: Sears)

The difference between the important category and the optional category is explained below. Each category is a filtering choice for available content, and dynamic filtering choices are dynamic because they allow users to select or change the options for dynamic changes. Conversely, in traditional hierarchical navigation systems, users have to choose from one level to another. As noted above, if this is an important category, this is not a problem, but if it is an optional category, the situation is a little different.

When a user is looking for a shirt, many optional meta data categories play a role: "Brand", "collar", "sleeve length", "fabric", "pattern", "pocket", "Discount", "Price", "rating", "popular" and so on. It is difficult to know exactly which of these categories the user is interested in (categories). There may be people who are not interested in all these categories, or just like one or two or all of them.

Designers should provide users with a range of dynamic, optional options at the same level, rather than presenting all the optional categories to the user, regardless of whether the user is interested in them. Therefore, users should be able to choose the category they like.

Conversely, as shown below the site, important categories and optional categories are not clearly separated from the area. It shows all categories (also include important categories).

Important categories should not be used as dynamic selections. (Image source: Nike)

This difference poses several problems.

First, it occupies the vertical space, pushes the other options down, and requires the user to scroll the page frequently to select an option.

Second, the dynamic selection panel is an important piece of the panel: it's powerful, but it's too resource-and messy. Each time the user selects an option, the corresponding list is refreshed. This feedback makes sense, but it doesn't make the interaction process faster. Allowing users to select important options in a traditional menu can be simpler and quicker to achieve the same effect. In fact, Nike designers have provided a menu that allows us to test this assumption in the same interface, comparing the speed and efficiency of the two interaction models.

Important categories are best implemented in traditional navigation menus. (Image source: Nike)

Mutually exclusive categories

Dynamic filter selection is necessary in the case where optional categories may be combined. If the optional categories are mutually exclusive, they should be displayed at the next level in the main navigation menu.

In the screenshot below, the Daily Express asks the user important questions at the first level-choose the topic of the news: Like "Finance", "entertainment", "lifestyle". In the optional area on the home page, users can see the latest news on this topic. Each user wants to see three or four of the latest news. For those who want to delve into specific topics, the next level of the column is shown in the next layer.

Mutually exclusive optional categories are best shown in the additional main navigation menus. (Image source: Daily Express)

The next Level menu in the image above can be considered mutually exclusive because entertainment items are usually displayed on the media such as books, movies, televisions, etc. Of course, mergers are possible, and a book can be made into a movie or a play. But do users want to see such a merger? If the user wants to, the dynamic filter selection is meaningful.

Please note that the answer to this question depends largely on the number and diversity of class objectives, with little consideration given to the type of project and the interests of specific target audiences.

For example, a user might not find a Chinese low-fat and a Christmas themed breakfast recipe. Instead, they will look for possible Chinese, possibly low-fat, or possibly Christmas themed breakfast recipes. Therefore, the optional recipe categories are generally unlikely to be merged. However, if a site has thousands of recipes, and the target users have very special preferences, it will be more helpful to give them more powerful dynamic filtering options.

Provide guaranteed dynamic filtering options for users ' specific interests in a Web site with a large and diverse content. (Image source: Food52)

Finally, consider the third set of meta data categories.

Insignificant category

The target audience does not care about the content in the unimportant category. However, these categories are not irrelevant to the overall user experience.

The two types of metadata in the article may be "word count" and "image statistics". If these categories are displayed in columns in the database, the content policy experts will detect the articles in the category and then infer which articles are too long or lack images to explain why the user left the site without reading the articles. Content policy experts will discuss these issues with designers or clients and then improve content quality. Although these categories can give designers valuable information, users do not use "word count" or "image statistics" to browse the site.

In short, irrelevant categories should not appear on the site. They need to be ignored, or they can disrupt the interface and may be confusing to the user. However, a large amount of irrelevant content can be combined as an optional category. For example, when browsing an article, the word count is an insignificant category. But the Web site shown below has accumulated so many articles that designers think it is necessary to better filter content and increase the "article length" option.

A large number of unrelated meta data type merges can become an optional category. (Image source: Time)

The sites that show recipes and costumes are appropriate to explain the subtleties and importance of precedence, because they typically require many metadata categories. But they do not explain the problems that many designers face at some point, especially when designing for a company, and the problems that designers face are more complex.

Company Product Category

Most recipes sites randomly collect recipes and leave them to the designer to categorize them. But companies often have their own internal product classification methods, which can lead to conflicting requirements.

The first important meta data category to consider is the car, you may have a depending on the size or lifestyle category, the name may be "car", "Truck", "sports car", "sedan", "Limousine" and so on. These categories are critical because each type of car serves a particular lifestyle, which is critical for every person driving the car. For example, cars are compact, inexpensive, easy to drive and dock in cities. The van has a lot of room for the family. And the sports car caters to a different way of life.

However, many car companies use their internal methods to classify their cars. BMW, as shown in the following illustration, uses a digital based classification method (1,3,5,7, etc.).

At some point, a company's classification has a good effect. (Image source: BMW)

But a classification scheme within a company can lead to usability problems. The BMW approach does make the information architecture more useful. This method is familiar to the public, according to the size of the car, the number has a logical change, more or less in line with cars, cars, luxury cars and other classifications. In this case, in addition to the company's classification method, other methods will make things separate and difficult to understand, rather than helping the user.

The next example of the internal classification scheme is not good. Opel also lists its car-like models according to its internal naming rules.

For users, internal classification is not always obvious. (Image source: Opel)

The problem is that the structure of the product line is not clear and users have to slide the product line to see all the samples, but this is not easy (this problem involves more interaction). There is no easy way for users to understand the interrelationships between products, so they have no easy way to filter their preferences.

If the internal classification method is not easy to use, it is preferable to consider a well-known external classification method.

Note Volkswagen (below) the company has its own naming and car model classification methods: "Jetta", "Volkswagen", "sharp" and so on. But the company attaches more importance to a common external classification scheme. The result is that the menu is very easy to understand and allows users to focus on a part of their interest.

Prioritizing common classification schemes makes navigation menus easy to understand. (Image source: Volkswagen)

Of course, corporate executives may not like the way their companies ' internal classifications are discarded. However, as an information architect, the responsibility is to make the content of the site easy to understand, so you have the responsibility to communicate with the senior level of the program.

Explain navigation options

Building navigation options based on user preferences is an important step in simplifying the information architecture of the Web site, but it is useless if the user does not understand the options at the first time. So take some time to think about how best to explain navigation options.

To give users the information they need, any more information has the risk of fatigue, confusing interfaces, and delaying navigation, even giving them the option to give up now.

Do not give them too much information, if the user will guess the link to point to, and then to link to the page is very disappointed, they will lose confidence in the interface, and then will leave the site.

Designers can choose three ways to interpret navigation options:

tags, labels and pictures, labels, pictures and descriptions.

Choose the right method to evaluate the label that the target audience is most familiar with.

Label

If the labels used are well-known, they are sufficient. Big picture or long description is not necessary to explain what is "jeans", "shorts", "shirt", "jacket."

Well-known items are labeled enough. (Image source: Rock revival)

Also, the use of short labels is recommended. Labels can be short, but not at the expense of the apparent ambiguity. Abbreviations and terms such as UX and BMI can work better if they are familiar to the target user. Sometimes a single term is easy to understand, but in context it may be ambiguous. Many large organizations have Web sites that have fixed horizontal navigation pointing to primary work, and contextual vertical navigation to secondary work. This can cause duplicate labels. The University of Bath (pictured below) has a label "look at" on the top of the global horizontal menu and on the left narrow vertical menu.

Large organizations with many sub departments tend to repeat labels. (Image source: Bath University)

While this may confuse users, careful design can avoid ambiguity. In the screenshot above, the menu title "Exploration Department" is a good indication, but the "research" tag below is directed at the department, not the university as a whole. Definitely, you can add "about Us" tag, and change to "about this Department".

In some menus, the number of entries for a category is displayed with a label. (Image source: BJ ' s)

These numbers are usually displayed in the dynamic filter selection panel.

In many interfaces with dynamic filtering choices, the number of items in a category is usually displayed with a value.

Although many users like to look at these numbers, designers have to think carefully about when to show them. For example, it is difficult to guess how much content a website has by looking at the home page. So, clearly showing how much content can win users, they might think "yes, this site has something I want." ”

The content that is quantified on the home page makes it easier for users to manipulate. (Image source: O ' Reilly)

Of course, if your site has no content, you may not want to disclose such a number.

Similarly, when a user browses a category and is interested in a particular subject, they will want to explore the relevant categories, even if the unrelated category contains more entries and there is only a small number of items in the category. Of course, the number displayed will slow down the browser loading speed and disturb the interface.

In some cases, the data can hinder the user. (Image source: Digistore, Ministry of Education, New Zealand)

The same applies to the dynamic filter selection panel. Does the user select a category based on the number of entries it contains? If so, the number of items displayed is meaningful. If this is not the case, the only type of feedback you should provide is to display gray or delete 0 values.

In addition, in the case of dynamic filtering selection, displaying the number of entries is useful information. Once the user selects a category, displays the number of this category.

An icon is another element that is sometimes attached to a label. When icons are made well and easy to identify, they are useful additions. Icons make it easier to distinguish between different options when there is no need to explain the user's options. In the screenshot below, I remove the icon from the menu entry. Note that the label is still enough to explain each option, and everyone knows what is "car", "rv", "Motorcycle" and "Truck".

Sometimes the label is enough, but it takes more time to identify it. (Image source Mobile.de)

Placing icons next to a label makes it easier for users to understand and distinguish between different options.

Icons make it easier for users to understand and differentiate between different options. (Image source Mobile.de)

However, individual icons can cause confusion. Even if the icon is well known, the user may not be sure what it means in a particular context.

Labels and pictures

tags and icons play a big part in what's known. But for uncommon things, images are necessary. Think about the brand name. In the following screenshot, the name of the car model is text in plain text in the label.

Understanding brand names requires more information (not just labels). (Image source: Subaru)

However, I do not know what is "Tribeca" or "Legacy". The labels are not enough to help me decide which products to explore. As shown in the following picture, labels and pictures are a better way to solve them.

Labels and pictures are a good way to explain unfamiliar terminology. (Image source: Mazda)

When to use images or icons in navigation is an interesting question. Obviously, explain a very specific project, like "13-inch Macbook Pro" or "Samsung Galaxy Note 3", nothing is better than the actual product picture. Interpreting a product category is not easy. In some menus, these categories use an icon when interpreting.

In some menus, use icons to interpret categories. (Image source: Flipkart)

In other menus, these same categories use photos of actual products to explain this category.

In some menus, use an image of the actual product to explain this category. (Image source: Target)

For product categories, icons are more appropriate than pictures. Use well-made icons to make menus appear more professional. Also, using a product to represent the product category may subconsciously raise the user's query. "Why does this particular product represent this category?" "Is this product their best?" "is the scope of the product centered on this particular project?" "If I'm not looking for this stuff, it's not a good site for me," he said. "This concern may be enhanced if the user first sees the category of goods that they see in the menu." Instead, icons can simply describe a category of products in a class.

However, the technique of the icon must meet some standard. If the icon is not painted well, it will look unprofessional. And if it's not easy to identify, it can even confuse users. So, icons are better for product categories, but if you don't have the confidence to make the icons professional and easy to identify, you'd better use pictures.

tags, pictures and descriptions

Sometimes, labels and icons are not enough to explain the product. Many service providers have complex solutions, such as banks, insurance services companies and Internet service providers, which often name their products "50+" and "active Web sites." A married couple's conversation with an agent, or a picture of a girl talking on the phone, may not be enough to explain the provider's services. For such products, a few lines of description and labels, plus a picture will be helpful to the user.

Complex products may require labels, pictures, and descriptions to understand. (Image source: NASPA)

Title and article topics are different labels, titles may need to be accompanied by pictures and descriptions, while article topics may not be needed.

Many authors recommend that you have important information for the title, and keep the title as short as possible.

A common recommendation is to keep short headings and to place important information in front of them. (Image source: BBC)

Although the title above is short and focused, this style is not suitable for every website.

The first question is whether to have a descriptive statement and how to write the description. The BBC headlines were also described, and in the picture above, I deleted them and left a lone headline. In the following illustration, I'll describe the statement recovery, and you'll notice that these statements are basically tedious and without some new information.

The descriptive statement should convey the message that the headline is not yet stated. (Image source: BBC)

If the headline is all about the key, then the description is no longer needed. Because the user after reading the title can be clicked link to the article, and then read redundant no new description of the statement only to slow reading speed.

However, it is often not good or even unwise to display headline headlines individually or to write titles in this way. If an article simply covers an event, a headline like the BBC is a good choice. But if the article has more details, the title, picture, and description will be more effective and fascinating.

The caption in the screenshot below is more appealing than the content, and the key information is divided into the following two lines. At the same time, the next picture set the tone for the article.

Titles, pictures, and descriptions are often the best way to explain the news in depth. (Photo source: World)

It's not difficult to understand what this article is about in small fragments. Use the title as the focus, use the description to explain the article, and the picture to the tone of the article, the entire fragment to not only attract users, but also convey the views of the article.

Finally, it's often necessary to think about headlines so they can be understood outside the site. After all, titles can appear in search results in other media or articles. Some authors even design formulas for this purpose.

Many authors try to write titles that can be easily understood when displayed on other websites. (Image source: Baymard Cato)

When adding information to the title, be careful not to create the sink information.

The title in the previous illustration does not provide sufficient contextual information because the site is designed for Web pages, and the multiple-column layout works in the home page, the article, and so on, not on the form. Therefore, the availability of form fields primarily adds context to the source Web site. It is not always necessary to adapt to the title of the external environment, for those who search for these titles are more eager to provide their own context.

Search engine developers understand that if the search results do not meet the needs of users, users will eventually abandon them. So they work to improve the relevance and success rate of search results, whether by adding rich fragments, pictures, previews, or simply improved algorithms-that is, adding contexts. Similarly, if this article appears in the recommended readings for other articles, this article needs to provide the necessary context. Finally, in social media, the topic of personal sharing or a brand with many fans is unlikely to cause ambiguity.

Summary

Information architecture-Content structured and tagged-is the basis for available navigation. Through structured content, designers can effectively simplify the information architecture of the Web site, in order to allow the target audience to make better choices, reduce or add options, and explain these options to minimize the user's cognitive load.

The recommendations in this article are summarized in the following two lists, namely, structured content and label items.

Structured content

the metadata type required to collect and classify navigation. Divide the metadata into important, optional, and irrelevant categories. Important categories are important for all target audiences, and optional categories are important to some people and unimportant categories are not important to the target audience. Only one important category is placed on the first level. If the category on the second level does not exceed a certain number, adding additional categories is not necessary. In addition, place the next important category one at a later level. When all the important options are in place, give the user a page that lists all the matches the user has selected. If the remaining optional categories still exceed a certain number, place these categories at the same level. If the optional categories are mutually exclusive, they are rendered at another level. If the optional categories are grouped, then the filter dynamic selection is implemented.

Label items

If the label is well-known, it is enough. Keep tabs as short and clear as possible. Displays the total number of items on the home page and on the category page. To make the selection process and options easier to understand and differentiate, consider using icons. If the label is not familiar to you, consider adding a picture. When using the icon to explain the classification, the icon to make sophisticated and easy to identify, or use the picture is better. For complex services and products, in addition to labeling, consider adding pictures and descriptions. The description should provide new information, not just a restatement of the title. At the same time, we should pay attention to add title to the content and do not produce the information of sinking.

Once the information architecture is simplified, users should be satisfied with the choice. Therefore, you need to design a navigation menu that allows the user to choose the options comfortably. The process of designing a navigation menu will be discussed in the second part of this series.

Extended reading "Information architecture 101:techniques and best Practices," Cameron Chapman, Six Revisions "classification schemes ( Donna Spencer UX Booth information architecture for News Websites, "Stijn debrouwere


A series of six articles. Designing for Mobile, part 1:information architecture, "Elaine McVicar UX Booth" The Elements of Navigation, "Petter silfver, Smashing Magazine


A Guide to simplifying and testing labels and icons. Smashing Magazine icon Packs

Source: http://daichuanqing.com/