Welcome to a huge list of best practices in user experience (UX), user interfaces (UI), and interaction design.

Whether you’re designing a website or mobile app, you’ll learn 125+ tactics to optimize its usability.

PDF Bonus: You can click to : You can click to download the PDF so that you can reference the guide moving forward.

Control the User’s Focus and Attention

Emphasize a Point of Entry in the Interface

Every interface should have a clear starting point. Where should viewers look first? Make it clear.

Add Visual Contrast to Page Headlines

Guide Users Through a Visual Hierarchy

Control the user’s experience by guiding them through the interface. Where should they look first, second, and third? Establish that hierarchy.

Avoid Trapping Negative Space in the Composition

Use a One Column Layout

Overlap a Design Element to Emphasize Continuity

Design the Layout Using Gestalt Principles

We’re inundated with stimuli. According to gestalt psychology, we try to overcome that chaos by simplifying our perception. We group things. We categorize elements. We look for the whole.

Some principles include: similarity, proximity, closure, connection, continuity, and figure/ground.

Group Similar Functions or Menu Items by Proximity

Position Headlines Closer to Respective Sections

Constrain Headlines to Respective Sections

Depict Interface Changes Without Disrupting the User

Sometimes you’ll need to adjust the interface in front of the user. Make those changes noticeable, yet nondisruptive.

Visibly Animate Changes in the Interface

Differentiate Elements That Triggered an Error

Remove or Deemphasize Unnecessary Information

Our mental focus is finite. Unnecessary elements will deplete those resources. So keep users focused on the important information and functions.

Obscure Backgrounds Behind Popup or Modal Boxes

Maximize Data-Ink Ratios in All Imagery

Remove Unnecessary Borders From Design Elements

Remove Redundant or Self-Explanatory Instructions

Hide Infrequent But Necessary Settings, Features, and Information

Indicate Whether Content Exists Beyond the Fold

Nowadays, most browsers hide scroll bars when they’re inactive. You need “scroll hints” to communicate whether content exists beyond the fold.

Extend Elements Through the Fold

Add a Shadow to Indicate Depth

Indicate More Content With Words or Graphics

Guide Users Toward the End Goal

Now that you’ve captured and directed the user’s attention, help them achieve their goal.

Position Frequent Functions and Important Data Closer to Users

Predict the user’s intention. Then position that goal as close as possible.

Filter or Jump to Items That Users Are Searching

Create Smart Defaults Based on Frequently Chosen Input

Include Important Data on Product Listing Pages Oftentimes, users will pogo stick. They click an item to look for information. Then they’ll return to the previous page to repeat that process with another item. That’s poor usability. Minimize pogo-sticking by placing important information on primary pages. If you don’t like the extra clutter, you could include that information on hover (see next tactic).

Provide Useful Information on Hover

Expose Frequently Used Functions

Display Primary Data or Statuses in a Dashboard

Position Common Answers at the Top of Drop Down Lists

Communicate the Statuses of Interactions

Reduce uncertainty by conveying all pertinent information.

Display Current Progress and Time Remaining on Machine-Driven Tasks

Communicate the Current Phase of Complex or Lengthy Interactions

Reveal the Number of Steps Within a Sequence

Reveal the Number of Items in a Category

Offer Multiple Ways to Accomplish the Same Task

Users prefer different workflows. Create different paths for each goal, and let users choose the most appropriate path for their workflow.

Let Users Log In Via Username or Email

Offer Keyboard Shortcuts for Repetitive Functions

Let Users Drag and Drop Elements

Let Users Directly Edit Data

Communicate Requirements or Parameters for an Interaction

Prepare users for each interaction. What will they need? How do they proceed?

Describe the Input That You Require From Users

Give Real-Time Password Requirements and Feedback

Prepopulate Form Elements With Universal Parameters

Indicate Required and Optional Form Elements

Communicate the Expected Outcome of an Interaction

Before users interact with an element, they should understand the intended outcome.

Use Descriptive Button Labels

Show a Preview of the Output Based on the Current Input

Indicate or Preview the Next Item in a Sequence

Use Smart Menu Items to Clarify Actions

Reward or Reassure Users When They Make Progress

Are users making progress? Was their interaction successful? Let them know. And entice them to continue.

Maintain Congruency Between Links and Target Pages

Provide Quick Wins During Onboarding

Start Progress Bars Above 0%

Solve the User’s Core Intent

Oftentimes, we solve surface-level needs. Go deeper. Always brainstorm why users need certain features or information. Then solve the underlying intent.

Indicate Whether Your Office is Open or Closed

Indicate the Recency of Events

Reduce Mental Effort and Maintain Flow

In addition to guiding users, reduce their cognitive workflow. That way, you prolong their state of “flow.”

Minimize User Calculations

Never make the user perform math. Let the computer handle it.

Indicate the Number of Items Remaining

Convey the User’s Current Location Within the Interface

Interfaces are like airports. Without a “you are here” marker, users can get lost. So create those markers.

Highlight the Section Within the Navigation Menu

Provide Breadcrumbs or Sequence Maps in Complex Interfaces

Put Descriptive or Useful Information at the Beginning of Page Titles

