A booking card pairs a room photograph with capacity, access features, and a named Reserve action. Its gallery has controls, and a reduced-motion view keeps each room identifiable.
Chapter 06 / 14
Make visual media explain its purpose
Choose images, icons, and movement that clarify a task and remain understandable through other modes.
Your goalAudit one page with three visual elements. Write the purpose of each, the useful text alternative or label, and the behavior at reduced motion.
01 / Begin with the task
The principle
An image can identify an object, explain a process, or set a scene. An icon can shorten a familiar action. Movement can show a transition between states. Each visual choice earns its place through the meaning it carries.
- Informative image
- An image that conveys information needed to understand a task or outcome.
- Text alternative
- Text that gives another route to the purpose or information conveyed by visual media.
- Reduced motion
- An operating-system or application preference that limits movement for comfort and access.
For each image, write the information a person should take away. A photo of a room may help someone recognize a booking choice; a diagram may explain a process; a decorative texture may simply set tone. Give informative media an equivalent text route. Pair unfamiliar icons with visible words, then test whether people can predict the action from the combined label and symbol.
Use movement to explain a change of state, such as a panel opening or an item moving into a saved list. Keep the start and end states clear when motion is reduced. Give people control over ongoing movement and review the interaction with reduced-motion settings. A strong media review asks what the person learns, how they operate it, and how the same task works through another mode.
02 / Follow a method
Apply it in four steps
- State the job of each image, icon, or transition.
- Write text that carries the useful information or action.
- Test the visual's meaning with people in the task context.
- Review keyboard operation, media controls, and reduced-motion behavior.
03 / Compare outcomes
Strong and weak execution
A booking card uses an unlabeled icon for availability and an automatically moving gallery. A visitor needs extra effort to connect the image with the reservation choice.
Why the outcome changes
The strong card gives the image a defined role and supports the same choice through text and controls. The weak card makes availability depend on symbol interpretation and timing. Test the choice with images hidden, keyboard operation, and reduced motion.
04 / Use the method
Practice on a real screen
Audit one page with three visual elements. Write the purpose of each, the useful text alternative or label, and the behavior at reduced motion.
Review your work
- Each visual element has a task-related purpose.
- Meaningful images and icons have an equivalent text route.
- Movement supports the state change and respects the person's preference.
Keep your observation, interpretation, and proposed change together. Use the related patterns to inspect complete interaction states.