Hiding content and navigational elements on web pages is an increasing trend, fueled in part by the goal of displaying minimal content and the constraints of producing a single design for mobile and desktop. While it is a good practice to defer secondary content (at least on mobile) and limit visual clutter in order to minimize cognitive load, it is just as important—if not more so—to ensure that any hidden content appears only once it is certain that the user intends to expose it.

In this article we won’t discuss whether it’s appropriate to hide something in the first place. Neither will we cover whether the design communicates clearly the affordance to unhide the hidden stuff. Here, we focus purely on the mechanics of how this unhiding happens.

(Note: because we're analyzing time-dependent user experience phenomena, the illustrations are video clips. Depending on which browser you use, you may have to hover over the still images to expose the video player controls.)

In This Article:

Examples of Hidden Content

The most common example of hidden page content is the mega menu. The mega menu also best illustrates the common problem of hidden content: it often acts as if it had a mind of its own, and “decides” to appear or disappear inappropriately and unexpectedly. There is currently no web standard that dictates how a hidden submenu should be exposed. Thus, users are forced to experiment with hover versus click during their first experience with a site. If the menu is implemented well, this fleeting question does not pose a serious usability issue. Problems arise once the mega menu opens unintentionally (from the user’s perspective) upon hover, when the user merely glides the mouse across the triggering item, in the attempt to get to another area of page content.

The drop-down mega menu on the Chairish website opens immediately upon hover, even when the mouse is merely passing over the main-menu item without stopping. The exposed menu is so large that it can cover the entire banner area on the homepage. This can cause strain on those users attempting to move the cursor from the header area of the site toward the hero banner (for instance, because they have just used the browser’s URL bar or buttons and now they want to move down to click the main call to action). These users must now work harder to collapse the menu and get to the content that they need.

Tooltips, expanding ads, and calls to action or information boxes that appear over list items (such as quick-view boxes on thumbnails from product-listing pages) are other examples of common elements with hover interactions that can prove annoying to users if triggered too sensitively.

Recognizing Intent

How can designers know for sure that the user really wants to expose the hidden content?

The clearest indication of intent to expose hidden content (or really, to take any action) is a click or tap on an element. Elements relying on hover to trigger events, in contrast, require more consideration when determining user intent. Revealing hidden content too quickly on mouseover can result in accidental activations and creates a jarring user experience. On the other hand, when users do intend to expose hidden content, revealing content too slowly makes the system appear sluggish, and can make people lose patience and abandon the site. Additionally, due to the slow response time and lack of immediate feedback, users may assume that the element does not actually trigger anything. Users are like Goldilocks: in hover interactions they expect the timing to be just right.

For hover interactions, the best cue for determining user intent is that the user’s mouse actually stops on the element that will trigger the event. The longer the stop, the stronger the indication of intent. If the mouse cursor is still in motion, intent to activate hidden content cannot be assumed because the mouseover could be part of the cursor’s path to another element, or merely a motion made while consuming content. If the hidden content displaces or covers other elements on the page, designers need to be extra careful and require a longer mouse stop over the triggering element before exposing the hidden content. In other words, the more disruptive the content displayed, the more certain designers need to be of user’s intent before triggering the animation. (Note: the visual feedback that an element is interactive should be displayed immediately, however, even if the user does not pause the mouse on that element. That type of feedback ensures target discoverability, but it should not be intrusive and should not require any interaction cost to dismiss it.)

Some of the mouse-stop time can actually be absorbed by the animation itself: a longer transition animation that starts once the user moves the mouse on top of the triggering element but progresses relatively slowly and resets when the mouse leaves the target area can reduce the user frustration and disorientation. A successful, familiar example is the display of an alternate product image on a product-listing page: it’s not disruptive, it is initiated soon after the mouse moves on top of the target, yet it can take some time, and it stops if the mouse moves away quickly.

When users hover over product images on a browse page of the Herschel website, an alternate image of the product is displayed. This alternate image replaces the default via a fade animation, which begins after the cursor has remained within the target area for a short period. While the animation does not necessarily wait until the cursor has completely stopped, the timing is long enough to determine intent when combined with the slow transition animation and does not cause user annoyance.

Once the content is exposed, if the mouse cursor leaves the target area of a hover-activated element, there should be a slight delay before hiding the content to ensure that the mouseout was intentional and the user does not intend to return to the content. Ignoring this recommendation leads to the diagonal problem in mega menus, when the path to content in the dropdown menu causes the cursor to leave the hover target area. In such situations, the continuous motion of the mouse and reentry into the active target area within a reasonable amount of time communicates the user’s intent to remain within the exposed content. Users should not be forced to stay within the lines. (Another solution would be to check whether the mouse remains within the triangular area from the starting mouse position and the top and bottom points of the submenu. Tog first invented this solution for Apple menus back in 1986, and discusses it in his Fitts' Law interaction design quiz, in question 6. A breakdown of Amazon's use of this triangle principle written by Ben Kamens is another good example of this solution in practice. This solution, focusing on cursor position and determining whether the mouse could feasibly be moving toward a related target, allows for longer time delays before closing a menu to account for those users who do not possess lightning-speed mouse skills.)

The left navigation with drawer-style submenu on the LA Times website is a perfect example of the diagonal problem that can occur with hover-activated menus. When attempting to move the mouse cursor from the Entertainment top-level menu item to a subitem in the Sections menu, the path of the cursor momentarily leaves the target area of Entertainment and passes over Sports, which triggers the submenu to change to display the Sports subitems instead.

Timing Guidelines

When exposing hidden elements on a web page, the speed of the animation must be fine-tuned so users feel in control of the interface. Visual feedback that an element is interactive (via a change in background color, text color, or style) must appear within 0.1 seconds to maintain the feeling of instantaneous response and communicate to the user that the element will trigger some sort of event upon continued hover or click. Then, the user’s intent to expose any corresponding hidden content can be assumed either immediately upon click or tap, or after the mouse cursor paused movement and remained in the target area for around 0.3–0.5 seconds, at which time the hidden content can safely be animated onto the page. Only if the user has clicked or tapped outside of the target area, or the mouse cursor has left the target area and exposed content for longer than 0.5 seconds, can the intent to collapse the exposed content be determined.

For click and tap interactions, these timing guidelines are quite simple:

  1. On click or tap, display visual feedback and begin exposing hidden content within 0.1 seconds.
  2. Keep displaying the exposed content until the user clicks or taps outside of the exposed content area.

For hover interactions, the timing guidelines for speed of visual feedback and exposing hidden elements must be broken down into more steps:

  1. Mouse cursor enters target area: display visual feedback within 0.1 seconds.
  2. Wait 0.3–0.5 seconds.
  3. If cursor remains stopped within target area, display corresponding hidden content within 0.1 seconds.
  4. Keep displaying the exposed content element until the cursor has left the triggering target area or the exposed content for longer than 0.5 seconds.

A few hundred milliseconds may seem insignificant, but they are critical unless you plan on creating the next Minesweeper. If, instead, you aim for smooth hover interactions, getting the timing right to the tenth of a second can save users effort (and frustration) and create a frictionless user experience.