A booking flow keeps room choice, date, price, and confirmation in the same logical sequence on phone and desktop; controls remain reachable by keyboard.
Chapter 08 / 14
Preserve the task across screens and input modes
Adapt layout and interaction while keeping the essential route available.
Your goalTrace one task at phone and desktop widths. Write the reading order and action order for each, then check that both lead to the same outcome.
01 / Begin with the task
The principle
People move between narrow and wide screens, touch and keyboard input, zoom levels, and changing network conditions. A responsive design keeps the task recognizable through those changes.
- Reflow
- The rearrangement of content as available space changes.
- Input mode
- A way to operate an interface, such as touch, keyboard, mouse, or voice.
- Task continuity
- The person's ability to keep making progress as conditions change.
Start from the essential content and action in a single column. Add wider arrangements where relationships benefit from side-by-side space. Preserve reading order, labels, focus order, and access to secondary actions as the layout changes.
Test the same task with touch, keyboard, screen reader, high zoom, and a narrow viewport. Also test interruption and a slow connection where they matter. This reveals whether responsive layout and responsive behavior support the same goal.
02 / Follow a method
Apply it in four steps
- Identify the essential task and its content order.
- Design the narrow layout first, then add wider arrangements.
- Check controls through touch, keyboard, and assistive technology.
- Test zoom, reflow, interruption, and recovery.
03 / Compare outcomes
Strong and weak execution
A booking flow moves the confirmation action into an off-screen side panel on a phone while the desktop layout keeps it beside the selected room.
Why the outcome changes
The strong flow preserves the order of evidence and action across screen sizes. The weak flow relies on wide-screen adjacency to explain what the confirmation controls. Repeat the full booking task at a narrow width and high zoom, then compare reading order, focus order, and the final outcome.
04 / Use the method
Practice on a real screen
Trace one task at phone and desktop widths. Write the reading order and action order for each, then check that both lead to the same outcome.
Review your work
- The essential content and action remain available at each width.
- Reading and focus order follow the task.
- Interruption and return preserve the person's progress.
Keep your observation, interpretation, and proposed change together. Use the related patterns to inspect complete interaction states.