In the last 20 years, some interesting research into vision has discovered and documented the visual properties that “catch our eye”, i.e., those properties that trigger a reaction in our unconscious brain without any effort or thought.
These visual properties are known as preattentive. Tasks that can be performed on screen in less than 200 to 250 milliseconds are considered to be preattentive. This has big implications for website usability. Let me explain.
When analysing a website’s usability, I use a bespoke 265-point check developed in-house at Endless Gain. This rigorous usability analysis spans 10 key aspects of the “user experience” and scores them towards a full report of recommendations for improvement.
And one of the most important aspects that we scrutinise in a usability analysis is visual hierarchy.
Visual hierarchy is ultimately concerned with what stands out. And what stands out should be directly correlated to what is important.
You might think this is just about your call to action (CTA), but it actually works on many subtler levels than that. This can be tested by analysing time to first fixation.
This graphic from our User Testing Laboratory shows the time to first fixation on various aspects of a user interface. We can use this technology to examine the visual hierarchy of web pages. By understanding visual hierarchy, we can begin to exert some control over the order in which our information is consumed. Time to first fixation is discussed in greater detail in this article.
Think about things that your eyes are immediately drawn to. A sudden movement. A splash of colour. An unusual shape. Your brain is asking—what is this saying to me? Why is it like that? This is preattentive processing.
Understanding preattentive processing is useful for those designing websites and apps as it will improve intuitiveness and yield a faster and more natural user experience. I believe it is something all communication designers should be thinking about.
Colin Ware, in his book “Information Visualization: Perception for Design” (Morgan Kaufmann, 2012) defines the four preattentive visual properties as follows:
Let’s look at each of these in detail.
What is preattentive in terms of colour is contextual, it’s about what stands out in the wider environment and it is closely related to the design principle of contrast.
Colour can be about differences in hue (red, orange, yellow, green, blue, violet), saturation (intensity), tint (lightness) or shade (darkness).
Form can be manipulated to either call attention to something or to reduce our attention on it. For example, in data presentation, you can manipulate the size of an object to indicate its importance by making it larger, and you can make it smaller to reduce its importance.
Form attributes include:
The following image is a graphical representation of each of the above.
You can see how each form property can be used to call attention to a part of a visualisation; you might not realise it but you didn’t even have to think to see these differences—it was all done in your Sensory Memory without conscious effort.
There are two sub attributes of movement, motion and flicker. Movement is an extremely effective way of grabbing attention, but it quickly gets annoying and can distract too much from all of the other information that you are trying to present. It has also been over-employed in banner adverts and other forms of web advertising over the years and may be a primary reason for the rise of ad-blocking software.
There are several considerations for spatial positioning including:
Clearly, I believe that the best interfaces employ preattentive processing to help users see without thinking…something we’ve learned from web and mobile usability experts such as Steve Krug.
Activities, tasks and goals have different priorities for you and for your users—and the more you can guide users to easily complete these tasks, the happier they will be and that could mean more conversions for your website.