Friday, June 5, 2020

Chapter 03: Design Patterns

Chapter 03  Design Patterns

How A Landing Page Can Obtain (and Retain) Visitors’ Attention


By : Felix Wong


To create a useful landing page, it needs to be more than just visually appealing. This article will discuss why it’s important to focus on the way in which people read, scan, and interpret web pages, and how one can lead their behavior through design. 


Visual hierarchy is a fundamental design principle that drives the order and prioritization of content. This principle aims to deliver a frictionless user experience that helps visitors understand the mission of your landing page without having to hunt for it.


The Common Layout Design Pattern


Why do design patterns exist? Simply because we’re trained to process content in a certain way, namely by identifying similarities. Our eyes catch patterns and interpret information according to how it is laid out in. Visitors aren’t likely to read everything on a landing page, so it’s important to use just the right amount of content and visual elements that help people scan through the material quickly. We can categorize these scanning processes into two layout strategies commonly used in digital design: the F-pattern and the Z-pattern.


Layout Design Pattern 2


F-Shaped Pattern


Top tech companies such as Yahoo and Google believe that the top left corner is what people look at when they first land on your site. Most landing pages have the company’s logo in the top right corner, with a strong headline to grab people’s interest. Visitors’ eyes move across a page and its elements in this order:


  • Starting from the top left of the page and read towards the right
  • Scan down to the next headline and again read from left to right 
  • Repeat the scanning process until the last line


F shaped Pattern Example

F-shaped Pattern Example


Using this pattern enables easier conversion and higher engagement with the call to action. While it may not be immediately obvious if it’s working, tools like Hotjar, a plug and play analytics solution, can track the way visitors are reading and using the site. By making use of heat maps and data collected from cursor movements, clicking, and scrolling, it’s possible to improve visitors’ experiences. 

Hotjar Guide to heat maps



Image by Wordstream


Z-Shaped Pattern


This pattern is designed to assist the eye in traveling around the landing page. It creates a visual hierarchy that makes the scanning process more comfortable. It can be an effective design pattern because people read books in the same way:


  • Starting from the top left corner and scanning to the top right
  • Scanning diagonally from top right to bottom left
  • Once again, scanning across to the right horizontally


Z-shaped Pattern Example

Z-shaped Pattern Example


Your page layout does not have to be an exact Z shape. It works as long as the content displayed is directing visitors diagonally. Make sure that the most important item is at the top, and is followed by elements that attract visitors’ attention to the call to action button.


Choosing Between the F- and Z-Patterns


In order to choose the right pattern for a landing page, it’s important to consider what kind of information needs to be conveyed, and whether it needs to be presented in a particular order or flow leading up to the call to action. 


Apply the F-pattern when:


  • Designing a text-heavy landing page
  • More control is needed over visitors’ journeys
  • Multiple types of content are being displayed together


Apply the Z-pattern when:


  • Creating a minimalist landing page (less text and/or visuals)
  • Driving visitors to the call-to-action is the most important objective
  • Visitors need to be guided through the product features 


These layout design patterns have applications beyond the landing page, and can even be applied to social media and newsletters. Visual hierarchy is an important technique that can improve the user experience naturally without much technical input. By making sure to shuffle the content on the landing page from time to time, and optimizing the page structure by using heatmaps and visitor data, it’s a simple and efficient task to keep visitors informed and engaged. 


About the Author

Felix is an Entrepreneur, Community Builder and Growth Hacker in Hong Kong. He is the Community Manager of Greater China at Techstars, a worldwide network that helps entrepreneurs succeed. Since 2015, he has facilitated over 50 Techstars Startup Programs regionally, including Startup Weekend, Startup Week, corporate innovation program and regional summit.

Email This Post Email This Post