Categories
ICM514

Mental Models for Better Usability and Business

People’s mental models aren’t right or wrong, they just are. Understanding them will make your design process less personal and more successful.

In America, we sit on the left-hand side of a car and drive on the right-hand side of the road. Just like our use of the Imperial system, we fully believe this to be the “right” way. But, if an American travels to Europe for the first time and rents a car or gets directions in meters, they’ll soon realize other places have their own “right” way. Two different approaches for accomplishing the same goal. What we believe to be correct only comes down to personal experience and our mental models.

What are Mental Models

A mental model the culmination of experiences, lessons, and beliefs that we carry with us. They live in each of our minds and influence our behavior, attitudes, and decisions—from what we choose to eat to, yes, even how we interact with technology. Our mental models will determine how we believe a product should work or how we interact with it. As defined by Cynthia Vinney over at Career Foundry, “When we engage with the world, our brains are constantly organizing the information we encounter into cognitive representations, which are called mental models.”

“When we engage with the world, our brains are constantly organizing the information we encounter into cognitive representations, which are called mental models.”

by Cynthia Vinney, Career Foundry
Image by Krisztina Szerovay, Creator of UX Sketch Base. Visit her web page to see more of her informative UX sketches. https://uxknowledgebase.com/

Understanding your user’s mental model is a critical ingredient of user-centered design. As a designer, it is your responsibility to understand your user’s mental models and design for their thought patterns instead of yours. Designing for your user’s mental models makes it easier for them to interact with the product successfully. Otherwise, you risk losing them to frustration, confusion, and impatience, which then becomes an opportunity for a competitor.

The RTFM memes are a great example of misaligned mental models. Although something may make perfect sense to a team that’s ruminated over every facet of its existence, it gets lost at the hands of the everyday user. Contrary to the memes, though, this is not a user error—it is a disconnection between the designer’s mental models of how they think things should work and their users. Considering the user’s mental models will help prevent teams from making a product for themselves.

One of the main characters of the British sitcom, the IT Crowd wears a t-shirt with the RTFM acronym. RTFM is commonly used in online communities as a sarcastic response to people who ask basic questions whose answers could generally be found in the product manual. Image sourced from tshirtsonscreen.com
Learning Your Users Mental Models

You can learn about your users’ mental models by conducting research and user testing. Some exercises that help achieve this are field studies, contextual inquiries and interviews, diary studies, personas, card sorting, surveys, competitive and comparative analysis, and usability testing. Also, keep Jakob’s Law in mind when designing for your users—conducting competitive and/or comparative research can help you recognize design patterns with which your users may already be familiar.

Designing for Your User’s Mental Models

To better understand how mental models influence design—and therefore a product’s success—let’s explore a few examples.

Trip.com Designs for Western Mental Models

Trip.com is a Chinese travel company with two different apps to cater to their two distinct user segments. One app is for the primary Chinese market, and another is for the secondary western, English-speaking market. Notice that the company did not simply translate the app from one language to another and call it a day. Instead, they localized it, by implementing suitable design patterns based on the mental models of their user segments.

The Western version of the app (shown below) is quite minimal and follows the standard Western design conventions of simplicity. It uses a monochromatic color palette, ample white space, and no distracting animations.

Only two screens appear upon loading the Western version of the app. No animation is used in screen transitions or on the landing page.

The Chinese version of the app (shown below) consists of more prominent attention-grabbing visual elements. From bolder use of colors to limited white space and animated features that move horizontally and vertically, the Chinese version fits the market’s mental models of preferring dense, highly interactive designs over minimal layouts that feel too scarce, or lacking in substance. A Western audience who may find the Chinese version of the app too busy does not make the design “wrong” or even less usable. Instead, it could be considered a reflection and extension of other cultural mental models held, making it even more appropriate and understandable for its user segment.

There are a few more transitions between opening the app and landing on the home page. On the left is the loading screen process. The first icon in the top left is Trip.com’s Chinese logo, and immediately next to it is the Western version—even the logos were customized towards their audience. The right image is the home screen landing page. Notice how much more content, color, images, and animation are used on the Chinese version compared to the Western version.

As described by Yang Zhong, in an article she wrote on Medium, “Compared to European countries, Chinese are more tolerant and able to navigate through the “bold and loud” layers of interfaces, as we already navigate through the streets in our offline daily lives. Tuning up a visual detail and making it an eye-catcher may increase the success rate of a design for the mainstream consumer market.”

Compared to European countries, Chinese are more tolerant and able to navigate through the “bold and loud” layers of interfaces, as we already navigate through the streets in our offline daily lives. Tuning up a visual detail and making it an eye-catcher may increase the success rate of a design for the mainstream consumer market.

