:Hover

This is how the mouse pointer looks like hovering over a clickable item like linked text. A normal mouse pointer automatically changes into this finger pointer. This user interface (UI) design seems to be universal and can be found in OS X, Microsoft Windows, many Linux distributions, etc.

a:hover

By using the CSS :hover selector you can manipulate text effects when the mouse pointer hovers over linked text. But.

In pursuing a minimalist UI on DisplayBlog, I’m thinking, “Are additional visual hover transitions necessary?” Prior to today, I used:

-webkit-transition: ease-in-out;

When the mouse pointer hovered over linkable texts, the grey underline slowly transitioned to red, and back when the mouse pointer was no longer hovering. When I first discovered this transition, I thought it was so cool. But now I’m thinking: “Is it necessary?”

OS UI designers have already thought of an effective method of showing visual cues to when the mouse pointer is hovering over clickable elements on webpages. From a minimalist point of view, why add an additional visual cue to an already universally understood and accepted user experience (UX)? There really is no reason of necessity.

One concern I did have before pulling the plug on textual hover transitions was:

Will the mouse pointer transition be enough of a visual indication that you are now hovering over clickable text?

John Gruber’s Daring Fireball uses a variation of:

a:hover { background-color: grey; color: lighter grey }

The transition on Daring Fireball changes the background color and brightens the text. Subtle but effective. Gruber has a minimalist sensibility when it comes to UI design, more so than many minimalism-touting websites. Most websites, like Daring Fireball, have unmistakable visual transitions when hovering over linked text. But is it necessary?

I am putting forth the idea that it is not, within a minimalistic UI design approach. Once you get accustomed to more, less can be uncomfortable. Taking away that additional visual cue will force the reader to be more visually sensitive to the mouse cursor, but because we are peripherally but closely following the mouse cursor when we’re moving it I don’t foresee this will become a major UX issue. So, in the quest toward minimalism I’ve removed hover visual transitions from DisplayBlog.