UI: Proper Indicators for Hidden Elements

Tabs, collapsed menus, accordion forms, and the ever popular hover items such as mega menu drop-downs – progressive disclosure is a great way to cut down visual clutter while still offering the user lots of content and features.

However, there’s an inherent danger to these hidden elements: the user may fail to notice that the hidden content exists! Proper indicators for the hidden content are therefore paramount. After all, if (in the mind of the user) the content is “not there” the user may consequently assume your site doesn’t have this content and instead go to a competing site.

Whether the user thinks the content can be found on your site will be determined by their assumptions about your brand as well as how you design the hidden elements and the objects used to reveal them.

User Expectancy

User Expectancy describes whether the user assumes the hidden content can be found somewhere on your site - that is, will the user actively look for it because the content “must be here somewhere” or will she abandon early assuming your site doesn’t have the content?

On an e-commerce site most users expect to find content such as product specifications, a return policy, and shipping rates, and they will thus actively look for this content even if they can’t immediately find it.

But on the same e-commerce site content such as user reviews, extra product images, and a video tour, are all additional elements that only some e-commerce sites feature and users unfamiliar with the site are therefore much less likely to look for that content if it’s hidden away.

At the end of the day you, as a designer, have limited control over the user’s expectations – it’s largely determined by external factors. Prior web experience (mainly on other sites than yours) combined with the user’s pre-site knowledge of your brand are the two major factors in this equation.

Now, if the user won’t actively scout your pages for certain content that you want them to find, then you have to show them that it’s there. This is where trigger indicators come in handy.

Trigger Indicators

Trigger indicators describe any elements that indicate the existence of an interactive object that reveals hidden content – typically a link or button you can click to reveal a set of options or expand a text. Luckily this is something you as a UI designer have complete control over.

(If you’re not a UI designer, read up on the difference between UI and UX.)

Let’s go over five different types of trigger indicators at your disposal.

1) Direction & Space

Indicators that dictate a direction are often used to point out hidden content. The directional indicator has a close relation to the user’s sense of virtual space as it describes a mental concept of position and movement within a space.

Furthermore a directional indicator is often also an icon and thus make any label in close proximity seem more clickable.

Fox’s main navigation menu also utilize directional indicators. The first two menu options trigger a mega menu which is indicated by the small triangles pointing downwards, whereas the last item does not reveal any hidden content and therefore has no such indication.

It seems like a tiny detail, and visually it is, but for the conceptual understanding of the page it is hugely important.

Closely related to directional indicators are spatial indicators. With spatial indicators, however, you highlight the user’s current selection or position, and by doing so you also indicate that there’s other content currently hidden.

One example is the indication of the current position in a carrousel which shows you where you are, where you have been, and where you are going next. Another common example of a spatial indicator is highlighting the current page in a navigational menu. Scrollbars also fall into this category.

2) Metaphor

With the use of a content metaphor you can also indicate further content. Such a metaphor could be a book or a catalog. By tying online content to the metaphor of a physical item (in this case a book) the content inherits the conceptual features of the mimicked object. For a book or a magazine it could be the concept of multiple pages that are consumed in a linear fashion.

Metaphors can be a very effective way of setting user expectations but you must be very careful in adopting the features of the original object in a consistent manner, which in some cases may limit the design and interactions that can be implemented.

3) Icons

Icons can be used to make the trigger itself stand out in the overall page layout, as Macy’s does with their ‘Reviews’ tab that have star icons.

Icons and other visuals draw a lot of attention and can make otherwise plain-text triggers more distinguishable. Although this of course also runs the risk of demanding more attention that the element should get.

4) Gradient Fade

Another way to indicate hidden content is not by altering the visual appearance of the trigger itself but rather changing the appearance of the hidden content. This can be done with a gradient fade, a technique utilized both on Amazon’s product descriptions in conjunction with the classical “Read more..” link (the trigger).

Gradient fades like this inform the user that there’s more content available and helps draw attention to the trigger element.

5) Temporary Display

Strategically revealing content for a limited duration of time is another way to inform the user that there’s more content available. For example, a full production description could be shown for a short while when the page first loads and then be hidden later with an animation. This can help indicate the position of the trigger element although the technique relies entirely on the user paying attention at the right moment.

Another example of temporary display is a carousel where the content rotates by itself. This not only lets the user see that there’s more content, but it also displays the content in its entirety to the user – although it has the drawback of stealing focus from other parts of the page due to the repeated animations.

Implementing Trigger Indicators in Practice

Knowing these trigger indicator techniques isn’t enough in itself. How many and to which degree you need to implement them is even more important as each of them introduce a certain amount of noise and clutter to your overall interface layout.

Therefore we propose the following process when implementing trigger indicators in practice:

1. Determine the importance of the hidden content. How important is it for page/site conversion that the user discovers this content? Is it more so for a specific type of user?
2. How often is the hidden content currently used? Use your web statistics to gauge what percentage of your users are currently discovering your hidden content.
3. Determine the level of user expectancy for the hidden content. You can use methods such as card sorting, word association and simple surveys to get these insights, e.g. what information / features do you expect there to be on a shoe product page? What information/features did you see on the specific product page?
4. What you’ve found in the three first steps determines whether you need trigger indicators and if so, if you need a trigger indicator that demands attention (such as animations) or whether you can use more visually simple techniques (such as a gradient fade).

For the step #1-3 it can be particularly beneficial to distinguish between existing users and first time visitors as the difference between them can help you understand the pre-determined user expectancy.

If you by step #4 have established that the hidden content is important to conversion (#1), but underperforms in discovery (#2) and is of low user expectancy (#3) then it might not be sufficient to simply alter the visual appearance of your trigger element (#4). Maybe then, the content shouldn’t be in a hidden element in the first place.

In most cases though, progressive disclosure is a great way to simplify your design without removing content – just make sure you have proper trigger indicators that match the degree of user expectancy (or lack thereof).