
The Psychology of
User Experience
A list of 100 best practices in user experience and interface design.
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
