Design Pattern: Make it easy to find the most important actions and information on the page
User Need
I need to reach important information and the controls I need without scrolling or carrying out other actions. They are not hidden or off screen.
What to Do
Make key content visually stand out. Key content should be visible to users without needing to scroll the page or hover over content. This includes:
- critical tasks and the controls needed to complete them,
- interactions for critical features (e.g. login forms, send buttons), and
- important information (e.g. health warnings or information that can affect safety).
How it Helps
Slow readers, people with impaired executive function, impaired memory, and other cognitive and learning disabilities may not be able to find the information and features on a page. For example, content that requires a lot of reading or the use of the scroll bar or pointer hovers may be hard to find. Other users cannot find content that requires paging through different screens
Users who are unfamiliar with the page (or common design patterns) may rely on prominent visual styling aids to find important information. A clear heading structure can also help with this by reducing what needs to be read.
For example, an elementary school publishes a weekly newsletter with stories, activities, and important announcements. One important announcement is that school will end early one day. The newsletter has less important information before the early school dismissal, and does not have a warning symbol next to the important information. A parent who reads slowly may need to stop before the important information and does not find out that the school is ending early one day. The parent is not home for the child on time.
In another example, a user is writing a comment, but the send button is not visible when the focus is on the text area. As a result, she cannot see how to send her feedback. The company will then not receive any feedback from groups who unable to find the feedback button.
More Details
The amount of page visible before scrolling is dependent on a wide range of factors such as physical device size and resolution. Where possible, use site statistics to understand what technology users are using. Keep this in mind when designing the page.
Consider the most constrained user experience first (e.g., a 240px wide mobile phone) and then design upwards from there. This will account for the widest range of scenarios. Adopting responsive development practices can improve the flexibility of the page for more devices and situations.
Getting Started
Make it easy to find the most important things on the page. Identify key content and its placement early in the design process.
Space at the top of the document is most likely to be visible to users without scrolling. Place key content at the top of the page to give the best experience to the widest range of users.
Examples
Use:
- Important controls and features that are visible without the need to scroll the page.
- Important controls, such as a submit button, that stand out from less important links and buttons.
- Critical information (such as information about health and safety) that is highlighted and visible without scrolling.
- Critical information that visually stands out from other less important information on the page.
Avoid:
- Important information, controls, or features that the user cannot find straight away. For example: Warnings about user safety that are not visually distinct and above the fold.
Related Information
User Story
Personas
- Alison: An Aging User with Mild Cognitive Impairment
- Amy: An Autistic Computer Scientist
- Maria: A User who has Memory Loss
- Tal: A Student who has Dyslexia and Impaired Eye Hand Coordination
- Yuki: A Yoga Teacher who has AD(H)D