A booking page presents the room title, availability, essential rules, and Reserve action in one reading path; secondary policies follow the decision.
Chapter 04 / 14
Give the page a clear visual order
Place content so the primary task and its supporting information form one readable path.
Your goalTake a busy page and outline its content in reading order. Mark the main task, supporting facts, and secondary material, then sketch a single-column revision.
01 / Begin with the task
The principle
A page communicates priority before a visitor reads every word. Position, size, grouping, and space show where to begin and which details belong together.
- Visual hierarchy
- The order in which the design draws attention to information and actions.
- Grouping
- The visual relationship created by proximity, alignment, and a shared boundary.
- Spacing scale
- A small set of repeatable distances used to express relationships consistently.
Start with a content outline: the task title, the information needed to act, the primary action, and the supporting details. Arrange those elements in that order on a small screen. Keep related labels, controls, and help close together. Give distinct sections enough space for a reader to recognize the change in topic.
Hierarchy follows meaning. A large heading can identify the task, while a prominent action can identify the next step. Consistent spacing makes this order reliable across pages. Review the page at a glance, at high zoom, and in a narrow viewport to see whether the same task path remains clear.
02 / Follow a method
Apply it in four steps
- Write the page's single main task and supporting decisions.
- Order the content before choosing columns or cards.
- Group related elements with consistent spacing and alignment.
- Review the page at mobile width and high zoom.
03 / Compare outcomes
Strong and weak execution
A booking page gives equal visual weight to marketing cards, policies, recommendations, and availability, so the visitor scans several regions to find Reserve.
Why the outcome changes
The strong layout gives the main action the information it depends on: availability and essential rules. The weak layout distributes attention across unrelated regions. A layout review should compare the content outline with the visual order, then repeat the task at a narrow width and high zoom.
04 / Use the method
Practice on a real screen
Take a busy page and outline its content in reading order. Mark the main task, supporting facts, and secondary material, then sketch a single-column revision.
Review your work
- The main task appears early in the reading order.
- Supporting facts sit close to the decision they inform.
- The same task path remains clear at narrow width and high zoom.
Keep your observation, interpretation, and proposed change together. Use the related patterns to inspect complete interaction states.