When it comes to designing for good user interfaces, especially for website design interfaces, there are so many reading patterns that you can apply. Each pattern has their own knowledge of how people perceive visual information and theory of how to improve user experience while reading or observing content. Among so many theories, there are three patterns that gain the most popularity. They are the Gutenberg Diagram, the F-pattern, and the Z-pattern. If you are a web designer, we highly recommend this article for you!
The Gutenberg Diagram
This theory reflects the western culture of reading which is top to bottom and left to right.
From the diagram above, we can see that there are four quadrants. For key contents like a headline and a logo, you’d better place it in the top left quadrant. Then, you can place logical conclusion in the bottom right quadrant in the bottom quadrant. Therefore, it is recommended to put a CTA (call-to-action) in this section in the form of text, a video, or a link.
The F-Pattern
In F-pattern, people start engaging with content by moving their eyes in a horizontal line. Then, they scan a vertical line trying to find the points they’re interested in. Then, they will continue what they’re looking for after scanning the content horizontally.
You can use elements like bullet, points, typography, colored buttons, and highlighted texts and so on to improve the user experience. These elements give visual weight to the interface and indicate important points.
The Z-Pattern
Many people consider Z-pattern as the king of landing pages since it covers important aspects including visual hierarchy, content structure, and CTAs. Different from F-pattern, which is more suitable for text- or content-heavy page, the Z-pattern efficiently grasps users’ attention on landing pages with minimal copy. Here is an image of Z-pattern.
You can follow the structure below when designing with the Z-pattern:
- A top horizontal line should include catchy contents and elements like the logo and navigation bar (so users can quickly access the website’s pages).
- Following a classic storytelling approach, a diagonal line should introduce users to the main content including the main copy, attention-grabbing images, slideshows, and so on.
- Finally, a lower horizontal line should feature a CTA that stimulates users to perform a certain action such as signing up, subscribing, or making a purchase.
How to Prevent User Dissatisfaction with Interface Changes
Since everyone is unique, we cannot determine which pattern that might suit your users. To know what kind of pattern that might suit your readers; you can apply the following methods to evaluate the design and functionality of a new or an existing system with real users. Here are some of the methods:
A/B Testing
Comparing two different concepts is called as A/B testing or split testing. In A/B testing, you can compare buttons, CTAs, color schemes, and banners. The aim of A/B testing is to figure out which of various options is the most successful, for instance, which button gets the most clicks. Each case of A/B testing is unique. What elements you test depends on your business goals. However, the following elements are generally tested:
- Copy (product descriptions, button text, etc.)
- Calls-to-action (for example, their placement or wording)
- Application forms
- Layouts
- Images
- Color Schemes
Bear in mind that in order to get relevant results, the A/B testing should be performed simultaneously. Besides, doing A/B tests will avoid you from audience backlash and can even help you achieve better conversion rates by making necessary tweaks to an interface.
Hallway Testing
If you are looking for an informal way, the hallway testing is the answer. It involves going to a crowded area and simply asking passers-by to test and evaluate an interface. For example, you may go to local Starbucks and do little interviews with strangers in that cozy place. You can also apply this method with your office colleagues. Therefore, to conduct testing successfully, you can plan everything in advance.
By performing this method, you can figure out what elements of an interface puzzle users and how your users conceive the system as a whole.
Five-Second Testing
The main purpose of 5-second testing is to elicit the user’s first impressions to an interface and discover whether a website or an app communicates its purpose to its visitors. In 5-seconds, they have to view an interface and try to remember as much as possible. Then, they will be given some questions regarding the sense of their reactions.
Through 5-second observing, you can generally aim at evaluating a visual UI component rather than the whole interface.
Conclusion
Even though the changes of UI will upset people, ignoring the last trend will ruin your product. Therefore, you need to study your pattern before applying it. This trick will make the necessary tweaks without scaring off your users.