Best Practices for Mouseover Layers

12 Nov 2008 - 11:11am
5 years ago
17 replies
1919 reads
Jacqueline Stetson
2008

Hello IXDA-ers. Long time lurker. First time poster.

I am looking for best practices on incorporating a mouseover layer onto a
web page.

Here is a description of my interaction:

There is a link on the page. On rollover, the user gets a layer that gives
the user more information about the item. When the user moves the mouse off
of the link, the layer goes away. On click, the user goes to the detail page
of the object.

We are using a third party site to create our layers. There are a lot of
options and limitations for stems, hooking, targets, delays, etc.

My typical web search to get to best practices didn't reveal much. What
terms do you use to describe this interaction?

I know the interaction design always "depends" but I was hoping someone out
there has done some testing to help better inform my decision. I work in an
Agile environment and am not in a position to test designs prior to launch.
(That certainly is another topic I'd like to follow up with in a separate
discussion!!)

I'd like to know your thoughts on:

1. Are there any best practices around where the layer should open and how
it is tied to the object? (Like should the header of the layer be beneath or
to the right of the link? Should the stem be in the side middle? top left?
...)

2. Are there any best practices around delay? (Are there any similarities to
the 250ms menu delay?)

3. Are there any best practices on making the layer actionable versus
informational? (with links and a close button versus text only and closing
on mouse-off?)

4. What else should I be concerned about that I'm not thinking of yet?

Thank you so much for your time.

Jacqueline

--
Jacqueline Stetson
http://www.jacquelinestetson.com

Comments

12 Nov 2008 - 8:38pm
Jack L. Moffett
2005

On Nov 12, 2008, at 11:11 AM, Jacqueline Stetson wrote:

> 1. Are there any best practices around where the layer should open
> and how
> it is tied to the object? (Like should the header of the layer be
> beneath or
> to the right of the link? Should the stem be in the side middle? top
> left?
> ...)

From observation, I would say that these types of pop-ups typically
appear above the active item. However, you need to make your decision
based on the design of the rest of your page. Where do you have the
most room for it? The goal should be not to have it fall outside of
the current window boundaries and not to cover up the active item or
anything of importance. Which placement will most likely meet these
goals? Also, what are the dimensions of the pop-up? Is it wider than
it is tall or vice versa? Placement of the stem would then be based on
the placement of the pop-up.

> 2. Are there any best practices around delay? (Are there any
> similarities to
> the 250ms menu delay?)

It should be long enough that it won't pop up when the cursor is
moving across the screen, but short enough that it is likely to show
before the user clicks on the link.

> 3. Are there any best practices on making the layer actionable versus
> informational? (with links and a close button versus text only and
> closing
> on mouse-off?)

Both are valid. It depends on what the purpose of your pop-ups are. As
far as closing on mouse-off vs. an explicit close, I base the decision
on the amount of content. If there is actionable content, an explicit
close is preferable. If there is a significant amount of content, an
explicit close is preferable so you don't have to worry about leaving
the mouse stationary to read it. Short amounts of content will do fine
with an automatic close.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

The details are not the details.
They make the design.

-Charles Eames

13 Nov 2008 - 8:51am
Danny Hope
2008

Hi Hacqueline,

2008/11/12 Jacqueline Stetson <jstetson at gmail.com>:
> …your thoughts on:
>
> 1. Are there any best practices around where the layer should open and how
> it is tied to the object? (Like should the header of the layer be beneath or
> to the right of the link? Should the stem be in the side middle? top left?
> ...)

Jeep changes within the users' locus of attention (i.e. the area of
the screen on which they're focussing).

> 4. What else should I be concerned about that I'm not thinking of yet?

Many users are irritated by things that popup without them asking.

Clicking is a declaration, hovering is not.

Arguably, best practice says: don't initiate layers on rollover, but
rather to require a click.

--
Regards,
Danny Hope
http://linkedin.com/in/dannyhope
07595 226 792

13 Nov 2008 - 9:12am
Jack L. Moffett
2005

On Nov 13, 2008, at 8:51 AM, Danny Hope wrote:

> Arguably, best practice says: don't initiate layers on rollover, but
> rather to require a click.

Danny, I can't agree with you here. Displaying new information on
rollover has been a widely used and accepted practice for over 16
years. You could certainly point out situations where it is
inappropriate, but I don't see how you can argue that best practice is
to not use this technique.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

