4 ms·

De-clutter Your Interface with Hover Controls

13 points by coderdude 16y ago

jorgem 16y 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 16y 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-Touchscreens-Won-t-Kill-Hovering-After-All 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 16y 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 16y 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.
fookyong 16y 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 16y 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
  - RiderOfGiraffes 16y 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 16y 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.
  - fookyong 16y ago
    hiding controls results in less people seeing them. it's not rocket science.
RiderOfGiraffes 16y 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 16y 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 16y 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 16y 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.
- puns 16y 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 16y ago
My preferred description of this crap is "mystery meat navigation" http://www.webpagesthatsuck.com/mysterymeatnavigation.html 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.

13 points by coderdude 16y 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 16y 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-Touchscreens-Won-t-Kill-Hovering-After-All 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 16y 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 16y 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.

fookyong 16y 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 16y 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
- RiderOfGiraffes 16y 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 16y 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.
- fookyong 16y ago
  hiding controls results in less people seeing them. it's not rocket science.

RiderOfGiraffes 16y 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 16y 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 16y 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 16y 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.

puns 16y 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 16y ago

My preferred description of this crap is "mystery meat navigation" http://www.webpagesthatsuck.com/mysterymeatnavigation.html 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.