Laws of UX © 2022 Jon Yablonski. All rights reserved. Published by Pip Decks. Laws of UX and Pip Decks are registered trademarks of Chxrles Ltd and their respective owners.

No part of this publication may be reproduced or distributed in any form or by any means,or stored in any database or retrieval system without the prior written permission of Chxrles Ltd.

If you need permission, you’ll have to ask. Ask, because you never know (we may say yes).

The information in this document is accurate to the best of our knowledge at the time of writing. As a reader you need to accept full responsibility for your actions and should consult with a professional about your own circumstances before following anything in the deck. Results are not guaranteed (Heck, nothing in life is guaranteed).

Further, the author and publisher have used their best efforts to proof and confirm the content of the files, but you should proof and confirm information such as dates, measurements, and any other content for yourself.

The author and publisher make no warranties of any kind, express or implied, with regard to that content or its accuracy.

For more information, please write to: Chxrles Ltd,

3 Torquay Grove,

Stockport, SK2 7BB

E-mail: support@pipdecks.com

Website: pipdecks.com | Twitter: @pipdecks | Instagram: PipDecksHQ

This PDF version of Laws of UX was Published in the UK.

®

W R I T T E N A N D D E S I G N E D B Y J O N Y A B L O N S K I P U B L I S H E D B Y P I P D E C K S ®

I N T R O D U C T I O N

As humans, we have an underlying ‘blueprint’ for how we perceive and process the world around us, and the study of psychology helps us decipher this blueprint. Designers can use this knowledge to build more intuitive, human-centered products and experiences. Instead of forcing users to adapt to the design of a product or experience, we can use some key principles from psychology as a guide for designing in a way that is adapted to people.

H O W T O U S E L A W S O F U X

Connect the cards

Start with the UX Theory cards as a starting point for connecting related psychology concepts, interaction principles and UX methods such as Peak-End Rule > Cognitive Bias > Conceptual Model > Journey Mapping.

Pair your design principles with UX Theories This strengthens the connection between what the principle is seeking to accomplish and the psychological reasoning behind it.

Create a shared collective knowledge and vocabulary Better articulate your design decisions to peers and stakeholders by tying them back to psychology.

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

I N T E R A C T I O N P R I N C I P L E

Discoverability

The ability to discover what a system does, how it works, and what operations are possible.

R E L A T E D | C O N C E P T U A L M O D E L

U S A B I L I T Y T E S T

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Discoverability

Discoverability is key to learning what’s possible It defines the ease at which users can find new content or features and directly affects their ability to complete specific tasks. It results from the appropriate application of affordances, signifiers, constraints, mappings and feedback.

Ensure clear focal points

Discoverability is supported through clear focal points, visual hierarchy, prioritizing the visibility of critical elements, navigation systems that are easy to access and understand, and using iconography that holds universal meaning.

Distinction: discoverability vs findability Findability refers to the ability to find content or a functionality that users already know or assume is present. Discoverability, on the other hand, refers to the ability to discovery new content or a functionality that users are not already aware of.

Origin

This fundamental principle of interaction was defined by researcher, professor and author Don Norman and can be applied to make products and services efficient, effective and delightful to use. It results from the appropriate application of five fundamental psychological concepts: affordances, signifiers, constraints, mappings and feedback.

I N T E R A C T I O N P R I N C I P L E

Affordances

Define what actions are possible with an object or interface based on the capabilities of the user.

R E L A T E D | S I G N I F I E R S

U S A B I L I T Y T E S T

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Affordances

Affordances help you know what action to take Help users achieve their goal by connecting what an object does according to their Conceptual Model of what that object should do.

The form of the interactive element implies the function Affordances help people figure out what actions are possible without the need for labels or instructions. For example, buttons afford pressing because they often appear to be raised from the surface, or they are styled differently from other content often in addition to text that implies an action.

Distinction: signifier vs affordance

Affordances are the actions that are possible, while signifiers communicate where the action should take place.

Origin

This fundamental principle of interaction was defined by researcher, professor and author Don Norman and can be applied to make products and services efficient, effective and delightful to use. It results from the appropriate application of five fundamental psychological concepts: affordances, signifiers, constraints, mappings and feedback.

I N T E R A C T I O N P R I N C I P L E

Signifiers

Signifiers are visible or audible clues that communicate the appropriate action within a system.

R E L A T E D | A F F O R D A N C E S

U S A B I L I T Y T E S T

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Signifiers

Signifiers provide important cues

They show how and where people can interact with an interface and help people see the affordances of an object.

Apply signifiers to communicate the ‘what’

Use signals such as labels, arrows, icons and sounds to lead users to take relevant actions. For example, a horizontal bar lets people know that a door should be pushed to open, while a handle lets them know to pull it.

Distinction: signifier vs affordance

Affordances are the actions that are possible, while signifiers communicate where the action should take place.

Origin

This fundamental principle of interaction was defined by researcher, professor and author Don Norman and can be applied to make products and services efficient, effective and delightful to use. It results from the appropriate application of five fundamental psychological concepts: affordances, signifiers, constraints, mappings and feedback.

I N T E R A C T I O N P R I N C I P L E

Feedback

System responses that makes it clear to the user what action has been taken and what has been accomplished.

R E L A T E D | M A P P I N G

U S A B I L I T Y T E S T

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Feedback

Feedback communicates the current state of a system or object Feedback allows the user to feel in control and take appropriate actions to reach their goal, as well as building trust that the system works as intended.

Good design gives clear feedback

Clear feedback prevents discomfort or difficulty. For example, a loading bar gives information that ‘behind the scene’

progress is being made. Without it, a user may get frustrated that nothing appears to be happening. In some cases, when things load too quickly, fake progress bars can create reassurance that something did happen!

Avoid ambiguity. Be clear and specific.

The key is to design the experience to never leave the user guessing about what action they have taken and the consequence of doing so.

Origin

This fundamental principle of interaction was defined by researcher, professor and author Don Norman and can be applied to make products and services efficient, effective and delightful to use. It results from the appropriate application of five fundamental psychological concepts: affordances, signifiers, constraints, mappings and feedback.

I N T E R A C T I O N P R I N C I P L E

Mapping

The relationship between the elements of two sets of things.

R E L A T E D | C O N C E P T U A L M O D E L

U S A B I L I T Y T E S T

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Mapping

Mapping helps you understand what controls will do When controls are mapped to the layout of the devices being controlled, it is easier to determine how to use them.

For example, rotating a steering wheel clockwise or counter-clockwise steers the vehicle right or left. Or the layout of a rooms’ switches are mapped to the location of ceiling lights they control.

