

De-clutter Your Interface with Hover Controls - coderdude
http://www.usabilitypost.com/2008/11/19/de-clutter-your-interface-with-hover-controls/

======
christophe971
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.

------
fookyong
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
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
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.

------
taitems
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).

------
jorgem
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.

~~~
calebmpeterson
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
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.

------
gregschlom
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
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
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.

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

