Are you still not familiar with Mental-Models? | UXUI Design

Abishek
9 min readAug 21, 2023

--

Have you ever noticed that when you use different social media apps, they kinda feel familiar? Like you know where to tap and what will happen next? Well, that’s not by accident. It’s because of something called a “mental model.” Let’s explore what mental models are and how they make our digital experiences smoother.

this image ilustrates the title of the blog

Context

  1. What’s a Mental-Model, Anyway?
  2. Why should Designers care about it?
  3. How to Research Mental-Model?
  4. How to Draw Mental-Model Diagrams?
  5. Final Thoughts…

What’s a Mental Model, Anyway?

Think about your favourite app, the one you use day in and day out. Every time you tap, swipe, or click, your brain is mapping out these actions on its own treasure map. You begin to notice patterns — where the buttons are placed, what happens when you press them, and the outcomes you expect.

this image depicts people using their phone

Anticipating the Journey

As you become more familiar with the app’s layout and interactions, you start anticipating what’s around every digital corner. Just like how a seasoned traveller knows where the best view or the cosiest cafe is, you know where to find your favourite features or accomplish specific tasks. It’s as if you’ve developed a sixth sense of this app’s virtual landscape.

The Power of Mental Models

Now, picture yourself opening this app once again. You’re not starting from scratch, right? You’re not fumbling around, wondering where to go or what to do. No, you’re confidently following the mental map you’ve created. You know exactly which paths to take to reach your destination within the app. This inner guide you’ve developed is your mental model.

this image depicts a confident mobile user

Your Guide to a Smooth Experience

In essence, a mental model is like having a trusty guide in a foreign land. Just as a guide helps you navigate unknown terrain effortlessly, a mental model guides you through the app’s interface seamlessly. It’s a combination of your past experiences and your expectations, all neatly organized in your mind, ready to make your digital journey smoother.

So, next time you open an app and everything seems to make sense, remember that it’s your mental model at work. It’s your personalized treasure map, making sure you have an adventure without confusion. And just as a well-worn map helps a traveller, a well-constructed mental model ensures you’re always in control of your digital experiences.

Why Should Designers Care About Mental Models?

Think about your favourite app for a moment. You know exactly where to find the buttons you need and how to perform various actions, right? Now, imagine one day you open the app, and everything has been rearranged. The buttons you used to tap are in new places, and the actions you were accustomed to are now different. How would that make you feel?

Chances are, you’d feel confused and frustrated. It’s like suddenly driving on a road you’ve never been on before without any signs or directions. This is where mental models come into play.

this image depicts an fustrated person since their app is not the way they precived it is.

The Importance of Familiarity

As designers, your aim is to steer clear of this frustration. Your goal is to create an experience where users open the app and instantly feel like they’re back in a familiar space. Your mission is to ensure that the buttons and actions users have come to associate with specific functions remain reliable and consistent over time.

this image depicts people in discussing about the consistency

Why? Because Consistency Matters!

when we talk about design, consistency plays a huge role. It’s like the secret sauce that makes things click for users. Imagine this: when you keep buttons, icons, and actions in the same places users expect them to be, you’re actually following the mental picture they’ve built in their heads. This predictability is a real time-saver. Users don’t have to relearn the app every time it’s updated.

this image illustrates consistency

Here’s the cool part: you’re like a detective, observing how users use the app and the paths they naturally take. Those behaviours create patterns, and these patterns are like the blueprint of what users expect. Your job is to make sure the design matches this blueprint. When the design fits the way users think, that, my friend, is what makes using an app a delightful experience.

How to research for Mental-Model?

Understanding how users perceive and interact with a product, and then designing interfaces that align with those perceptions, is what researching mental models is all about. This research helps you create user-centred designs that feel intuitive and familiar. Here are the steps you can follow to conduct effective research into mental models:

  1. Conduct User Interviews: Talk to users one-on-one. Ask them how they approach specific tasks, what outcomes they expect from certain actions, and what aspects of the product matter most to them. User interviews offer insights into user perceptions and interactions.
this image depicts designers conduct user interviews

2. Observe Users in Context: Observe users while they’re using the product in their natural environment. Watch how they interact with it, which features they use the most, and any challenges they face. This contextual observation provides a real-world understanding of their mental models.

this image depicts designers observing users using their phone

3. Analyze User Feedback: Examine feedback gathered from surveys, support requests, and reviews. This helps uncover how users view the product and pinpoint areas they find confusing or frustrating. User feedback can reveal discrepancies between their expectations and the design.

this image depicts of note taken by a designer to analysis

