8 mental model design heuristics
Rules of thumb for producing learnable designs
I wrote here about how people build mental models of the products they use and how designers can leverage them to produce better experiences. One way I suggested doing this was using a model of building mental models as a design heuristic (see the previous article for more on that). The more I thought about it, the more I realized the benefits to be gained from a formal list of mental model heuristics drawn from the decades of published research on the subject. So, I revisited the literature and sketched a list of eight heuristics for designing to support mental models.
Design heuristics
Before diving into the heuristics themselves, I want to mention what heuristics are and how I generated this new list. Heuristics are simply rules of thumb. Design heuristics are rules of thumb or principles for design based on empirical, research-informed best practices. Some design heuristics include the famous heuristics for interface design of Jakob Nielsen¹ (Figure 1) and the lesser-known cognitive engineering principles of Gerhardt-Powals². A heuristic evaluation is an assessment of a product experience in which multiple evaluators (e.g. designers, researchers) review a UI or product experience and record any ways in which it violates the established heuristics. Heuristic evaluations are not intended to replace usability testing or research but can be a cost-effective and time-efficient method of identifying ways to improve the experience.
Where these new heuristics come from
When I looked at the popular existing heuristics I noticed despite the predictive power of mental models only a few reference them, and even those are very broad (e.g. Nielsen’s “Match Between System & Real World”). I decided to take a stab at generating a list of design heuristics based solely on the mental model's literature.
To generate a list of mental model heuristics, I followed an adapted version of the process for developing heuristics laid out by Rusu and colleagues³ (see their article for more detail on that process). In short, this involved
- Reviewing the literature on mental models (you can find a list of the most relevant peer-reviewed articles I reviewed here)
- Pulling out the most impactful findings and theories
- Creating the heuristics
- Comparing them to other popular heuristics for similarities/differences
Step 4 was particularly important because it is important to avoid creating new heuristics that simply repeat what already exists.
Eight design heuristics to support mental models
After reviewing the most relevant literature I generated eight design heuristics (Figure 2) for utilizing and supporting user mental models.
I compared these heuristics to Nielsen’s and Gerhardt-Powals’ to look for similarities. Heuristics ID1 & ID2, ID6, and ID7 mapped to Nielsen’s (#2, #8, #7) and ID6 mapped to Gerhardt-Powals’ (#7). The rest of the heuristics did not map in any important way I could tell. This gives some confidence that these heuristics are unique and can help catch additional usability issues the other heuristics would normally miss.
I should probably also point out that although heuristics #1 and #2 may look like the same thing stated in two different ways, they are distinct. A design might cue either accurate and inaccurate mental models, both at the same time, or none at all. It is not simply one or the other. The designer should consider anything that cues an accurate mental model as well as that which cues inaccurate models in the same context.
Examples of using these heuristics
The heuristic descriptions above are abstract and some people might find them difficult to apply. I put together a few quick, concrete examples to illustrate how they could be applied.
Example: Cuing accurate mental models
Showing users a progress stepper paired with Back & Continue buttons cues most users that they are in a linear flow and should set their expectations accordingly (each section is a step, each page will have a set of form fields, the ability to move back and forth between the pages, etc.).
Example: Cuing wrong mental models
Displaying an “undo” button in the toolbar of a content window cues mental models that tell users they can work casually with the contents of the window, always reserving the ability to return to a previous state. If the undo button is not universal, but instead only applies to certain types of content or has a limited memory, users may unwittingly adopt a trial-and-error approach and lose their progress — they think they can undo when they can’t.
Example: Timely and accurate feedback
Users of a social media app send a direct message that includes a gif. It offers immediate visual feedback in the form of a loading bar indicating the message is “in progress” and not yet sent. Users are able to immediately confirm or update their mental model. The app might also give auditory feedback (a “ding”) when the message is successfully sent. This allows them to better understand the connection between types of messages (text-only versus larger files) and the time required to send them. If users do not receive this feedback immediately, they might assume (based on a previous mental model) the message was sent immediately and close the application before the task has been completed.
Example: What things do and how they work together
A racing video game shows players the wheel of the car can be turned with the joystick and the brakes can be activated with the shoulder buttons. Only after showing this does the game teach the user that braking while simultaneously turning the wheel causes the car to drift. Drifting is the result of two independent actions. The player first learns the two independent actions and later learns how they relate to one another.
Example: Mental simulation and probabilistic decision-making
The landing page of a restaurant reservation website starts with a simple search bar. Users mentally simulate the next step in the process will be typing in a location and then looking through a list of restaurants before choosing one, selecting a date and time, and finalizing the reservation (or something closely approximating this flow). They will make the decision of whether to start the flow or not based on their simulated guesswork of how long it will take, how easy it will be, how much information they need on hand, and so forth. A website that aligns with this flow will allow users to make accurate judgments and decisions. A website that, for example, requires users to sign up for an account before finalizing the reservation is out of step with the mentally simulated flow. The designer could either remove this step or provide some means of informing users of this requirement.
Example: Task-related content during learning
A loan servicing company sends client emails about new changes to their UI. As users navigate the new UI they are confronted with promotional offers for unrelated products in the form of a pop-up modal window. Offering the promotion at the beginning or end of the users’ learning flow, or not surfacing it at all, would allow users to experience uninterrupted learning and help them to build a more accurate mental model.
Example: Deep experience
An email app comes with basic out-of-the-box email filtering and categorization but offers the ability to configure custom filtering, categorization, and automatic responding for users who have mastered the fundamentals and are looking to use their email more efficiently.
Example: Experience progression
A to-do mobile app first introduces new users to how it uses language, like how it defines a to-do item vs a project vs a goal. After helping users understand it’s terminology, it allows them to learn the essential step-by-step actions needed to create to-do items, place them into project folders, and associate projects with personal goals. Later, after users have mastered these core use cases, it supports even more nuanced use cases such as developing strategies for reminding themselves of tasks, separating work from personal projects, and so forth. The app supported learning and mastery of these three areas in a natural order.
When should you use these heuristics?
What is so useful about mental model theory is that it applies to virtually all human behavior. This list of heuristics can be applied to just about any product experience. However, because several of the heuristics are best suited to support the development of mental models over time (from the novice to the experienced user), these heuristics are especially appropriate for designs that users will experience repeatedly or for product onboarding experiences.
Next up
These heuristics are drawn from a wealth of scientific literature and are ready to be applied to design problems right now. However, it is always a best practice to validate heuristics being used. So, I hope I am able to do that at some point. Until then, I hope you find these design heuristics useful.
References
¹https://www.nngroup.com/articles/ten-usability-heuristics/
²Gerhardt‐Powals, J. (1996). Cognitive engineering principles for enhancing human‐computer performance. International Journal of Human‐Computer Interaction, 8(2), 189–211.
³Rusu, C., Roncagliolo, S., Rusu, V., & Collazos, C.A. (2011). A Methodology to Establish Usability Heuristics. ACHI 2011.
⁴https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