Yang Zhong, Medium
Western Brands Design for Chinese Mental Models

Western fast-food chains like KFC, Pizza Hut, and McDonald’s are super-popular in China, and when you visit their stores, you realize part of their success derives from adapting to the local market’s mental models. The restaurants’ decor is customized, and the menus offer a mix of local selections in addition to the international classics.

Picture 01:

A picture of the interior of one of the KFC’s in Shanghai, China, designed by YUM. The design has cultural and local context to this specific location. This image is sourced from Retail Design Blog. To learn more about the story of this store location and see more images, click the link above.

Picture 02:

Another KFC located in Wuxi, China and designed by theSwimmingPool. Visit their website to see more images of this location, plus other KFC and Taco Bell locations across China.

You can see the same approach being taken in their digital presence. Take a look at how Pizza Hut appropriated its apps for its users’ mental models.

The images below show the comparison side-by-side: America’s version of the app on the left followed by similar sections in China’s version on the right.

Home screen for Pizza Hut’s U.S (left). vs China app (right).
Pizza section for Pizza Hut’s U.S (left). vs China app (right).
Deals section for Pizza Hut’s U.S (left). vs China app (right).

Choosing the Right Model

In a virtual talk called “Mental Models: How To Design For The Way Your Users Think” given by Susan Weinschenk and hosted by the Interaction Design Foundation, Weinschenk described a conceptual model as “the actual model that is given to the person through the design and interface of products.”

A mental model is human—it’s our perceptions and beliefs. A conceptual model is a product—how something is designed for specific uses. After learning your user’s mental models, you are now prepared to design conceptual models for them. Weinschenk explains that every designer has two main choices:

1. Design for the user’s existing mental models 

Once you know what these mental models are, you can design a product for them. This is the most recommended and most common approach, which eliminates the users’ need to relearn everything every time. Taking into account stored mental models is a good thing. 

2. Design a new conceptual model

If a current mental model doesn’t exist or is not strong, you can choose to design a new conceptual model, and therefore create a new mental model for your users to learn. Sometimes this is necessary. For example, nothing like the iPod existed before, but we quickly learned its behavior and built new mental models in our minds for it. 

If you must create a new model, you must also help users learn about it. Videos, tutorials, or walk-throughs can make a significant impact on how quickly new models stick in your users’ minds.

Adobe does an excellent job here. Anytime I open up a program, an interface greets me with new feature walk-throughs and tutorials to get started. As robust as the programs are and as quickly as they advance, I feel comfortable knowing I don’t have to figure everything out on my own. Instead, Adobe is helping me learn new mental models alongside the evolution of its product’s conceptual models.

Adobe programs welcome users with a modal that introduces new features and functionality while offering walkthroughs on how to use them. Supporting users with notifications and tutorials increases their chances of building new mental models more easily.

Before your start designing your next project, conduct the research that teaches you about your user’s mental models. Learn them, embrace them, and design with them in mind. Your product will become more usable because of it, and more easily embraced and appreciated by your users.

Resources

Interaction Design Foundation. (2021, October 13). Mental Models: How To Design for the Way Your Users Think: Webinar with Susan Weinschenk and Guthrie Weinschenk. [Webinar] https://www.interaction-design.org/master-classes/mental-models-how-to-design-for-the-way-your-users-think

Zhong, Yang. (2021, May 13). Key differences between designing for China and the West. Medium. https://uxdesign.cc/key-differences-between-designing-for-china-and-the-west-dad2c5132521

Interaction Design Foundation. (2020). A Very Useful Work of Fiction – Mental Models in Design. https://www.interaction-design.org/literature/article/a-very-useful-work-of-fiction-mental-models-in-design

Nielson, Jakob. (2010, October 17). Mental Mmodels. NNG. https://www.nngroup.com/articles/mental-models/

Fanguy, Will. (2020, September 2). How to Use Mental Models in UX Design. Adobe. https://xd.adobe.com/ideas/process/ui-design/how-to-use-mental-models-in-ux-design/

Oliver. (2020, August 26). Your Guide to App Localization for the Chinese Market (Part 1). Phrase. https://phrase.com/blog/posts/beginners-guide-app-localization-chinese-market/

Vinney, Cynthia. (2021, July 21). What Are Mental Models And How Are They Used In UX Design?. Career Foundry. https://careerfoundry.com/en/blog/ux-design/mental-models-ux-design/

Sherwin, Katie. (2016, June 26). Cultural Nuances Impact User Experience: Why We Test with International Audiences. NNG. https://www.nngroup.com/articles/cultural-nuances/

Cheng, Yunnuo. Nielson, J. (2016, November 6). Are Chinese Websites Too Complex? NNG. https://www.nngroup.com/articles/china-website-complexity/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s