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.

On my webpage I have five boxes containing the names of each step in a five step process. When the user hovers over one of the boxes, it expands and shows text explaining that process.

How can I make the boxes look like they should be hovered over with the mouse? Currently they are just solid-colored squares, and there is nothing that says, "Hover over me" unless they do it by accident.

share|improve this question
    
Show a little animation right next to the first or last box. Show the animation only on the first data input and it should be pretty clear to the user how to operate the textboxes. –  Barfieldmv Nov 9 '11 at 14:26
1  
IMO, seasoned user's are trained to hover over a box to get more infos since every mainstream OS uses that pattern. –  Mike Nov 9 '11 at 16:46
    
Would you describe more of the flow? That may help to define what would be the best answer. –  James Drinkard Nov 11 '11 at 19:49

8 Answers 8

I've seen sites that have a magnifying glass icon embedded in the border or directly below items that should be hovered over.

share|improve this answer
    
A little 'click to edit' on the border would be a great tip. –  Barfieldmv Nov 10 '11 at 8:23

First of all consider whether this is the best way to display the content. How often is the content used? How important is the content. If its used often or is very important consider displaying the content in another way.

If you are sure this "on hover" pattern is the correct one to go for then you need to draw attention to it. Generally this effect is used on text like your stackexchange username. This is just styled the same as a normal link. Generally the idea is that the uses discovers this for themselves, which is why you don't put important information here. Or you also offer an onlclick to take the user to a more detailed view.

If the element you are adding the hover event to is more than just a link of text, then maybe you could use some form of icon to hint at further information.

share|improve this answer

I would go so far as to say that only optional nice-to-have info should be displayed on-hover. It's really hard to rely on users trying to hover over something, even if they hover delay is really small. So if this is the only place where the explanation text would be shown then you might have to rethink things a bit.

share|improve this answer

You can do this with CSS if it's supported by the browser. IE 6 is still in use and it doesn't support a lot of the newer CSS features.

You could use colors to draw attention to the area and/or also use an event, like a mouse click to fade out the rest of the page, but highlight the exact area you want the user to navigate to.

Informational text would also be a possibility if the page layout doesn't lend itself to the navigation inherently.

share|improve this answer

Place what appears to be a link to more information inside each of the boxes. When the user goes to click on the link (i.e. they move the mouse into the box) simply remove the link and expand the box with the full information. A click-less link.

The link could be textual, like "more info..." or "help", or it could be one of those little "?" in a circle icons.

share|improve this answer

I'm against abuse of the hover design pattern because hovering can be accidental (the user isn't using the mouse, of moves the mouse out of the way...). Hovering is very nice for buttons or other content that doesn't change the layout of the page. Annoying hover behavior (IMO) comes from expanding elements.

Having said that, I like ScottK's answer: show a magnifying glass icon.

share|improve this answer

Requirements

  1. you need a call to action that attracts the user - so this should take the form of a message and/or image/icon that affords some interaction - eg an information icon, question mark icon, magnifying glass, basket icon, directional arrow, or something in context for your application.

  2. It should be a self contained area (eg not blending in with surroundings) but not look too much like a standalone button because the user will too much expect to be able to click on it - there's needs to be a subtle undertone that says this is active but it's not a button, otherwise the 'this-is-a-button' thought will be too prominent.

  3. The hover action should activate immediately - not wait for two seconds like many tooltip style help texts. This also aids accidental discovery as the user passes their mouse over, and dispels any further 'this-is-a-button' thoughts

  4. Don't use the mechanism everywhere as the instant actions on hover really do get annoying when they pop up all over the place. Restrict instant hover to specific areas of interest.

  5. The popup should hide as soon as you move outside its own space, - not the space of the original area that activated the popup.

  6. If possible, try and indicate what is going to happen, for example show a 'cut-off' snippet of the content so that it really looks like something is going to move out or be exposed, or an arrow coming out from the edge of an area to indicate you're going to pull out a page or popup.

Examples

Typical scenarios that combine these steps are found on:

  • ecommerce sites - eg for product details - basket price/list - all transient details
  • web forms to get help on each item
  • navigation menu items

Here's an example on a carousel (at the time of writing used at johnlewis.com online shopping site)

enter image description here

There's a clear call to action, it's obvious what is going to happen because of the arrow and the half hidden content on the popup, the hover action is immediate, there's no other interactive content nearby, and the popup goes away as soon as I move away from it.

enter image description here

Extremes

For an extreme example of use of hover - try looking at dontclick.it/ where after the first page ALL interaction is done with hover and no clicks are required at all.

I've also seen interesting behaviour that start to gradually fade in a small information panel as you start to move the mouse nearer to the hover object (within some maximum distance), so that you don't actually have to hover over it exactly before you start to see the panel. That may take a little trial and error to get right for a given scenario and it kind of relies on the hover object being somewhat separated from the main content or other areas of interaction. Unfortunately I can't remember where I saw that. Testing would be essential with that concept!

share|improve this answer

I'd like to build on top of the above answers; An icon with a "?" in it, would probably only be suggestive for users looking for help. Why not use an information icon (here are some examples)? I think these are more suggestive to people looking for "more information".

share|improve this answer

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.