Highlight the Active Field - Spiralyze

Highlight the Active Field

Data Input Medium Priority 54% Adoption 1 Seconds Saved

Highlight the field currently selected by the user – to help them keep their place.
Conversion Opportunity 0.1%

Highlighting the active field keeps the user focused on completing the checkout task, and helps them recover if they get distracted. When a user has selected a field, it is helpful to emphasize that it is the field they are now typing in.

If the user looks away from the screen - maybe they're pet kitten was doing something to adorable to ignore - they can look back without losing their place. They save time and energy they would spend reorienting themselves. Plus, it helps users know what field their typing in, and they don't enter half their address into the name field before noticing the mistake.

It's a subtle change that can make the checkout feel smoother for many users.

In this example, Ikea highlights the active fields with a blue border, returning it to grey when the field is no longer being used.

Usage

The most common implementation is to darken and thicken the border around the field. Some sites highlight the field by adding a shadow effect to it when selected. This simple state change is all that is needed to highlight the field and help the user stay focused - you don't need to put a gif of a dancing monkey next the active field, just make sure it stands out from the rest of the form.

The only way to really get it wrong is to not highlight the field at all. Having a longer or more cluttered checkout page makes this a progressively worse issue. The absence of a field highlight is even more troublesome on an already disorganized or cluttered page, since there are even more elements that draw the user's eye away from the active form, and thus progress in the checkout.

Walmart gives the active field a pleasant and eye-catching blue glow.

Kohl's does not highlight the active field, and the clutter on their page exacerbates the issue.

Adoption

0
20%
40%
60%
80%
100%

Highlight the Active Field has an 54% adoption rate among our benchmark group.

Best Practices

No Crazy Wacky Highlights

Follow convention, keep highlights to a simple emboldened border or shadow/glow effect. Nothing crazy, like strobe lights and a dancing gorilla next to the active field.

Emphasize on Cluttered Pages

The more cluttered a page is with ads and forms and whatnot, the easier it is to get lost on. If a page looks visually busy, put a little more emphasis on your field highlights.

Examples

Good

Walmart Example

Walmart uses both an inside shadow effect and a blue-ish border for the active field. Nice and visible.

Etsy Example

Etsy implements a subtle blue border around the active field.

Bad

Kohl's Example

Kohls makes it easy to get lost on the page and lose track of progress by not highlighting the active field.