101 UX Principles

1. Design for User Empathy and Objectivity

Empathy and objectivity are the primary skills you must possess to be good at UX.

Empathy drives understanding. By putting yourself in the user's shoes, you can anticipate their needs, frustrations, and goals. This insight allows you to design interfaces that truly serve the user, rather than just meeting technical requirements.

Objectivity ensures clarity. It enables you to step back and evaluate your design decisions critically, free from personal biases or organizational pressures. This perspective helps identify flaws and areas for improvement that might otherwise be overlooked.

Key aspects of empathetic and objective design:

• Conduct user research to understand diverse user needs
• Test designs with real users and incorporate feedback
• Challenge assumptions and be willing to revise designs
• Focus on solving user problems, not showcasing flashy features
• Prioritize usability over internal organizational preferences

2. Simplify Typography and Visual Hierarchy

USE TYPE SIZE TO DEPICT INFORMATION HIERARCHY

Readability is paramount. Choose a maximum of two typefaces: one for headings and another for body text. This creates visual consistency and reduces cognitive load for users. Stick to system fonts when possible to ensure quick loading and familiar appearance across devices.

Size matters for hierarchy. Use larger text sizes for more important information, guiding the user's attention to key elements. This helps users quickly scan and understand the structure of your interface. Aim for at least two, but no more than three distinct type sizes to maintain clear hierarchy without overwhelming users.

Typography best practices:

• Use 16px as a default size for body text
• Maintain a line height of 1.5 for optimal readability
• Ensure sufficient contrast between text and background (minimum 4.5:1 ratio)
• Use bold or italics for emphasis, rather than introducing new typefaces
• Consider how typography scales across different device sizes

3. Create Intuitive and Functional UI Controls

Make your buttons look like buttons.

Affordances guide interactions. Design controls that visually communicate their function. Buttons should appear "clickable" through subtle shadows, textures, or color differences. This helps users instantly recognize interactive elements without having to guess or experiment.

Consistency breeds familiarity. Use established patterns for common controls like search fields, date pickers, and navigation menus. This leverages users' existing mental models, reducing the learning curve for your interface. Avoid inventing new, arbitrary controls that force users to learn unfamiliar interaction patterns.

UI control best practices:

• Make buttons an appropriate size for easy tapping/clicking
• Group related controls together logically
• Use system-native input controls when possible (e.g., date pickers)
• Provide clear visual feedback for user interactions (hover states, active states)
• Use recognizable icons alongside text labels for clarity

4. Optimize Forms and Data Entry

If a good form experience can be delivered, your users will love your product.

Minimize friction. Forms are often a necessary evil, but they don't have to be painful. Streamline data entry by only asking for essential information. Use appropriate input types (e.g., numeric keypad for phone numbers) and leverage device capabilities like autofill wherever possible.

Validate thoughtfully. Provide real-time feedback as users complete fields, but be forgiving of minor formatting issues (e.g., spaces in credit card numbers). Show clear error messages that guide users on how to correct mistakes. Always preserve user-entered data, even if there are validation errors.

Form optimization strategies:

• Use a single-column layout for most forms
• Group related fields logically
• Provide clear, specific labels for each field
• Show password requirements upfront
• Allow users to see masked passwords temporarily
• Offer "guest checkout" options in e-commerce flows

5. Enhance Navigation and User Journeys

The user should always know at what stage they are in any given journey.

Orient the user. Provide clear visual and textual cues to help users understand their current location within your product. Use breadcrumb navigation, progress indicators, and distinct visual design for different sections of your interface.

Offer escape routes. Allow users to easily backtrack or skip optional steps in a process. This prevents users from feeling trapped and allows for more flexible exploration of your product. Always provide a clear way to return to a 'home' or starting point.

Navigation best practices:

• Use consistent menu placement across your product
• Implement a "skip to content" link for accessibility
• Provide search functionality for larger sites/apps
• Use descriptive, action-oriented labels for navigation items
• Consider offering multiple navigation options (e.g., top menu and footer links)

6. Prioritize Accessibility and Inclusivity

