User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
I've seen sites that have a magnifying glass icon embedded in the border or directly below items that should be hovered over.
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.
Requirements
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.
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.
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
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.
The popup should hide as soon as you move outside its own space, - not the space of the original area that activated the popup.
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:
Here's an example on a carousel (at the time of writing used at johnlewis.com online shopping site)
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.
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!
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.
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.
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".
This might be a little old school, but I have seen lots of old thick GUI applications use a dashed or dotted underline to denote something that has hover text or hover help.
I am doing this very thing right now in a web app. Example:
Here I have a status displayed in a table. The "ended" status has an end date, but I'm pretty sure the user does not need to know the date, especially wasting a column in the table to display it. So the dashed underline gives affordance that there is more information on hover.
Please leave some comments if you think there are better ideas.
This is HTML, so here is the CSS to do this easily:
border-bottom: 1px dashed #888;
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.
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.
