How do I design for common reading patterns?

TL;DR

To design for common reading patterns, use the F-shaped pattern on text-heavy pages by placing key information at the top left and along the initial horizontal scan path. This ensures important content captures attention immediately.

For simpler layouts like landing pages, adopt the Z-shaped pattern. Position crucial information at the top, guide the eye diagonally across the page, and conclude with a strong call to action at the bottom, leading users towards your desired actions.

Efficiently group related content into smaller chunks for easier scanning. Use informative headings and subheadings, lists with bullets and numbers, and unique link formatting. Continuously refine your design based on user feedback and analytics to improve readability and engagement.

Deep dive

Users don’t read web pages, they scan. Content design and copywriting are crucial but frequently overlooked in product development. High-quality content communicates effectively, builds trust, and motivates targeted actions.

F-shaped pattern

The F-shaped scanning pattern appears mostly on text-heavy pages. 

The user’s eye typically starts at the top left, moves horizontally, drops down a bit, and then moves across again, creating an 'F' shape. This means that much of the content is missed, which can be just as important as the content that is read. To address this, consider adopting an F-pattern design.

Source

When designing an F-pattern layout, make sure your key messages catch the user's eye:

• Place the most important points in the first two paragraphs.
• Use headings and subheadings and start them with the most informative words.
• Visually group related content in small chunks.
• Bold important words and phrases.
• Make links stand out with unique formatting.
• Use bullets or numbers for lists to highlight key steps or items.

Z-shaped pattern

Use a Z-shaped pattern for simpler layouts, such as landing or product pages, to guide users toward a call-to-action element. Place your most important information at the top, direct the eye diagonally, and end with a strong call to action at the bottom. This pattern is typical for pages without centered text, unlike those using an 'F' shape.

Consider a page with a Z-pattern that directs users to a "Create an account" button.

Source

The concept of the Z-layout, focused on the four corners of the Z, is quite simple:

• Place important elements along the scanning path, presenting the right information at the right time.
• Position the items that you want the reader to see first along the top of the Z. Begin with your most important information, followed by the next most important information.
• The eye will naturally trace the top line of the Z, so the goal is to place your secondary call to action at the second point.
• Use a hero image in the middle to visually separate the top and bottom of the page, guiding the eye through the pattern.
• The final segment, between the third and fourth points, should lead the viewer’s gaze to the corner, where your primary call to action should be prominently placed.

Summary: actionable steps to design for common reading patterns 

1. Review your current content and identify areas where you can better use F-pattern and Z-pattern scanning techniques. 
2. Evaluate your headings and subheadings – are they clear, descriptive, and loaded with the relevant keywords at the beginning? Make adjustments so users can scan your content effortlessly.
3. Break up long paragraphs into shorter, more digestible chunks. Ideally, keep it to 2-3 sentences per paragraph. Use bullet points and numbered lists where appropriate.
4. Review your calls to action. Check if they're positioned prominently and phrased in a way that grabs attention. For Z-pattern layouts, try placing your primary CTAs at the bottom right corner.
5. Conduct user testing to see how users interact with your content. Use tools like heatmaps and scroll maps to identify areas where users are spending the most time and adjust your layout based on these findings.
6. Monitor analytics to see how your changes impact key metrics like time on page, bounce rate, and conversions. Continue iterating based on data-driven insights.

Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• What are the key messages or takeaways users should get from this content?
• How can I organize the content to highlight these key messages and make them easy to scan?
• Are my headings and subheadings clear and packed with relevant keywords at the start? 
• Can I break this content into shorter paragraphs or bullet points to improve readability?
• Are my calls to action prominently placed and aligned with common reading patterns?
• Have I used visual cues, like arrows or images, to guide users' attention in a Z-pattern layout?
• How can I use whitespace to create a clear visual hierarchy and reduce clutter?

Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Burying important information in the middle of long paragraphs where it's likely to be missed.
• Using vague or clickbait-y headings that don't accurately represent the content.
• Overusing bold or colored text, which can clutter the design and reduce desired impact.
• Placing calls-to-action in unconventional locations that don't align with reading patterns.
• Neglecting to chunk content or use bullet points, resulting in a wall of text.
• Failing to test content layout with real users to validate design decisions.

How to convince stakeholders

One of the most crucial skills for a designer is being able to explain and back up their ideas. If you're having a hard time convincing stakeholders to design for common reading patterns, take a look at our tips to help you communicate better.

• Improved usability and engagement: By making your content more scannable and easier to navigate, you reduce friction and encourage users to engage more deeply with the application. Track metrics such as time on page, scroll depth, and click-through rates to highlight the benefits of your design improvements.
• Increased conversions: Positioning calls-to-action and key messages according to reading patterns can significantly boost conversion rates. For example, moving a call-to-action to the bottom-right corner in a Z-pattern layout or emphasizing benefits early in bullet points can increase clicks and sign-ups.
• Competitive advantage: Share examples where well-known brands or competitors have effectively used F and Z-patterns in their content design. Explain how adopting these strategies can help your application stand out, meet user expectations, and gain a competitive edge.
• Cost savings: Emphasize how optimizing the content layout upfront can save on costly rewrites or redesigns later. By establishing a solid information architecture from the beginning, you reduce the likelihood of users abandoning the application due to poor usability.

To strengthen your argument, conduct A/B tests to compare your proposed content layout with the existing design. Showcasing concrete data that illustrates the impact of optimized reading patterns can be more persuasive than theoretical arguments alone.

Remember: Stakeholders are often swayed by clear evidence of return on investment. By framing content design improvements as a data-driven way to improve user experience and achieve business objectives, you're more likely to secure buy-in and resources.

Useful tools 

These tools will make your job easier and more effective.

• Eye-tracking software (e.g., Tobii, GazePoint) – Analyze user reading patterns and identify areas of focus.
• Heat mapping tools (e.g., Hotjar, Crazy Egg) – Analyze user engagement and scrolling behavior.
• A/B testing platforms (e.g., Optimizely, VWO) – Compare different content layouts and measure their effectiveness.

Methodologies 

These methodologies will make your job easier and more effective. 

• RITE (Rapid Iterative Testing and Evaluation). This method involves holding short, frequent usability testing sessions throughout the design process. By engaging real users and iterating based on their feedback, you can swiftly pinpoint and fix issues with reading patterns and comprehension.
• Content-First Design. This strategy prioritizes developing and structuring content before creating visual design. By prioritizing content hierarchy and information architecture early on, you ensure that the design is optimized for readability and scannability.
• Context-Based Design. This approach tailors content design to the specific context in which it will be consumed. By considering the user's objectives, the device they're using, and their environment, you can customize your content layout to better meet their needs and expectations.

Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Typography in UI: How To Enhance User Experience by Felipe Guimaraes e Equipe Aela
• How People Read Online: New and Old Findings by Kate Moran
• Z-Shaped Pattern For Reading Web Content by Nick Babich