Laws of UX

Chapter 1. Jakob’s Law

Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know.

Key Takeaways

• Users will transfer expectations they have built around one familiar product to another that appears similar.

• By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.

• When making changes, minimize discord by empowering users to continue using a familiar version for a limited time.

Overview

There is something incredibly valuable to be found in familiarity. Familiarity helps the people interacting with a digital product or service know immediately how to use it, from interacting with the navigation to finding the content they need to processing the layout and visual cues on the page in order to understand the choices available to them. The cumulative effect of mental effort saved ensures a lower cognitive load. In other words, the less mental energy users have to spend learning an interface, the more they can dedicate to achieving their objectives. The easier we make it for people to achieve their goals, the more likely they are to do so successfully.

As designers, it is our objective to ensure people successfully achieve their goals when using the interfaces we’ve built by eliminating as much friction as possible. Not all friction is bad—in fact, sometimes it is even necessary. But when there is an opportunity to remove or avoid extraneous friction, or friction that doesn’t provide value or service a purpose, then we should do so. One of the primary ways designers can remove friction is by leveraging common design patterns and conventions in strategic areas such as page structure, workflows, navigation, and placement of expected elements such as search. When we do this, we ensure people can immediately be productive instead of first having to learn how a website or app works. In this chapter, we’ll take a look at some examples of how this design principle can be achieved—but first, let’s look at its origins.

Origins

Jakob’s law (also known as “Jakob’s law of the internet user experience”) was put forth in 2000 by usability expert Jakob Nielsen, who described the tendency for users to develop an expectation of design conventions based on their cumulative experience from other websites.¹ This observation, which Nielsen describes as a law of human nature, encourages designers to follow common design conventions, enabling users to focus more on the site’s content, message, or product. In contrast, uncommon conventions can lead to people becoming frustrated, confused, and more likely to abandon their tasks and leave because the interface does not match up with their understanding of how things should work.

The cumulative experience that Nielsen refers to is helpful for people when visiting a new website or using a new product because it informs their understanding of how things work and what’s possible. This underlying factor is perhaps one of the most important in user experience, and it is directly related to a psychological concept known as mental models.

PSYCHOLOGY CONCEPT Mental Models

A mental model is what we think we know about a system, especially about how it works. Whether it’s a digital system such as a website or a physical system such as a checkout line in a retail store, we form a model of how a system works, and then we apply that model to new situations where the system is similar. In other words, we use the knowledge we already have from past experiences when interacting with something new.

Mental models are valuable for designers because we can match our designs to our users’ mental models to improve their experience by enabling them to easily transfer their knowledge from one product or experience to another, without the need to first take the time to understand how the new system works. Good user experiences are made possible when the design of a product or service is in alignment with the user’s mental model. The task of shrinking the gap between our own mental models and those of the users is one of the biggest challenges we face, and to achieve this goal we use a variety of methods: user interviews, personas, journey maps, empathy maps, and more. The point of these various methods is to gain a deeper insight into not only the goals and objectives of our users but also users’ preexisting mental models and how all of these factors apply to the product or experience we are designing.

Examples

Have you ever wondered why form controls look the way they do (Figure 1-1)? It’s because the humans designing them had a mental model of what these elements should look like, which they based on control panels they were familiar with in the physical world. The design of web elements like form toggles, radio inputs, and even buttons originated from the design of their tactile counterparts.

Figure 1-1. Comparison between control panel elements and typical form elements (source: Jonathan H. Ward [left], Google’s Material Design [right])

When our designs do not align with the user’s mental model, there will be problems. A misalignment can affect not only how users perceive the products and services we’ve helped build, but also the speed at which they understand them. This is called mental model discordance, and it occurs when a familiar product is suddenly changed.

One notorious example of mental model discordance is the 2018 redesign of Snapchat. Instead of gradually introducing changes through slow iteration and extensive beta testing, the company launched a major overhaul that dramatically changed the familiar format of the app by combining watching stories and communicating with friends in the same place. Unhappy users immediately took to Twitter and expressed their disapproval en masse. Even worse was the subsequent migration of users to Snapchat’s competitor, Instagram. Snap CEO Evan Spiegel had hoped that the redesign would reinvigorate advertisers and allow for ads to be customized to users, but instead it caused ad views and revenue to drop and led to the app’s user count dramatically shrinking. Snapchat failed to ensure the mental model of its users would be aligned with the redesigned version of the app, and the resulting discordance caused a major backlash.

But major redesigns don’t always drive users away—just ask Google. Google has a history of allowing users to opt in to redesigned versions of its products, like Google Calendar, YouTube, and Gmail. When the company launched the new version of YouTube in 2017 (Figure 1-2) after years of essentially the same design, it allowed desktop users to ease in to the new Material Design UI without having to commit. Users could preview the new design, gain some familiarity, submit feedback, and even revert to the old version if they preferred it. The inevitable mental model discordance was mitigated by simply empowering users to switch when they were ready.

Figure 1-2. Before (left) and after (right) comparison of YouTube redesign in 2017 (source: YouTube)

Most ecommerce websites also leverage preexisting mental models. By making use of familiar patterns and conventions, shopping sites such as Etsy (Figure 1-3) can effectively keep customers focused on the important stuff—finding and purchasing products. By conforming to users’ expectations about the process of selecting products, adding them to the virtual cart, and checking out, designers can ensure users are able to apply their accumulated knowledge from previous ecommerce experiences; the whole process feels comfortable and familiar.

