将英文原文整理于此，便于目录跳转、学习、研究和记笔记
Welcome to a huge resource on 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.
I organized the tactics into various categories and strategies. Click a strategy to view examples and applications.
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.
- 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
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 Tactics
I usually focus heavily on academic research. However, the field of web usability is evolving so quickly. So I couldn’t find many useful and timely studies. Instead, I compiled the tactics 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):
- The Design of Everyday Things by Don Norman
- Simple and Usable by Giles Colborne
- UX Strategy by Jaime Levy
- Lean UX by Jeff Gothelf and Josh Seiden
- Microinteractions by Dan Saffer
- Interdisciplinary Interaction Design by James Pannafino
- Don’t Make Me Think by Steve Krug
- 100 Things Every Designer Needs to Know About People by Susan Weinschenk
- 100 MORE Things Every Designer Needs to Know About People by Susan Weinschenk
- Neuro Web Design by Susan Weinschenk
- The Non-Designer’s Design Book by Robin Williams
- Design for Emotion by Trevor van Gorp and Edie Adams
- Usable Usability by Eric Reiss
- Visual Thinking for Design by Colin Ware
- The UX Book by Rex Hartson and Pardha Pyla
- Designing Interfaces by Jenifer Tidwell
- CSS Secrets by Lea Verou
- Design Elements: A Graphic Style Manual by Timothy Samara
- Graphic Design Solutions by Robin Landa
- Universal Principles of Design by William Lidwell, Kristina Holden, & Jill Butler
- Digital Design Essentials by Raj Lal
- Universal Methods of Design by Bella Martin and Bruce Harrington
- Envisioning Information by Edward Tufte