Simplify Choice Tasks

Choices require effort. Reduce that effort by simplifying those tasks.

Indicate the Options That Most Users Choose

Provide a Curated List of Common Search Terms

Create Tight Categories Within Navigation Menus

Use Conventional Web Design Interfaces

Creativity is great. But don’t stray far from a conventional design. Users are accustomed to certain layouts and structures. Those conventional designs are popular because they work.

Use Conventional Navigation Menus

Put Utilities in the Top Right Corner

Provide Feedback After Each Interaction

When users interact with your interface, they should experience real-time feedback. Was something successful? Was it unsuccessful? What changed?

Display Success Messages After Important Interactions

Indicate Which Items the Cursor is Hovering Over

Minimize the Negative Effects of Waiting Periods

Eliminate all unnecessary waiting periods. If users need to wait, then minimize those negative effects.

Use Cool Colors in Loading Animations to Decrease Arousal Blue reduces arousal (and increases relaxation). With blue loading elements, users perceive quicker loading times (Gorn et al., 2004). See my article on color for more detail.

Keep Users Engaged During Lengthy Waiting Periods

Prevent Users From Uploading Files That Are Incompatible

Display a Running Tally of Tasks Occurring

Minimize the User’s Reliance on Memory

Don’t force the user to remember anything. Keep all pertinent information in the open.

Keep Form Labels Visible At All Times Avoid inline labels that disappear when users click inside the element.

Position Placeholder Text Outside the Form Element

Add Copy Buttons to Movable Input

Minimize Zig Zagging Eye Patterns

Reduce the amount of back-and-forth eye motions. Keep all complementary data within close distances.

Merge Congruent Data to Help Users Compare Items

Align Form Labels Directly Adjacent to Elements

Communicate Which Items Are Clickable or Interactive

Users should identify which elements are interactive (and how to interact with them). If you’re familiar with UX/UI, then you probably know signifiers and affordances, popularized by Don Norman in The Design of Everyday Things.

Design Buttons Using 3D Characteristics

Add Dotted Textures to Drag and Drop Elements

Use Icons and Symbols to Convey the Meaning of an Interaction You can create most of these icons using various shapes in PowerPoint or Keynote.

Communicate Using Familiar Words and Symbols

In most cases, clarity trumps creativity or jargon.

Speak the Language of the User, Not the System

Offer a Translate Button When Foreign Languages Appear

Choose Colors That Are Semantically Congruent When colors are incongruent, users have more trouble processing the information. Currently, meetup.com has great usability. However, they’re using red to confirm attendance (when they should be using green):

Maximize the Scannability of Your Interface

Most users will process your content by scanning it. And you shouldn’t fight it. Embrace it. Make your interface more conducive to scanning.

Keep Paragraphs Short and Highlight Key Terms

Position Important Information at Beginning of List Items

Add Row Stripes to Your Tables

Write Standalone Subheadlines

Break Up Text With Visual Variety

Maximize the Readability of Text

Obviously, text should be readable. But here are some tips to make it more readable.

Create Strong Contrast Between the Text and Background Be careful displaying text over backgrounds. You might need to add contrast through an overlay or blur. Let’s add text over my beautiful face…

Left Align the Majority of Body Text

Use Consistent Patterns Throughout the Interface

With inconsistent patterns, users will need more time to learn your interface. Simplify it by maintaining a consistent layout and appearance.

Create a Front-End Style Guide Create a document summarizing the design specifications for each element in your interface. Other elements include: Colors

Grids and Layouts

Placement and Positioning

Size and Shape

Labels and Language

Navigation

Tables

Lists

Links

Voice and Tone Need inspiration? Look through Mailchimp’s style guide.

Keep Navigation Menus in the Same Position

Create Beautiful Designs With Visual Balance

Designs are more usable when they’re aesthetically pleasing — a principle called the aesthetic-usability effect (Kurosu & Kashimura, 1995).

Construct Designs Using Mathematical Principles

Choose Contrasting Fonts When some people choose a matching typeface, they search for a font that looks similar to the existing one. But that’s the wrong approach. Oftentimes, the similarity will look like a mistake. Instead, be deliberate. Choose typefaces with noticeable contrast. If you’re a newb designer, you can choose a serif vs sans-serif combination (serifs are the “twigs” on the ends of letters).

Maximize the Compatibility for All Users and Scenarios

Your users are different people with different goals. Design your interface so that it’s compatible for everyone.

Maximize Compatibility With the User’s Knowledge and Skill Level

Your users will be novices, experts, or a mixture. Design your interface accordingly.

Use the Proper Amount of Onboarding There are four main onboarding strategies: Those four approaches align nicely in a 2 x 2 matrix. Use the following diagram to choose the best approach for your interface.

Add Tooltips to Coach Novice Users Without Disrupting Expert Users

Use Card Sorting to Construct the Information Architecture Use open card sorting if you want to see how users determine or conceptualize the menu categories.

if you want to see how users determine or conceptualize the menu categories. Use closed card sorting if you want to see how users organize existing elements into pre-determined categories.

Maximize Compatibility With the User’s Workflow

Users will have different needs. Customize your interface toward those different workflows.

