In design, how something works is as valuable as visual look and feel, especially when you’re designing for human beings. However, as human beings it’s fair to say we all make mistakes and we all get distracted by something. Designing an interface takes a high level of craft and knowledge to ensure that the interfaces created lead the user to the intended task and get them to do what you want them to do. This can be anything depending on your goals as a business. In order to design an interface that leads a user to where you want them to go, you want to remove distractions. To do this, you in design, how something works is as valuable as visual look and feel, especially when you’re designing for human beings. However, as human beings it’s fair to say we all make mistakes and we all get distracted by something. Designing an interface takes a high level of craft and knowledge to ensure that the interfaces created lead the user to the intended task and get them to do what you want them to do. This can be anything depending on your goals as a business. In order to design an interface that leads a user to where you want them to go, you want to remove distractions. To do this, you have to understand how humans perceive and process visual information or other words – you need to understand interaction design. Interaction design has a lot of moving parts, so we’ll start from the beginning with signal detection theory.
Signal Detection (A quick overview)
The concept of signal detection theory states that our signals (our senses: sound , touch, and vision) are constantly exposed to noise (this can be anything and is inherent in the environment), and in order to be detected (i.e. we can see, hear, or feel our senses), there has to be a stimulus of some kind. Since we’re talking about interfaces, the stimulus is a visual element.
The next important thing to know about signal detection theory is that the user has the opportunity to respond to their senses in four ways:
- A correct response (there is noise, and your senses respond)
- A Miss (there is noise, but your senses do not respond)
- A False alarm (there is no noise, but your senses respond)
- A Correct Rejection (there is no noise, and your senses to not respond)
Ultimately, we want to build interfaces for 1 and 4, 2 and 3 are problematic areas in your interface.
Assume all elements on your site to be noise (things that are inherent in the web page environment such as star ratings, links, buttons, etc.) and your user’s signal (vision) needs a stimulus in order to respond to a certain element on your site. So what is that stimulus?
Creating A Stimulus
Color is a visual stimulus. Certain colors will attract a user’s attention to a certain section or element on your site – if this is intentional then you’re interface is doing it right, if it’s not then your interface is creating a distraction (distractions can be negative because they take away from the users intended task and can hurt your metrics).
Scientifically, several components in your eyes are activated to respond to color sensitivity based on the colors found in the visible light spectrum. Our eyes are most sensitive to yellowness and greenness (the middle portion of the visible light spectrum) more so than redness-yellowness (left side of the visible light spectrum) and blueness-redness (right side of the visible light spectrum). In addition to color, contrast is also a stimulus. Contrast can be controlled using size, placement, and color. If dealing with color contrast specifically, colors that have a high level of brightness attract a lot of visual attention.
(pro-tip: Any element that has the highest contrast will reach the users attention first)
That’s a quick overview of how we biologically respond to visual stimuluses in web design, now let’s apply these concepts to an interface and see how this science can get a user to do what you want them to do!
Putting It All Together
Before you evaluate your site for any potential distractions, lay out the user’s primary task on the specific page you are evaluating. In the example below, the primary task is likely going to be the “Buy This Now” button on the product page.
As mentioned earlier, all elements on this page should be considered as noise. Next, knowing that “Buy This Now” is the primary task, can the user detect this task (can they see it?) and are there any other elements stimulating a user’s vision on this page that could possibly be taking away their attention from the primary task in the example below?
Let’s analyze this example further:
If you guessed that the yellow button is a visual distraction, you’re right. What would work better for this design is if the “Buy This Now” button had the highest visual level of brightness on this page, while the “See all Categories” held a less prominent level of visual attention for the user. “See All Categories” may not have a huge level of importance for the user at this point in the user flow and therefore should not have such much visual attention drawn to it.
This example, according to the 4 ways a user can respond to their signals above, would be considered as a Miss. The noise we want the user to respond to is the orange button, but our signals respond to the yellow button i.e. the noise is present, but the signal does not fully detect it. Therefore, what we want to the user to do is click “Buy Now”, but they are visually distracted by the yellow button seen in their peripheral vision.
Here is a newer, and better version of their design:
Why this works: As mentioned, our eyes are most sensitive to yellowness and greenness – a user’s eyes will be attracted to the “buy now” button more so than the “add to cart” button because of how we scientifically respond to the color green. The green does a great job at holding the user’s attention on the “Buy Now” button. Yellow is now being used on the “Search” button at the top of the page, which works a lot better than it did before. While the yellow will always draw user attention away from the elements on this product page, it’s pulling the user’s attention towards the a really important site function and in doing so, it’s allowing the user to easily locate the search box (an important best practice in ecommerce UX) and it’s role has more value to the user (another important UX concept) than it did in the previous design.
The information above doesn’t mean you use yellow or green on all of your buttons. However, it means that you take this science and apply these basic principles in your own site accordingly! Consider each task your users must complete on your site, consider what you want them to do on that page, and start searching for any possible distractions and removing them! Utilizing color, contrast, and the concept of signal detection is a useful trick to add to your toolkit and ultimately, when used well, can help increase your metrics.