User Experience

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

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

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

Warn Users When a Timed Function Will Occur

2. Understanding

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

3. Effort

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

Keep Options Visible in Small Assortments

Prefill Input Fields With Common 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

4. 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

Add a Transparent Border to Small Buttons

Hyperlink the Full Background of an Item

Delay Hover Animations By a Few Milliseconds

5. Compatibility

a) Accommodate the User’s Skill or Knowledge

Help Users Understand Unfamiliar Languages

Help Users Understand Unfamiliar Terms

Onboard Users Based on Their Expertise

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

Let Users Go Directly to a Location

c) Maximize the Accessibility of Your Interface

Categorize Elements With Semantic Markup

and