Learn Visual Design Principle by Comprehending Reading Experience
Do you think visual design is a nice to have? What is the priority of visual design in your business?
This article strives at presenting the summary of visual design principle not only for designers, and those who are out of the design sphere. In addition, it is aiming to offer a practical take-away that is applicable to a business presentation, UIUX design and online content. Long story short, let’s start!
The landscape
- 3 golden rules in good designer’s mind
- The importance of visual design
- A changing reading behaviour & user cases
- Visual Design Principle Framework
3 golden rules in good designer’s mind
1. ”Good design is invisible.”
Good visual design allows the user to concentrate on their goals without interference, it should be understandable and predictable.
2. ”Good designers do not do things randomly”
All decision-making on design follow by design principle and user’s behaviour. It makes things meaningful.
3. ”People may not remember exactly what you did, or what you said, but they will always remember how you made them feel.” — Maya Angelou
Visual and experience are remarkably coherent. Good visual design guides the users with excellent experience of reading.
The importance of Visual Design
The goal of Visual Design is to improve the experience of users through aesthetic elements, which is very critical to evaluate its values. If it works well, the user will not be aware of its presence. On the contrary, if it goes wrong, the user will be reluctant to comprehend and explore the content effectively.
A changing reading behaviour
Design stems from how people see, how people think and how people feel. One of the best way to learn design is to observe how people do, and only then, transfer the value to the design.
“Only about 16% of your online text will be read word by word” — The reading behaviour in generation Z has become very visual and people now engage fast with the content. Below are 3 crucial steps to improve the reading experience that suits this new user behaviour:
- People read by scanning : The user scans the page and picks out key individual words and sentences / e.g. F-shaped reading pattern
- The information focus depends on their tasks and goals : The user pays attention to the specific information that is related to their tasks
- People only read the content they are interested in: When the content helps them concentrate on sections of interest, they will switch from scanning to reading
Good visual design enhances efficient scanning
To summarise, good design enhances efficient scanning. The users should not feel overwhelmed by the information, and there should be no confusion on the structure and hierarchy of the layout, in other words, it needs to show comfort and intuition.
To support those theories, I am going to share two noticeable examples that appear in our daily web applications:
-Youtube-
When you open your YouTube and look at the recommendation list, where is your focal point at first? The text at the bottom? Or the text in the image?
It is an obvious trend that the video thumbnails are well-decorated by YouTubers. This approach is to catch audience’s attention rapidly by creating a good visual and attractive title design, along with their brand style.
-Facebook-
Facebook rolled out a feature allowing users to post a personal text status with coloured backgrounds, so as to highlight the text in a visual and interesting way for eye-catching posts in your friend’s news feed.
Visual Design Principle Framework
Here is a summary of the visual design principle framework in which you can go from “high-level concept” to “practical tools”. When you start designing your visuals, this framework would be extremely helpful to guide and inspire you:
From Top to Bottom: While considering the reading experience, visual hierarchy is the top priority that we should deeply dive in. It helps users to concentrate on what they care in a short time, as well as enhancing engagement. Moreover, I define it into 3 layers based on reading behaviour:
1. Build the strongest visual point for user to focus on your topic/first action point rapidly.
As user only spends few seconds to scan your content, the headline, caption and key action point in your content should be strongly highlighted. This is the first key touchpoint to make them stay longer. Elements can be used: large font size, outstanding color (e.g. Red in greyscale page), eye-catching image etc.
2. Build Elements/Sub-headers that are easily scanned and found, in order to finish user’s task & goal.
This approach aims to follow the 80/20 rule — which ideally allows the user to read only 20% but approximately understand 80% of your content. Setting sub-header/element in each section help the user to navigate and search the specific information that they are looking for. In addition, people tend to perceive similar visual content as a group, so break it down to “one idea one step/group” makes thing easier to be scanned and comfortable to read. Elements can be used: line/shape for building blocks, white space for division, icon, font size etc.
3. Build a seamless transition when user is interested in your content.
How to control the reading rhythm is key in this section. Leveraging bulleted points to make the primary statement stand out is ideal. If it is a user interface, keep the pace and let the user smoothly moves on to other tasks through the same pattern. The following elements can be used: icons, colours, images etc.
Second level — Consistency & Rhythm:
The entire feeling of visual and experience are dominated by Consistency & Rhythm in your delivery. These two are profoundly associated with the user experience. Consistency is enabling your design to behave in the same way, while rhythm is about controlling the pace of the eye movement.
Third level — Proximity, Simplicity & Balance:
This level is about the means of how to arrange the elements in your designs. Proximity allows the user to perceive the elements in group. Simplicity helps user to achieve the goal by minimising the cognitive load, “less is more”. Balance gives the user a sense of equality and harmony on a page.
Bottom level — Practical tools
The bottom level offers practical tools that sustains the above design principles, comprising alignment, white space, contrast, self-evident, one idea one step etc.
Conclusion
Visual design and experience are remarkably coherent. When starting to plan the visual design work, at first, consider how you lead people to perceive the entire content, rather than only what colour to use.
Author bio
Rocky Fong (Long Kei Fong) graduated from MA Service Design, Royal College of Art, UK, with product design background. Currently he is a visual & service designer at Tata Consultancy Service. He is passion at creating new values to society by merging design thinking and multi-practical design skill in business innovation. Find me more on https://rockyfong.com
