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