Noted:’s focus management

A not-so-subtle overlay appears to provide contrast upon hovering a dropdown or mega-menu.


A quick pat on the back for’s design team. They use several simple tactics to keep user’s focused on the task at hand while shopping amidst thousands of attention-grabbing pet products.

Darkening overlay to keep users’ eyes on the task at hand.

What works

Not-so-subtle overlay
The designers are using a darkened overlay, triggered on hover, to provide contrast to their navigation drop downs mega-menus.

Simple, effective type hierarchy for baseline category browsing.

Type hierarchy
In their mega-menus, the designers managed to balance whitespace with a huge amount of content. Not a bad balance of whitespace either. ;)

What doesn’t work

The fading animation for the darkened overlay can sometimes feel sluggish. This draws your attention to the very thing meant to keep you focused on ––something else. 😳

About this series

In our Noted series, we take a second to record some of the many observations we make as a product design team. Things that inspire us, things that make our eyes hurt, and things that affirm experiences we’ve had along the way.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.