Natural mapping

Spatial analogies, such as moving an interactive element up or down in order to increase or decrease the value of another element, will decrease the time it takes to understand it.

Origin

Mapping is a technical term that was borrowed by researcher, professor and author Don Norman from mathematics to refer to the relationship between the elements of two sets of things.

It is one of six concepts required to support discoverability and understanding.

I N T E R A C T I O N P R I N C I P L E

Constraints

Physical, semantic, cultural and logical constraints guide our actions and aid in interpretation.

R E L A T E D | C O G N I T I V E L O A D

U S A B I L I T Y T E S T

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Constraints

Constraints give us clues

They allow us to determine a course of action by limiting the possible actions available to us.

Physical constraints

Restrict the possible operations; for example, a mouse cursor cannot be moved outside the screen. This boundary prevents a user from losing their visual anchor.

Semantic constraints

Provide clues to where actions can be performed; for instance, a socket is restricted in where the plug pins can be inserted. The constraint of only being inserted one way eliminates user error.

Cultural constraints

Social conventions, such as waiting in a queue to be served, create a signifier of where to stand.

Logical constraints

Help determine the alternatives; for example, scroll bars indicate that content exceeds the viewport, and that we should scroll.

Origin

Constraints are one part of the fundamental principles of interaction, defined by American researcher, professor and author Don Norman, which can be applied to make products and services efficient, effective and delightful to use.

I N T E R A C T I O N P R I N C I P L E

Conceptual Model

An explanation, usually highly simplified, of how something works, which is formed through experience, training and instruction.

R E L A T E D | D I S C O V E R A B I L I T Y

U S E R I N T E R V I E W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Conceptual Model

Conceptual models provide understanding They enable people to make associations with things that are familiar in order to understand how something works and what to do if something goes wrong.

Universal ideas we all share

Examples include the files, folders and app icons found on computers. The universality of these images makes them easier to understand and use. For more abstract concepts, like deleting, we use visual metaphors, such as the trash icon. We understand the concept of throwing something in the trash, so we can use that to represent the idea of deleting items.

Mismatched conceptual models cause frustration In the absence of a good conceptual model, we act rashly and lack appreciation of why a system works the way it does, or become frustrated if something behaves differently to how we expect it to.

Origin

Part of the fundamental principles of interaction, defined by American researcher, professor and author Don Norman, which can be applied to make products and services efficient, effective and delightful to use.

U X M E T H O D

Card Sorting

A research technique in which users organize topics into groups to create an information architecture that suits their expectations.

R E L A T E D | H I C K ’ S L A W

C O N T E X T U A L I N Q U I R Y

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Card Sorting

1. Gather

Gather the items or topics that the participants will be asked to organize. These items should represent the main content within your information architecture, such as items in a navigation or products in your catalog. Write each item on an individual card.

2. Sort

Ask the participants to sort the items one at a time into groups that make sense to them. Encourage them to think out loud, as this can give you valuable insight into their thought process.

3. Label

Once the topics have been sorted, ask the participant to label each group with the term they think best describes it. This step reveals what each participant’s mental model is and will be helpful when determining what to eventually label categories within your information architecture.

4. Dig deeper

Ask the participants to explain their rationale for each of the groupings they created. This helps you uncover why each participant made the decisions they did, identify any difficulties they experienced, and gather their thoughts on any topics that remain unsorted.

U X M E T H O D

Design Principles

An agreed-upon set of guidelines that help frame how a design team approaches and solves problems.

R E L A T E D | A F F I N I T Y M A P P I N G

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Design Principles

1. Rally the team together

Bring together the team. The more people you can get involved, the easier it will be to ensure widespread adoption.

2. Define the criteria of your principles On sticky notes, ask the group to write down the criteria the principles must meet to be valuable. Stick this up so its visible for the next step. For example: must be specific, focussed on user needs, and scalable across systems. Also consider: are these principles for your service, interaction or content design? Or should they encompass all of these areas?

3. Diverge

For the next 10 minutes, ask each team member to write as many design principles as they can. For example, ‘use inclusive language’, or ‘animation must imply how the UI can be interacted with, or it shouldn’t be used’.

4. Converge

In turn, ask each team member to share their ideas. Stick them up on a wall and group into themes as you go. Next, with three votes each, have everyone dot vote the themes they feel resonate most.

5. Refine and Apply

As a group, stress-test the principles by applying them to existing or hypothetical new design work. Consolidate the principles where possible and refine how they are articulated until they are clear and specific. Make a plan for how to share these principles so they are always considered in your design practice.

U X M E T H O D

Journey Mapping

A visualization of the process that a user goes through in order to accomplish a goal.

R E L A T E D | P E A K - E N D R U L E

A F F I N I T Y M A P P I N G

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Journey Mapping

Lens

Describe the user, their motivations and expectations within the specific scenario. For example, Jane (user) is using a ride-share service app to order a ride (scenario) that she expects to arrive at her exact location in 10 minutes or less (expectation).

Experience

Illustrate the actions and emotions of the user across a timeline.

Use the Y axis to denote level of delight and frustration (as shown by the dotted line in the image above).

Insights

Identify opportunities to improve the experience. For example, give a real-time location of the driver to reduce the pain of waiting (opportunity). This feature will need to be developed by the product team (internal ownership) and can be monitored with post-ride ratings (metric).

U X M E T H O D

User Personas

A fictional representation of users whose characteristics and goals represent that of a larger group of users.

R E L A T E D | J A K O B ’ S L A W

C O N T E X T U A L I N Q U I R Y

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

User Personas

Info: make personas memorable for your team 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: outline behaviours, motivations, goals and tasks.

Build empathy and align focus on the characteristics that impact what is being designed. A bio creates a deeper narrative around the persona. Include behavioral qualities such as motivations and goals, and frustrations or sources of joy that this particular group might have. Additional details could include tasks the user might perform while using the product or feature.

Insights: include attitudes, quotes and additional context The insights section frames the attitude of the user. It adds an additional layer of context that provides further definition of the specific persona and their mindset. It often includes direct quotes from user research.

U X M E T H O D

Usability Test

An observational method to uncover problems in a design, discover opportunities that exist, and learn more about the behaviors and preferences of users.

R E L A T E D | J A K O B ’ S L A W

A F F I N I T Y M A P P I N G

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Usability Test

Recruit real users

Target and recruit representative users of the product or service you’re building. Don’t rely solely on usability data from your own your team or company unless what you’re designing is intended exclusively for them.

Simulate real tasks

Ask participants to perform realistic tasks using your design.