It's not about the world of design;
it's about the design of the world.

- Bruce Mau

13 Nov 2008 - 10:18am
Todd Warfel
2003

On Nov 13, 2008, at 9:12 AM, Jack Moffett wrote:

> You could certainly point out situations where it is inappropriate,
> but I don't see how you can argue that best practice is to not use
> this technique.

Exactly. We use the hover technique to reveal additional options like
Edit and Delete in most of our webapps. Imagine a list of 30 items on
a page. If we had Edit and Delete next to every single one of them,
that's a lot of visual noise on the screen. Instead, we only reveal
these additional actions on hover — it's conditional and contextual.
And besides, you're going to have to target that item w/a mouse anyway
to perform the action. So, it works pretty well.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

13 Nov 2008 - 10:36am
Danny Hope
2008

Hey Jack,

2008/11/13 Jack Moffett <jackmoffett at mac.com>:
> On Nov 13, 2008, at 8:51 AM, Danny Hope wrote:
>> Arguably, best practice says: don't initiate layers on rollover, but
>> rather to require a click.
>
> Danny, I can't agree with you here. Displaying new information on rollover
> has been a widely used and accepted practice for over 16 years.

I suppose tool tips are an example, can you reference other examples please?

> You could
> certainly point out situations where it is inappropriate,

Here are 3:
- where the new layer obscures information or other controls
- on devices which do not have a hover state, e.g. touchscreens
- where the interface is to be used by someone with visual or motor disabilities

> but I don't see
> how you can argue that best practice is to not use this technique.

I've only found one source to back up my position (anyone know any others?):

http://www.nngroup.com/reports/accessibility/ (p57-64)

I'm not saying that "Displaying new information on rollover" is bad
practice. For example, I think that having the browser display the URL
of links in it's status bar is good.

I am saying that:
- rollovers should not be counted as a declaration
- the system should not obscure content or interface elements that the
user may be trying to see.

--
Regards,
Danny Hope
http://linkedin.com/in/dannyhope
07595 226 792

13 Nov 2008 - 10:38am
Matt Nish-Lapidus
2007

We do a very similar thing, except instead of hiding the buttons
completely we dim them. We also use hover to show contextual content
for an item in a popup box, and it works very well.

You can see these techniques in action at
http://opl.bibliocommons.com/collection/show/4922901_emenel/library

On Thu, Nov 13, 2008 at 10:18 AM, Todd Zaki Warfel <lists at toddwarfel.com> wrote:
>
> On Nov 13, 2008, at 9:12 AM, Jack Moffett wrote:
>
>> You could certainly point out situations where it is inappropriate, but I
>> don't see how you can argue that best practice is to not use this technique.
>
> Exactly. We use the hover technique to reveal additional options like Edit
> and Delete in most of our webapps. Imagine a list of 30 items on a page. If
> we had Edit and Delete next to every single one of them, that's a lot of
> visual noise on the screen. Instead, we only reveal these additional actions
> on hover — it's conditional and contextual. And besides, you're going to
> have to target that item w/a mouse anyway to perform the action. So, it
> works pretty well.
>
>
> Cheers!
>
> Todd Zaki Warfel
> President, Design Researcher
> Messagefirst | Designing Information. Beautifully.
> ----------------------------------
> Contact Info
> Voice: (215) 825-7423
> Email: todd at messagefirst.com
> AIM: twarfel at mac.com
> Blog: http://toddwarfel.com
> Twitter: zakiwarfel
> ----------------------------------
> In theory, theory and practice are the same.
> In practice, they are not.
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Matt Nish-Lapidus
--
personal: mattnl at gmail.com
twitter: emenel

13 Nov 2008 - 12:09pm
Jackson Fox
2006

Danny,

> Clicking is a declaration, hovering is not.

I think there are some cases where we *can* treat hovering as a
declaration. In particular, I'm thinking of uses such as Netflix's
movie info boxes. When a user places a mouse over an active object,
and then pauses without a click, I think it's a reasonable inference
that the user is lacking information to move forward. In this
circumstance, I think that showing an information box can be
appropriate.

Jackson Fox
UX Designer @ Viget Labs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35525

13 Nov 2008 - 12:36pm
Danny Hope
2008

2008/11/13 Jackson Fox <jacksonfox at gmail.com>:
> …Netflix's
> movie info boxes.

