Why A Poor ‘Visual Hierarchy’ Will Destroy Your Software’s User Experience
The term “Visual Hierarchy” refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception. Objects with highest contrast to their surroundings are recognized first by the human mind. The term visual hierarchy is used most frequently in the discourse of the visual arts fields, notably so within the field of graphic design.
In art school, my teachers constantly reinforced the importance of assigning a proper visual weight to the elements in any design or painting so that the focal point jumps out and the overall composition is sound. When designing software, these same principals can be applied to enhance the overall user experience and goals of the product. Some of these will seem obvious but when you’re in the throws of the project and your client is asking you to do things that you believe will negatively impact the UX, it’s more effective to back up your suggestions with data, research findings and these simple Visual Hierarchy principals:
“When everything appears important, nothing is important”
This quote still repeats in my head everyday — and for good reason. During the critique sessions in my art school classes, the teachers would walk around and evaluate everyone’s project up on the walls or easels and inevitably they would stop at someone’s project (yes, sometimes mine too) and say out loud “Class, what happens when we make everything appear important?” and the class would respond “Nothing is important”. So, all these years later, whenever we get into a situation where a client asks something like “Can you make this standout more?”, I like to impersonate my art school teachers by saying “Sure, we can do that but just know that ‘When everything appears important, nothing is important'”. Often times, it causes them to pause and think for a second but then they get it.
“Make something important, appear important”
Sounds simple enough. If there’s an element on a screen that you want to make sure the user does not miss or it is meant to drive an action, you should make sure it appears like one of the most important elements on the screen. For example, there’s a very good reason why the ‘Add To Cart’ or ‘Buy Now’ button on an ecommerce Product Detail Page (PDP) typically carries a very heavy visual weight — you don’t want users to work to find the most important thing on the screen. Any time you make the user work to do something it adds friction to their task and it greatly reduces the probability of them completing the task. Reducing friction is one of the many basic principals in Conversion Rate Optimization (CRO).
“Make something unimportant, appear unimportant”
You guessed it, in contrast to “making something important, appear important”, you need to make sure elements that are not important or less important, appear less important. This can be achieved in many different ways, such as:
- Location of the element
- Size of the element
- Color of the element
- Boldness or thickness of the element
If your brand guidelines dictate that all buttons should appear the exact same size and color, you need to reexamine your guidelines. The appearance of something as simple as a button should be carefully scrutinized for how important or unimportant it is so that it visually informs the user without making them think much about it.
“Every Element Competes with Every Other Element”
Whether we were designing a magazine ad or creating an illustration, our teachers would often say “Remember, every element you add to your (ad/illustration) visually competes with all the other elements — so be careful about what you choose to add so that it doesn’t take away from your primary focal point.” This is a great lesson to use when a client asks “Can we add these (buttons, images, links, text, etc…) to this screen?”. Our response is usually “Are you sure you want these elements to visually compete and take away from the other important elements on the screen now?” Sometimes the answer is “Yes.” – but it at least creates a habit of stopping and carefully thinking through the decision.
So How To Define A Clear Visual Hierarchy?
Sometimes, when we are struggling to define a clear visual hierarchy, we create a simple spreadsheet (like the one on the right) with a column that list each element on the screen and columns for “Low”, “Medium”, and “High”. We then give this spreadsheet to the client as a homework assignment and ask them to do their best to assign a single visual weight to each element. The key is to make sure there are only one or two elements in the ‘High’ column. Often times, this can be a struggle for the client, which is partly why we do it because we want to demonstrate that if it is difficult for them to define the visual hierarchy for the screen, imagine how it will be for their users.
How To Test Your Design’s Visual Hierarchy
Another art school lesson I learned was “The Blur Test“. This is when we would stand back from our paintings or designs and squint our eyes to blur our vision. When you do this, your design immediately reveals its most important and least important elements. This technique also mimics how your users’ brains initially scan and process your design. Whenever we perform an audit of our client’s software design or evaluate our own designs, we like to open a screenshot of a design into Photoshop and apply a 3 to 4 pixel Gaussian Blur to the screenshot to help reveal the true visual hierarchy of the screen.
For example, in our blog post “5 Things The New Gmail Design Got Wrong” we used The Blur Test to reveal the flaws in Gmails new sidebar design. The screenshot on the left is the old Gmail design, which correctly makes the “Compose” button appear like the most important element in the sidebar. In the middle is the new Gmail design, which makes the inbox navigation link the most important element in the sidebar. We would recommend that a navigation element have the appearance of a supporting element (not the most important element) because it simply helps reinforce what screen the user is on. Meanwhile, the ‘Compose’ button almost entirely disappears into the background. The screenshot on the right is our recommended redesign. This design assigns a heavy visual weight to a blue ‘Compose’ button, which we felt was also a better color than red since red is typically reserved for errors, warnings and alerts. We then highlighted the Inbox navigation link with a yellow highlight to, well, highlight what screen the user is on.
And, as always, test your design with users and monitor the use of your design with heat map tools and video playback tools.
