Hello IXDA-ers. Long time lurker. First time poster.
I am looking for best practices on incorporating a mouseover layer onto a
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
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
4. What else should I be concerned about that I'm not thinking of yet?