They can be very specific or open-ended, depending on the goals of the test.

Observe and listen

While you are running the test, make sure to listen intently and avoid biasing the participants. Remember to remain neutral.

Avoid leading questions. Ensure participants understand that they are helping you test the design and you are not testing them. It can be tempting to give them the answer if they get stuck, but it’s more insightful to see how they overcome it.

Set and measure performance metrics

Be sure to measure both the speed and ease at which participants manage the task in addition to what they say about it. How well participants perform doesn’t always match their subjective experience of doing so.

U X M E T H O D

User Interview

A UX research technique during which a researcher asks one user questions about a particular topic in order to gain insights.

R E L A T E D | J A K O B ’ S L A W

A F F I N I T Y M A P P I N G

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

User Interview

Define the goal of the interview

What exactly are you hoping to learn? Or what are you trying to understand better? Ensure you collect valuable information for your design by making the goal concise and related to a specific aspect of the users’ behavior or attitudes.

Prepare your discussion guide

Be sure to prepare questions beforehand that focus around the goal of the interview. Don’t be afraid to ask relevant follow-up questions based on the participant’s responses. A natural, free-flowing conversation can lead to unexpected, fruitful insights. A general guide of themes to discuss can sometimes be more useful than a list of rigid questions.

Build rapport with the interviewee

Ask them if they’ve done anything like this before. Reassure them it’s no big deal and you’ll just be having a chat. People are more likely to open up and provide valuable information once they are relaxed and trust the interviewer.

Avoid leading questions

Don’t ask closed questions that are answerable with a ‘yes’

or ‘no’, or questions that are too vague to get specific and valuable responses. The goals is to elicit rich, unbiased answers from the interviewee. Open questions start with

‘what’, ‘how’, ‘when’ – or ‘tell me about X’.

U X M E T H O D

Affinity Mapping

A method for categorizing and sorting qualitative data or observations using an affinity diagram in order to identify themes and gain insights.

R E L A T E D | U S E R I N T E R V I E W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Affinity Mapping

1. Record

Record the research from user interviews, user tests or other research method on individual sticky notes. The notes can include anything that’s helpful: general information about the subject of the research, observations, quotes, common oversights, and use cases.

2. Identify

Identify patterns in the notes and group those that are related.

Don’t over think it — this step is about understanding the data as a whole and groupings can always change.

3. Label

Once you’ve organized the notes into related groups, give each a name based on the theme of that group. For example ‘people often did X when attempting to accomplish Y’.

4. Insights

Identify key insights from the themes. What story do the themes tell as a whole? Once these are defined, summarize them and provide evidence from your research to support each.

Don’t forget to include design action items related to each!

U X M E T H O D

UX Survey

A qualitative method of collecting data about a user’s interactions and experience with a website or digital product.

R E L A T E D | U S A B I L I T Y T E S T

C O N T E X T U A L I N Q U I R Y

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

UX Survey

1. Set expectations

Start by giving participants an idea of what you will be asking them, how much time it will take, and how to get in contact if they have any issues with the survey.

2. Questions

Keep questions as short and simple as possible in order to increase the completion rate and quality of feedback from participants. Questions should be a mix of prompts that require participants to answer from a fixed number of possible response, prompts that allow users to respond however they want.

Additionally, be sure to only ask one question at a time!

3. Bias

Avoid biasing the participants with questions that lead or prime them to respond a specific way in order to get more meaningful data. For example, instead of asking “what problems did you experience with [feature]” , ask them to

“describe your experience with [feature]” .

4. Ease-in

Start with broad, general questions that are easy to answer to ease them into the survey, before moving on to more thought-provoking questions or those that require more mental effort.

P S Y C H O L O G Y C O N C E P T

Contextual Inquiry

A field study that involves in-depth observation and interviews of a small sample of users to gain a robust understanding of work practices and behaviors.

R E L A T E D | U S E R I N T E R V I E W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Contextual Inquiry 1. Introduction

Begin by introducing yourself, stating the goals of the inquiry, and communicating what the participant can expect. Be sure to let participants know their feedback is confidential!

2. Inform

Next up is the transition to the interview. Inform the participant that you will watch while they perform their work, and to expect questions whenever you see something interesting to discuss.

3. Explore

During the interview, be sure to watch and learn while stopping the participant to discuss observations that you’d like to explore further or clarify. Ask open-ended questions that let the participant give you details about why they took a certain action.

4. Clarify

End by asking any outstanding questions and summarizing your interpretation of the observed processes in order to get final clarifications and correct your understanding.

5. Synthesize

Synthesize the data collected during contextual inquiries by identifying important patterns and themes (e.g. affinity mapping).

P S Y C H O L O G Y C O N C E P T

Cognitive Load

The amount of mental resources needed to understand and interact with an interface.

R E L A T E D | H I C K ’ S L A W

A F F O R D A N C E S

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Cognitive Load

Our brains have a limited amount of processing power When the amount of information coming in exceeds the space we have available in our brain, we struggle to keep up — tasks become more difficult, details are missed, and we begin to feel overwhelmed.

Intrinsic cognitive load

Refers to the effort required by users to carry around information relevant to their goal, absorb new information and keep track of their goals. For example, we can only hold three or four items in our working memory at once.

Extraneous cognitive load

Refers to the mental processing that takes up resources but doesn't help users understand the content of an interface (e.g.

distracting or unnecessary design elements).

Origin

Cognitive load theory was developed in the late 1980s by John Sweller out of a problem-solving study. In many ways it was an expansion on the information processing theories of George Miller. Sweller argued that instructional design can be used to reduce cognitive load in learners, culminating in his 1988 publication of “Cognitive Load Theory, Learning Difficulty, and Instructional Design” .

P S Y C H O L O G Y C O N C E P T

Cognitive Bias

Systematic errors of thinking or rationality in judgement that influence our perception of the world and our decision-making ability.

R E L A T E D | P E A K - E N D R U L E

C O N C E P T U A L M O D E L

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Cognitive Bias

Cognitive biases increase our efficiency Rather than thinking through every situation, we conserve mental energy by developing rules of thumb to make decisions based on past experience. These mental shortcuts enable us to make quick decisions without needing to analyze every detail. But they can also influence our decision-making processes and judgement without our awareness.

Example: confirmation bias

We have a tendency to seek out, interpret, and recall information in a way that confirms our preconceived notions and ideas. This is known as confirmation bias, and it can make having a logical discussion about a polarizing hot-button issue with someone incredibly difficult.

Building awareness

Understanding our own biases may not eliminate them from our decision making – but it can help us identify them.

