User Experience

User Experience

Here is a checklist of best practices in user experience and interaction design. Use these guidelines to optimize your website or mobile app.

Here’s a list of best practices in UX, UI, and interaction design.

Just download the PDF for a checklist to distribute to your team.

1. Focus

a) Create an Entry Point

Emphasize a Point of Entry in the Interface

A visually noticeable headline

Desaturate Elements Near the Entry Point

Subheadlines should be a lighter color

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

Group Similar Elements By Proximity

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 of the Design

Indicate Whether Content Exists Below the Fold

Convey Depth Through Fades or Shadows

f) Depict Changes Without Disrupting the User

Prevent Change From Blocking Other Functions

Animate Visual Changes to the Interface

Indicate Which Items Have Changed

Incorrect zip code with red asterisk

Warn Users When a Timed Function Will Occur

This computer will go to sleep in 5 minutes

2. Understanding

a) Indicate Which Items Are Interactive

Change the Cursor or Medium

Cursor changing while hovering over button

Change the Element

Button changing color with hover

Indicate Which Element Will Receive the Interaction

Hovering over item with background changing colors

b) Provide Feedback During and After Interactions

Indicate Whether an Interaction Will Be Successful

Confirm Password with checkbox next to input field if correct

Indicate Whether an Interaction Was Successful

Message sent

c) Communicate in Relative Terms

Communicate Time in Relation to the Present

2 days ago vs. Static Date

Compare Numbers With a Meaningful Baseline

Electric bill with average amount that customers pay

d) Help Users Find Their Current Location

Show the User’s Previous Steps

Breadcrumbs above headline

Indicate the Location of the Cursor

Blue border around active input field

Communicate the Current Phase of Interactions

List of Steps: Ordered, Shipped, Out for Delivery

e) Design for Scannability

Place Important Information Toward the Beginning

Bolding important first words in list of items

Insert the Main Takeaway into Headlines

Headline inside a page that says "Tip 19: Insert the Main Takeaway into Headlines"

f) Communicate the Expected Outcome of Interactions

Indicate the Next Item in a Sequence

Next button with "Part 5: Conclusion"

Show the Number of Items in a Group

Numbers that indicate number of reviews and search results

Show a Preview of the Output

Enter ad details on left with preview of output on right

Describe the Destination of Links

Visit your account settings (with account settings being hyperlinked)

Specify the Interaction That Will Occur

Menu option that says "Undo Color Change"

g) Match the User’s Expectations

Stay Consistent Between Links and Destinations

Clicks link for "Organic Donuts" and arrives on page for "Organic Donuts"

Show the Primary Essence Upon Loading

Clicking pricing and then arriving on page that shows pricing in viewport after loading

Adhere to a Consistent Layout

Same structure across pages

Choose Colors That Are Semantically Meaningful

Appointment Confirmed in green font (vs red font)

3. Effort

a) Help Users Choose Options

Suggest a Starting Point

Popular searches: books, games, movies

Compare Options Across Attributes

Computer monitors in comparison table

Recommend an Option

Show the Typical Answer

Input field for Ad Budget. Most users start with $10/day

b) Minimize the Detriments of Waiting

Decrease Their Arousal With Cool Colors

Blue background of loading screen

Keep Users Engaged While They Wait

Read These Yet? (while task is loading)

Align Machine Downtime With User Downtime

Current software update will install between 2-5am

Populate the Interface With Placeholders While Loading

Grey boxes while page is loading. Assortment of videos after it loads.

c) Minimize Reliance on Calculations and Memory

Calculate the Number of Items Remaining

12GB users. 50GB space. You have 38GB remaining.

Keep Pertinent Information Visible

Name of input field above the field while user is typing in it

Let Users Copy Information

Button to "Copy" some input

Indicate Which Items. Users Have Already Viewed

List of options with some options greyed out

Minimize Credentials That Are Specific to the Interface

Enter your username or email address

d) Minimize Redundant Tasks

Let Users Duplicate Past Input

