Guide the user to discover hidden content through rational indication elements

The weather is good, cold, hot, and sleepy. If you get rid of this article, go to the top of the room and get in a daze. If you think the icon is a little scary today, you are welcome to comment on it, or you can directly read it on Weibo.

Two consecutive chapters of the iOS Wow experience were updated: application context and iOS technical features. Let's change your mind today, let go of the mobile app mess, and return to the Web end. Let's take a look at the text and a short translation, and use the following content and corresponding prompt elements to use bLH blah. Walking.

Tab, drop-down menu, Accordion style folding control... the progressive presentation (progressive disclosure) interaction method can effectively help us reduce the visual complexity of the interface and display as much content as possible to users.

However, everything has both advantages and disadvantages. Visually invisible things may be ignored by users. Therefore, it is not enough to hide the interface elements. We must prompt users in some proper ways to make them aware of the existence of the hidden elements.

　User expectations

The expectation here refers to the assumptions and predictions made by users about whether they can find hidden elements on the site. If users think that some content must be hidden somewhere, they will take the initiative to look for it; on the contrary, they may also be affected by some factors, early identification of those content does not exist.

On shopping websites, most users think they can and should obtain information about the product details, return policy, and freight. Under this expectation, even if the content is not directly presented, they will take the initiative to look for it.

On the other hand, additional content such as user reviews, additional product image sets, and video demos are not standard for all shopping websites. If they are invisible by default, users who are not familiar with the site usually do not spend much time searching, because the content may not exist as expected.

Users' expectations depend on their long-standing cognition and behavioral habits. As a designer, if we cannot ensure that users are actively looking for hidden elements from the subjective perspective, we need to use visual trigger instructions to guide them to get more content.

　　Trigger instructions

Any interface element that prompts the existence of hidden content can be called a trigger indicator. They are roughly divided into five categories:

　1. Direction and Space

Interface elements with directionality can be used to indicate hidden content. The visual representation of direal Al indicator can accurately depict the concept of location and movement in the virtual space, which is consistent with the user's intuition.

　　

 

In addition, the direction indicator itself usually exists in the form of an image, which makes the subsequent text titles more clickable in the user's view, further enhancing the possibility of hidden content being discovered.

　　

 

In the main navigation of Fox, the first two menu items will trigger an expansion of the "Big Data menu" (mega menu, I really don't want to translate it into Chinese-translator C7210 note). The trigger indicator is the bottom triangle icon behind the title text. These elements are visually tiny, but they are crucial for users to understand the way pages interact correctly.

Spatial indicators are closely related to direction indicators. In this mode, there is usually a "highlighted" interface element to remind the user of the current location or the selected, other navigation elements in the normal state at the same level imply that more content in the current region can be found.

　　

 

The paging control is a typical example. This mode allows users to easily know how much content they have read, where they are currently, and how many things are available next. In addition, the "current" status identifier in the navigation menu and the browser's scroll bar are essentially space indications.

　2. Metaphor

Metaphor is a very effective guiding method. For example, you can design a user interface as a book or magazine style, and simulate real physical effects in interactive mode. By carrying online content in this highly-metaphorical form, users can naturally browse things that are "behind" in the current visible area, just like reading a book in reality.

　　

 

As a designer, we must ensure that the appearance and interaction of the anthropomorphic interface can accurately reflect the visual and physical characteristics of real objects. However, due to technical and other objective conditions, the behavior patterns of real objects may not be accurately restored to webpages, we need to consider this issue when selecting a design scheme.

　　3. icon

The trigger indicator element is displayed in a relatively prominent manner throughout the page, for example, the star icon used by Macy in the "Reviews" tab.

　　

 

Visual elements such as icons can make plain and boring text content more recognizable, and then guide users to discover hidden elements nearby. However, such practices also pose some risks. Sometimes they attract too much attention, so that users can ignore other important information.

　　4. Gradient fading

We can also indicate more hidden content by changing the content's own appearance, without using visual interface elements like icons as a trigger indicator. The most typical method is to set the gradient fading effect for the content text, which is used on the Amazon product description page.

　　

 

Fading text can effectively attract users' attention and encourage them to explore more content. With visual trigger indicator elements, such as "Show More" text links and related icons, this guiding effect will be further enhanced.

　5. short presentation

Short presentation means that we can strategically make the content visible within a period of time. For example, on the product details page of a shopping website, after the page is loaded, the complete product description can be displayed in a short period of time, and then collapsed through animation, and provide a visual trigger indicator element at the location where the content finally disappears, so that users can clearly understand what is hidden and when they need to obtain relevant information, where can I find the content. Of course, there is an important premise in the implementation of this mode, that is, the user must pay attention to the process of content disappearance and the corresponding animation effect.

Another typical example of short presentation is carousel. In this mode, multiple contents are displayed for a period of time in sequence. This not only allows users to learn more about the existence of content, but more importantly, they are displayed proactively, you can obtain complete information without performing any interactive operations.

　　

 

　Best practices

We have a general understanding of the five types of trigger instructions. This is not the case. More importantly, we must know how and how to use the trigger instructions in actual work, this type of elements will bring a certain amount of visual noise to the interface as a whole. Otherwise, it will make the interface quite messy, not only cannot it effectively serve as a prompt, however, this will affect users' browsing and usage of other content and functions. In practice, I suggest you consider the following four aspects:

Determine the importance of hidden content, determine how much they can play a role in improving the conversion rate, and whether they are only meaningful to a specific type of users.

Determine the frequency at which the content is browsed and use statistical tools to view the percentage of users who can browse the content.

Determine users' expectations for hidden content, and use research to find out what information the user wants to obtain on a specific interface.

Summarize the analysis results of the first three aspects to determine whether it is necessary to use the "hidden content + trigger indication" mode. If it is necessary, what kind of visual representation of the indicator element is more appropriate; what kind of rotation animation will attract more attention? Or does the gradient fade when the visual effect is relatively weak?

If you are sure that the hidden content is really important (1), but the current page views are very low (2), and the user's expectation does not include the content (3 ), then you should consider adjusting the trigger indicator elements to see if they can attract more attention from users, or whether the content should not be hidden at all.

This site compiled original articles. If you need to reprint it, please note: This article is from Be For Web

Original English:

Http://baymard.com/blog/trigger-indicators

Translator information: c7210-user experience design and front-end players, now working in UED