← All guides

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

Headline is mot noticeable element in interface

Desaturate Elements Near the Entry Point

Main headline is salient, while subheadline is a lighter color

b) Guide Eye Flow

Obscure Background Details

Login popup with blurred background behind it

Overlap Elements Across Sections

Section that overlaps two colored backgrounds to bring section from one to the other

c) Group Similar Elements

Push Headlines Closer to Their Sections

Headline closer to the next (vs. previous) paragraph

Keep Labels Close to Their Elements

Name field with the label very close to the required input field

Categorize Long Lists Into Smaller Sections

Long menu with similar items grouped into setions

Distinguish Powerful Functions to Minimize Slips

Delete button in bring red

d) Remove Unnecessary Elements

Omit Self-Explanatory Instructions

Main headline is "Create an account" with a subheadline of "fill out the fields below." The subheadline is crossed out

Maximize Data-Ink Ratios

Graph with unnecessary background colors

Hide Peripheral Details in Expandable Mediums

An accordion that shows content that was previously hidden

e) Communicate Hidden Sections

Indicate Whether Content Exists Below the Fold

Two images being cut off where users need to scroll

Convey Depth Through Fades or Shadows

A table that you can tell has more data hidden toward the right because there is a shadow toward that side

f) Depict Changes Without Disruption

Prevent Change From Blocking Other Functions

Spotify interface from 2019 where Apple headphones overlay is obscuring the interface, and a 2021 interface where the function is noticeable but tucked away

Animate Visual Changes to the Interface

A window being minimized where you can see it get smaller

Indicate Which Items Have Changed

An input field with wrong input, and it has a red border and asterisk

Warn Users When a Timed Function Will Occur

Your computer will go to sleep in 5 minutes

Comprehension

a) Indicate Which Items Are Interactive

Change the Cursor or Medium

Static cursor changing to pointer cursor when hovering over button

Change the Element

Button moving from filled to empty with cursor hover

Indicate Which Element Will Receive the Interaction

Item link with new background with cursor hover

b) Provide Feedback During and After Interactions

Indicate Whether an Interaction Will Be Successful

Confirm password field with checkmark to indicate it was right

Indicate Whether an Interaction Was Successful

Message Sent

c) Communicate in Relative Terms

Communicate Time in Relation to the Present

Posted 2 days ago

Compare Numbers With a Meaningful Baseline

Monthly electricity bill that compared total to average

d) Help Users Find Their Current Location

Show the User's Previous Steps

Breadcrumbs at the top of a web page

Indicate the Location of the Cursor

User typing with line flashing to indicate where the cursor is located

Communicate the Current Phase of Interactions

Progress bar with ordered, shipped, and delivered

e) Design for Scannability

Place Important Information Toward the Beginning

Bulleted list with key words bolded at the beginning

Insert the Main Takeaway into Headlines

A headline that says "Insert the main takeaway into headlines" vs "Headline Technique"

f) Communicate the Expected Outcome of Interactions

Indicate the Next Item in a Sequence

Blog Post With "Part 5: Conclusion" next to the continue button

Show the Number of Items in a Group

See 42 reviews

Show a Preview of the Output

User creating ad where they can see what it will look like

Describe the Destination of Links

"Clicked here" replaced with "Account Settings"

Specify the Interaction That Will Occur

Undo color change

g) Match the User's Expectations

Stay Consistent Between Links and Destinations

From worst to best experience after clicking link for organic donuts: 404 page, page about desserts, page about donuts, and page about organic donuts

Show the Primary Essence Upon Loading

Clicking a link for pricing should show prices on immediate view of next page

Adhere to a Consistent Layout

Clicking a link within a website should return a similar-looking page

Choose Colors That Are Semantically Meaningful

Confirmation message should be green instead of red

Ease

a) Help Users Choose Options

Suggest a Starting Point

Search box with example searches underneath

Compare Options Across Attributes

Table of products and reviews

Recommend an Option

Highlighted pricing plan

Show the Typical Answer

Field for ad budget with message: "Most users start with $10 per day"

b) Minimize the Detriments of Waiting

Decrease Their Arousal With Cool Colors

Loading screen with blue colors to reduce arousal

Keep Users Engaged While They Wait

Offering blog posts to read while waiting for a long task to complete

Align Machine Downtime With User Downtime

