Visual design

What is a visual design review?

See what elements on your website receive most of the visual attention, also learn how to improve for visitors with bad eye-sight.

Jump to: What data - How effective - Which findings - FAQ

What are the pros?

  • Fewer distractions, more clarity
  • Prevent visitors from bouncing
  • Attract and serve new audiences
  • Often site-wide improvements

What are the cons?

  • Most eye tracking is simulated
  • Responsive design can be hard

What data will be analyzed?

Visibility of elements

The pages on your website will be analyzed using sophisticated algorithms that predict the amount of attention that each element gets. These algorithms look at factors like colors, contrast, proximity to other elements, etc. Based on the factors, the likelihood can be determined whether a visitor will see any given element when it scans a page.

Less distractions, more clarity

In order to improve the amount of important elements that are seen by visitors, it's often required to modify the layout of the page. By making sure elements like Call-To-Action (CTA) buttons stand out with regards to color and placement, they are more likely to be seen by visitors.


Foveal and peripheral vision

"Your mind works the following way: your eyes can see only clearly an area which roughly equals to your thumb with your arms stretched in front of you. The rest is behind a fog basically." (source)

The area that you can see clearly is often called the focal point or foveal area. On the other hand, the fog that he described is commonly known as peripheral vision. Because your eyes can only focus on a very small area of the screen at once, it has to 'memorize' the other elements on the page.

Proximity

So, if for instance the price of an item isn't within less than 2 cm of the 'Buy now' button, it will take a tiny bit of mental strain to link these two together. Perhaps this strain in just enough to dissuade them from clicking the button. On the other hand, a 'Back' button that is very close to a 'Buy now' button, might trigger people unwittingly to click it, and, therefore should be moved elsewhere.


Eye-gaze path

People don't move their eyes in a fluent motion. Instead, they jump from point to point and their brains create a sense of fluency out of the jumps. The individual points at which people stop are called saccades and the path that the eye makes through these saccades is called an eye gaze path.

Minimize saccades

Each saccade that the brain does takes a tiny bit of mental strain, just as with the peripheral vision described earlier. Two classic examples that cause a large number of saccades are faulty label placement in forms and image sliders. By minimizing the number of saccades that an average visitor makes, you increase the chances of them proceeding deeper into your conversion funnel.


Color blindness

"There is general agreement that worldwide 8% of men and 0.5% of women have a color vision deficiency. These figures rise in areas where there is a greater number of white (Caucasian) people per head of population, so in Scandinavia the figures increase to approximately 10-11% of men." (source)

Color blindness is a hereditary condition that hinders or prevents you from seeing the entire spectrum of colors. It can be present in several conditions, such as protanomaly (reduced sensitivity to red light), deuteranomaly (most common, reduced sensitivity to green light) and tritanomaly (reduced sensitivity to blue light).

Use more than color alone

About 5-10% of your visitors (depending if your target audience is predominately male or female) will neither be able to distinguish between a green and a red button, nor will a red error message stand out to them. By making sure you also use aspects like placement, text, and icons to clearly mark these different actions, you will optimize your website for people with color blindness.


Contrast levels

The contrast of the text refers to the difference in darkness between the text and the background. By making sure the color contrast is larger than those specified in WCAG guidelines, you can make sure your visitors are able to read your text properly.

Not just for visually impaired

A sufficient level of color contrast will not only help those with less than perfect eyesight to read your text. It will also make it easier for people reading dimly lit mobile screens (or, those looking at a screen in bright sunlight), and visitors using old computer monitors.

Learn how a visual design review can help to increase your revenue?

Contact us

How effective will this be?

Can you make visual changes to the website?

Many of the findings that result from a visual design review will require that visual changes be made to the website. This might prove difficult under some circumstances. For instance, if you're using a pre-build website template, it might be a complex procedure to make changes that the template designers hadn't anticipated. On the other hand, if the desired changes have been anticipated, it might be possible to perform complex modifications by just changing some settings in the admin panel. Also, you might need either a designer and/or a frontend specialist on your team to make the changes.

frontend specialist

Rigid corporate identity

If your corporate identity is very rigid, some of the proposed changes to the design can prove difficult to get permission for. This includes changes to the font face, font size, color usage and the way in which images and photos are used on the website.

In my experience, however, when either the person in charge of maintaining the corporate identity or the board sees the result of A/B tests pointing in the direction of change, the often become more persuadable.

corporate identity

Which findings will it deliver?

✓ Know what draws attention (and what doesn't)

A visual design review will show you whether the correct elements on your website draw enough attention. For instance, if a Call-To-Action button on your landing page doesn't draw enough attention because it's displayed in a non-contrasting color, this might cause some visitors to miss it altogether. Other examples taking from earlier website reviews I've performed include images on a page that draw a disproportionate amount of attention, and a 'Proceed to checkout' button that was almost indistinguishable from all the other links on the page.

✓ Know that people can (or can't) read on the page

Text that your visitors are unable to read comfortable probably won't be read by them at all. While a case can be made to display as little information as possible on the pages, the information that does appear on it should be readable by the largest chunk of your target audience possible. In most of the website reviews I've completed so far there were several visual design violations. For example, a font size of smaller than 10 pixels in height, or contrast that even the brightest computer screen was barely able to show.

Is it relevant for my target audience?

As described in the paragraphs above, there are quite a few sub-groups of your audience that could benefit from a visual design review. For instance, there's elderly (contrast), males (color blindness) and teenagers (mobile). Depending on how prevalent these sub-groups are in your target audience, some changes might be prioritized over others.

Helpful for everyone

However, do note that most of the findings resulting from a design review will apply to many if not most people. While a high contrast is most helpful to people with visual impairment, everyone will enjoy a well-readable text. The same applies to clarity in error messages and placement of CTA buttons.

target audience