Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Connect a useful control to a clear, visible change in content.
- 01Clear control
The input communicates what can be selected, opened, or adjusted.
- 02Changed content
A predictable region updates or reveals relevant information.
- 03State feedback
Selection, progress, or an expanded state makes the result understandable.
How the pattern works
An interactive layout changes or reveals content in response to a person's choices. Tabs, comparison controls, disclosures, and product configurators are useful when the interaction helps answer a question or complete a task.
Design the content and its states before designing the animation. People need to recognize the control, understand what changed, and reach the same information using a keyboard or touch input. Interaction should add understanding, not make the essential message harder to reach.
Where it fits—and what to consider
A useful choice when
- A choice can reveal more relevant information.
- Comparing states helps someone understand the product.
- The result of the interaction is useful and easy to explain.
Be deliberate about
- Essential information should not depend on a difficult gesture.
- Unexpected movement and unclear states can reduce understanding.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Keep controls near their results and preserve a stable content region when states change. Provide visible selection and focus states.
On narrower screens
Use touch-sized controls and a clear vertical relationship between the input and its result. Support keyboard input and reduced-motion preferences.
Build the structure
- 01Define the question the interaction helps answer.
- 02Design the default, changed, and focus states.
- 03Start with native controls and add more complex behavior only when it helps.
<details class="feature">
<summary>Explore this feature</summary>
<section aria-label="Feature details">
<h2>A useful result</h2>
<p>Supporting information appears here.</p>
</section>
</details>Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Choose a feature that is hard to explain in one screenshot. Define one control and two content states, then test whether the result is understandable without animation.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.