Your User’s ‘Mental Model’ May Be Very Different Than Yours

When we use software (or just about any product), we subconsciously paint a mental model in our heads for how we believe the product should work. A mismatch between your user’s mental model and how you’ve designed your software product or website could be catastrophic.

Many software product companies do not place enough weight on the importance of understanding their user’s mental models because a mental model is based on a user’s belief — not facts. In other words, it may be a fact that your product is designed to do XYZ but if your user’s think it works like ABC, you’re in trouble. During usability tests, companies are often surprised by what they see and get frustrated to see their product attempt to be used in a way it was never designed to be used.

I recently helped a family member get set up with a new MacBook (no, that is not her in the photo). To make everything work as she expected and to answer any questions she may have, I had her visit a few websites she normally visits and logs into. After successfully logging into her banking site and making sure she was able to access everything she needed, my usability testing habits kicked in and I asked her what she would normally do next when she wanted to go to another website. She told me she would first log out of the site and then click one of the bookmarks. For some reason, I asked her why she felt she needed to log out of the site first before going another site. Now, logging out of a site that contains lots of PII is not a bad idea – but since her computer never leaves her house, and she’s the only one that ever uses it, and the site would eventually time out and log her out anyway, I asked. She answer “Well, I don’t want other people to get in”. I asked her “What other people? People coming into the house?”. She replied “Oh no, I’m not worried about that. I mean other people on the Internet.” It turns out, her understanding (mental model) of how website security works is similar to accessing your safe deposit box at a bank. You have to unlock the little door inside the bank vault to access your safe deposit box (Logging In). When you’re done, you put the box away and lock the little door (Logging out). But, if you don’t lock the little door, anyone else can access it and take all your stuff.

Yes, this may be an extreme scenario of a mismatched mental model but it acted as a good reminder for me to make sure we always learn as much as we can about how the user’s think before we design – so I thought it was worth sharing.

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.

Why You Should Build Software Like You’re Fleeing A Desert Island

Let’s say you and 200 other people were on a plane that had to make an emergency landing on a desert island. All radio communication is dead and there’s nothing of use on the island…because it’s a desert island. But in the distance, you see a lush tropical island with tons of vegetation, banana trees and shelter. You know the only way to survive is to get everyone to that island. Read more