Why This Matters
UI design isn't just about making things look pretty—it's about creating interfaces that users can navigate intuitively, complete tasks efficiently, and actually enjoy using. You're being tested on your ability to apply foundational design principles like visual hierarchy, cognitive load reduction, user feedback loops, and accessibility standards to real-world interface challenges. These concepts show up repeatedly in design critiques, portfolio reviews, and FRQ-style prompts asking you to evaluate or improve existing interfaces.
The best practices in this guide connect directly to core interaction design theories: Gestalt principles, Nielsen's usability heuristics, and WCAG accessibility guidelines. Don't just memorize a checklist of "good design" tips—understand why each practice works psychologically and how different principles reinforce each other. When you can explain the mechanism behind a design choice, you're ready for any exam scenario they throw at you.
Visual Organization & Hierarchy
Great interfaces guide users' eyes exactly where they need to go. The human brain processes visual information in predictable patterns, and skilled designers leverage these patterns to create clarity and reduce cognitive load.
Clear Visual Hierarchy
- Size, color, and placement signal importance—larger, bolder, and higher-positioned elements naturally draw attention first
- Heading structures (H1 → H2 → H3) create scannable content that users can parse in seconds rather than minutes
- Progressive disclosure prioritizes essential information while keeping secondary details accessible but unobtrusive
Effective Use of Whitespace
- Negative space isn't wasted space—it actively separates content groups and reduces visual overwhelm
- Breathing room around text blocks improves reading comprehension by up to 20% in usability studies
- Balanced layouts use whitespace strategically to direct focus toward calls-to-action and key content
Typography and Readability
- Font selection must balance brand personality with legibility—sans-serif for screens, limit to 2-3 typefaces max
- Type scale hierarchy uses consistent size ratios (often 1.25x or 1.5x) to establish clear content relationships
- Line height and measure (45-75 characters per line) directly impact reading speed and comprehension
Compare: Visual hierarchy vs. whitespace—both reduce cognitive load, but hierarchy directs attention while whitespace separates content groups. If asked to improve a cluttered interface, address whitespace first; if users miss key actions, fix your hierarchy.
Consistency & Pattern Recognition
Users bring expectations from every interface they've ever used. Consistency leverages existing mental models, reducing the learning curve and building user confidence.
Consistency in Design Elements
- Design systems codify colors, typography, spacing, and components to ensure uniformity across all screens
- Pattern libraries prevent the "Frankenstein effect" where different designers create conflicting interaction styles
- Predictable behavior builds trust—users shouldn't have to relearn your interface on every page
Efficient Use of Icons and Symbols
- Universal icons (hamburger menu, magnifying glass, shopping cart) leverage existing user knowledge instantly
- Style consistency means all icons share the same weight, fill style, and visual language throughout the interface
- Text labels accompany icons for complex or ambiguous functions—icon-only navigation fails accessibility and clarity tests
Intuitive Navigation
- Persistent navigation appears in the same location across all pages, typically top or left positioning
- Clear labeling uses user-centered language, not internal jargon—test labels with real users
- Breadcrumbs and indicators show users where they are within the information architecture
Compare: Consistency vs. intuitive navigation—consistency is about sameness within your product, while intuitive navigation leverages conventions from other products. Both reduce cognitive load but through different mechanisms.
User Feedback & Interaction Design
Every user action deserves a response. Feedback loops close the communication gap between user intent and system state, preventing confusion and building confidence.
Feedback and Affordances
- Affordances are visual cues that signal interactivity—buttons look pressable, links look clickable, sliders look draggable
- Immediate feedback (hover states, click animations, loading indicators) confirms the system received user input
- State changes must be visually obvious—users should never wonder "did that work?"
Appropriate Use of Animations and Transitions
- Purposeful motion guides attention, indicates relationships, and smooths jarring state changes
- Timing matters—animations under 300ms feel responsive; over 500ms feel sluggish and interrupt flow
- Reduced motion settings must be respected for users with vestibular disorders or motion sensitivity
Error Prevention and Handling
- Inline validation catches errors as users type rather than after form submission
- Helpful error messages explain what went wrong and how to fix it—never just "Invalid input"
- Undo functionality and confirmation dialogs prevent catastrophic mistakes without adding friction to routine actions
Compare: Affordances vs. feedback—affordances communicate potential actions before interaction, while feedback confirms completed actions after interaction. Both are essential; missing either creates user uncertainty.
Accessibility & Inclusive Design
Accessible design isn't optional or a nice-to-have—it's fundamental to reaching all users. WCAG guidelines provide measurable standards, and accessible interfaces are almost always better interfaces for everyone.
Accessibility Considerations
- Alt text provides image descriptions for screen reader users—be descriptive, not just "image of product"
- Keyboard navigation ensures all interactive elements are reachable without a mouse via logical tab order
- ARIA labels supplement semantic HTML when visual context isn't available to assistive technologies
Color Theory and Contrast
- WCAG contrast ratios require 4.5:1 for normal text and 3:1 for large text—use contrast checkers, don't eyeball it
- Color shouldn't be the only indicator—pair red error states with icons or text for colorblind users
- Brand palettes must include accessible combinations; design systems should flag non-compliant pairings
Compare: Alt text vs. ARIA labels—alt text describes images for screen readers, while ARIA labels describe interactive elements and their states. Both serve assistive technology users but apply to different content types.
Modern interfaces must work across devices, connection speeds, and user contexts. Responsive design and performance optimization ensure your interface is usable everywhere, not just on the designer's high-end laptop.
Responsive Design
- Fluid grids use percentage-based widths and CSS Grid/Flexbox to adapt layouts across viewport sizes
- Breakpoints should be content-driven, not device-driven—add a breakpoint when the layout breaks
- Touch targets need minimum 44x44px sizing on mobile to accommodate finger taps accurately
- Image optimization (compression, lazy loading, appropriate formats) often delivers the biggest performance gains
- Critical rendering path prioritizes above-the-fold content loading for perceived speed improvements
- Core Web Vitals (LCP, FID, CLS) provide measurable benchmarks for user experience quality
Compare: Responsive design vs. performance optimization—responsive design adapts layout to different devices, while performance optimization ensures speed across different connection types. Both affect mobile usability but address different constraints.
User-Centered Process
Great UI emerges from understanding real users, not designer assumptions. Iterative testing and user involvement transform good intentions into effective interfaces.
User-Centered Design Approach
- User research (interviews, surveys, observation) reveals actual needs versus assumed needs
- Usability testing with 5 users catches approximately 85% of major usability issues
- Iterative refinement treats design as hypothesis-testing—ship, measure, improve, repeat
Simplicity and Minimalism
- Progressive disclosure hides advanced features until needed rather than overwhelming new users
- Clear calls-to-action use action verbs and stand out visually from secondary options
- Content audits regularly eliminate outdated or redundant elements that accumulate over time
Compare: User-centered design vs. simplicity—user-centered design is a process (research, test, iterate), while simplicity is an outcome (clean, focused interfaces). The process should produce the outcome, but simplicity without user validation is just guessing.
Quick Reference Table
|
| Reducing Cognitive Load | Visual hierarchy, whitespace, simplicity |
| Leveraging Mental Models | Consistency, intuitive navigation, familiar icons |
| Providing User Feedback | Affordances, animations, error handling |
| Ensuring Accessibility | Alt text, color contrast, keyboard navigation |
| Adapting to Context | Responsive design, performance optimization |
| Validating Design Decisions | User-centered design, usability testing |
| Communicating Clearly | Typography, icon labels, error messages |
| Guiding User Attention | Visual hierarchy, whitespace, color contrast |
Self-Check Questions
-
Which two practices both reduce cognitive load but through different mechanisms—one by directing attention and one by separating content?
-
A user clicks a button but nothing visually changes for 3 seconds. Which two best practices have been violated, and how would you fix each?
-
Compare and contrast how consistency and intuitive navigation both leverage user expectations. When might following conventions conflict with maintaining internal consistency?
-
You're auditing an interface for accessibility. What three specific, measurable criteria would you check, and what tools would you use?
-
An FRQ asks you to improve a mobile checkout flow with high abandonment rates. Which best practices would you prioritize first, and why does the order matter?