usability of rollover buttons

16 Mar 2011 - 10:12am
3 years ago
13 replies
2839 reads
janasedivy
2008

Hi there,

Is anyone out there aware of any research that looks into the usability of rollover states on clickable buttons/tabs/images?

The google searches that I've been finding mostly just take it as a given that rollovers are better.  I'm just wondering if there is any evidence to support/discredit this?

Any pointers would be appreciated.

- Jana

Comments

16 Mar 2011 - 11:48am
Josh B Williams
2010

Jakob Nielsen had a few guidelines for hover effects on links. This article [1] is from 2004. He says to use hover effects when a link is a less than a perceived affordance. You could argue that an image, as a link, would not be perceived as an affordance.

[1] http://www.useit.com/alertbox/20040510.html

16 Mar 2011 - 3:01pm
holger_maassen
2010

Your question is very general - Can you specify what you mean - In what context?

16 Mar 2011 - 9:39pm
janasedivy
2008

Hi Holger,

I guess I kept the question general because I meant it generally.  Say you wanted to pursuade someone one way or the other that the benefits of providing rollover states outweighs the hassle of implementing them, or vice versa, that they are shiny and nice, but are not worth the effort.  Are there any "hard" arguments you could have on either side?

I have found several places that have "guidelines" - but they all start from the premise that rollover buttons are desirable

http://www.erinlynnyoung.com/285/usability-rollover-hover-interactions/

http://www.alistapart.com/articles/rollovers/

http://www.davidjrush.com/blog/2009/01/css-rollover-button/

http://inspectelement.com/tutorials/how-to-design-buttons-to-help-improve-usability/

 

http://developer.yahoo.com/ypatterns/richinteraction/invitation/

It seems like the sort of thing that someone in the CHI community might have done at some point - rigged up an eye-tracker or something and measured clicking reaction time to measure if there was a difference between UIs with rollover states and those without.

 

This is partly motivated by the observation that some of native MacOS UIs *don't* use rollovers (although MSOffice for Mac does).  I'm wondering if there might be a fact-based reason for this change or if this might be part of a updated brand identity.  I've also tried to find something specifically about the lack of rollovers in Mac but haven't found anything.

 

Does this answer your question?

 

Thanks for your thoughts!

- Jana

21 Mar 2011 - 2:57pm
CommandZed
2011

Context does become important when asking this question because a "rollover" or focus state on a mobile device may be approached differently than on a desktop or PC experience. As mentioned, touch interaction brings another level to what states are needed.

 

It sounds like you are asking for the PC, desktop or web context, ie there is a mouse involved.

17 Mar 2011 - 12:14am
Sridhar
2010

Rollovers are important when you have flat buttons and the rollover indicates that the item under the mouse is interactive.

17 Mar 2011 - 2:26am
holger_maassen
2010

Hi Jana,

 

Sorry I have no own or other studies on that ...   -  I think you have already mentioned a few of good articles about that topic ...

But my my general quick statement is, Rollover effects not only help styling but they also help usability - I think we agree on this point. It's matter of "don't make me think"

Why is that? A good rollover effect will tell a user, especially unexperienced users,

when they have a link under focus, and which link they have under focus.

In the carbon world / offline world we have the opportunity to touch something proving it's touchable or not - but in the online and software world it's useful to have any feedback that tells me "hey I am touchable"

for example - take a second look at your link "http://www.erinlynnyoung.com/285/usability-rollover-hover-interactions/" ...

in the right column you find various hyperlinks with rollover effects and without ...

... search button

... RSS feed button

