Morphing Controls
Design Pattern
Free weekly newsletter
Real UI patterns and design psychology in your inbox
Learn how successful products use UI patterns and behavioral design. One email a week from UI-Patterns.com and Learning Loop.
SubscribeProblem summary
The user wants to only be presented with controls available to the current mode
Example
▲ When you choose to click the light-colored "Follow"-button on a twitter profile, the button morphs into reading "Following" and now has a dark background with white text.
Usage
- Use when some controls don’t need to be displayed at the same time
- Use when you want to declutter the screen with unnecessary and unavailable controls
- Use when your user experience contains several modes (playing/pause, on/off)
In the card deck
Morphing Controls is one of the cards in the UI Patterns card deck
A collection of 60 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.
Solution
Information presented and actions available in a user interface element depend on its mode. When a video is paused, the play command is available, but pause is not.
Design affordance in each mode toward the most common or wanted interactions and emphasize asymmetry, incompleteness, or something being wrong to push users toward changing modes.
Be sure to keep a consistent look between each state of the control that morphs. Font and text size should stay the same, but colors may differ.
Morphing Controls work well with binary actions, such as:
- On/Off
- Like/Unlike
- Follow/Unfollow
