+

James Wanless

this is where I write

Ridiculous rollovers add nothing

Sometimes a nifty CSS or Javascript trick to provide contextual information or a useful visual cue to your users adds a real touch.  The web is full of good examples.  Below are not three of them.  Sure, Web Designer Wall has some good tutorials, the requisite colourful background, drop shadows and is a nice looking visual piece of art.  It seems to suffer from a general lack of focus that often happens (at least for me) when everything is colourful.  However, that’s not what I’m driving at here and I’m not picking on this site – it’s just the most recent and blatant example that caught my eye.

The main navigation tabs at the top take site visitors to three main pages, home, about, and a jobs board.  Do I really need a rollover effect to tell me that:

Clicking home will ‘go to home’ …

home-tab

Or clicking about will let me ‘check them out’ …

about-tab

Or, finally, that the jobs link will actually take me to a ‘job board’ …

jobs-tab

If you’re going to bother to code rollovers, whether through CSS pseudo elements or with JS (or both), then make them worthwhile, providing something of value to your users.  Contextual information to clarify something, definition of a term on hover, whatever …. just something more than a repetition of the link in almost exactly the same wording.

Comments

I agree with you insofar as these are pretty redundant rollover events, but their purpose is not necessarily to add functionality, but to show off their design skills a bit. To this end, they do add something – the visitor knows that the site designer (Nick La I assume) can do fancy things using CSS and (I’m guessing) javascript.

James says:

Thanks Patrick. I know ‘why’ they are there, but there are many ways to demonstrate the skill with a useful feature instead of a throwaway. He’s already using them to better effect on the contact icon and feed links and doing something like displaying a search text box on mouseover can help keep an interface clean.

Top