Can you give me a URL please?

--
Regards,
Danny Hope
http://linkedin.com/in/dannyhope
07595 226 792

13 Nov 2008 - 1:23pm
Jack L. Moffett
2005

On Nov 13, 2008, at 10:36 AM, Danny Hope wrote:

> I suppose tool tips are an example, can you reference other examples
> please?

I can't spout off URLs and I don't have the time to look any up, but
I've seen sites that provide a preview of the page that an external
link goes to in a roll-over pop-up. I've used this technique to reveal
buttons in a list like Todd suggested. I've seen it used to provide
information about an image thumbnail. There are menus that open on
hover. Technical illustrations can show labels for individual parts.
I've implemented "a multi-link" in this way, where one link in the
content has multiple destinations, so the pop-up is a list of links.
The Mac OS used to have "bubble help". It's also a good way of
providing access to status information. I've used it to provide an
explanation as to why a particular button is disabled. (Okay, there
are probably several examples here that could be classified as "tool
tips" in a broad sense.) This list could go on...

>> You could
>> certainly point out situations where it is inappropriate,
>
> Here are 3:
> - where the new layer obscures information or other controls

I wouldn't consider this to be an "inappropriate situation" as I meant
it, just something that you should avoid.

> - on devices which do not have a hover state, e.g. touchscreens

Agreed.

> - where the interface is to be used by someone with visual or motor
> disabilities

Also agreed.

>> but I don't see
>> how you can argue that best practice is to not use this technique.
>
> I've only found one source to back up my position (anyone know any
> others?):
>
> http://www.nngroup.com/reports/accessibility/ (p57-64)

Which is in regards to situations in which accessibility is an issue.
This doesn't mean that the technique should never be used.

> I'm not saying that "Displaying new information on rollover" is bad
> practice. For example, I think that having the browser display the URL
> of links in it's status bar is good.
>
> I am saying that:
> - rollovers should not be counted as a declaration

If the user pauses, that can be taken as a "declaration". And
sometimes, you intentionally want to "interfere" before the user makes
a declaration.

> - the system should not obscure content or interface elements that the
> user may be trying to see.

Absolutely.

Best,
Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

My goal is to build elegant products.
The products that don't make people think
when they should be doing,
make people think
when they should be learning,
compel them by relating to them,
and simply work.

- Josh Viney

13 Nov 2008 - 1:35pm
Adrian Howard
2005

On 13 Nov 2008, at 09:09, Jackson Fox wrote:
[snip]
> I think there are some cases where we *can* treat hovering as a
> declaration. In particular, I'm thinking of uses such as Netflix's
> movie info boxes. When a user places a mouse over an active object,
> and then pauses without a click, I think it's a reasonable inference
> that the user is lacking information to move forward.

[snip]

As ever - it depends :-)

If the page has enough content that the user needs to pause to
comprehend it, and enough area of the page containing active links,
then the chance of "accidentally" firing off with a hover affect can
be quite high.

I saw exactly this behaviour this a while back when I did some testing
on a site where the content area and side bar contained a number of
links that gave a preview of the following page.

The user paused to read content - with the pointer over a preview area
purely by chance. A couple of seconds later preview-layer appeared.
User gets distracted - moves cursor enough to get the preview layer to
vanish. User resumes reading - accidentally leaving cursor over
_another_ preview link...

This sometimes happened two or three times in a row until the user
threw the cursor to a screen edge.

Fun :-)

Adrian

13 Nov 2008 - 12:35pm
Joel Tachau
2008

Flash ads using the hover event to expand the ad are making hovering a
declaration as well. I find myself mousing around ads to avoid expanding
the ad and thus "obscuring content I want to see" as Danny put it.

Example: hover over the Nature Valley banner at the top of this page:
http://skiing.about.com/od/skigear/u/skiequipment.htm

Joel Tachau
Director of User Experience
MFG.com

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Danny Hope
Sent: Thursday, November 13, 2008 10:37 AM
To: Jack Moffett
Cc: IxDA Discuss
Subject: Re: [IxDA Discuss] Best Practices for Mouseover Layers

Hey Jack,

2008/11/13 Jack Moffett <jackmoffett at mac.com>:
> On Nov 13, 2008, at 8:51 AM, Danny Hope wrote:
>> Arguably, best practice says: don't initiate layers on rollover, but
>> rather to require a click.
>
> Danny, I can't agree with you here. Displaying new information on
rollover
> has been a widely used and accepted practice for over 16 years.

