Noted:’s focus management

Justin Ternullo
Aug 29, 2017 · 2 min read
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.


The easy way to compare and buy insurance.

Justin Ternullo

Written by

insurance via product via design via dance via magic


The easy way to compare and buy insurance.

More From Medium

Also tagged UI

Also tagged UI

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade