Data Input Medium Priority 54% Adoption 1 Seconds Saved
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.
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.
Highlight the Active Field has an 54% adoption rate among our benchmark group.
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.
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.