Web Interface Design
3.1 ● In-Page Editing
3.2 Drag and Drop
3.3 Contextual tools
3.4 ●Overlays and Inlays
3.5 Static and dynamic invitation
3.6 Transition patterns
Transition patterns
Transitions to describe special effects that happen over a specified period of time.
The term transition seems to catch the right spirit of how these cinematic effects
get applied.
1. Brighten and Dim
2. Expand/Collapse
3. Animation
4. Spotlight
Brighten and Dim
A common technique is to Dim a page and show an overlay in the normal, non-dimmed
state. The effect seems to brighten an area and dim the rest. This interaction pattern is
called a Lightbox Effect.
Use Brighten and Dim to indicate whether or not an interface
is active.
Not ready
You can also use Dim to indicate that a part of the interface is not ready for interaction.
When searching for hotels in Yahoo! Travel’s Farechase tool, the map displaying the found
hotels is dimmed until the search is finished .
Brighten/Dim transitions are very useful. You can use them when you:
• Need to focus attention on a particular part of an interface (or detract
attention from another part of the interface).
• Need to provide feedback indicating that an object is being interacted
with. A common interaction is to brighten an object when the mouse is
hovered over it.
• Decrease visual noise in an interface. Elements that are secondary can be
dimmed when not in use.
• Indicate that a part of the interface is not ready to be interacted with,
perhaps when an application is being loaded.
Expand/Collapse
It’s helpful to have additional content or other panels hidden until the user needs them.
A typical way to bring an Inlay into a page is with Expand/Collapse transitions
Expand and Collapse within the flow of the page is often used to open
details about items within the page. It provides a nice way to toggle open
additional content without losing the context of the summary information.
Expand and Collapse can be used to:
• Manage lots of content or modules.
• Manage real estate on the screen.
• Emphasize the currently hovered-over object (e.g., photos in a photo album) as
part of a rollover system.
• Provide details about an item in a list.
• Make content available for edit. Use instead of a pop up if the content being
expanded is one of many items and there is a benefit to showing the detail in
context with the other items.
Self-Healing Fade
When deleting or moving items, it is often helpful to temporarily expose a “hole”
where the object being removed once lived. Animating the remove of the item
and the closing of the hole reinforces where the deleted item was removed.
Self-Healing transitions can be used to:
• Remove an object from a list or grid.
• Convey that the removal happened and where the object was removed from.
• Indicate the completion of a drop operation in which the dropped object was
moved from one place to another.
Animation
Animation is a great technique when used correctly. It can be used to:
• Smooth out a transition when a direct remove-and-appear in another place on
the page would be a jarring or confusing way to show what just happened.
• Show how an object has changed places or containment on a page.