... headline "Tweet, Tweet"  ( Headline "Browse by Category same appearance but no link)

... various text links

 

 

17 Mar 2011 - 2:20pm
bmeunier
2007

Of course, you need to think about touch devices where buttons don't have rollover. You want to approach rollover as a better experience, not a better usability.

18 Mar 2011 - 3:39am
holger_maassen
2010

Hi BenoƮt,

You can use rollover effects within touchscreens - I already did this several times for terminals, urban UIs, tables and so on.

There are various ways to do this - by "easy" CSS events ( the standard onmouseover event or an onclick event) but of course also if you use silverlight or flash.

By the way my HP offers me such effects without touching the surface http://www.youtube.com/watch?v=OnROHKjvXKA

or check this video http://news.cnet.com/8301-17938_105-20003541-1.html

perhaps this article might be interesting for those are interested in mobile and urban UIs http://ux4dotcom.blogspot.com/2009/10/user-behavior-of-mobile-devices-and.html

 

18 Mar 2011 - 1:16pm
bmeunier
2007

Hi Holger,

Hi understand that you can do rollover with some touch devices, like you can do a drag race with a Smart car. Users don't expert rollover in touch devices. In a near future, maybe they all be capable of doing that but for now, rollover smust be used very carefully. Mobile market are very very important and we need to design products for those who can't have rollovers.

21 Mar 2011 - 2:59pm
CommandZed
2011

Most Android devices, by default, have a "rollover" state in addition to touch states, because they often have trackpads.

18 Mar 2011 - 2:28pm
Josh B Williams
2010

I think the important thing is does an action item look like a user could click on it. Also do non action items look like something that could be clicked on. A design needs to make clear what items on the page are actionable and what are static elements. If something is actionable that does at first appear to be, a roll over, or other animation can help bring the user's attention to that item. Animation can bring delight to an experience but the user should be able to tell what they need to click on without it.

18 Mar 2011 - 3:45pm
adamgrabo
2011

Agreed. And to echo Josh's earlier point it sounds like we are really talking about affordances. Basically, if something is clickable it should be made to look clickable. Rollover effects can help achieve this in this in the desktop environment but there are other affordances that can communicate that something is clickable also.

For example, Jana mentioned MacOS. Those interface elements might not have rollover effects but they use 3-dimensionality, shape and lighting to make them look like physical buttons and imply their interaction.

Mads Soegaard wrote a good article on affordances for interaction-design.org's encyclopedia. If you choose to go forward with rollovers, Jana, and need supporting materials to justify the extra effort you could start there.

http://www.interaction-design.org/encyclopedia/affordances.html

Cheers!

Adam

27 May 2011 - 3:59pm
GeoffWill
2010

communicate visually and at a distance that the object is clickable. Many designs that I see today are so minimalist that they almost provide a flat virtual landscape. I think that the trend of decluttering the UI has been taken to an extreme. When the only indicator, at a distance, that there is a control present is a downward facing triangle about the size of a speck on the screen, the UI is not a gui, is a guess UI. Echoing below, buttons should look like buttons and should behave like buttons. Most of my work is with Windows applications so I know little about MacOS. In usability testing I have seen no end of people who could not find where / how to navigate to perform some task. I saw this on MS CRM where a control was only represented by a label until you rolled over it. Most participants missed it.

Geoff Willcher, PhD. Cognitive Psychology User Researcher

-----Original Message----- From: adamgrabo Sent: Saturday, March 19, 2011 4:59 AM To: gwbando@msn.com Subject: Re: [IxDA] usability of rollover buttons

Agreed. And to echo Josh's earlier point it sounds like we are really talking about affordances. Basically, if something is clickable it should be made to look clickable. Rollover effects can help achieve this in this in the desktop environment but there are other affordances that can communicate that something is clickable also.

For example, Jana mentioned MacOS. Those interface elements might not have rollover effects but they use 3-dimensionality, shape and lighting to make them look like physical buttons and imply their interaction.

Mads Soegaard wrote a good article on affordances for interaction-design.org's encyclopedia. If you choose to go forward with rollovers, Jana, and need supporting materials to justify the extra effort you could start there.

http://www.interaction-design.org/encyclopedia/affordances.html [1]

Cheers!

Adam

Syndicate content Get the feed