Being aware can safeguard us against fallacious reasoning, unintentional discrimination or costly decisions.

Origin

Amos Tversky and Daniel Kahneman introduced the notion of cognitive biases in 1972 after they observed people’s inability to reason intuitively with greater orders of magnitude. In a series of replicable experiments, Tversky, Kahneman and their colleagues demonstrated that human judgement and decision making is seperate from rational choice theory.

P S Y C H O L O G Y C O N C E P T

Cognitive Dissonance

When a user is confronted with an interface or affordance that appears to be intuitive but delivers unexpected results.

R E L A T E D | M E N T A L M O D E L J A K O B ’ S L A W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Cognitive Dissonance Cognitive dissonance can negatively affect user experience This can cause frustration and lead to the user abandoning a task, or leaving the experience altogether.

Seek out frustrating and confusing steps Prevent cognitive friction by conducting user interviews to understand a user’s mental model. Create task flows to ensure coherent steps, and design easy-to-use information architectures with Card Sorting.

Evaluate and test to create a smooth journey Expert evaluations and usability testing can also highlight problems in a design and uncover solutions. When a great user experience feels easy, it’s because no steps in the journey were confusing or difficult.

Origin

Cognitive dissonance was established by Leon Festinger in When Prophecy Fails: A Social and Psychological Study of a Modern Group That Predicted the Destruction of the World (1956) and A Theory of Cognitive Dissonance (1957). In these works, Festinger proposed that human beings strive for internal psychological consistency to function mentally in the real world. People who experience internal inconsistency tend to become psychologically uncomfortable and motivated to reduce cognitive dissonance.

P S Y C H O L O G Y C O N C E P T

Mental Model

An explanation of someone’s thought process about how something works in the real world.

R E L A T E D | J A K O B ’ S L A W

C O N C E P T U A L M O D E L

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Mental Model

Match designs to the users’ existing mental models This enables 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.

Meet users’ expectations. Subvert them at your peril.

Take ecommerce websites, which use consistent patterns and conventions such product cards, virtual carts and checkout flows in order to conform to users’ expectations. Radically redesigning these elements or removing these concepts altogether for the sake of novelty runs the risk of alienating users.

Understand how your users think

Shrinking the gap between our own mental models and those of the users is one of the biggest challenges as a UX designer.

To achieve this goal we use a variety of user research methods such as user interviews, personas, journey maps and empathy maps.

Origin

The term ‘mental model’ is believed to have originated in the 1943 book The Nature of Explanation by Kenneth Craik. Since this time, there has been much discussion and use of the idea in human–computer interaction and usability.

P S Y C H O L O G Y C O N C E P T

Chunking

Chunking is a process by which individual pieces of an information set are broken down and then grouped together in a meaningful whole.

R E L A T E D | M I L L E R ’ S L A W

M A P P I N G

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Chunking

Chunking

Chunking helps users to easily scan and identify information that aligns with their goals and process that information to complete their task more quickly.

Grouping

Structuring content into visually distinct groups with a clear hierarchy enables designers to align information with how people evaluate and process content.

Content relationships

Chunking can be used to help users understand underlying relationships by grouping content into distinctive modules, applying rules to separate content, and providing hierarchy.

Origin

The word chunking comes from a famous 1956 paper by George A. Miller, “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information” .

At a time when information theory was beginning to be applied in psychology, Miller observed that some human cognitive tasks fit the model of a ‘channel capacity’ characterized by a roughly constant capacity in bits, but short-term memory did not.

P S Y C H O L O G Y C O N C E P T

Selective Attention

The process of focusing our attention only to a subset of the stimuli in the environment — usually those related to our goals.

R E L A T E D | D O H E R T Y T H R E S H O L D

S I G N I F I E R S

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Selective Attention People filter out information that isn’t relevant To maintain focus on the task at hand we must guide users’

attention. Prevent them from being overwhelmed or distracted by helping them find the information or action they need at the right moment.

Banner blindness

Website visitors ignore banner content that resembles ads, or appears in locations traditionally dedicated to ads. By not styling or placing content to look like ads, you have a higher chance of attention being paid to it.

Change blindness

A perceptual phenomenon occurs when significant changes in an interface go unnoticed due to limitations of our attention and the lack of strong cues. Avoid this by analyzing your design for any competing changes that may happen at the same time and that may divert attention from each other.

Origin

An early theory of attention was Donald Broadbent’s filter model.

Built on the research by Cherry Collins, Broadbent used an information-processing metaphor to describe human attention.

He suggested that our capacity to process information is limited, and our selection of information to process takes place early on in the perceptual process.

P S Y C H O L O G Y C O N C E P T

Analysis Paralysis

The inability to make a decision due to over-thinking a problem.

R E L A T E D | H I C K ’ S L A W

A F F O R D A N C E S

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Analysis Paralysis Too many options hurts users’ decision-making ability How they feel about the experience as a whole can be significantly impacted as a result.

Optimizing for choice

Avoid analysis paralysis by keeping the decision-making process in mind. Avoid overwhelming users by only showing one thing at a time (e.g. featured product), or by providing tools for narrowing down choices up front (e.g. search and filtering).

Optimizing for comparison

When comparison is necessary, we can avoid analysis paralysis by enabling side-by-side comparison of related items and options that require a decision (e.g. pricing tiers).

Origin

The idea of analysis paralysis has been expressed through narrative a number of times, beginning as far back the ancient fable The Fox and the Cat which was included in Aesop’s Fables.

The two words first appeared together in an 1803 pronouncing dictionary and later editions stating how those words are pronounced similarly. In 1956, Charles R. Schwartz wrote the article “The Return-on-Investment Concept as a Tool for Decision Making” in Changing Patterns And Concepts In Management stating, “We will do less guessing; avoid the danger of becoming extinct by instinct; and, by the adoption of one uniform evaluation guide, escape succumbing to paralysis by analysis.”

P S Y C H O L O G Y C O N C E P T

Flow

The mental state in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement and enjoyment of process of the activity.

R E L A T E D | D O H E R T Y T H R E S H O L D

D I S C O V E R A B I L I T Y

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Flow

Flow results from immersive and engaging user experiences A flow state occurs when there is a balance between the difficulty of a task and the level of skill required to complete it.

It’s characterized by intense and focussed concentration on the present, combined with a sense of total control.

Designing for flow

We can build flow into our designs by providing feedback so that the user knows what action has been taken and what has been accomplished. Optimizing for task efficiency is key for avoiding disengagement with the interface. This is achieved by building a responsive system, removing friction, and making content and features available for intuitive discovery.

Finding balance

