Noted: Chewy.com’s focus management

Justin Ternullo
Policygenius
Published in
2 min readAug 29, 2017
A not-so-subtle overlay appears to provide contrast upon hovering a dropdown or mega-menu.

Noted

A quick pat on the back for Chewy.com’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.

--

--

Justin Ternullo
Policygenius

insurance via product via design via dance via magic