Let Users Control the Appearance of Data

Let Users Control the Order of Data Other sorting criteria include: Alphabetically

Availability

Categorically

Date

Distance

Popularity

Price

Relevance

Size

Let Users Control the Quantity of Data

Construct Personas to Identify Specific Workflows

Let Users Open Pages in New Tabs Many users will page park. They’ll open tabs to read later.

Maximize the Accessibility of Your Interface

Make your interface accessible to people with disabilities. Not only is it a best practice, but you could also face legal consequences (depending on your product).

Use Semantic Labels in HTML5

Use Multiple Cues to Communicate Information Around 8 percent of males are colorblind (Chan, Goh, & Tan, 2014). Never convey meaning through color alone. Always offer additional cues.

Maximize Compatibility for All Inputs and Extreme Cases

Users should be able to enter a wide range of input without consequences.

Resolve Unfavorable Outcomes in Automatically Generated Messages

Use Form Elements That Accept Various Formats of Input

Display Results That Solve the Searcher’s Need

Use Search Fields That Handle Typos, Synonyms, and Variants

Maximize Compatibility for All Mediums

Your interface should work in all environments (e.g., devices, browsers, etc.).

Customize Instructions for the User’s Browser

Use One-Window Drilldowns on Small Devices

Help Users Minimize and Overcome Potential Errors

In most interfaces, errors are unavoidable. If they do happen, help users overcome them quickly and easily.

Prevent the Possibility of Errors

When designing your interface, don’t immediately focus on solutions. Rather, try to make errors impossible to occur (referred to as poka-yoke).

Remove, Disable, or Replace Buttons When Users Click Them Don’t tell users to click “Submit” once. If they can click more than once, they will. Instead, disable buttons when users click them. That way, duplicate submissions are impossible.

Only Offer Inputs That Are Acceptable

Use Responsive Enabling or Disclosure in Form Elements

Structure Text Fields to Match the Required Input

Monitor Signals That Are Typical in Errors

What are common errors in your interface? Identify signals that are inherent in those errors. Then monitor when those signals occur.

Search for Wording That Contradicts User Intent

Remind Users if They’ve Already Purchased an Item

Differentiate Powerful Functions to Minimize Slips

Users will lose focus. You can’t prevent it. However, you should visually distinguish powerful functions so that you minimize the possibility of damaging errors.

Separate Powerful Functions by Space or Color

Add Constraints to Significant Irreversible Changes

Provide Easy Ways to Revert or Escape

Always give users the option to return to a previous page or safe/recognizable area.

Use Undos Rather Than Confirmations

Offer an Escape Hatch on All Pages and Functions For example, some drop down menus offer no escape hatch. When users click an option, they can’t leave it blank anymore.

Provide a Visible Close on Popups and Modal Boxes

Minimize the Negative Effects of Leaving Sequences

Users should be able to return to a sequence in the same position with the same data.

Save Data That Users Enter

Let Users Return to the Same Position in a Sequence

Extend Movable Paths and Clickable Areas

Users aren’t perfect. They make mistakes with the cursor. Create interfaces that are flexible and forgiving.

Add a Transparent Border to Small Buttons

Add a Slight Delay to Hover Pop Ups and Drop Down Menus

Hyperlink the Entire Menu Option Container

Hyperlink Primary Menus, List Items, and Complementary Icons Oftentimes, users click items that aren’t clickable. Don’t fight those mistakes. Instead, add clickable functionality to those common areas.

Provide Useful and Supportive Error Messages

Never give a standard “there was an error” message. Explain the reason — and ideally the solution — to the error.

Explain the Reason for Validation Errors

Point Users Toward Documentation or Support for Complex Errors

Avoid Saying “You” in Error Messages

Keep a Record of the User’s Previous Actions

Remind users of their past actions in your interface.

Display the User’s Recent Searches

Use Different Colors for Visited Links

Indicate Which Items Users Have Already Viewed

Analyze User Behavior to Find Interface Issues

Always iterate and improve your interface. Use these tactics to get started.

Gather User Feedback in Appropriate Places

Create Alerts for Increases in 404 Errors

Identify Pages Where Users Are Pogo-Sticking If a page is receiving many views (yet few unique views), then double check whether users are pogo sticking on that page

Final Thoughts

How I Compiled These Best Practices

I usually focus heavily on academic research. However, web usability is evolving so quickly. So I couldn’t find many useful and timely studies. Instead, I compiled these best practices by reading a bunch of UX/UI books.

Maybe I went a little overboard…

I read those books from cover to cover, looking for concrete actionable tactics. Afterward, I supplemented my list by (a) going through online guides (e.g., GoodUI has a great list) and (b) studying current platforms with strong reputations for usability (e.g., Mailchimp).

Here are the books from the previous image (from top to bottom):

Next Steps

I organized this article by categories and strategies. However, you can download a summary PDF organizing the tactics by design elements (e.g., forms, buttons, etc.). Whenever you’re designing those elements in your interface, you can reference the PDF.

Also, this list is just the beginning. Moving forward, I’ll be adding new tactics periodically. In the meantime, though, you can read my article on conversion optimization to further optimize your site.