The Psychology of
User Experience

Visual Focus

a) Create an Entry Point

Emphasize a Focal Element

Desaturate Elements Near the Entry Point

b) Guide Eye Flow

Obscure Background Details

Overlap Elements Across Sections

c) Group Similar Elements

Push Headlines Closer to Their Sections

Keep Labels Close to Their Elements

Categorize Long Lists Into Smaller Sections

Distinguish Powerful Functions to Minimize Slips

d) Remove Unnecessary Elements

Omit Self-Explanatory Instructions

Maximize Data-Ink Ratios

Hide Peripheral Details in Expandable Mediums

e) Communicate Hidden Sections

Indicate Whether Content Exists Below the Fold

Convey Depth Through Fades or Shadows

f) Depict Changes Without Disruption

Prevent Change From Blocking Other Functions

Animate Visual Changes to the Interface

Indicate Which Items Have Changed

Warn Users When a Timed Function Will Occur

Comprehension

a) Indicate Which Items Are Interactive

Change the Cursor or Medium

Change the Element

Indicate Which Element Will Receive the Interaction

b) Provide Feedback During and After Interactions

Indicate Whether an Interaction Will Be Successful

Indicate Whether an Interaction Was Successful

c) Communicate in Relative Terms

Communicate Time in Relation to the Present

Compare Numbers With a Meaningful Baseline

d) Help Users Find Their Current Location

Show the User's Previous Steps

Indicate the Location of the Cursor

Communicate the Current Phase of Interactions

e) Design for Scannability

Place Important Information Toward the Beginning

Insert the Main Takeaway into Headlines

f) Communicate the Expected Outcome of Interactions

Indicate the Next Item in a Sequence

Show the Number of Items in a Group

Show a Preview of the Output

Describe the Destination of Links

Specify the Interaction That Will Occur

g) Match the User's Expectations

Stay Consistent Between Links and Destinations

Show the Primary Essence Upon Loading

Adhere to a Consistent Layout

Choose Colors That Are Semantically Meaningful

Ease

a) Help Users Choose Options

Suggest a Starting Point

Compare Options Across Attributes

Recommend an Option

Show the Typical Answer

b) Minimize the Detriments of Waiting

Decrease Their Arousal With Cool Colors

Keep Users Engaged While They Wait

Align Machine Downtime With User Downtime

Populate the Interface With Placeholders While Loading

c) Minimize Reliance on Calculations and Memory

Calculate the Number of Items Remaining

Keep Pertinent Information Visible

Let Users Copy Information

Indicate Which Items Users Have Already Viewed

Minimize Credentials That Are Specific to the Interface

d) Minimize Redundant Tasks

Let Users Duplicate Past Input

Preserve Input During Interface Changes

Monitor Excessive Input or Repetitions

e) Place Frequent Interactions Closer to Users

Prefill Input Fields With Common or Known Responses

Position Common Answers at the Top of Lists

Offer Suggestions From Predicted Input

Keep Pertinent Information in Front of an Interaction

Keep Frequent Interactions Visible

Hide Infrequent Interactions

f) Guide Users Toward Their Goal

Nudge Users Toward Value

Start Progress Above Zero

Errors

a) Prevent the Possibility of Errors

Disable Buttons When Users Click Them

Only Offer Inputs That Are Acceptable

Enable Functions Only When Necessary

Structure Text Fields to Match Input

Add Constraints to Irreversible Changes

b) Communicate the Requirements for an Interaction

Describe the Necessary Input

Describe the Necessary Parameters

Populate the Units or Parameters

Match Form Sizes With Input Sizes

Indicate Which Elements Are Required

c) Monitor Signals That Are Typical in Errors

Monitor Wording That Contradicts Intent

Monitor Empty Submissions

Monitor for Inactivity

Confirm Whether a Repeated Action Was Intended

d) Provide Easy Ways to Escape or Reverse

Skip Confirmations in Reversible Decisions

Let Users Undo Multiple Levels of Action

e) Help Users Resolve the Issue

Identify the Problem and Solution to Errors

Point Users to Support or Documentation

Avoid Saying "You" in Error Messages

f) Extend Movable Paths and Clickable Areas

Enlarge the Clickable Area of Small Buttons

Delay Hover Animations By a Few Milliseconds

Compatibility

a) Accommodate the User's Skill or Knowledge

Help Users Understand Unfamiliar Languages

Help Users Understand Unfamiliar Terms

b) Accommodate the User's Goal or Workflow

Let Users Control the Appearance of Elements

Let Users Control the Order of Elements

Let Users Postpone Unnecessary Tasks

Offer Multiple Ways to Accomplish a Task

c) Maximize Compatibility for All Inputs and Scenarios

Ensure that Messages Apply to All Scenarios

Handle Inputs With Improper Formatting