1. 1.

Fitts’s Law
1. Overview
2. Origins
3. Key Considerations
1. Touch Target Sizing
2. Touch Target Spacing
3. Touch Target Positioning
4. Examples
5. Key Takeaways
6. Conclusion
7. Index
2. 2. Jakob’s Law
1. Overview
2. Origins
3. Key Concept: Mental Models
4. Examples
5. Key Consideration: Sameness
6. Conclusion
7. Key Takeaways
8. Footnotes
3. 3. Hick’s Law
1. Overview
2. Origins
 3. Key Concept: Cognitive Load
4. Examples
5. Key Consideration: Oversimplification
6. Conclusion
7. Key Takeaways
4. 4. Miller’s Law
1. Overview
2. Origins
3. Key Concept: Chunking
4. Examples
5. Key Takeaways
6. Conclusion
7. Index
5. 5. Postel’s Law
1. Overview
2. Origins
3. Examples
4. Key Takeaways
5. Conclusion
6. 6. Peak-End Rule
1. Overview
2. Origins
3. Key Concept: Cognitive Biases
4. Examples
 5. Key Takeaways
6. Conclusion
7. Index
7. 7. Aesthetic-Usability Effect
1. Overview
2. Origins
3. Examples
4. Effect on Usability Tests
5. Key Takeaways
6. Conclusion
7. Index
 Laws of UX
Design Principles for Persuasive and Ethical Products

With Early Release ebooks, you get books in their earliest form—the author’s raw and
unedited content as they write—so you can take advantage of these technologies long
before the official release of these titles.

Jon Yablonski
Laws of UX

by Jon Yablonski

Copyright © 2020 Jon Yablonski. All rights reserved.

Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North,

Sebastopol, CA 95472.

O’Reilly books may be purchased for educational, business, or sales