4. Use Card Sorting: Employ card sorting exercises where users categorize items based on how they perceive connections between them. This reveals how users mentally group and organize information. Card sorting aids in understanding the structure of their mental models.

this image depicts card sorting

5. Conduct Usability Testing: Observe users as they interact with the product in usability tests. Look for instances where their actions or expectations don’t align with the design. Use the insights gained to refine the design and bring it closer to users’ mental models.

this image depicts testing of prototyp

How to draw a Mental-Model Diagrams?

Drawing a Mental Model diagram involves visually representing how users perceive a product or system and expect it to behave. It’s a powerful tool that helps designers bridge the gap between user expectations and design decisions. Here’s a step-by-step guide on how to create a Mental Model diagram:

this image depicts an example mental model diagram
Mental-Model

Step 1: Define the Scope and Focus:

Determine the specific aspect of the product or system you want to create a mental model diagram for. It could be a specific task, feature, or interaction. This clarity will guide your diagram’s structure.

Step 2: Identify User Expectations:

Based on your research, gather insights into how users expect the chosen aspect of the product to work. This involves understanding their thought processes, anticipated outcomes, and interactions.

this image depicts designer mapping and listing user actions

Step 3: List User Actions:

Outline the sequence of actions users typically take to achieve their goals within the chosen aspect. For example, if your focus is on signing up for a service, list the steps users would go through.

Step 4: Map User Expectations:

For each user action, depict what users expect to happen as a result of that action. This could involve adding labels, descriptions, or even simple symbols to represent their expectations.

this image depicts designer mapping and listing user actions

Step 5: Compare with Design:

Now, for each user expectation, compare it with the current design or proposed design. Identify any areas where there might be a mismatch between user expectations and the design.

Step 6: Highlight Mismatches:

Use visual cues to highlight areas of discrepancy between user expectations and the design. You can use colour coding (e.g., red for mismatches, green for matches) or annotations to indicate where adjustments are needed.

this image depicts designers highlighting and labelling why they took that design decision

Step 7: Propose Adjustments:

For areas where there are mismatches, propose design adjustments that align with user expectations. This could involve rearranging elements, changing labels, or refining interactions.

Step 8: Represent the Model:

Now it’s time to put all the pieces together in your diagram. You can use various tools depending on your preference, such as paper and pen, digital design software, or specialized diagramming tools.

Step 9: Create Visual Connections:

Connect each user action with its corresponding expected outcome and design representation. Use arrows, lines, or other visual cues to show the flow of user interaction and the expected results.

Step 10: Label and Annotate:

Add labels, annotations, or descriptions to provide context for each element in the diagram. This helps viewers understand the connections and the reasoning behind design decisions. That would something like this.

this image depicts designers highlighting and labelling why they took that design decision

Step 11: Test and Validate:

Share your Mental Model diagram with team members, stakeholders, or even users to validate its accuracy. Their input can help ensure that the diagram effectively represents user expectations and guides design decisions.

Step 12: Iterate and Refine:

As you gather feedback and implement design changes, update your Mental Model diagram accordingly. This iterative process ensures that the diagram remains an accurate representation of user expectations throughout the design lifecycle.

this image depicts designers refining the outcome

Remember, the goal of a Mental Model diagram is to visually communicate the complex relationship between user expectations and design decisions. It’s a dynamic tool that helps designers make informed choices that resonate with users’ mental frameworks, leading to more intuitive and user-friendly products.

Final Thoughts…

Understanding and aligning with mental models matter to you as a designer, and here’s why: You’re dedicated to crafting experiences that users find seamless and enjoyable. Your goal is to empower users with the confidence that their interactions with an app will unfold just as they expect.

this image illustrates happy users using their phone

How do you achieve this? By creating designs that are consistent and familiar. Your aim is to ensure that users feel at ease while navigating the app, allowing them to focus on their objectives instead of grappling with how the app functions.

So, the next time users open their favourite app and find everything right where they anticipate it to be, they should remember that it’s not mere chance. It’s the outcome of your thoughtful design process that takes their mental model into consideration. Their familiarity matters to you, and your commitment is to make their digital journey effortlessly satisfying.

See you all in my next informative blog! In the meantime, don’t miss out on the treasure trove of wisdom housed in the blogs below. Each read is a step closer to unlocking your full design potential. ⚡️🔐

  1. Ultimate Guide to Designing a High-Converting Landing page
  2. Beginners guide to Layout grid
  3. Advanced Layout Grid System
  4. Ultimate guide to Figma’s Auto layout
  5. Visual Design Trend 2023

--

--

Abishek

Crafting digital experiences that connect people with technology. Creating simple, functional designs that make life easier, one pixel at a time.