Checkbox for "Same as billing"

Preserve Input During Interface Changes

If password is incorrect, keep current input while telling the users

Monitor Excessive Input or Repetitions

If user holds key for more than 3 seconds, speed up exponentiallly

e) Place Frequent Interactions Closer to Users

Keep Options Visible in Small Assortments

Two options in radio buttons (rather than inside a drop down menu)

Prefill Input Fields With Common Responses

Input field with United States already selected

Position Common Answers at the Top of Lists

United States or Canada at top of list of countries

Offer Suggestions From Predicted Input

User typing "St..." with possible options appearing

Keep Pertinent Information in Front of an Interaction

Product listing shows "Out of Stock" in thumbnail before clicking

Keep Frequent Interactions Visible

Placing option next to a clickable menu that appears

Hide Infrequent Interactions

Menu of options appears after clicking three dots

f) Guide Users Toward Their Goal

Nudge Users Toward Value

Why not follow these people?

Start Progress Above Zero

Progress starts at 3 percent

4. Errors

a) Prevent the Possibility of Errors

Disable Buttons When Users Click Them

Disabling button while new page is loading

Only Offer Inputs That Are Acceptable

Calendar that only shows available dates

Enable Functions Only When Necessary

Secondary option is greyed out until primary option is enabled

Structure Text Fields to Match Input

Short field and long field for serial number

Add Constraints to Irreversible Changes

Type DELETE to delete your account

b) Communicate the Requirements for an Interaction

Describe the Necessary Input

Formats: PNG, JPG, PDF

Describe the Necessary Parameters

Password must be at least 8 characters

Populate the Units or Parameters

Dollar sign in front. USD in back.

Match Form Sizes With Input Sizes

Long field for address. Short field for Apartment

Indicate Which Elements Are Required

Red asterisk next to Address field

c) Monitor Signals That Are Typical in Errors

Monitor Wording That Contradicts Intent

Did you want to attach files? You said "I attached" in your email.

Monitor Empty Submissions

This email has no subject line. Still send?

Monitor for Inactivity

Netflix: Are you still watching Grey's Anatomy?

Confirm Whether a Repeated Action Was Intended

Ask users to verify if they want to send the same amount of money (again) to somebody

d) Provide Easy Ways to Escape or Reverse

Skip Confirmations in Reversible Decisions

Are you sure? vs. Settings Changed. Undo.

Let Users Undo Multiple Levels of Action

A list of past actions with ability to undo them

e) Help Users Resolve the Issue

Identify the Problem and Solution to Errors

That password is incorrect vs That password is old

Point Users to Support or Documentation

Inserting link to documentation in error message

Avoid Saying “You” in Error Messages

You forgot the zip code vs. Please enter a zip code

f) Extend Movable Paths and Clickable Areas

Add a Transparent Border to Small Buttons

Invisible border around small button

Hyperlink the Full Background of an Item

Menu item with full background highlighted

Delay Hover Animations By a Few Milliseconds

Briefly moving cursor away from menu shouldn't collapse it

5. Compatibility

a) Accommodate the User’s Skill or Knowledge

Help Users Understand Unfamiliar Languages

Foreign language has "See Translation"

Help Users Understand Unfamiliar Terms

Tooltip next to unfamiliar term

Onboard Users Based on Their Expertise

Use a welcome screen or checklists for experts. Use hotspots or wizards for novices

b) Accommodate the User’s Goal or Workflow

Let Users Control the Appearance of Elements

View: List vs. Icons

Let Users Control the Order of Elements

Sort by: Relevance, Ratings, Oldest to Newest

Let Users Postpone Unnecessary Tasks

Software update has "Remind Me Later"

Offer Multiple Ways to Accomplish a Task

Undo has Ctrl+Z next to it

Let Users Go Directly to a Location

Button for "Skip to Main Content"

c) Maximize the Accessibility of Your Interface

Categorize Elements With Semantic Markup

Elements of page with HTML tags, like 

<header srcset= and