Geof Harries

Today while putting the final touches on a website interface design, I suddenly noticed that something didn't feel right. At first I couldn't pinpoint the issue, but after stepping back, staring at the screen and clicking around on the page, it became perfectly clear.In one of the most important areas of the page, the links had no visual feedback, meaning that if you hovered over the links with your cursor, there was no way to tell, except for the tiny hand popping up, what was the intended behaviour.

For this design, links in the main navigation, body, sidebar and footer are either underlined or have clear visual feedback, such as a change in background colour, to indicate that they'll do something. Not so with this set of links. Therein lay the gap.

The solution I came up with was, as it turns out, inspired by The Apple Store: displaying an underline when you hover over the link. Move the cursor away and the underline disappears. Although the underline isn't permanent, in the future you will always treat that area of the page as a series of links. Like a miniscule science fiction film, the system educates you about itself.

I recognize this aspect is small, and most folks would not be able to tell, or even care...but I do, and so does Apple. In the screenshot below, the green bordered boxes indicate areas of the Apple Store page where the designers have chosen to provide visual feedback, and they do so in all sorts of different and intelligent ways.

Paying attention to this level of minute detail is important because it makes people using the website feel empowered. They know what they're getting themselves into, which in turn, builds confidence and trust.