In web design, the focal point is the area of interest and emphasis. It is the main object that you want your user to notice and comprehend. Typically focal points are headlines, call-to-action (CTA) buttons, and other clickable objects.
Even though it might seem obvious, sometimes designers forget to highlight the most critical elements in the design.
On the other hand, designers cannot emphasize everything. It causes a page to lack visual hierarchy, and the design might end up looking messy. Therefore, if your goal is to highlight some design elements, other elements must fade into the background.
To avoid confusion for your customers, use the information and tips provided in this article to deliver the best experience on your web page.
Why do we need focal points?
Research shows that our eyes move 4–5 times per second when we read or view any static scene. As a designer, your goal is to grab the viewer’s attention to the desired elements while scanning your page. And focal points will be the first things your customers will notice.
Your page needs a balance to succeed. You cannot emphasize every aspect and hope for the best. It is crucial to establish dominance on the page and create focal points to grab the most attention.
Do F-shaped and Z-shaped scanning patterns challenge focal points?
There is a general rule of how people go through the page: the F-shaped pattern and the Z-shaped pattern. And we know it, thanks to eye-tracking tools. Eye-tracking has elucidated the way people look at things — both on the printed page and the web.
The basic rule is that users will scan more information-dense pages in the F-shaped pattern. And pages with fewer data displayed tend to elicit eye movement that resembles the letter “Z.” It means that most of the time, users will notice the information presented on your page’s top-left corner first.
These are principles, not guarantees, so do not trust it blindly. Focal points are still going to be a center of attention. According to the research conducted by Worcester Polytechnic Institute:
- “Competition for attention is not limited to the boundaries of items adjacent to a focal area. Large stimuli that are not close to the focal area can still act as a distraction and compete for a viewer’s attention.”
Therefore, once you give your design elements different visual weights and establish a clearly defined visual hierarchy, the patterns mentioned above are no longer dominant factors. It means that you are in control where people will look at first.
How to create focal points?
Focal points can be established with size, color, contrast, texture, etc. Anything on your page that gets more visual weight and, therefore, is significantly different from the rest becomes a focal point, to put it simply.
You can have several areas of interest on your page. However, there needs to be one that will attract the most attention. Your most crucial element will be called the most dominant focal point, and it will be on the top of the visual hierarchy.
There is an unofficial standard to use three levels of dominance:
- The most dominant focal point – elements with the most visual weight;
- The sub-dominant – elements of secondary emphasis;
- Subordinate – elements with the least visual weight.
You can start to create different dominance levels by making one of the objects the most dominant focal point in your design. From the most dominant element, users will follow to other focal points. The order depends on the weights of these focal points and visual cues indicating where to look next. There needs to be enough difference between these levels for people to distinguish one from the next.
If your landing page’s goal is to generate the most conversions, your most typical user will be searching for the CTA button and other clickables right away. You can use that for your advantage and dominate the page with the call-to-action button. In the second level of dominance, you can have the most relevant information. For example, what your user should expect after clicking the link. And finally, on the lowest level of the hierarchy, you can leave a white space or general body text.
Percentage of Attention test on Twilio landing page
Let’s see how focal points are distributed on the cloud communications platform’s Twilio landing page.
Attention Insight algorithm mimics the human vision during the first 4 seconds after seeing the image for the first time. The Percentage of Attention (PoA) is calculated based on how many gaze points it would get if real people looked at the image. Gaze point is when the gaze stops at someplace, at least for a moment.
PoA estimates what percentage of all image gaze points are in the selected area. In other words, it shows how many people looked (their gaze stopped) in that area.
The Percentage of Attention shows that the main headline is the most dominant focal point of the landing page with 49% of the attention. The woman’s face and the main CTA button represent the sub-dominant focal points with 17% and 10% of the attention, respectively. All the other items, including the Twilio logo and secondary CTAs, are subordinate.
There is no right or wrong answer if this particular distribution of focal points is optimal. It all depends on personal design objectives. However, it’s a great way to measure pre-launch designs and react accordingly.
Conclusion
Focal points are vital to consider when establishing a visual hierarchy on your page.
You can arrange your web design according to the page’s general scanning patterns, but do not forget to emphasize your most important elements regardless. No matter where you place your most dominant focal points, they will always attract the most attention.
Attention Insight is an excellent platform to help you with arranging focal points. The heatmaps are generated according to the numerous data from the eye-tracking tools and will give you a clear understanding of how your users will interact with your design.
3 Responses