Don't only use color to convey information.

Design for all users. Ensure your product is usable by people with various abilities and using different devices. This includes considerations for visual, auditory, motor, and cognitive accessibility. Many accessibility improvements benefit all users by creating clearer, more robust interfaces.

Test with assistive technologies. Regularly evaluate your product using screen readers, keyboard navigation, and other assistive tools. This helps identify areas where accessibility can be improved and ensures a more inclusive experience for all users.

Key accessibility considerations:

• Maintain sufficient color contrast (4.5:1 minimum ratio)
• Provide text alternatives for images and icons
• Ensure keyboard navigability for all interactive elements
• Use ARIA labels and roles to enhance screen reader compatibility
• Allow users to resize text without breaking layout
• Avoid relying solely on color to convey meaning

7. Craft Clear and Consistent Copy

Write like a human being.

Speak the user's language. Avoid jargon, technical terms, and "corporate speak" in your interface copy. Use clear, concise language that your target audience will easily understand. This reduces cognitive load and makes your product feel more approachable.

Maintain consistency. Use the same terminology throughout your product to describe similar concepts or actions. This helps users build a coherent mental model of how your interface works. Create a style guide to ensure consistency across different parts of your product and among team members.

Copywriting best practices:

• Use active voice for clearer, more direct instructions
• Break up long blocks of text into scannable bullet points or short paragraphs
• Front-load important information in headlines and button labels
• Use "sign in" and "sign up" instead of "log in" and "register"
• Provide helpful error messages that guide users on how to correct mistakes

8. Streamline Search and E-commerce Experiences

Search results pages should show the most relevant result at the top of the page.

Relevance is key. Invest in robust search functionality that prioritizes the most relevant results. Categorize results into logical sections to help users quickly find what they're looking for. Provide clear filtering and sorting options to allow users to refine their search.

Simplify purchasing. Follow established e-commerce patterns for familiarity. Minimize the number of steps required to complete a purchase. Provide clear product information, transparent pricing, and multiple payment options to build trust and reduce abandonment.

Search and e-commerce optimization:

• Implement autocomplete/suggestions for search queries
• Allow users to easily modify or refine their search
• Show the number of results for each category
• Provide a guest checkout option
• Minimize form fields in the checkout process
• Clearly display shipping costs and estimated delivery dates

9. Leverage Established Patterns and Defaults

Build upon established metaphors – It's not stealing.

Familiarity breeds usability. Users spend most of their time on other websites and apps. By adopting common design patterns, you leverage users' existing knowledge and reduce the learning curve for your product. Don't reinvent the wheel unless you have a compelling reason to do so.

Choose smart defaults. Carefully consider the default settings and options in your product. Good defaults can significantly reduce the number of decisions users need to make, streamlining their experience. Always allow users to easily modify these defaults if needed.

Utilizing established patterns:

• Study successful competitors and industry leaders for inspiration
• Use recognizable icons and UI elements (e.g., hamburger menu, shopping cart)
• Follow platform-specific guidelines (iOS Human Interface Guidelines, Material Design)
• Implement common gestures and interactions (pinch-to-zoom, pull-to-refresh)
• Provide easily accessible "undo" options for destructive actions

10. Respect User Time and Effort

Don't ever clear user-entered data unless specifically asked to.

Value user input. Treat any data or content created by users with utmost respect. Never discard user-entered information without explicit confirmation. Implement auto-save features where appropriate to prevent accidental data loss.

Optimize for efficiency. Design your interface to help users accomplish their goals quickly and with minimal effort. This includes providing keyboard shortcuts, offering bulk actions, and remembering user preferences to reduce repetitive tasks.

Strategies to respect user time and effort:

• Implement "infinite scroll" for feed-style content, but with a way to return to position
• Provide clear progress indicators for multi-step processes
• Allow users to save and resume complex tasks
• Offer batch operations for repetitive actions
• Use async loading and optimistic UI updates to create a sense of speed
• Implement a "skip to content" link for keyboard users

Last updated: August 22, 2024