A task that’s too difficult leads to heightened frustration, while a task that’s too easy can lead to boredom. Finding the right balance requires matching the challenge with the user’s skill level.

Origin

Flow was coined by psychologist Mihály Csíkszentmihályi in 1975 and has been widely referred to across a variety of fields (and is particularly well recognized in occupational therapy), though the concept has been claimed to have existed for thousands of years under other names.

P S Y C H O L O G Y C O N C E P T

Short-Term Memory

The capacity to store a small amount of information in mind and keep it readily available for a short period of time.

R E L A T E D | A F F O R D A N C E S

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Short-Term Memory

Short-term memory is limited in capacity and duration We are limited to being able to hold ~7 chunks of information in our short-term memory at any given moment with each chunk fading after 20–30 seconds. We use it to keep track of information in order to achieve tasks, but we often have trouble remembering what information we’ve already seen. Designers must be mindful of this limit when displaying information to users and ensure it’s both necessary and relevant.

Prioritize recognition over recall

Our brains are good at recognizing something we’ve seen before, but not at keeping new information ready to be used.

We can support this by making it clear what information has already been viewed (e.g. visually differentiating visited links and providing breadcrumbs links).

Place burden of memory on the system, not the user We can lessen the burden of memorizing critical information by carrying it over from screen to screen when necessary (e.g.

comparison tables that make comparing multiple items easy).

Origin

Memory is believed to be divided into short-term and long-term storage as early as the 19th century. The classical model of memory, developed in the 1960s, assumed that memories move from short-term to long-term storage over time. This model is referred to as the ‘modal model’ and has been most famously detailed by Atkinson and Shiffrin in 1968.

U X T H E O R Y

Aesthetic-Usability

Effect

Users often perceive aesthetically pleasing design as design that’s more usable.

R E L A T E D | DOHERTY THRESHOLD

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Aesthetic-Usability Effect Aesthetics

An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better than other, equally usable, (but less visually appealing) designs.

Tolerance

People are more tolerant of minor usability issues when the design of a product or service is aesthetically pleasing.

Usability problems

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

Origin

The aesthetic-usability effect was first studied in the field of human–computer interaction in 1995. Researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center tested 26 variations of an ATM UI, asking the 252

study participants to rate each design on ease of use, as well as aesthetic appeal. They found a stronger correlation between the participants’ ratings of aesthetic appeal and perceived ease of use than the correlation between their ratings of aesthetic appeal and actual ease of use. Kurosu and Kashimura concluded that users are strongly influenced by the aesthetics of any given interface, even when they try to evaluate the underlying functionality of the system.

U X T H E O R Y

Doherty Threshold

Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.

R E L A T E D | A E S T H E T I C - U S A B I L I T Y E F F E C T

F L O W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Doherty Threshold

System feedback

Provide system feedback within 400 ms in order to keep users’ attention and increase productivity.

Perceived performance

Use perceived performance to improve response time and reduce the perception of waiting.

Animation

Animation is one way to visually engage people while loading or processing is happening in the background.

Progress bars

Progress bars make wait times tolerable, regardless of their accuracy.

Purposeful delay

Purposefully adding a delay to a process can actually increase its perceived value and instill a sense of trust, even when the process itself actually takes much less time.

Origin

In 1982, Walter J. Doherty and Ahrvind J. Thadani published a research paper that set the requirement for computer response time to be 400 ms, not 2,000 ms (2 seconds), which had been the previous standard. When a human’s command was executed and returned an answer in under 400 ms, it was deemed to exceed the Doherty threshold.

U X T H E O R Y

Fitts’ Law

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

R E L A T E D | H I C K ’ S L A W

C O G N I T I V E L O A D

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Fitts’ Law

Size

Touch targets should be large enough for users to accurately select.

Spacing

Touch targets should have ample spacing between them.

Placement

Touch targets should be placed in areas of an interface that allow them to be easily accessed.

Origin

In 1954, psychologist Paul Fitts, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size. By his law, fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off.

Although multiple variants of Fitts’ law exist, all encompass this idea. Fitts’ law is widely applied in design. For example, this law influenced the convention of making interactive buttons large (especially on finger-operated mobile devices); smaller buttons are more difficult (and time consuming) to click. Likewise, the distance between a user’s task/attention area and the task-related button should be kept as short as possible.

U X T H E O R Y

Goal-Gradient Effect

The tendency to approach a goal increases with proximity to the goal.

R E L A T E D | ZEIGARNIK EFFECT

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Goal-Gradient Effect Proximity is an accelerant

The closer users are to completing a task, the faster they work towards reaching it.

Motivate

Providing artificial progress towards a goal will help to ensure users have the motivation to complete that task.

Progress

Provide a clear indication of progress in order to motivate users to complete tasks.

Origin

The goal-gradient hypothesis, originally proposed by the behaviorist Clark Hull in 1932, states that the tendency to approach a goal increases with proximity to the goal. In a classic experiment that tests this hypothesis, Hull (1934) found that rats in a straight alley ran progressively faster as they proceeded from the starting box to the food. Although the goal-gradient hypothesis has been investigated extensively with animals (e.g., Anderson 1933; Brown 1948; for a review, see Heilizer 1977), its implications for human behavior and decision making are understudied. Furthermore, this issue has important theoretical and practical implications for intertemporal consumer behavior in reward programs (RPs) and other types of motivational systems (e.g. Deighton 2000; Hsee, Yu, and Zhang 2003; Kivetz 2003; Lal and Bell 2003).

U X T H E O R Y

Hick’s Law

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

R E L A T E D | F I T T S ’ L A W

C O G N I T I V E L O A D

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Hick’s Law

Minimize choices

Minimize choices when response times are critical to decrease decision time.

Smaller steps

Break complex tasks into smaller steps in order to decrease cognitive load.

Provide recommendations

Avoid overwhelming users by highlighting recommended options.

Progressive onboarding

Use progressive onboarding to minimize cognitive load for new users.

Simplification

Be careful not to simplify to the point of abstraction.

Origin

Hick’s Law (or the Hick-Hyman Law) is named after a British and an American psychologist team of William Edmund Hick and Ray Hyman. In 1952, the pair set out to examine the relationship between the number of stimuli present and an individual’s reaction time to any given stimulus. As you would expect, the more stimuli to choose from, the longer it takes the user to make a decision on which one to interact with.

Users bombarded with choices have to take time to interpret and decide, giving them work they don’t want.

U X T H E O R Y

Jakob’s Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

R E L A T E D | M E N T A L M O D E L

O C C A M ’ S R A Z O R

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Jakob’s Law

Expectations

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