I suppose tool tips are an example, can you reference other examples
please?

> You could
> certainly point out situations where it is inappropriate,

Here are 3:
- where the new layer obscures information or other controls
- on devices which do not have a hover state, e.g. touchscreens
- where the interface is to be used by someone with visual or motor
disabilities

> but I don't see
> how you can argue that best practice is to not use this technique.

I've only found one source to back up my position (anyone know any
others?):

http://www.nngroup.com/reports/accessibility/ (p57-64)

I'm not saying that "Displaying new information on rollover" is bad
practice. For example, I think that having the browser display the URL
of links in it's status bar is good.

I am saying that:
- rollovers should not be counted as a declaration
- the system should not obscure content or interface elements that the
user may be trying to see.

--
Regards,
Danny Hope
http://linkedin.com/in/dannyhope
07595 226 792
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

13 Nov 2008 - 1:06pm
Casey Edgeton
2008

http://www.netflix.com/BrowseSelection

On Thu, Nov 13, 2008 at 9:36 AM, Danny Hope <danny.hope at gmail.com> wrote:

> 2008/11/13 Jackson Fox <jacksonfox at gmail.com>:
> > …Netflix's
> > movie info boxes.
>
> Can you give me a URL please?
>
> --
> Regards,
> Danny Hope
> http://linkedin.com/in/dannyhope
> 07595 226 792
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--

--------------------------
I'm doing a century ride for the Leukemia & Lymphoma society!
Help me cure Leukemia & Lymphoma
By donating directly: http://pages.teamintraining.org/sj/tdps09/cedgeton
By buying shirts: http://www.zazzle.com/cedgeton

13 Nov 2008 - 1:37pm
Anonymous

Danny,
Visit http://www.netflix.com/

You may actually need to be logged in with a user account to see the
flyouts to which Jackson refers.

However, at that point, you should receive a number of suggested
offerings (for instance). These are thumbnails of the movie box/CD
cover, etc...commonly associated with a film. Below that is a red
hyperlinked button that reads (Add)-this is for adding selections to
you queue. If you scroll over the aforementioned thumbnail and stop,
you will see a prominent flyout appear. This box contains general
summary information about the film, thus allowing you to scroll a
number of recommendations without having to leave this page to
navigate to another to obtain basic information about a film.

Here, the user is provided with the type of information that original
web paradigms would have required a declaration on the part of the
user in the form of a "click" with the mouse to deduce a request
for additional information. In this "newish" paradigm, simply
hovering over an object for a short amount of time is inferred as a
request (or declaration) for additional information.

I think tool tips (which are more omnipresent) serve as similar
examples.

I hope this helps.

John W. Williams

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35525

13 Nov 2008 - 10:15am
Alan James Salmoni
2008

Hi Jacqueline,

Did you mean something like this page:

http://meyerweb.com/eric/css/edge/popups/demo.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35525

13 Nov 2008 - 4:08pm
Pietro Desiato
2008

Ciao guys,

I think that the hover state should ne tested every time you can.
It's such a complex interaction and, even though it seems ho ne
mode standard recently, the context IW always extremely influent ok
it.
Do you have any info about your users?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from ixda.org (via iPhone)
http://www.ixda.org/discuss?post=35525

16 Nov 2008 - 1:10pm
DampeS8N
2008

I actually think we can reach a semi-conclusion here:

-Hover is best used for non-essential but useful 'extra' info.
(tooltips, next-page previews, link highlights)
-Hover can be used for functionality if it is an extension with a
good default, or if it has a logical backup. (a second-row drop out
menu can be defaulted to visible on a sub page)

-Hover items shouldn't be used where doing so will break the system
for some users.
-Hover items shouldn't be used where they 'gum up the works.'

And some facts about hover states:

-They hide information from the user.
-They require hover ability from the user's physical interface.
-They force your interface to be discoverable

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=35525

17 Nov 2008 - 3:00am
AJ Kock
2007

Just out of curiosity: how can you comply to Section 508 if you
information provided with mouse-over functions?

Do we draw a line between cosmetic feedback (colour change) or if the
information provided is additional or vital? Or is a mouse-over a
mouse-over and if used, not compliant to Section 508?

Syndicate content Get the feed