De-clutter Your Interface with Hover Controls • Hacker News Board

Re: De-clutter Your Interface with Hover Controls

#11

Post by fookyong » Tue, Jan 04, 2011, 6:21 AM UTC

prateekdayal wrote: post #6

fookyong wrote: post #5

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.

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

hiding controls results in less people seeing them.

it's not rocket science.

Re: De-clutter Your Interface with Hover Controls

#12

Post by taitems » Tue, Jan 04, 2011, 6:35 AM UTC

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

Re: De-clutter Your Interface with Hover Controls

#13

Post by gregschlom » Tue, Jan 04, 2011, 6:41 AM UTC

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.

Re: De-clutter Your Interface with Hover Controls

#14

Post by gojomo » Tue, Jan 04, 2011, 6:50 AM UTC

calebmpeterson wrote: post #4

jorgem wrote: post #2

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.

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!

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.

Re: De-clutter Your Interface with Hover Controls

#15

Post by JonnieCache » Tue, Jan 04, 2011, 10:04 AM UTC

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.

Re: De-clutter Your Interface with Hover Controls

#16

Post by puns » Tue, Jan 04, 2011, 10:07 AM UTC

fookyong wrote: post #5

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.

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.

Re: De-clutter Your Interface with Hover Controls

#17

Post by puns » Tue, Jan 04, 2011, 10:11 AM UTC

gregschlom wrote: post #13

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.

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?