Hover Invitation
From Interaction-Patterns.org
Kategorie:Interface Interaction
Contents |
[edit] Hover Invitation
[edit] Quick Summary
Designer needs to cue the user about what will happen when the mouse is clicked on the hovered object.
[edit] Visual Examples
| Found at movies.yahoo.com | |
[edit] Examples found on the World Wide Web
[edit] Use When
- You want to invite the user to click or interact with the object being hovered over.
- You want to make it clear that something will happen when the user clicks on the object being hovered over.
- The user is interacting directly with the object (e.g., rating).
- You want to entice the user to interact with the feature.
- The user's input is state based (e.g., rating, flag in mail, etc.).
[edit] Possible Solution
- Provide immediate feedback when the mouse is over the target area that calls the user to action.
- Show the user what will happen if the mouse is clicked on the hovered object.
- Show the preview in a slightly contrasting manner (usually color or border change) that indicates they are in preview mode. However, make the preview mode close enough to the final state that they will know what will happen when they click on the object.
- Allow the user to take action via direct interaction with the object.
- If the object is write-once (like many reviews) then no longer show the hover invitation after saving the choice. If the object's value can be altered (as in Y!Mail Flagged column) then contine to show hover invitation to indicate it can be changed (usually toggled.)
[edit] Rationale
- Since we want the user's input we are employing techniques that are visually engaging and simple in interaction. However, they do not always involve the normal user interface controls. By engaging the user during hover we make the interaction as simple and lightweight as possible hopefully increasing feature usage.
With the more widespread adoption of Ajax and the resurgence of Flash on the web page, more subtle interactions are possible. Instead of a read-only web, we can now have a read-write web. Where before all content on the page was view-only, the user can now edit selected content directly. This inline editing capability is not immediately discoverable. The idea behind an invitation is using as many avenues as possible to get the user to discover the feature through lightweight interaction (e.g., mouse hover).
Invitations are good when:
- You want to lead the user to discover a new feature.
- You want to introduce the user to a new way to interact (new idiom).
- You want to make the interaction feel lightweight.
- The actual interaction engagement you are driving towards is the next logical event (hover leads to a click; click leads to another click, etc.)
[edit] Accessibility
- To make the hover invitation accessible by assistive technologies use the following technique.
- Considering setting focus to items on hover. This will the user to toggle between the mouse and the keyboard for navigation. Additionally, assistive technologies will detect the focus change and read the text.
- If the item has an image (as in a menu item), place the image inline to the text and set the ALT text to convey the state of the item (e.g., expanded, collapsed or disabled). If you don't have an image you can use a small (1x1 pixel) filler image and place inline to the text. This will allow the assistive technology to read the ALT text as it reads the inline text
- In addition to communicating the state, have the ALT text also communicate the invitation. For example, in a menu system you might place the following ALT text on a submenu item: "Search options collapsed. Click to expand." A nice side-benefit is that Internet Explorer will display ALT text as a tooltip if no TITLE attribute is specified.
- Support keyboard activation of the item.
- See the general discussion about accessibility for Invitation patterns.