promotional use. Online editions are also available for most titles
(http://oreilly.com). For more information, contact our
corporate/institutional sales department: 800-998-9938 or
[email protected].

Editors: Angela Rufino and Jessica Haberman

Production Editor: Kristen Brown

Copyeditor:
Proofreader:
Indexer:
Interior Designer: Monica Kamsvaag
Cover Designer:
Illustrator: Rebecca Demarest
April 2020: First Edition
Revision History for the Early Release
2019-09-04: First Release

See http://oreilly.com/catalog/errata.csp?isbn=9781492055310 for

release details.

The O’Reilly logo is a registered trademark of O’Reilly Media, Inc.

Laws of UX, the cover image, and related trade dress are trademarks of
O’Reilly Media, Inc.

The views expressed in this work are those of the author, and do not
represent the publisher’s views. While the publisher and the author
have used good faith efforts to ensure that the information and
instructions contained in this work are accurate, the publisher and the
author disclaim all responsibility for errors or omissions, including
without limitation responsibility for damages resulting from the use of
or reliance on this work. Use of the information and instructions
contained in this work is at your own risk. If any code samples or other
technology this work contains or describes is subject to open source
licenses or the intellectual property rights of others, it is your
responsibility to ensure that your use thereof complies with such
licenses and/or rights.

978-1-492-05531-0

[LSI]
Chapter 1. Fitts’s Law

The time to acquire a target is a function of the distance to and size of

the target.

Overview
Usability is a key aspect of good design. As the term implies, ‘ease of
use’ means the interface is easy to understand and navigate. It also
means that interaction with the interface is painless and
straightforward, and that users can engage with interactive objects
without much effort. The time it takes for users to move to and engage
with an interactive object is a critical metric. Compounded by the wide
range of input methods available today, from the precision of the
mouse to the relative imprecision of fingers, it’s important that
designers size interactive objects appropriately to ensure they are easily
selectable and they meet user expectations in regards to the selectable
region.

To aid in this endeavor is Fitts’s Law, which describes the time it takes
for a user to engage with an object is relative to the size and distance to
it. In other words, as the size of an object increases, the time to select it
goes down. Additionally, the time to select an object decreases as the
distance that a user must move to select it decreases. The opposite is
true as well: the smaller and further away an object it, the longer time it
takes to accurately select it. This rather obvious concept has far-
reaching implications, which we’ll unpack in this chapter, as well as
take a look at some supporting examples.

Origins
The origins of Fitts’s Law can be traced back to 1954, when American
psychologist Paul Fitts predicted that the time required to rapidly move
to a target area is a function of the ratio between the distance to the
target and the width of the target (Figure 1.1).1 Today, it’s regarded as
one of the most successful and studied mathematical models of human
motion and it’s widely used in ergonomics and human–computer
interaction to model the act of pointing either physically or virtually.
 Figure 1-1. Diagram depicting Fitts’s Law

Fitts’s also proposed an index of difficulty metric to quantify the

difficulty of a target selection task in which the distance to the center of
the target (D) is like a signal and the tolerance or width of the target
(W) is like noise (Figure 1-2).

Figure 1-2. Fitts’s metric to quantify the difficulty of a target selection task

Key Considerations
Fitts’s Law was established as a model for understanding human
movement in the physical world before the invention of the graphic
user interface, but it can also be applied to movement through a digital
interface. There are three key considerations that Fitts’s Law gives us:
first, touch targets should be large enough for users to both discern
what it is and to accurately select them. Secondly, touch targets should
have ample spacing between each other. Lastly, touch targets should be
placed in areas of an interface that allows them to be easily acquired.

Touch Target Sizing

As obvious as it might seem, touch target sizing is of vital importance
and should be repeated: when touch targets are too small, it takes users
longer to engage them. The recommended size varies (Figure 1-3) but
all recommendations indicate awareness of this importance. Adequate
touch target size not only ensures interactive elements are easily
selectable, but can reinforce to users that the interface is easy to use.
Even if a selection error is avoided, small touch targets add to the
perception that an interface is less usable.
Figure 1-3. Minimum touch target size recommendations converted to physical measurement
(millimeters).

It is important to keep in mind these recommendations are minimums.

Designers should aim to exceed these target touch areas whenever
possible to decrease the need to precise accuracy.

Touch Target Spacing

Another consideration that affects the usability of interactive elements
is the spacing between them. When the spacing between elements is
too small, the likelihood of touch target errors increases. MIT Touch
Lab conducted a study titled “3-D Finite-Element Models of Human
and Monkey Fingertips to Investigate the Mechanics of Tactile Sense”
2 where they found that the average human finger pad is 10-14mm and
the average fingertip is 8-10mm for most adults. It’s inevitable that a
user will partially touch outside a touch target, and if additional touch
targets are too close they might be accidentally selected. One
recommendation to mitigate the false activation that can happen when
targets are too close can be found in Material Design (Google), which
says “touch targets should be separated by 8dp of space or more to
ensure balanced information density and usability”.

Touch Target Positioning

In addition to sizing and spacing, the position of touch targets is key in
how easily selectable they are. Placing touch targets in areas of the
screen that are harder to reach will obviously make them harder to
ultimately select. What isn’t always obvious is where exactly are these
hard to reach areas of a screen, which changes depending on the
context of the user. In general, touch targets that are closer to the edge
of the screen are easier to select because they require less travel
distance to acquire. An important caveat to keep in mind here is that
users that are using a device with one hand will have difficulty
reaching specific areas of the screen. (Figure 1-4)
 Figure 1-4. Thumb zone difficulty (left hand).

The image above illustrates the zones that are more difficult to reach
with a thumb when using a smartphone with a single hand. As the size
of the device increases, the zones that are hard to reach or require
stretching to reach expand while the easy to reach area contracts. This
is a result of a decrease in dexterity of the hand while holding the
larger device.

Examples
We’ll begin our examples by looking at a common example of Fitts’s
Law: form text labels. By associating a text label element with an
input, designers and developers can ensure that taps or clicks on the
label will perform the same function as selecting the input (Figure 1-5).
This native feature effectively expands the surface area of the form
input, making it easier for users to focus the input with less precision.
The net effect is a better user experience for desktop and mobile users
alike.
 Figure 1-5. Touch target area on text label + form input.

Another example is the connection request confirmation screen on

LinkedIn’s iOS app (Figure 1-6), which places the two action together
on the right side of a dialog. The actions are so close together that users
must make a significant effort to focus on selecting the action they
wish to perform without accidentally selecting the other. In fact, each
time I see this screen I know it means I have to switch to two hands to
avoid misselecting ‘accept’ with my thumb.
Figure 1-6. LinkedIn Invitations screen features actions that lack ample space between them.

The interfaces we interact with on a daily basis are not isolated to

smartphones, laptops and desktop computers. Take for example
infotainment systems, which can be found in the vehicles many use
every day. The Tesla Model 3 features a 15” display mounted directly
on the dashboard and is the center of attention within the vehicle. Most
of the vehicle controls are placed within this screen and do not provide
haptic feedback when the user engages with them. This of course
requires concerted attention to acquire the control and diverts attention
from the road to the screen, and Fitts’s Law is of critical importance.
The Model 3’s follows Fitts’s Law providing ample space between the
bottom navigation bar items (Figure 1-7), which mitigates accidental
selection of adjacent actions.
 Figure 1-7. Tesla Model 3 Infotainment navigation bar features sufficient space between
items.

I mentioned thumb zones in regards to touch target positioning earlier,

and how positioning touch targets in hard to reach areas of the interface
make them harder to select. With the arrival of the larger iPhone 6 and
iPhone 6 Plus, Apple introduced a feature that aimed to mitigate
difficulty for one-handed usage and thumb zones on their new devices.
The feature, called ‘Reachability’, enabled users to quickly bring items
at the top of the screen down to the lower half of the screen via a
simple gesture (Figure 1-8).
 Figure 1-8. iPhone Reachability feature allows easy access to top half of screen. (Source:
Apple)

This feature effectively enables access to parts of the screen that were
difficult to access for one-handed users on these larger devices.

Key Takeaways
Touch targets should be large enough for users to both discern what it
is and to accurately select them.

Touch targets should have ample spacing between each other.

Touch targets should be placed in areas of an interface that allows them

to be easily acquired.

Conclusion
Fitts’s Law is a very appropriate principle to begin with because it’s
fundamental to good user experiences and illustrates how neglecting to
consider it can lead to life-threatening situations. A key responsibility
we have as designers is to ensure the interfaces we create augment
human capabilities and experiences, not distract or deter them. Mobile
interfaces are especially susceptible to Fitts’s Law due to the limited
screen real estate available. We can ensure interactive elements are
easily selectable by making them large enough for users to both discern
what it is and to accurately select them, providing ample space between
them to avoid accidental selection, and place them in areas of an
interface that allows them to be easily acquired.
Index
Fitts, Paul M. (June 1954). “The information capacity of the human
motor system in controlling the amplitude of movement”. Journal of
Experimental Psychology.

Dandekar K., Raju B.I., Srinivasan M.A. (2003). 3-D finite-element

models of human and monkey fingertips to investigate the mechanics
of tactile sense. Journal of Biomechanical Engineering, 125, 682–691.
Chapter 2. 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.

Overview
There is something incredibly valuable to be found in familiarity for
users. Familiarity helps the people interacting with a digital product or
service know immediately how to use it, from interacting with the
navigation to find the content they need to process 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 they have to
spend learning an interface, the more they can dedicate towards
achieving their objective. The easier we make it for people to achieve
their objective, 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, that is 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 learning how a website or app works. In this chapter, we’ll take a
look at some examples of how this 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 by usability expert Jakob Nielsen in 2000,
who described the tendency for users to develop an expectation of
design conventions based on their cumulative experience from other
websites 1. This observation, which he describes as a law of human
nature, encourages designers to follow common design conventions
which enables them to focus more on the site 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 it 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. In many
ways, 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.

Key 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 checkout line in a retail store, we form models
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
user’s mental model to improve their experience. Consequently, users
can 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
designer’s mental model is aligned with the user’s mental model. The
task of shrinking the gap between our mental models and those of our
users is one of our biggest challenges, and to achieve this we use a
variety of methods: user interviews, personas, journey maps, empathy
maps, and more (Figure 2.1).

Figure 2-1. Wikipedia Reader Journey for Mobile persona in India named Sukhwinder
(Source: AMuigai).

The point of all this is to gain a deeper insight into not only the goals
and objectives of our users but also their pre-existing mental models,
and how that applies to the product or experience we are designing.

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

As designers, we must close the gap that exists between our mental
models and those of our users. It’s important that we do this because
there will be problems when they aren’t aligned, which can affect how
users perceive the products and experiences we’ve helped build. This
misalignment 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, they launched a major
overhaul that dramatically changed the app that users were familiar
with by combining watching Stories and communicating with friends
into 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 hoped that the redesign would reinvigorate advertisers
and allow for ads to be customized to users, but instead sunk ad views,
revenue and led to the app’s user count to dramatically shrink.
Snapchat failed to ensure the mental model of their users would be
aligned with the redesigned version of their app, and the resulting
discordance caused a major backlash.

But major redesigns don’t always have to result in a backlash — just

ask Google. Google has a history of allowing users to opt into
redesigned versions of its products like Google Calendar, YouTube,
and Gmail. When they launched the new version of YouTube in 2017
(Figure 2-4) after years of essentially the same design, they allowed
desktop users to ease into 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.
As a result, the inevitable mental model discordance was mitigated by
simply empowering users to switch when they were ready.
 Figure 2-3. Before and after comparison of YouTube redesign in 2017.

The use of mental models to inform design isn’t isolated to the digital
space. One of my favorite examples can be found in the automotive
space, specifically in regards to controls. Let’s take for example the
2020 Mercedes-Benz EQC 400 Prototype (Figure 2-5). The design of
the seat controls found on the door panel that corresponds 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
simplify identifying the corresponding button. It’s an effective design
because it builds on top of our preexisting mental model, the shape of a
seat, and then matches the controls to that mental model.
 Figure 2-4. Seat control that’s informed by mental model of seat found in 2020 Mercedes-
Benz EQC 400 Prototype. (Source: MotorTrend)

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?

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 or just plain lack of
creativity. While much of this sameness is purely based on extraneous
design trends, there is a good reason we see patterns with other
conventions. For example, the placement of search, navigation in the
footer, and multi-stepped checkout flows.

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

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 designers should leverage common
conventions when appropriate to ensure users can focus on what they
came to do.

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 designers should consider common
conventions that are built around existing mental models when
appropriate to ensure users can immediately be productive, instead of
first learning how a website or app works. Designing around this
expectation will allow for 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 regards 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, it’s a good sign that it’s something worth exploring. If you
go the unconventional route, be sure to test your designs with users to
ensure they understand how it works.

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 user can focus on their task rather than
learning new models.

Minimize discordance by empowering users to continue using a

familiar version for a limited time.

Footnotes
Nielsen Norman Group, “Jakob’s Law of Internet User Experience”,
August 2017.
Chapter 3. Hick’s Law

The time it takes to make a decision increases with the number and
complexity of choices available.

Overview
One of the primary functions we have as designers is to synthesize
information and present it in a way that doesn’t overwhelm the people
who use the products and services we design. We do this because we
understand, almost instinctively, that redundancy and excessiveness
create confusion. This confusion is problematic when it comes to
creating products and services that feel intuitive and enable people to
quickly and easily accomplish their goal. How does this confusion
occur? It is the result of not completely understanding the goals and
constraints of the people using the product or service. Ultimately, our
objective is to understand what the user seeks to accomplish so that we
can reduce anything that doesn’t contribute to the success of them
achieving their goal(s). We, in essence, strive to simplify complexity
through efficiency and elegance.

What is neither efficient or elegant is when an interface provides too

many options. It’s a clear indication that those who created the product
or service do not entirely understand the needs of the user. This
ornamental complexity extends beyond just a user interface — it can be
applied to process as well. Whether it’s the absence of a distinctive and
clear call to action, unclear information architecture, or unnecessary
steps, too many options or information becomes an obstacle for users
who seek to perform a specific task.

This directly relates to our first key principle: Hick’s Law. Hick’s Law
predicts that the time it takes to make a decision increases with the
number and complexity of choices available. Not only is this principle
fundamental to decision making, but it’s critical to how people
perceive and process the user interfaces we create. We’ll take a look at
some examples of this principle, but first let’s look at its origins.

Origins
Hick’s Law was formulated by psychologists William Edmund Hick
and Ray Hyman in 1952 after examining the relationship between the
number of stimuli present and an individual’s reaction time to any
given stimulus. What they found was that increasing the number of
choices available will logarithmically increase decision time. In other
words, people take longer to make a decision given more options to
choose from. It turns out there is an actual formula to represent this
relationship: RT = a + b log2 (n) (Figure 3-1).
 Figure 3-1. Diagram representing Hick’s Law.

Fortunately, we don’t need to understand the math behind this formula

to grasp what it means. The concept is straightforward when applied to
design: the time it takes for users to interact with an interface directly
correlates to the number of options available to interact with. It implies
that complex or busy interfaces result in longer decision time for users
because they must first process the options that are available to them,
then choose which is the most relevant in relation to their goal. When
an interface is too busy, actions are unclear or difficult to identify, and
critical information is hard to find, a larger amount of brain power is
required to find what we are looking for. This leads us to our key
concept for Hick’s Law: cognitive load.

Key Concept: Cognitive Load

When someone engages with a digital product or service, they must

first learn how it works and then determine how to find the information
they are looking for. Understanding how to use the navigation (or
sometimes even finding it), processing the page layout, interacting with
User Interface (UI) elements, and entering information into forms all
require mental resources. While this learning process happens, people
must also remember what they came to do in the first place. Depending
on how easy an interface is to use, the later can be quite a challenge.
The amount of mental resources needed to understand and interact with
an interface is known as cognitive load.

You can think of it as memory in a computer or phone: run too many

apps and the battery begins to drain, the device slows down, or worse
of all it crashes. The amount of processing power available determines
performance, and this depends on memory — a finite resource.

Our brains work in a similar way: when the amount of information

coming in exceeds the space we have available, we struggle to
mentally keep up — tasks become more difficult, details are missed,
and we begin to feel overwhelmed. Our working-memory, the buffer
space (Figure 3-2) for storing information relevant to the current task,
has a specific amount of slots available for information. If the tasks at
hand require more space than is available, we begin to lose information
from our working-memory to accommodate this new information.
 Figure 3-2. Working-memory buffer illustration.

This becomes problematic when the information lost is critical to the

task that someone wishes to perform or related to the information they
want to find. Tasks will become more difficult, users might start to feel
overwhelmed, and this ultimately leads to frustration or even task
abandonment — both symptoms of bad user experience.

Examples
Now that we have an understanding of Hick’s Law and cognitive load,
let’s take a look at some examples that demonstrate this principle.
There are examples of Hick’s Law in action everywhere, but we’ll start
with a common one: remote controls.

As features available in TVs increased over the decades, so did the

options available on their corresponding remotes. Eventually, we ended
up with remotes so complex that using them required either muscle
memory from repeated use or a significant amount of mental
processing. This led to the phenomenon known as “grandparent-
friendly remotes.” By taping off everything except for the essential
buttons, grandkids were able to improve the usability of remotes for
their loved ones, and they also did us all the favor of sharing them
online (Figure 3-3).
 Figure 3-3. Modified TV remotes that simplify the “interface”.

In contrast, we have smart TV remotes: the streamlined cousin of the

previous example, simplifying the controls to only those absolutely
necessary (Figure 3-4). The result is a remote that doesn’t require a
substantial amount of working memory and therefore incurs much less
cognitive load. By transferring complexity to the TV interface itself,
information can be effectively organized and progressively disclosed
within menus.
 Figure 3-4. Smart TV remote, which simplifies the controls to only those absolutely
necessary. (Source: Digital Trends)

Let’s take a look at another example of Hick’s Law. Onboarding is a

crucial but risky process for new users, and few nail it as well as Slack
(Figure 3-5). Instead of dropping users into a fully featured app after
enduring a few onboarding slides, they use a bot (Slackbot) to engage
users and prompt them to learn the messaging feature consequence-
free. To prevent new users from feeling overwhelmed, Slack hides all
features except for the messaging input. Once users have learned how
to message via Slackbot, they are progressively introduced to
additional features.
 Figure 3-5. Screenshots from Slack’s progressive onboarding experience.

This is a more effective way to onboard users because it mimics the

way we actually learn: we build upon each subsequent step, and add to
what we already know. By revealing features at just the right time, we
enable our users to adapt to complex workflows and feature sets
without feeling overwhelmed.

Key Consideration: Oversimplification

As we’ve seen, simplifying an interface or process helps to reduce the
cognitive load for users and increases the likelihood that they’ll
complete their task and achieve their goal. It’s also important to
consider when simplification can negatively affect user experience.
More specifically, when we simplify to the point of abstraction and it’s
no longer clear what actions are available, what are the next steps, or
where to find specific information.

A common example of this is the use of iconography as a way to

communicate critical information such as actions or page links (Figure
3-6). Icons come with a lot of advantages: they provide visual interest,
they save space, they provide excellent targets for taps or clicks, and
they can provide quick recognition if they hold universal meaning. The
challenge is universal icons are rare and icons in general often mean
different things to different people. While relying on icons to convey
information can help to simplify an interface, it can also increase the
difficulty in performing tasks or finding information. This is especially
true if the icons aren’t immediately recognizable to users, which more
often than not will consist of a wide spectrum of knowledge and
experience.
 Figure 3-6. Screenshot of the app bar from Facebook’s iOS app, circa 2019. Since there is
no label to accompany these icons, it can be difficult to know what each represents.

Another challenge is the fact that iconography is often used to

represent different actions for information, sometimes in complete
opposition, from one product or service to another. There is no icon
standardization body that regulates what icons can be used where
inside websites or apps, which means how they are used is up to the
discretion of the designers and their team. We know that an icon can
represent different things to different people, but what about when the
same icon performs different actions? Since there is no standardization,
the functionality attached to an icon button can vary from one digital
experience to another. Let’s take for example the ‘heart’ and ‘star’
icons: they indicate the ability to favorite, bookmark, or rate an item,
and sometimes they simply indicate a featured item. Not only does the
meaning and functionality of these two icons vary across different
products and services, but they often compete with each other. This
obviously results in confusion and an increase in the cognitive load
required from users because they are hard to memorize and interpret
precisely.

Adding contextual clues helps users to identify the options available

and the relevance of the information available in relation to the tasks
they wish to perform. In the case of iconography, studies have shown
that simply adding text labels to accompany an icon will provide clarity
and aid users with both discoverability and recognition. This practice is
even more critical when using iconography with important elements
such as navigation (Figure 3-7). The addition of text labels effectively
reduces the abstraction of the icons alone by including additional
information to help convey meaning and increase usability.
 Figure 3-7. Text labels accompany icons in the navigation on the Twitter web app.

Conclusion
Hick’s Law is a key concept in user experience design because it’s an
underlying factor in everything we do. When an interface is too busy,
actions are unclear or difficult to identify, and critical information is
hard to find, a higher cognitive load is required from users. Simplifying
an interface or process helps to reduce the mental strain for users, but
we must be sure to add contextual clues to help users identify the
options available and relevance of the information available in relation
to the tasks they wish to perform. I find the process of reduction, or
eliminating any element that isn’t helping the user achieve their goal, a
critical part of the design process. It is important to remember that the
user has a goal, whether it is to buy a product, understand something or
simply to learn more about the content. The less they have to think
about what they need to do to achieve their goal, the more likely it is
they will achieve it.

We touched on the role of memory in user experience design with

cognitive load. Next up, we’ll explore memory and its importance
further with Miller’s Law.

Key Takeaways
Too many choices will increase the cognitive load for users.

Break up long or complex processes into screens with fewer options.

Use progressive onboarding to minimize cognitive load for new users.

Chapter 4. Miller’s Law

The average person can only keep 7 (± 2) items in their working

memory.

Overview
Many designers have most likely heard of Miller’s Law, and there is
also a high probability that what they understand about it is inaccurate.
This commonly misunderstood heuristic has frequently been cited as
justification for design decisions such as “the number of navigation
items must be limited to no more than 7” and so forth. While there is
value in limiting the amount of options available to users (see Hick’s
Law in chapter 3), it is misleading and inaccurate to attribute such
dogma to Miller’s Law. In this chapter we’ll explore the origins of
Miller’s ‘magical number 7’ and the real value Miller’s Law has to
provide UX designers.

Origins
Miller’s Law originates from a paper published in 1956 by cognitive
psychologist George Miller title “The Magical Number Seven, Plus or
Minus Two: Some Limits on Our Capacity for Processing
Information"1. Miller, a professor of Harvard University’s Department
of Psychology, discussed in his paper for Princeton’s Psychological
Review the coincidence between the limits of one-dimensional absolute
judgment and the limits of short-term memory. Miller observed that
memory span in young adults was limited to approximately 7,
regardless of the stimuli consisting of vastly different amounts of
information. This led him to the conclusion that bits, or the basic unit
of information, doesn’t affect memory span as much as the number of
information ‘chunks’ being memorized. ‘Chunks’ in cognitive
psychology refers to collections of basic familiar units that have been
grouped together and stored in a person’s memory.

Miller’s paper is often interpreted to argue that the number of objects

an average human can hold in short-term memory is 7 ± 2. Later
research on short-term memory and working memory revealed that
memory span is not a constant even when measured in ‘chunks’. Miller
himself only used the expression “the magical number 7” rhetorically
and acknowledged the correspondence between the limits of one-
dimensional absolute judgment and of short-term memory span was
only a coincidence.

Key Concept: Chunking

Miller’s fascination with short-term memory and memory span
centered not on the number seven, but on the concept of “chunking”
and our ability to memorize information accordingly. He found that the
size of the chunks did not seem to matter — 7 individual letters could
be as easily memorized in short-term memory as 7 individual words.
While there are factors that influence how many chunks can be retained
per individual (context, familiarity with content, specific capacity), the
takeaway is the same: human short-term memory is limited and
chunking helps us retain information more effectively.

When applied to UX design, chunking informs an incredibly valuable

approach to content. When we chunk content in design, we are
effectively making it easier to comprehend. Users can scan the content
quickly, identify the information that aligns with their goal(s), and
consume that information to achieve their goal(s). By structuring
content into visually distinct groups with clear information hierarchy,
we can align information with how people evaluate and process digital
content. Next up, we’ll take a look at a few ways this can be achieved.

Examples
The simplest example of chunking can be found with how we format
phone numbers. Without chunking, a phone number would be a long
string of digits, which increases the difficulty to process and remember
it. Alternatively, a phone number that has been formatted (chunked)
becomes much easier to both process and memorize (Figure 4-1).

Figure 4-1. A (United States) phone number with chunking applied.

Let’s move on to a slightly more complex example. Browsing the Web

will inevitably face one with the dreaded ‘wall of text’ (Figure 4-2). A
‘wall of text’ is content that’s characterized by a lack of hierarchy or
formatting, and exceeds the appropriate length. It can be compared to
the unformatted phone number example above but on a slightly larger
scale. This content is more difficult to scan and process, which in effect
will increase the cognitive load required from users.

Figure 4-2. ‘Wall of text’ example. (Source: Wikipedia)

When we compare the example above with content that has formatting,
hierarchy and appropriate length applied, the contrast is significant.
Below is an example of the improved version of the same content
(Figure 4-3). Headings and subheadings have been applied to provide
hierarchy, whitespace has been applied to break the content into
discernable sections, line-length has been reduced to improve
readability, text links have been underlined and keywords have been
highlighted to provide contrast from the surrounding text.
Figure 4-3. ‘Wall of text’ improved with hierarchy, formatting and appropriate length.
 (Source: Wikipedia)

Now let’s take a look at how chunking is applied in the broader

context. Chunking can be used to help users understand underlying
relationships and hierarchy by grouping content into distinctive
modules, leveraging rules to separate content, and providing hierarchy
(Figure 4-4). Especially in information-dense experiences, chunking
can be leveraged to provide structure to the content. Not only is the
result more visually pleasing, but it’s more scannable. Users that are
skimming the latest headlines to determine which is worthy of their
attention can quickly scan the page and make a decision.
 Figure 4-4. Example of chunking applied to dense information.

Key Takeaways
Don’t use the “magical number seven” to justify unnecessary design
limitations.

Organize content into smaller chunks to help users process, understand,

and memorize easily.
Remember that the short-term memory capacity will vary per
individual.

Conclusion
The sheer amount of information around us is growing at an
exponential rate. In contrast, we humans have a finite amount of mental
resources to process the information around us. The inevitable overload
that can occur directly has an affect on our ability to complete tasks.
Miller’s Law teaches us to use chunking to organize content into
smaller clusters to help users process, understand, and memorize
easily.

Index
Miller, G. A. (1956). “The magical number seven, plus or minus two:
Some limits on our capacity for processing information”. Psychological
Review.
Chapter 5. Postel’s Law

Be liberal in what you accept, and conservative in what you send.

Overview
Designing good user experiences means designing good human
experiences. People don’t behave like machines: their output in
inconsistent, error prone, and driven by emotion. We expect the
products and services we interact with to intuitively understand us.
When things go wrong, blame is too often directed towards the user
and not the interface and underlying computer system. The products
and services we interact with must account for this to be user-friendly.

At the same time, the products and services designers build must be
robust and adaptable to fit the needs of growing scale and complexity.
Accounting for the ‘happy path’ in design isn’t an adequate means of
defining how a system works. We must also account for what happens
when things go unexpectedly. Everything from variable user input and
errors to malicious intent should be anticipated and met with an
appropriate response.

Postel’s Law, also known as the ‘Robustness Principle’, gives us a

guiding principle for designing human-centric experiences that
accounts for both scale and complexity. In this chapter, we’ll take a
close look at what this means and how designers can leverage it to
design products and services that adapt to how people actually are.

Origins
Jon Postel (August 6, 1943 – October 16, 1998) was an American
computer scientist who authored an early implementation of the
Transmission Control Protocol (TCP), an underlying protocol of the
Internet. He recommended that implementations of the protocol follow
a general principle of robustness to account for variation found in
packets that are sent over the network. In other words, programs which
send data, either to other machines or programs on the same machine,
should conform to specifications while programs that receive data
should be able to accept non-conformant input — as long as the
meaning is clear.

Examples
What does it mean to be “liberal in what you accept, and conservative
in what you send”? Postel’s principle was primarily a guideline for
software, specifically in regards to the transfer of data across computer
networks, but it can just as easily be applied to user experience and
how we deal with user input and system output.

Let’s start with acceptance, specifically the acceptance of input from

users via any input mechanism available and at any form factor. It
applies to data entered into a form via mouse and keyboard or perhaps
keyboard only, assistive technology, touch and gesture input from
mobile users and even voice input in all its variations of language,
dialect, and nomenclature. It applies to a screen that can be any size,
from a watch interface all the way up to a TV screen. It applies to any
screen resolution, network bandwidth, connection strength and any
other possible variation.

The second part of this principle is about conservative output, or the

parsing of human input into structured data that is accepted by the
system. Whether it’s text input in a form, event input from the selection
of a button, or voice commands, the system will expect information to
be provided to it in a specific format. But conservative output can also
be interpreted as the way in which a design responds to user input. This
means that the system is adaptable and can gracefully respond to the
environment and actions of the person interacting with it.

Take for example the topic of internationalization. The same text string
can span different lengths, depending on the language. Many designers
account for only their native language, while not accounting for text
expansion in other languages that could have a considerable increase in
length. English, a very compact language, contains words that can
expand up to 300% when translated into a less compact language such
as Italian (Figure 5.1). Text orientation can also vary per region of the
world: from left-to-right in many western countries to right-to-left and
even vertical in others. By designing with these variations in mind, we
can account for more robust designs that can adapt to varying text
string lengths and text orientations more adaptively.
 Figure 5-1. Text expansion from english (left) to Italian (right). (Source: w3.org)

Another example that deals with text is the default font size, which can
be customized by the user both on mobile devices and browsers. The
purpose of this feature is to give the user control over the default size
of text, effectively increasing the size of all text throughout an
application and therefore improving it’s accessibility. It can also cause
problems in applications that haven’t accounted for the ability of text to
increase, specifically how it affects layout and the space available for
text.

Alternatively, designs can be more adaptable by accounting for this

feature and having a graceful response. Take for example Amazon,
which does a great job of responding to font size customization in their
website header navigation (Figure 5.3). The design accounts for the
possibility of minimum font size customization by organizing the quick
links below the search bar by importance and removes the links of
lesser importance as the font size increases.

Figure 5-2. Amazon.com adapting to minimum font size customization. (Source: Amazon)

The input that users provide to a system spans a wide spectrum and is
variable, therefore we should create systems that liberally accept it to
ensure a better user experience. The more we can anticipate and plan
for in design, the more user friendly the user experience will be.

Key Takeaways
Be empathetic, flexible, and tolerant to any number of actions the user
could possibly take.

Accept variable input from users, translating input to meet the

requirements, defining boundaries for input, and providing clear
feedback to the user.

Conclusion
Postel’s principle help us bridge the gap between human and machine.
By designing a system that can liberally accept variable human input
and translate it into a structured, machine-friendly output, we transfer
this burden away from users and therefore ensure a more human user
experience. Accounting for the not-so-happy path in design, we ensure
that the products and services we build are resilient and can adapt to
the way we people actually are as opposed to requiring they conform to
an underlying database.
Chapter 6. Peak-End Rule

People judge an experience largely based on how they felt at its peak
and at its end, rather than the total sum or average of every moment of
the experience.

Overview
An interesting thing happens when we recollect a past event. Instead of
averaging the whole experience based on facts and duration, we tend to
draw upon an emotional peak and the end regardless of whether they
were positive or negative. In other words, we remember our life
experiences as a series of snapshots rather than a comprehensive
timeline of events. Key moments during the experience are averaged in
our minds to form an opinion, specifically the most emotionally intense
moment and the ending. These moments heavily influence how we
assess the overall experience and determine if we’ll be willing to do it
again or recommend it to others. When designing user experiences, we
should pay close attention to these key moments of an experience to
ensure users recollect the experience positively.

Origins
Evidence for the peak-end rule was first explored in the 1993 paper
“When More Pain Is Preferred to Less: Adding a Better End”1 by
Daniel Kahneman, Barbara Fredrickson, Charles Schreiber, and
Donald Redelmeier. In the paper, participants were subjected to two
different versions of a single unpleasant experience. The first trial
involved participants submerging a hand in 14 °C water for 60 seconds.
The second trial involved participants submerging the other hand in 14
°C water for 60 seconds, then keeping their hand submerged for an
additional 30 seconds in 15 °C water. When given the choice of which
trial they’d repeat, participants were more willing to repeat the second
trial despite it being a longer exposure to the uncomfortable water
temperatures. The conclusion by Kahneman was that the participants
chose the longer trial simply because they preferred the memory of it in
comparison to the first trial.

Subsequent studies would corroborate this conclusion, beginning with

a 1996 study by Kahneman and Redelmeier which found that
colonoscopy or lithotripsy patients consistently evaluated the
discomfort of their experience based on the intensity of pain at the
worst and final moments regardless of length or variation in intensity
of pain within the procedure. A later study2 expanded on this by
randomly dividing patients into two groups: one which underwent a
typical colonoscopy, and another which underwent a typical
colonoscopy plus the discomfort of having the scope was left in for
three extra minutes. When asked afterwards which they preferred,
patients who underwent the longer procedure rated their experience as
less unpleasant. Additionally, those that underwent the longer
procedure were also more likely to return for subsequent procedures
— a result of these participants judging the experience positively
because of the less painful end.
Key Concept: Cognitive Biases

To understand the peak-end rule, it is helpful that we have an

understanding of cognitive biases. Cognitive biases are systematic
patterns of deviation from norm or rationality in judgment that
typically affect belief formation, business and economic decisions, and
human behavior in general. These subconscious biases are key in the
way we humans (and some animals) make decisions and even recall
information. They quite often result in useful attitudes or behavior by
making our decision making more efficient, but can also distort our
thinking, leading to poor decision-making and false judgments.

Perhaps you’ve tried to have a logical discussion about a polarizing

hot-button issue with someone else, only to discover it was incredibly
difficult. The underlying reason for this can quite often be attributed to
the fact that we attempt to preserve existing beliefs by paying attention
to information that confirms those beliefs and discounting information
that challenges them. This is known as confirmation bias, which is a
bias of belief in which people tend to seek out, interpret, and recall
information in a way that confirms their preconceived notions and
ideas.

The peak-end rule is a cognitive bias known as a memory bias because

it impairs the recall of a memory. We remember intensely emotional
events more than we do less emotional events, and this has an affect on
how we perceive not the sum of an experience but the average of how
it was at its peak and how it ended. The peak-end rule is related to
another cognitive biases known as the recency effect, which states that
items near the end of a sequence are the easiest to recall.

Examples
One company that demonstrates quite the proficiency at understanding
how emotion impacts user experience is Mailchimp. The process of
creating an email campaign can be quite stressful but Mailchimp
knows how to guide users while keeping the overall tone light and
reassuring. Take for example the moment which you’re about to hit
send on an email you’ve crafted for your audience’s inboxes. This
emotional peak moment is the accumulation of all the work and
scrutiny that has gone into that email campaign, capitalized by the
potentially fear of failure. Mailchimp understands this is an important
moment, especially for first time users, and uses the moment to go
beyond a simple confirmation modal (Figure 6.1). By infusing a touch
of brand character through illustration, subtle animation and humor,
they defuse what can potentially be a stressful moment. Freddie, the
emblematic mascot chimp for the company, hovers his finger over a
large red button as if to imply he is eagerly awaiting your permission.
The longer you wait, the more nervous Freddie seems to get, which is
evident through the sweat and subtle shaking that appears on his hand.

Figure 6-1. Mailchimp’s email campaign confirmation modal. (Source: Mailchimp)

Mailchimp’s artful capitalization on key moments doesn’t end there.

Once the email campaign is sent, users are redirected to a screen
(Figure 6.2) indicating that the email has been sent and the details
pertaining to the campaign. Users are also shown at this point an easter
egg that validates their hard work: Freddie gives a high five, as if to
reassure the users of a job well done. It’s details like these that
reinforce the feeling of accomplishment and therefore enhance the
experience which ultimately creates overwhelmingly positive mental
snapshots for people that use this service.
 Figure 6-2. Mailchimp’s email sent screen. (Source: Mailchimp)

Positive events aren’t the only thing that have an impact on how people
feel about a product or service. Negative events also can act as
emotional peaks that form a lasting impression that users will recall
from memory. A good example that could easily turn into a negative
impression is when a webpage cannot be found, resulting in a 404 error
page. Instead, many companies use this as an opportunity to lighten the
potential frustration of their customers by leveraging some good old
fashioned humor (Figure 6.3).
 Figure 6-3. Various 404 pages that use humor and brand personality.

Key Takeaways
Pay close attention to the most intense points and the final moments
(the “end”) of the user journey.

Identify the moments when your product is most helpful, valuable, or

entertaining and design to make those moments even better.

Remember that people recall negative experiences more vividly than

positive ones.

Conclusion
Our memories are rarely a perfectly accurate record of events. How
users recall an experience will determine how likely they are to do it
again or recommend it to others. Since we recall past experiences not
by the sum of the experience but the average of how it was at its peak
and how it ended, it is vital that these moments make a lasting
impression. By paying close attention to these key moments of an
experience, we can ensure users recollect the experience positively.

Index
Kahneman, Daniel; Fredrickson, Barbara L.; Schreiber, Charles A.;
Redelmeier, Donald A. (1993). “When More Pain Is Preferred to Less:
Adding a Better End”. Psychological Science.
Redelmeier, Donald A; Katz, Joel; Kahneman, Daniel (2003).
“Memories of colonoscopy: a randomized trial”.
Chapter 7. Aesthetic-Usability
Effect

Users often perceive aesthetically pleasing design as design that’s

more usable.

Overview
As designers, we understand that design is more than just how
something looks, but how something works. That’s not to say good
design can’t also be attractive design. In fact, aesthetically pleasing
design can actually influence usability in a significant way. Not only
does attractive aesthetics create a positive emotional response, but it
also enhances our cognitive abilities. In other words, aesthetically-
pleasing design creates a positive response in people’s brains and leads
them to believe the design actually works better.

In this chapter, we’ll explore the origins of this principle and take a
look at a few examples that make use of this effect.

Origins
The origins of the aesthetic-usability effect can be traced back to a
study 1 conducted in 1995 by researchers Masaaki Kurosu and Kaori
Kashimura from the Hitachi Design Center. In the study, Kurosu and
Kashimura tested a multitude of Automated Teller Machine (ATM)
interfaces with 252 participants to rate each design on both usability
and aesthetics. The study analysis showed that participants were
strongly influenced by the aesthetic aspect of the interface — even
when they try to evaluate the interface based on functional aspects. In
other words, apparent usability is less correlated with inherit ease of
use, and more with apparent beauty.

Examples
We’ll start our examples of the aesthetic-usability effect with a
company known for design excellence. Braun, the German electronics
company, has made an indelible mark in the world of design. Under the
design direction of Dieter Rams, the company have influenced
generations of designers with their functional minimalism balanced by
aesthetic beauty of their products. Ram’s “less but better” approach,
which emphasizes form following function, has directly resulted in
some of the most memorable products ever produced.

Take for example the Braun SK4 record player (Figure 7.1),
nicknamed “Snow White’s Coffin” due to its white metal casing and
transparent lid. This radio combined with a record player was
constructed of powder coated sheet metal with elm wood side panels,
and set in drastic contrast to the lavishly ornamented all-wood products
available to consumers at the time. Additionally, it featured a
plexiglass cover that solved that prevented rattling at higher volumes.
The record player was one of Braun’s first products to pioneer Braun’s
contemporary industrial design language in which every detail had a
functional purpose.
 Figure 7-1. Braun SK4 record player designed by Hans Gugelot and Dieter Rams. (Source:
Museum of Modern Art)

Now let’s take a look at another example which is in many ways

continues the legacy of Braun in regards to functional minimalism
that’s balanced by refined aesthetics: Apple. The interfaces created by
Apple are well known for their refinement, usability, and beautiful
design (Figure 7.2). In fact, it’s become a competitive advantage for
the company and their attention to detail in everything they create has
directly contributed to the company becoming one of the most beloved
brands in the world. That’s not to say that Apple’s interfaces don’t
have any usability issues, but people are much more likely to overlook
these issues due to the pleasing aesthetic that’s at the core of the
design.
 Figure 7-2. Screenshot of various Apple interface designs. (Source: Apple)

Effect on Usability Tests

The positive benefits of aesthetically pleasing design comes with a
significant caveat. Since people tend to believe that beautiful
experiences also work better, they can be more forgiving with it comes
to usability issues. This tendency applies even when the experience
isn’t actually easier to use, and can be problematic when it comes to
usability tests where identifying issues is critical. We can mitigate this
influence by listening to what users say when evaluating the usability
of an experience, but more importantly by watching what they do.

Key Takeaways
Aesthetically-pleasing design creates a positive response in people’s
brains and leads them to believe the design actually works better.

Aesthetically pleasing design can make users more tolerant of minor

usability issues.
Aesthetically pleasing design can mask usability problems and prevent
issues from being discovered during usability testing.

Conclusion
Aesthetically pleasing design can influence usability in a significant
way by creating a positive emotional response, which in turn enhances
people’s cognitive abilities. When this happens, users tend to believe
the design actually works better and are more likely to overlook minor
usability issues. These side-effects come with a caveat: it can actually
mask usability problems and prevent issues from being discovered
during usability testing. We must listen to what users say when
evaluating the usability of an experience, but more importantly watch
what they do to ensure they aren’t dismissing potential issues.

Index
Kurosu, Masaaki. “Apparent usability vs. inherent usability:
experimental analysis on the determinants of the apparent usability”.
CHI ’95 Conference Companion on Human Factors in Computing
Systems.
About the Author

Jon Yablonski is an award-winning digital designer living in Detroit.

His passion lies in exploring the intersection of interaction design and
development. He’s a senior product designer currently working on
design systems at General Motors and orchestrating design events as
Director of Digital Experiences for AIGA Detroit. When he’s not
building wireframes, prototypes, or stylesheets, Jon is writing about his
design experiences for outlets such as A List Apart, Smashing
Magazine, and CSS Tricks. His work has been featured in outlets such
as FastCo Design, Adobe Blog, and The State of UX in 2019 from UX
Collective, and he’s received awards from CSS Design Awards and
The FWA.