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 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 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.
Let’s go over five different types of trigger indicators at your disposal.
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.
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.
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.
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.
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.
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:
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).
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
some absolutely great tips. I’ve always thought of Amazon’s design somewhat bland, but that gradient effect is a neat way of indicating more information for sure – thanks for sharing!
Hi Luke W, glad you liked it.
I find Amazons approach to their product page structure interesting as they have some of the longest product pages in the industry with all the product page elements always being displayed, but with some of the content for each element typically hidden, shortened or truncated (product descriptions, technical details, additional reviews, etc.). They rarely have entire product page elements that are hidden elements.
Great UI tips. I wonder if a users device plays a role in determining hidden content design. Does your target market using tablets expect certain things from your website and other things when they are on their smart phone or laptop?
Hi Richard, great reflection. For step #1-3 also considering variations for type of device would be great.
We’re currently conducting a large usability study on mobile device, while still ongoing, I’ll be sure to do a followup article if we have any findings related to mobile devices and hidden elements.
Inspiring Tips…Thanks for sharing it.
One of the things I’ve noticed on some sites is using the wrong metaphor to communicate the direction of a hidden panel. If the panel is an accordion, then the arrow shouldn’t point to the right (since that suggests going to another page.) Instead, the arrow should point downward. This is a great article which points out the correct usage.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com