Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We have profiles for our Web application holding a fair amount of data which takes up a lot of screen space. Each segment has related edit/remove buttons which clutter the screen and distract from content if they are all visible at the same time.

We are toying with the idea of revealing controls when hovering or focusing on a data segment. This behaviour can be seen on applications like Facebook, when hovering over items on the news feed (a drop-down or "remove" button appears.) Twitter also implement this on individual tweets. There are many other examples in the wild (comment features, forums etc.)

My concern is that there is no affordance to prompt the user to hover over/focus on an empty segment of data, and that creating such affordance will complicate the visual aesthetic. I don't want to create a barrier to learning how to use the interface, but really I don't know how much of a barrier this will create, and my assumption (dangerous) is that it's not a big deal. Unfortunately I am not our users.

Does anyone know how big a learning curve is introduced when controls are hidden from the user until they start interacting? Are there better options? Drop-downs have been considered, but purely lessening the visible 'clickable' elements is not optimal.

share|improve this question
1  
What if you keep the controls in permanent view in the first empty segment and make them appear when you hover over a 'used' segment? –  Roger Attrill May 2 '12 at 15:46
    
Perhaps you could have the controls appear when the page first loads and then have them fade away? –  Andrew Shipe May 2 '12 at 16:16
    
@AndrewShipe The fade idea is quite nice, although the profiles are sectioned, so implementing this behaviour on every page load is slightly irritating. We could do it once and not show it again, but there's also no guarantee the user has seen and acknowledged what is happening. –  Fenstar May 2 '12 at 16:32
    
@Fenstar That would be annoying after a while. What about displaying the controls on all sections until the user mouses over a particular segment and then all other controls can fade away (except for the active one)? –  Andrew Shipe May 2 '12 at 16:56
1  
Also, touch screens don't have hover. You'll need to provide a workaround. –  peteorpeter May 4 '12 at 19:15
show 2 more comments

2 Answers

I don’t think the case has been made to ever use reveal-on-hover controls. The concern is apparently that the clutter of the controls will inhibit seeing the data. That is a definite possibility, but it seems to me that properly balanced graphic design, with high contrast data and relatively muted controls, is a better way to handle this.

Reveal-on-hover has a few issues:

  • The first is that users fail to discover the controls, like you said. Users explore by looking at web pages. They don’t “feel” them by running the mouse over them.

  • The second, and more likely, problem is that it makes it more difficult for users to activate the controls, apparently because they don’t have a clear target to aim for, unless they happened to be hovering over the intended data object. UIE has found that users decide the action first then move the mouse, the result being user more successfully used links when they were permanently visible (vs. on hover) even if it makes the page more cluttered. I expect the same applies to editing controls. The whole advantage of repeating the same controls for multiple data objects is to give the user fast one-click access to the command. Hiding the controls undoes this advantage. If clutter is such a concern (e.g., you have more than a couple commands), you may be better off following an object-selection-action interaction model and put the controls on a centralized toolbar.

  • A third problem is inducing unintended animation effects when the user slews the mouse over the data objects, which can be very distracting –far more distracting than simply leaving the controls visible full time.

I would like to see some research on reveal-on-hover for command controls. But until then, I would not use it in an app unless a usability test demonstrates it helps clutter issues without introducing more serious problems.

share|improve this answer
    
Thanks for the informed response. Ideally I would like to A/B test on some users before making a decision, and if someone had published their work on this it would be easy. I would like to presume the big companies have done user testing on this behaviour, but I can't rely on guess-work... Some design decisions are easier to make based on convention, but I feel this one is a little bit more niche. –  Fenstar May 3 '12 at 13:03
    
When multiple large companies use a design paradigm, I don't ask for the research first before I try it myself. Obviously I would test after the fact, but if it seems good to me and it's good enough for them I'll try it. Another example that uses this is the SE chat site: hover on every single chat item. –  Myrddin Emrys May 3 '12 at 18:59
    
@Fenstar & Emrys: We should assume big companies make superior UIs? Hmm... I think I’m starting to understand why so many web sites spit errors at users for having the audacity to include the spaces in their credit card numbers (ux.stackexchange.com/questions/11198/credit-card-input-format). –  Michael Zuschlag May 4 '12 at 1:28
    
@MichaelZuschlag Easy there! No, I don't 'assume' that big companies make better UIs; thankfully I have the experience to make sensible judgements -- I do know most large web application design teams implement full user testing on their interfaces and I can therefore arrive at the assumption that some kind of user observation led to the decision to implement hover-reveal controls. I also said that I can't rely on this assumption to make my decision... –  Fenstar May 4 '12 at 15:43
    
@Fenstar: Yes, big thumbs up for sensible judgments. It's apparent the big-company teams can make usability missteps even with their presumed testing. –  Michael Zuschlag May 4 '12 at 20:59
add comment

When your hover controls are consistent and ubiquitous, you don't need to have visible affordance. For all the examples you mention every single item on the screen almost has the same hover controls. Similarly, if every item in your form has the same hover controls then the user will discover them quickly and automatically just by using the form.

It should be noted that for this to work, the area has to already have a task the user can perform in it. For example, this will not work for just a label. There has to be an active control the user can click on already. The hover controls must be extra actions they can take beyond the basic. In this manner, the user will go to perform the basic interaction, and see the additional actions available on hover. If a section of screen has nothing visible to do at all but read it, then the user has nothing to do, and can miss the hover controls even when they are on every control.

For example, in StackExchange chat rooms, you can already chat without any hover controls. Hover controls are an optional ability present on every single chat line. Within minutes a typical user will have discovered that every chat line is also a clickable entity with its own controls. But the hover controls are not necessary to use the page, so a user will not fail to find anything to do if they do not immediately discover the hover tools.

share|improve this answer
    
This is a fair point, but the tricky part is showing a first-time user the ropes. Learning a new interface can be fun if it has unique characteristics or behaviour (and as you say, as long as that behaviour is consistent), but these can't inhibit the user's ability to perform actions as efficiently as possible. –  Fenstar May 3 '12 at 13:09
    
The point is that since every single control on the screen (ubiquitous) has the same hover items, the user can't use the screen without seeing them. –  Myrddin Emrys May 3 '12 at 16:53
    
But if you remove (hide) controls, the screen appears to be 'unusable'. I know people usually start waving their mouse around/tabbing through links to find out what's going on, but I don't want to rely on that assumption, especially when we want them to fill in a profile which has blank data segments. –  Fenstar May 4 '12 at 15:50
    
Added additional paragraphs addressing that point @Fenstar. Thanks. –  Myrddin Emrys May 4 '12 at 18:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.