Existing mental models

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.

Minimize discord

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

Origin

Jakob’s Law was coined by Jakob Nielsen, a User Advocate and principal of the Nielsen Norman Group, which he co-founded with Dr Donald Norman (former VP of Research at Apple Computer). Dr Nielsen established the ‘discount usability engineering’ movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation.

U X T H E O R Y

Law of Common

Region

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

R E L A T E D | LAW OF UNIFORM CONNECTEDNESS

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Common Region Structure and relationship

Common region creates a clear structure and helps users quickly and effectively understand the relationship between elements and sections.

Borders

Adding a border around an element or group of elements is an easy way to create common region.

Backgrounds

Common region can also be created by defining a background behind an element or group of elements.

Origin

Gestalt psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Law of Proximity

Objects that are near to, or proximate to each other, tend to be grouped together.

R E L A T E D | LAW OF SIMILARITY

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Proximity

Relationship

Proximity helps to establish a relationship with nearby objects.

Perception

Elements in close proximity are perceived to share similar functionality or traits.

Organizing information

Proximity helps users understand and organize information faster and more efficiently.

Origin

Gestalt psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Law of Prägnanz

People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort.

R E L A T E D | T E S L E R ’ S L A W

S E L E C T I V E A T T E N T I O N

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Prägnanz

Simplicity and order

The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information.

Visual processing

Research confirms that people are better able to visually process and remember simple figures than complex figures.

Unified shape

The human eye simplifies complex shapes by transforming them into a single, unified shape.

Origin

Gestalt psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape or group, even if those elements are separated.

R E L A T E D | LAW OF PROXIMITY

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Similarity

Visual similarity

Elements that are visually similar will be perceived as related.

Common meaning

Color, shape, size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality.

Links and navigation

Ensure that links and navigation systems are visually differentiated from normal text elements.

Origin

Gestalt psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Law of Uniform

Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

R E L A T E D | LAW OF COMMON REGION

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Uniform Connectedness Grouping

Group functions of a similar nature so they are visually connected via colors, lines, frames, or other shapes.

Connection

Alternately, use a tangible connecting reference (line, arrow, etc.) from one element to the next to create a visual connection.

Context and relationship

Use uniform connectedness to show context or to emphasize the relationship between similar items.

Origin

Gestalt psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Miller’s Law

The average person can only keep seven (plus or minus two) items in their working memory.

R E L A T E D | H I C K ’ S L A W

C H U N K I N G

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Miller’s Law

Magical number seven

Don’t use the ‘magical number seven’ to justify unnecessary design limitations.

Chunks

Organize content into smaller chunks to help users process, understand, and memorize easily.

Short-term memory

Short-term memory capacity will vary per individual, based on their prior knowledge and situational context.

Origin

In 1956, George Miller asserted that the span of immediate memory and absolute judgement were both limited to around seven pieces of information. The main unit of information is the bit, the amount of data necessary to make a choice between two equally likely alternatives. Likewise, 4 bits of information is a decision between 16 binary alternatives (four successive binary decisions). The point where confusion creates an incorrect judgement is the channel capacity. In other words, the quantity of bits that can be transmitted reliably through a channel, within a certain amount of time.

U X T H E O R Y

Occam’s Razor

Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected.

R E L A T E D | T E S L E R ’ S L A W

A N A L Y S I S P A R A L Y S I S

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Occam’s Razor

Reducing complexity

The best method for reducing complexity is to avoid it in the first place.

Analyze

Analyze each element and remove as many as possible, without compromising the overall function.

Completion

Consider completion only when no additional items can be removed.

Origin

Occam’s razor (also Ockham’s razor; Latin: lex parsimoniae

‘law of parsimony’) is a problem-solving principle that, when presented with competing hypothetical answers to a problem, one should select the one that makes the fewest assumptions.

The idea is attributed to William of Ockham (c. 1287–1347), who was an English Franciscan friar, scholastic philosopher, and theologian.

U X T H E O R Y

Pareto Principle

For many events, roughly 80% of the effects come from 20% of the causes.

R E L A T E D | P A R K I N S O N ’ S L A W

ANALYSIS PARALYSIS

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Pareto Principle

Distribution

Inputs and outputs are often not evenly distributed.

Contributors

A large group may contain only a few meaningful contributors to the desired outcome.

Effort

Focus the majority of effort on the areas that will bring the largest benefits to the most users.

Origin

Its origins stem back to Vilfredo Pareto, an economist who noticed 80% of Italy’s land was owned by 20% of the population. Though it might seem vague, the 80/20 way of thinking can provide insightful and endlessly applicable analysis of lopsided systems, including user experience strategy.

U X T H E O R Y

Parkinson’s Law

Any task will inflate until all of the available time is spent.

R E L A T E D | P A R E T O P R I N C I P L E

FLOW

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Parkinson’s Law

Time limit

Limit the time it takes to complete a task to what users expect it’ll take.

Duration

Reducing the actual duration to complete a task from the expected duration will improve the overall user experience.

Autofill

Features such as autofill to save the user time when providing critical information within forms. This allows for quick completion of purchases, bookings and other such functions while preventing task inflation.

Origin

Articulated by Cyril Northcote Parkinson as part of the first sentence of a humorous essay published in The Economist in 1955 and since republished online, it was reprinted with other essays in the book Parkinson’s Law: The Pursuit of Progress (London, John Murray, 1958). He derived the dictum from his extensive experience in the British Civil Service.

U X T H E O R Y

Postel’s Law

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

R E L A T E D | T E S L E R ’ S L A W

FLOW

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Postel’s Law

User input and action

Be empathetic to, flexible about, and tolerant of any of the various actions the user could take or any input they might provide.

Anticipate anything

Anticipate virtually anything in terms of input, access, and capability while providing a reliable and accessible interface.

Resiliency

The more we can anticipate and plan for in design, the more resilient the design will be.

Variable input

Accept variable input from users, and translate that input to meet your requirements.

Origin

Postel’s Law (also known as the Robustness Principle) was formulated by Jon Postel, an early pioneer of the internet. The Law is a design guideline for software, specifically in regards to TCP

and networks, and states “TCP implementations should follow a general principle of robustness: be conservative in what you do, be liberal in what you accept from others”. In other words, programs that send messages to other machines (or to other programs on the same machine) should conform completely to the specifications, but programs that receive messages should accept non-conformant input as long as the meaning is clear.

U X T H E O R Y

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.

R E L A T E D | J A K O B ’ S L A W

COGNITIVE BIAS

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Peak-End Rule

User journey