Software update: It will run between 2:00 to 5:00 am

Populate the Interface With Placeholders While Loading

Gray boxes being loaded before content

c) Minimize Reliance on Calculations and Memory

Calculate the Number of Items Remaining

38gb remaining

Keep Pertinent Information Visible

Name field with "Name" being shown always

Let Users Copy Information

A button to copy a discount code

Indicate Which Items Users Have Already Viewed

Emphasizing new items in a list

Minimize Credentials That Are Specific to the Interface

Login with username or email

d) Minimize Redundant Tasks

Let Users Duplicate Past Input

Checkbox for "same as billing?"

Preserve Input During Interface Changes

Wrong password stays in place

Monitor Excessive Input or Repetitions

Is a user holds a faster key for more than 3 seconds, increase exponentially

e) Place Frequent Interactions Closer to Users

Prefill Input Fields With Common or Known Responses

United States already filled in a drop-down selection

Position Common Answers at the Top of Lists

Placing USA and Canada at top of drop-down list

Offer Suggestions From Predicted Input

Starting to type "st" results in a drop-down of common suggestions

Keep Pertinent Information in Front of an Interaction

Out of stock listed on product thumbnail

Keep Frequent Interactions Visible

Common actions located outside of drop-down menu

Hide Infrequent Interactions

Uncommon actions located in menu marked by three dots

f) Guide Users Toward Their Goal

Nudge Users Toward Value

You don't follow anybody. Here are suggestions

Start Progress Above Zero

Progress bar starting at 3%

Errors

a) Prevent the Possibility of Errors

Disable Buttons When Users Click Them

Buy Now button being disabled after click

Only Offer Inputs That Are Acceptable

Options on a calendar but only available dates are able to be clicked

Enable Functions Only When Necessary

You need to click a checkbox to enable a drop-down for that option

Structure Text Fields to Match Input

Serial number broken into different sizes text input fields

Add Constraints to Irreversible Changes

Type "delete" to delete your account

b) Communicate the Requirements for an Interaction

Describe the Necessary Input

PNG, JPG, PDF, Max of 8mb

Describe the Necessary Parameters

Password must be at least 8 characters

Populate the Units or Parameters

Correct currency symbol is populated

Match Form Sizes With Input Sizes

Address field is longer than apartment number field

Indicate Which Elements Are Required

Asterisk in front of address field

c) Monitor Signals That Are Typical in Errors

Monitor Wording That Contradicts Intent

You said "I attached" but didn't attach anything

Monitor Empty Submissions

This email has no subject line

Monitor for Inactivity

Still watching?

Confirm Whether a Repeated Action Was Intended

You recently sent $100 to John. Send another $100?

d) Provide Easy Ways to Escape or Reverse

Skip Confirmations in Reversible Decisions

Settings changed. Undo

Let Users Undo Multiple Levels of Action

Multiple recent actions that user can do

e) Help Users Resolve the Issue

Identify the Problem and Solution to Errors

If password is wrong, say why (e.g., it's an old password)

Point Users to Support or Documentation

Wrong permission. Link that says "How to resolve"

Avoid Saying "You" in Error Messages

"Enter an email" is better than "You forgot to enter an email"

f) Extend Movable Paths and Clickable Areas

Enlarge the Clickable Area of Small Buttons

Small button with transparent border

Delay Hover Animations By a Few Milliseconds

Cursor moving toward submenu but delay is needed to reach it

Compatibility

a) Accommodate the User's Skill or Knowledge

Help Users Understand Unfamiliar Languages

Foreign language with "see translation" link

Help Users Understand Unfamiliar Terms

Bruh with tooltip "slang for bro"

b) Accommodate the User's Goal or Workflow

Let Users Control the Appearance of Elements

Displaying items are list or grid

Let Users Control the Order of Elements

Sort by relevance, ratings, or newest

Let Users Postpone Unnecessary Tasks

Software Update. Remind me later

Offer Multiple Ways to Accomplish a Task

List of keyboard shortcuts

c) Maximize Compatibility for All Inputs and Scenarios

Ensure that Messages Apply to All Scenarios

Trip confirmed. "Have fun at Auschwitz" replaced with "You will go to Auschwitz"

Handle Inputs With Improper Formatting

Misspelling of negotiation in search box, but returning the right results anyway