User Experience Design: Guide users to find hidden content

Article Description: Directs the user to discover hidden content through reasonable indication elements.

The weather is very good, lukewarm, little sleepy. Get rid of this article on the roof of the son hair in a daze. If any of you think this icon is a bit scary, please feel free to spit in the comments, or just talk to me on Twitter.

Previously updated two chapters of the iOS Wow experience, respectively, on the application context and iOS technical characteristics of the two topics. Change your mind today, put down mobile apps, back to the web end, walk a short text of a small text, about the hidden content and the corresponding hint elements to use the way blah blah. Walk on.

tags (tab), Drop-down menu, accordion-style folding control ... Progressive Rendering (progressive disclosure) interaction can effectively help us reduce the visual complexity of the interface, while displaying as many content as possible to the user.

But everything is good and bad, and visually invisible things are really likely to be overlooked by users. Therefore, to hide the interface elements is not finished, we must in some appropriate way to the user to be prompted to make them aware of the existence of hidden elements.

User's expectations

What is expected here is the assumption and anticipation of the user's ability to find hidden elements in the site. If the user thinks that some content must be hidden somewhere, they will actively search, on the contrary, they may be affected by some factors, too early to determine that the content does not exist.

In the shopping site, most users think they can and should get the details of the goods, exchange policy, freight and other information. Under this expected effect, even if the content is not straightforward to present, they will actively seek.

On the other hand, such as user reviews, additional product picture sets, video demos and other add-ons are not standard for all shopping sites, and if they are not visible by default, it usually doesn't take much time to find people who are unfamiliar with the site because, in their expectation, These things may not exist.

The user's expectations depend on their long-standing perceptions and behavioral habits. As designers, if you are not sure that users will actively and proactively look for hidden elements, we need to use visual trigger instructions to guide them to get more content.

Trigger indicator

Any interface element that hints at the presence of hidden content can be referred to as triggering instructions. They are broadly grouped into five categories:

1. Direction and Space

Interface elements with directivity can often be used to indicate hidden content. The visual representation of direction indicator (directional indicator) can accurately depict the concept of position and movement in virtual space, which conforms to the user's intuition.

In addition, the directional indicator itself is usually in the form of an icon, which also makes the subsequent text headers more clickable to the user, further enhancing the likelihood of hidden content being discovered.

In Fox's main flight, the first two menu items will each trigger a "big-data-volume" launch (Mega menus, to catch up with the already established word I really do not want to translate into Chinese-the translator C7210 note), which as a trigger is to indicate the next triangle icon behind the title text. Such elements are visually small, but they are critical to the user's ability to understand how the page interacts.

Spatial indicators (indicators) have a close correlation with directional directions. In this pattern, there is usually a "highlighted" interface element that prompts the user for the current position or choice, while other common-level navigation elements suggest that more content can be found in the current area.

Pagination controls are a typical example of a model that lets users know exactly how much they've seen, what they're in, and how much more to look at next. In addition, the "current" status identification in the navigation menu, as well as the scroll bars of the browser, are essentially space-directed.

2. Metaphor

Metaphor is a very effective way of guiding. For example, the design of the user interface as a book or magazine style, in interactive mode also simulates the real physical effect. By using this highly metaphorical representation to host online content, users will naturally be able to browse through the "back" of the current visual area, just as they read in the real world.

The metaphorical way really fits the user's intuition and anticipation; As designers, we must ensure that the visual and physical properties of real objects are accurately reflected by the appearance and interaction of the interface. However, due to the objective conditions such as technology, the behavior of real objects may not be able to be accurately restored to the Web page, we need to choose the design of the time to consider this issue.

3. Icon

An icon can cause a trigger to indicate that the element is rendered in a relatively prominent way throughout the page, such as the star icon used by Macy in the "Reviews" tab.

Icons a kind of visual elements can make plain boring text content with more visibility, and then guide users to find nearby hidden elements. However, such practices also have a certain risk, sometimes they attract too much attention, so that users ignore other important information.

4. Gradient Fade

We can also indicate more hidden content by changing the way the content itself looks, without having to use a visual interface element such as an icon to trigger the instruction. The most typical approach is to set the gradient fade effect for content text, which is used in Amazon's Product description page.

Faded text can be very effective in attracting users ' attention and prompting them to explore more content. This guidance can be further enhanced with visual trigger indicators such as "show more" text links and associated icons.

5. Brief presentation

Short presentation means that we can strategically make content remain visible for a period of time. For example, in the Product Details page of a shopping site, when the page completes loading, the complete description of the product can remain rendered for a short period of time, then it is animated, and a visual trigger element is provided where the content eventually disappears, so that the user knows what is hidden. Where to find the content when they need to get the information. Of course, the implementation of this model has an important premise, that is, users must be aware of the content of the disappearance of the process and the corresponding animation effect.

Another typical example of a brief presentation is the carousel. In this pattern, multiple items are presented in turn for a period of time, not only to enable users to understand the existence of more content, but more importantly, they will be "active" to appear, users do not have to do any interaction to obtain complete information.

Best practices

We have a general idea of the five types of trigger instructions. It's a little more than that, and more importantly, we must know how and how to use these triggering instructions in actual work, because this kind of element will bring a certain visual noise to the interface as a whole, and make the whole interface become quite messy, not only can not effectively play a hint, Instead, it can affect user browsing for other content and features. I suggest that in practice, you should first consider the following four questions:

1. Determine how important the hidden content is, and how much they can do to improve the conversion rate, and whether they are only meaningful to a particular type of user.
2. Determine how often these content is browsed, and use the statistics tool to see the percentage of users who can browse to those content.
3. To determine the user's expectations of hidden content, use the research to find out what the user most wanted in a particular interface.
4. Summarize the previous three analysis results to determine if it is necessary to use the "Hide content + Trigger indicator" pattern. If so, what visual representation of the elements is more appropriate, and the carousel animation that attracts more attention? Or is it a relatively weak visual gradient fade?

If you are sure that the hidden content is really important (1), but the current amount of browsing is low (2) and the user's expectations do not contain the content (3), then you should consider adjusting the trigger indicator elements to see if they can attract more attention from the user. , or the content should not be hidden at all.