Pay close attention to the most intense points and the final moments (the ‘end’) of the user journey.

Moments

Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end user.

Origin

A 1993 study titled “When More Pain Is Preferred to Less: Adding a Better End” by Kahneman, Fredrickson, Charles Schreiber, and Donald Redelmeier provided groundbreaking evidence for the peak-end rule. Participants were subjected to two different versions of a single unpleasant experience. The first trial had subjects submerge a hand in 14°C water for 60

seconds. The second trial had subjects submerge the other hand in 14°C water for 60 seconds, but then keep their hand submerged for an additional 30 seconds, during which the temperature was raised to 15 °C. Subjects were then offered the option of which trial to repeat. Against the law of temporal monotonicity, subjects were more willing to repeat the second trial, despite a prolonged exposure to uncomfortable temperatures. Kahneman et al. concluded that “subjects chose the long trial simply because they liked the memory of it better than the alternative (or disliked it less)”.

U X T H E O R Y

Serial Position Effect

Users have a tendency to best remember the first and last items in a series.

R E L A T E D | ZEIGARNIK EFFECT

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Serial Position Effect Placement

Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory.

Increase memorization

Positioning key actions on the far left and right within elements such as navigation can increase memorization.

Origin

The serial position effect, a term coined by Herman Ebbinghaus, describes how the position of an item in a sequence affects recall accuracy. The two concepts involved – the primacy effect and the recency effect – explain how items presented at the beginning and end of a sequence are recalled with greater accuracy than items in the middle. Manipulation of the serial position effect to create better user experiences is reflected in many popular designs by successful companies like Apple, Electronic Arts and Nike.

U X T H E O R Y

Tesler’s Law

In any system, there is a certain amount of complexity that cannot be reduced.

R E L A T E D | P O S T E L ’ S L A W

COGNITIVE LOAD

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Tesler’s Law

Core of complexity

All processes have a core of complexity that cannot be designed away and therefore must be assumed by either the system or the user.

Complexity burden

Ensure as much of the burden as possible is lifted from users by dealing with inherent complexity during design and development.

Simplification

Take care not to simplify interfaces to the point of abstraction.

Origin

While working for Xerox PARC in the mid-1980s, Larry Tesler realized that the way users interact with an application is just as important as the application itself. The book Designing for Interaction by Dan Saffer includes an interview with Larry Tesler that describes the law of conservation of complexity.

Larry Tesler argues that, in most cases, an engineer should spend an extra week reducing the complexity of an application versus making millions of users spend an extra minute using the program because of the extra complexity. However, Bruce Tognazzini proposes that people resist reductions to the amount of complexity in their lives. Thus, when an application is simplified, users begin attempting more complex tasks.

U X T H E O R Y

Von Restorff Effect

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

R E L A T E D | LAW OF SIMILARITY

SELECTIVE ATTENTION

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Von Restorff Effect Visual distinction

Make important information or key actions visually distinctive.

Restraint

Use restraint when placing emphasis on visual elements to avoid them competing with one another and to ensure salient items don’t get mistakenly identified as ads.

Color contrast

Don’t exclude those with a color vision deficiency or low vision by relying exclusively on color to communicate contrast.

Motion

Carefully consider users with motion sensitivity when using motion to communicate contrast.

Origin

The theory was coined by German psychiatrist and pediatrician Hedwig von Restorff (1906–1962), who, in her 1933 study, found that when participants were presented with a list of categorically similar items with one distinctive, isolated item on the list, memory for that item was improved.

U X T H E O R Y

Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

R E L A T E D | G O A L - G R A D I E N T E F F E C T

FLOW

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Zeigarnik Effect

Content discovery

Invite content discovery by providing clear signifiers of additional content.

Artificial progress

Providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task.

Progress

Provide a clear indication of progress in order to motivate users to complete tasks.

Origin

Bluma Wulfovna Zeigarnik (1900–1988) was a Soviet psychologist and psychiatrist. In the 1920s, she conducted a study on memory, in which she compared memory in relation to incomplete and complete tasks. She had found that incomplete tasks are easier to remember than successful ones. This is now known as the Zeigarnik effect. She later began working at the Institute of Higher Nervous Activity, which is where she would meet her next big influence, Vygowski, and become a part of his circle of scientists. It was also there that Zeigarnik founded the Department of Psychology. During that time, Zeigarnik received the Lewin Memorial Award in 1983 for her psychological research.

U X T H E O R Y

Campbell’s Law

The more important a metric is in social decision making, the more likely it is to be manipulated.

R E L A T E D | P A R E T O P R I N C I P L E

COGNITIVE BIAS

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Campbell’s Law

Optimization

People tend to optimize their behavior to improve a metric when it’s used to determine success or failure, sometimes leading to ridiculous or dangerous results that impact the overall user experience. It’s critical that we use data as a tool to assist in decision making instead of allowing metrics alone to determine a decision.

Limitation

Metrics cannot fully and accurately describe the world. Every metric collected reflects a decision about what is considered important.

Combination

The combination of quantitative metrics with qualitative data enables us to better understand the consequences of design decisions. Without this combination, consequences may be missed by relying on passively collected analytics data.

Origin

Campbell’s law is an adage developed by Donald T. Campbell, a psychologist and social scientist who often wrote about research methodology. It states: the more any quantitative social indicator is used for social decision-making, the more subject it will be to corruption pressures and the more apt it will be to distort and corrupt the social processes it is intended to monitor.

U X T H E O R Y

Stroop Effect

The mental dissonance caused when we attempt to make sense of two conflicting attributes at once.

R E L A T E D | S I M O N E F F E C T H I C K ’ S L A W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Stroop Effect

Reaction time

Reaction time is delayed when our minds attempt to process information that contradicts our understanding (e.g. a green sky, purple grass, a red lemon, a blue apple).

Consider context

Ensure the design of elements makes sense in the context and its intended functionality. For example, you wouldn’t want to style a submit button the same as the cancel button right next to it.

Consider Congruency

Ensure the design of elements is congruent with the content or message they are intended to communicate (e.g. a back button doesn’t include a right arrow).

Origin

The effect was named after John Ridley Stroop, who published the effect in English in 1935 in an article in the Journal of Experimental Psychology entitled “Studies of interference in serial verbal reactions” which includes three different experiments. However, the effect was first published in 1929

in Germany by Erich Rudolf Jaensch, and its roots can be followed back to works of James McKeen Cattell and Wilhelm Maximilian Wundt in the nineteenth century

U X T H E O R Y

Simon Effect

Reaction times are usually faster, and reactions are usually more accurate, when the signal occurs in the same relative location as the response.

