Raphael Thys
You want to grab attention.
You want to stand out from the competition in a crowded market.
You want to ensure the right things are being shown to the right visitors at the right time.
What’s the key to achieving these goals? Visual hierarchy and color psychology.
What is visual hierarchy?
Visual hierarchy is the order in which a visitor processes the elements on a website. So, for example, whether a visitor notices your call to action (CTA) button or your header image first depends on your visual hierarchy.
Whether you have deliberately designed your visual hierarchy or not, you do have one. For better or worse, every page’s layout guides users through the content in a specific order. When you take control of your visual hierarchy, you can purposefully direct the visitor’s attention.
If your technology doesn’t have a clear visual hierarchy, there’s a good chance that users will not know what the most or least important elements are. This can make them feel confused, lost, frustrated, or possibly all three. These experiences destroy user confidence, which is why they should be avoided at all costs by implementing the tips outlined in this article. What is salience? Salience is what makes things stand out. It’s the neurological and psychological factors that shape awareness, perception, and focus. These are the three prerequisites for tapping into a visitor’s short-term and, hopefully, long-term memory.
There are five major ways to control the salience of elements on your site:
- Size: elements that appear larger are naturally higher on the visual hierarchy.
- Contrast: elements that dramatically stand out from others are higher on the visual hierarchy.
- Placement: elements higher up in the page are higher on the visual hierarchy.
- Whitespace: elements with more whitespace are higher on the visual hierarchy.
- Color: elements with certain colors will have a different visual salience.
We’ll focus on that valuable intersection of visual hierarchy and color psychology for the remainder of the article. Here’s a simple 2-step process you can follow to establish your visual hierarchy.
Step 1: Prioritizing your business objectives
As a UX designer, one of your top priorities for most projects is to know what your stakeholders value. The idea of user-centered design is steadily being replaced by stakeholder-centered design. UX Designers need to satisfy all their project stakeholders, not just the end-users.
Although the visual hierarchy is the order in which users notice page components, it’s important that what they notice matches your priorities.
If you haven’t clearly defined your business objectives, it’s impossible to design your visual hierarchy. Instead, you’ll probably end up in subjective feedback purgatory: “Make it pink. No red. Wait, bigger. Maybe a bit smaller. No, no… way smaller.”
In any design project, it’s important that you understand how to move things up or down the visual hierarchy. Instead of ego battles over color, you should clarify your business priorities and apply your color system with standard rules.
When Rena (our Senior Designer and my sister) works on projects, our final polished work is all about these micro adjustments to the visual hierarchy:
Make this element pop-out.
Stop that component from drawing so much attention.
Ensure users notice this component with no conscious effort.
And so on…
Once the color palette is settled, we don’t fight over color because there’s already a full system in place that dictates the rules. From there we artfully apply those rules by making a gazzion tradeoffs.
If we can’t make the micro-adjustments work, it’s because our design system is flawed. A good color palette and design system will help you overcome most UX applications and design challenges for years to come.
To properly guide the user through the page, you need to ask yourself the following questions:
- What is the most important next step we’d like the visitor to take?
- Is that effectively communicated through the visual hierarchy?
- What are the primary behavioral design goals that we need to target?
Once you know your business priorities, the trick is to translate them into page architectures and UI that people interact with. When visitors are completing tasks on the page, the answers to these two questions need to be so obvious that they don’t even need to ask them:
- Where am I in this process?
- What should I do next?
If your priorities are clearly communicated, the experience will be so intuitive that users will fly through your tech. In good behavioral design, we educate, motivate, and control the attention of users without their conscious effort being required. This is what makes good design feel intuitive.
Get it right and users always know where they are, what to do next, and feel confident that it is easy for them to complete the tasks.
Step 2: Choosing the right color palette
With your business objectives locked down, it’s time to choose a color palette that compliments your goals.
From a behavioral design perspective, a good color palette has to satisfy multiple competing demands. It must be on-brand, have the right cognitive associations, and evoke the correct feelings. From a UX perspective, it must help you create a clear visual hierarchy and communicate to the user without requiring their conscious effort.
Since salience is the key to building an intuitive visual hierarchy, you may be asking, which color is most salient?
This is a loaded question, because the visual hierarchy of any color palette is easily modified by changes to saturation, shade and more. That means you can structure any combination of hues to form any visual hierarchy.
Even though the possibilities are endless, research on color and salience gives us some good starting points. At AlterSpark, me and the team translated several scientific papers on color psychology into visual guides. We literally added color to scientific papers that only reported numbers, and filled in many gaps.
After translating a paper by Camgoz, N. (2000), we gained a great perspective on the natural salience of different hues. The chart below shows that out-of-the-box, there’s a peak in salience around turquoise, red, and even red-violet.
Obviously, you can (and should) change the saturation, tint, etc… of each hue. However, this research gives you a natural sense of which colors will dominate others in general.
We also mapped the salience of achromatic colors, otherwise known as black, white and grey. What we found was a similar trend where overall, the whites are the least arousing and pure black is the most.
Keep in mind that your context can change everything. For this reason, these are all the most common trends for most situations.
3. Build a salient color palette
To build a salient color palette, I use the UI Color Psychology Map. It’s a tool that I developed to help my students blend strategies from UXD and graphic design with behavioral design principles.
At AlterSpark, we use the UI Color Psychology Map to create color palettes with a clear visual hierarchy for interactive products and campaigns.
There are so many things that color contributes to interactive projects. A good color palette will express your brand colors, navigational system, and notification system while meeting all of your legislative and ethical requirements for accessible design.
From a behavioral science perspective, it must convey the right cognitive associations, emotional associations, and make behavior change principles pop-out when required.
And let’s not forget the single most important and hardest factor to satisfy: it shouldn’t be “ugly”.
Why I developed the UI Color Psychology Model
I developed the UI Color Psychology Map to help my students solve some major problems in color palette design.
What I learned while teaching behavioral design for 10-years is Graphic Designers may have the best education and skills in manipulating color, but they often lack a grounding in how to use it strategically. Many designers prioritize aesthetics over functionality, which can be a UX killer.
UX Designers typically have a good sense of design strategy and cognitive psychology. However, few have any knowledge of color theory and tend to be so function-focused that they butcher color palettes. Unless they have specialized training, they probably lack insight into the emotional design and motivational psychology components that color easily taps into.
On the other hand, those who work in behavioral design are sometimes so focused on theory that they cannot translate psychological insights into real-world products.
I developed the UI Color Psychology Map to help bridge the gap. Soon after, I began using this tool for our in-house projects and then in client work. Today, it’s a staple for all interactive design work that I do.
Closing
Color psychology isn’t magic, and it’s never black and white (pun intended). It will, however, make your products more appealing, intuitive, and may bring an emotional quality that’s beyond pure functional design.
However, when also you factor in size, contrast, placement and whitespace, you’ll begin to see a meaningful visual hierarchy take shape. This will make your technology more intuitive and persuasive.
Even though color can’t fix a bad product, properly implementing clear visual hierarchies with the right color palette can make a massive impact on an under-performing product. It can also make a good product great.
By blending principles of behavioral design with UXD, we can create better user experiences that keep all stakeholders more satisfied.
SOURCES:
Cugelman, B. Cugeman, R. et al. (2019) Color Psychology. AlterSpark. https://www.behavioraldesign.academy/color-psychology/visual-hierarchy
In depth article from UX Matters:https://www.uxmatters.com/mt/archives/2020/02/capture-attention-through-color-psychology.php