Figure 1-3. Ecommerce sites like Etsy leverage preexisting mental models to keep customers focused on purchasing products rather than on learning new interaction patterns (source: Etsy, 2019)

The use of mental models to inform design isn’t isolated to the digital space. Some of my favorite examples can be found in the automotive industry, specifically in regard to controls. Take, for instance, the 2020 Mercedes-Benz EQC 400 Prototype (Figure 1-4). The seat controls found on the door panel next to each seat are mapped to the shape of the seat. The resulting design makes it easy for users to understand which part of their seat they can adjust by identifying the corresponding button. It’s an effective design because it builds on our preexisting mental model of a car seat and then matches the controls to that mental model.

Figure 1-4. Seat controls in the 2020 Mercedes-Benz EQC 400 Prototype, informed by the mental model of a car seat (source: MotorTrend, 2018)

These examples demonstrate how we can leverage users’ existing mental models to enable them to become immediately productive. In contrast, failure to consider the mental model a user has formed can result in confusion and frustration. The conclusion here also begs an important question: does Jakob’s law argue that all websites or apps should behave identically? Additionally, does it suggest that we should use only preexisting UX patterns, even when there’s a more appropriate solution that’s new?

TECHNIQUE User Personas

Have you ever heard another designer within your company or organization refer to “the user,” but it wasn’t quite clear whom exactly this elusive person was? The process of design becomes more difficult when a design team lacks a clear definition of its target audience, leaving each designer to interpret it in their own way. User personas are a tool that helps solve this problem by framing design decisions based on real needs, not the generic needs of the undefined “user.” These fictional representations of a specific subset of the target audience are based on aggregated data from real users of a product or service (Figure 1-5).

Figure 1-5. User persona example

Personas are intended to foster empathy and serve as memory aids, as well as to create a common mental model of the traits, needs, motivations, and behaviors of a specific kind of user. The frame of reference that personas help to define is incredibly valuable for teams: it helps team members move away from self-referential thinking and focus on the needs and goals of the user, which is useful for prioritizing new features.

Any details about the user that are relevant to the feature or product you’re building will be useful. The items common to most personas include:

Info

Items such as a photo, memorable tagline, name, age, and occupation are all relevant for the information section of a persona. The idea here is to create a realistic representation of the members of a specific group within your target audience, so this data should be reflective of the similarities they share.

Details

The information within the details section of a user persona helps to build empathy and align focus on the characteristics that impact what is being designed. Common information here includes a bio to create a deeper narrative around the persona, behavioral qualities that are relevant, and frustrations this particular group might have. Additional details could include things like goals and motivations, or tasks the user might perform while using the product or feature.

Insights

The insights section of a user persona helps to frame the attitude of the user. The intention here is to add an additional layer of context that provides further definition of the specific persona and their mindset. This section often includes direct quotes from user research.

KEY CONSIDERATION Sameness

I know what you’re thinking: if all websites or apps followed the same design conventions, that would make everything quite boring. This is a completely valid concern, especially given the ubiquity of specific conventions that can be observed today. This pervasive sameness can be attributed to a few factors: the popularity of frameworks to speed up development, the maturity of digital platforms and resulting standards, clients’ desire to emulate their competition, and just plain lack of creativity. While much of this sameness is purely based on design trends, there is a good reason we see patterns with some conventions, such as the placement of search, navigation in the footer, and multistep checkout flows.

Let’s take a moment to consider the alternative: imagine that each and every website or app that you used was completely different in every regard, from the layout and navigation down to the styling and common conventions like the location of the search feature. Considering what we’ve learned about mental models, this would mean that users could no longer rely on their previous experiences to guide them. Their ability to be instantly productive in achieving the goal they wanted to accomplish would be immediately thwarted because they would first have to learn how to use the website or app. It is no stretch of the imagination to see that this would not be an ideal situation, and conventions would eventually emerge out of pure necessity.

That’s not to say that creating something entirely new is never appropriate—there’s certainly a time and a place for innovation. But designers must determine the best approach by taking into consideration user needs and context, in addition to any technical constraints, before reaching for something unique, and they must take care not to sacrifice usability.

Conclusion

Jakob’s law isn’t advocating for sameness in the sense that every product and experience should be identical. Instead, it is a guiding principle that reminds designers that people leverage previous experience to help them in understanding new experiences. It is a not-so-subtle suggestion that (when appropriate) designers should consider common conventions that are built around existing mental models to ensure users can immediately be productive instead of first needing to learn how a website or app works. Designing in a way that conforms to expectations allows users to apply their knowledge from previous experiences, and the resulting familiarity ensures they can stay focused on the important stuff—finding the information they need, purchasing a product, etc.

The best piece of advice I can give in regard to Jakob’s law is to always begin with common patterns and conventions, and only depart from them when it makes sense to. If you can make a compelling argument for making something different to improve the core user experience, that’s a good sign that it’s worth exploring. If you go the unconventional route, be sure to test your design with users to ensure they understand how it works.

¹ Jakob Nielsen, “End of Web Design,” Nielsen Norman Group, July 22, 2000, https://www.nngroup.com/articles/end-of-web-design.