R E L A T E D | S T R O O P E F F E C T F I T T S ’ L A W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Simon Effect

Direct manipulation

People can more quickly find interaction elements that appear in the relative location at which they expect a change to occur (e.g.

the action to add an item to a list is at the bottom of the list).

Consider congruency

Ensure the design of elements is congruent with the content or message they are intended to communicate (e.g. a back button doesn’t appear on the right side of an interface).

Origin

The effect originates from a study conducted by Simon & Rudell (1967) in which participants responded to the words

‘left’ and ‘right’ that were randomly presented to the left or right ear. Although the location of the sound was completely irrelevant to the task, they showed a marked delay in reaction time if the location of the stimulus was not the same as the required response (e.g. they were to react left to a word that was presented in the right ear).

U X T H E O R Y

Accot-Zhai

Steering Law

The time necessary to guide a pointer or drag a finger along a path that has borders.

R E L A T E D | F I T T S ’ L A W C O G N I T I V E L O A D

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Accot-Zhai Steering Law Human physiology

Moving a cursor along a long, straight line is physically difficult for humans due to the physiology of our elbows and wrists. As a result, the longer the motion, the greater the chance of error.

Steer-friendly design

Ensure the path in which the cursor must travel along dropdown menus, hierarchical menus, sliders and other path-following UI elements is as wide and as short as possible. Avoid hierarchical menus more than two-levels deep, and use a short time delay between mouse hover and reveal of the child menu.

Diagonal movement

Additionally, allow for diagonal movement between parent menu items and the corresponding child menu to ensure they are not inadvertently closed if the cursor strays from a straight path.

Origin

The steering law has been independently discovered and studied three times (Rashevsky, 1959; Drury, 1971; Accot and Zhai, 1997). Within human–computer interaction, the law was rediscovered by Johnny Accot and Shumin Zhai, who mathematically derived it from Fitts’ law using integral calculus, experimentally verified it for a class of tasks, and developed the most general mathematical statement of it.

U X T H E O R Y

Law of Closure

The tendency to complete an incomplete shape in order to rationalize the whole.

R E L A T E D | S E L E C T I V E A T T E N T I O N

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Closure

Iconography

Icons are a common place to see the principle of closure because it helps simplify visual complexity. We must be sure to test our designs to ensure that users understand what the icon means and consider augmenting icons with clear labels when needed.

Additional content

Designers can use closure to simplify visual elements, and to communicate and encourage interaction with additional information. For example, carousel designs use closure when they show only parts of an item in the carousel.

Misleading

Be mindful not to mislead people into believing the content is complete (the illusion of completeness) when simplifying visual information in order to encourage interaction and provide enough context to communicate there’s more content to be seen. Too little information makes it difficult for users to fill in the blanks.

Origin

Gestalt psychologists developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws or principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Law of Continuity

Elements arranged on a line or curve are perceived to be more related than elements not on the line or curve.

R E L A T E D | S E L E C T I V E A T T E N T I O N

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Law of Continuity Designing for continuity

Designers can use continuity to guide users between objects and groups within an interface (e.g. aligning interface elements in such a way that creates a visual relationship between them).

Disrupting continuity

Designers can disrupt continuity with design elements such as dividers between objects or groups to communicate that a new section has started.

Origin

Gestalt psychologists developed a set of principles in the early 20th century aimed at describing how people naturally perceive objects as organized patterns and objects. These principles, commonly referred to as Gestalt laws or principles, are organized into five categories: proximity, similarity, continuity, closure, and connectedness.

U X T H E O R Y

Paradox of the

Active User

Users never read manuals but start using the software immediately.

R E L A T E D | J A K O B ’ S L A W F L O W

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

Paradox of the Active User Motivation

Users are often motivated complete their immediate tasks and therefore they don't want to spend time up front reading documentation.

The paradox

This paradox exist because users will save time in the long run if they take the time to optimize the system and learn more about it.

Guidance

Make guidance accessible throughout the product experience and design it to fit within the context of use so that it can help these active new users no matter what path they choose to take (e.g. tooltips with helpful information).

Origin

This concept was first defined by Mary Beth Rosson and John Carroll in 1987 as part of their larger work on interaction design, Interfacing thought: cognitive aspects of human-computer interaction. Rosson and Carroll found that new users were not reading the manuals supplied with computers and instead would just get started using them, even if it created errors and roadblocks.

U X T H E O R Y

The Principle of

Least Effort

People will take the path or action requiring the least amount of mental and physical energy to complete a task.

R E L A T E D | P A R E T O P R I N C I P L E C O G N I T I V E L O A D

L A W S O F U X . C O M

© J O N Y A B L O N S K I , 2 0 2 2

The Principle of Least Effort Show, don’t tell

Whenever you must explain something to the user, show them with examples instead of telling them about it in the text (e.g. onboarding processes that demonstrate by highlighting relevant interface elements).

Progressive disclosure

Elements such as content accordions can simplify an interface by showing users a little bit of information and letting them choose if they want more detail. The less content they must process, the faster they can find what they need and accomplish their goals.

Limit to what’s needed

People want information and content provided to them as quickly and simply as possible, and see content required from them as slowing them down. Only ask users for information that is absolutely necessary (e.g. sign-up or log-in forms).

Origin

The principle of least effort was proposed in 1949 by Harvard linguist George Kingsley Zipf in Human Behavior and the Principle of Least Effort. Zipf’s immediate area of interest was the statistical study of the frequency of word use, but his principle has also been applied in linguistics to such topics as lexical diffusion, language acquisition, and conversation analysis.

About the author, Jon Yablonski

Jon Yablonski is a multi-disciplinary designer, speaker, writer, and digital creator based in Detroit metro. His passion is for designing digital tools that empower people and augment their abilities in order to achieve their goals. He’s had the opportunity to learn and grow from a variety of challenges throughout his career

— from e-commerce platforms, mobile apps and internal products to HMI systems within state-of-the-art vehicle platforms.

Laws of UX (lawsofux.com) is a website that seeks to make complex psychology heuristics accessible to more designers through an interactive resource that collects those that are relevant to user experience design and presents them in a visually engaging way.

Get the Laws of UX book!

Laws of UX: Using Psychology to Design Better Products & Services

Released April 2020. Publisher(s): O'Reilly Media, Inc. ISBN: 9781492055310

This practical guide explains how you can apply key principles in psychology to build products and experiences that are more intuitive and human-centered. It provides a close look at familiar apps and experiences to provide clear examples of how UX designers can build experiences that adapt to how users perceive and process digital interfaces.

Learn more at: lawsofux.com/book