De-clutter Your Interface with Hover Controls

http://www.usabilitypost.com/2008/11/19/de-clutter-your-interface-with-hover-controls/

by coderdude • 16 years ago

13 16 16 years ago

jorgem• 16 years ago

My question: How well will this work on a device like an iPhone where hovering isn't useful.

Although I think the the problem with repetitive buttons does need a solution, I also think it's too hard to assume that users will figure out that hovering over something may allow them to see additional choices.

coderdude• 16 years ago

I don't think the advice here is suitable for touchscreen devices. In those cases you might consider having a single button that, once clicked, will reveal additional functionality.

On another note, it looks as though these guys guys have come up with a way to detect hovering for touchscreens:

http://developer.practicalecommerce.com/articles/1900-Maybe-...

Apparently it can detect the user's finger while actually hover above the surface of the screen.

calebmpeterson• 16 years ago

This question crossed my mind too. Anyone have a solution?

On the other hand, I just learned the technique of using psuedo-classes early in the css selector chain. Sweet!

gojomo• 16 years ago

The solution I've used requires Javascript.

It detects when on a touch screen, and if so, adds a CSS class to one default item that gives it the same display-characteristics (including showing hidden controls and shading) as if it were being moused-over.

Then, set it so any touch on other eligible elements moves this 'current' class.

In some ways, this could be a clearer model for pointer environments, too: reveal the hidden controls on at least one element at the start, and adjust the one full-revealed item as the pointer moves. This requires Javascript, and is a bit more cluttered, but won't leave anyone in the dark about what's possible.

fookyong2• 16 years ago

The disadvantage of this is that there is no visual cue to the user that additional controls will appear.

Not every user will spend time hovering over your entire UI, searching for controls that you've hidden away.

This is a one-dimensional design decision. "UI looks cluttered, lets hide some stuff. Wow that looks better!". But from the viewpoint of a new user, you've just created a barrier.

prateekdayal• 16 years ago

Have you conducted any studies that show that? We have done this and so far no one has ever complained about "missing links/buttons". Most users never even noticed when we switched to hover controls

RiderOfGiraffes2• 16 years ago

Have you done any studies to ensure that new visitors know that there are contols to discover? Perhaps they aren't complaining because they don't know they're missing stuff.

Or perhaps they just leave.

photon_off• 16 years ago

Could you provide more information about the experiment that you conducted? In real life, users have the option of quitting, and the luxury to do it in private; two things that are very hard to emulate in "experimental" conditions but which greatly affect the outcome. I'm not in any position to judge your experimental techniques, but if you're relying on users actively complaining about things, or worse, telling you what they think they want, you're probably doing it wrong.

It's my opinion that hiding menu items not a great idea for the reasons OP said. In my opinion, coming from someone who's had to use an interface which does this, is that it's borderline obnoxious expecting me to remember where, and that it's necessary, to hover over magical areas to show important controls.

I think having the items be very translucent until hovered provides the best of both worlds. I can see where they are, but are easily ignorable.

fookyong2• 16 years ago

hiding controls results in less people seeing them.

it's not rocket science.

puns2• 16 years ago

I think it's a little unfair to dismiss this design pattern just because it's not immediately discoverable on page load. It really depends on the context in which this is used. Also, while better looks is one thing, having less controls on the page leaves the user with a smaller cognitive load, giving them more attention to focus on and process the content.

RiderOfGiraffes2• 16 years ago

As a power user I'm atypical, I know, but I hate hover controls because they slow me down. I've also used interfaces that border on unusable because they are both slow and undiscoverable.

christophe971• 16 years ago

This is a terrible solution:

- It won't work on any mobile device (touchscreen or not)

- The user has to guess where the controls are, and even if it's obvious to you, it's not for 20% of them at least.

The real solution is to link the title of the entry to the edit form, and to add a delete icon to the right. Yes, it will repeat itself on each line, but it's still more accessible to everyone.

To help the user know on which line he's clicking the delete button, you can altern the background of the lines (grey/white/grey/...) or just make the background change while the mouse is hovering. And as a bonus, have a meaningful confirmation of deletion (repeating the name of the entry) upon click.

Win/Win, everyone is happy.

taitems• 16 years ago

We did some workplace usability testing with non-technical staff (admin, sales etc) and this was a fair hurdle in our prototypes.

We struck a better balance in different projects by either leaving them at a soft 30% opacity, or a desaturated and washed out look until hovered. Giving a subtle visual indication that the option is still there allowed us to remove the weight from the design while achieving a satisfactory level of discoverability.

It was important to choose our visual cue carefully as, on text, the desaturation makes it look disabled. Icons with a desaturation (not complete) and a contrast tweak lend themselves beautifully to this.

Disclaimer: no data kept, this is all anecdotal with a relatively small sample (5-10 people).

gregschlom• 16 years ago

Wordpress has been doing that for a while on their posts admin page. Hover the title of each post, and you get a link to edit / delete, etc...

I find it horrible. It's confusing, and you never remember the position of the links, so you tend to do two steps: 1. move the mouse over the post title, 2. Go to the desired link, instead of just going directly to the appropriate link.

puns2• 16 years ago

I think it depends on context and execution. For example Twitter always used them over tweets in their app, and it works quite well, or do you disagree?

JonnieCache• 16 years ago

My preferred description of this crap is "mystery meat navigation"

http://www.webpagesthatsuck.com/mysterymeatnavigation.html

Ahhh, good old webpagesthatsuck.com. In itself it kinda sucks in 2011, but lots of good advice there still.

De-clutter Your Interface with Hover Controls

Related Stories