Master these 31 carefully curated interview questions to ace your next Ui ux interview.
UI (User Interface) focuses on visual design and interactive elements; UX (User Experience) focuses on the overall user journey and usability.
UI: visual design, typography, color, layout, interactive elements, animations, branding. UX: user research, information architecture, wireframing, prototyping, usability testing, user flows, accessibility. A product can have great UI but poor UX (beautiful but confusing). UX comes first (research, structure), UI follows (visual implementation). Both collaborate closely in modern design teams.
User-centered design puts users at the center of the design process through research, testing, and iterative improvement.
UCD process: (1) Understand: user research, interviews, surveys, personas. (2) Define: problem statements, user stories, requirements. (3) Design: wireframes, prototypes, design iterations. (4) Test: usability testing, A/B testing, analytics. (5) Iterate: refine based on feedback. Principles: know your users, involve users throughout, test with real users, iterate continuously. ISO 9241-210 formalizes this process. Design thinking framework aligns closely with UCD.
Wireframes are low-fidelity layouts; mockups are high-fidelity static designs; prototypes are interactive simulations of the final product.
Wireframes: skeletal structure, grayscale, focus on layout and content hierarchy. Tools: pen/paper, Balsamiq, Whimsical. Mockups: pixel-perfect visual design with colors, typography, imagery. Tools: Figma, Sketch, Adobe XD. Prototypes: clickable, interactive simulations. Fidelity levels: low (click-through wireframes), high (animated, near-real). Used for: stakeholder buy-in, usability testing, developer handoff. Progressive: wireframe → mockup → prototype.
Responsive design creates layouts that adapt to different screen sizes using fluid grids, flexible images, and media queries.
Principles: (1) Fluid grids: percentage-based widths. (2) Flexible images: max-width: 100%. (3) Media queries: breakpoints for different screen sizes. (4) Mobile-first: design for mobile, enhance for desktop. Approaches: responsive (one codebase adapts), adaptive (server-side device detection, different layouts). Tools: Chrome DevTools, responsive design mode. Design tokens should include breakpoints. Test on real devices, not just browser resize.
Design thinking is a problem-solving framework with 5 stages: Empathize, Define, Ideate, Prototype, Test.
Stages: (1) Empathize: understand users through observation, interviews, immersion. (2) Define: synthesize findings into clear problem statement. (3) Ideate: brainstorm solutions (divergent thinking). (4) Prototype: build quick, low-cost representations. (5) Test: gather user feedback, iterate. Non-linear — go back to any stage. Used by IDEO, Stanford d.school. Key mindset: fail fast, iterate often, focus on human needs over technical solutions.
IA organizes and structures content so users can find information and complete tasks efficiently through clear navigation and hierarchy.
Components: (1) Organization schemes: alphabetical, chronological, topical. (2) Labeling: clear, consistent naming. (3) Navigation: global nav, local nav, breadcrumbs, search. (4) Search: findability. Methods: card sorting (open/closed), tree testing, site mapping. Deliverables: site maps, user flows, content inventories. IA principles: progressive disclosure, recognition over recall, clear hierarchy. Test IA with tree testing before visual design.
Plan tasks, recruit representative users (5-8), observe them completing tasks, note problems, and iterate on solutions.
Process: (1) Define goals and tasks. (2) Recruit 5-8 representative users. (3) Create test script. (4) Moderate sessions (think-aloud protocol). (5) Note pain points, errors, hesitations. (6) Analyze patterns. (7) Prioritize fixes by severity/frequency. Methods: moderated (in-person/remote), unmoderated (UserTesting.com, Maze), guerrilla (informal, quick). Metrics: task success rate, time on task, error rate, SUS (System Usability Scale). Nielsen's rule: 5 users find 85% of usability issues.
A design system is a collection of reusable components, design tokens, patterns, and guidelines ensuring consistency across products.
Components: (1) Design tokens: colors, typography, spacing, shadows. (2) Components: buttons, inputs, cards, modals. (3) Patterns: navigation, forms, data display. (4) Guidelines: voice/tone, accessibility, animation. Tools: Figma component libraries, Storybook for development. Benefits: consistency, efficiency, scalability, faster onboarding. Examples: Material Design (Google), Human Interface Guidelines (Apple), Atlassian Design System. Maintain with versioning and documentation.
Track conversion rates, task completion time, support tickets, user retention, and development efficiency before/after UX improvements.
Metrics: (1) Business: conversion rate increase, revenue per user, customer acquisition cost reduction. (2) User: task success rate, time on task, SUS score, NPS. (3) Development: reduced rework, faster development with design system. (4) Support: fewer support tickets, lower training costs. Calculation: ROI = (benefit - cost) / cost × 100. Example: improving checkout UX by reducing form fields increased conversion 35%, generating $2M additional revenue vs $200K design investment = 900% ROI.
Analyze current analytics and drop-off points, conduct user research, design simplified flow, prototype, test with users, iterate.
Process: (1) Analytics: identify where users drop off in current flow. (2) Competitive analysis: best-in-class checkout experiences. (3) User interviews: understand pain points. (4) Heuristic evaluation of current design. (5) Simplify: reduce steps, guest checkout, progress indicator. (6) Wireframe new flow. (7) Prototype in Figma. (8) Usability test with 5-8 users. (9) Iterate based on findings. (10) A/B test against current flow. Key: reduce cognitive load, show trust signals, save form state, support multiple payment methods.
Apple focuses on simplicity, consistency, attention to detail, and seamless hardware-software integration.
Principles: (1) Simplicity: remove unnecessary elements. (2) Consistency: Human Interface Guidelines across all products. (3) Attention to detail: micro-animations, haptic feedback, typography. (4) Hardware-software integration: design experiences, not just interfaces. (5) Accessibility: built-in from the start. (6) Skeuomorphism → flat design → neumorphism evolution. (7) Focus on the user's task, not the technology. Lesson: great design is invisible — users focus on their goals, not the interface.
UCD is a design process that puts users at the center of every decision through continuous research, testing, and iteration.
Phases: (1) Research: understand users, needs, context. (2) Define: personas, user stories, problem statements. (3) Design: wireframes, prototypes, interaction patterns. (4) Test: usability testing, A/B testing, feedback. (5) Iterate: refine based on findings. Principles: early focus on users, empirical measurement, iterative design. ISO 9241-210 standard defines UCD process. vs Design Thinking: overlapping approaches — design thinking emphasizes empathy and ideation. UCD ensures designs solve real problems for real users, not assumed problems.
Wireframes are structural layouts; mockups are high-fidelity static designs; prototypes are interactive, clickable representations.
Wireframes: low-fidelity, grayscale, focus on layout and content hierarchy. Tools: Balsamiq, paper sketches. Purpose: quick exploration, structure decisions. Mockups: high-fidelity, pixel-perfect visual design with colors, typography, imagery. Tools: Figma, Sketch. Purpose: visual direction approval, developer handoff. Prototypes: interactive clickable flows simulating real interactions. Low-fi (paper prototype) to high-fi (Figma prototype, Framer). Purpose: usability testing, stakeholder demonstration. Progression: wireframe → mockup → prototype → development.
Recruit representative users, create task scenarios, observe without leading, record findings, and prioritize issues by severity.
Planning: (1) Define goals: what questions to answer. (2) Recruit: 5 users per persona (catches 85% of issues). (3) Create tasks: realistic scenarios, not step-by-step instructions. (4) Prepare: prototype, recording tools, consent forms. Conducting: think-aloud protocol, don't lead ('What would you do?' not 'Click that button'), observe behavior + emotions. Analysis: severity rating (critical/major/minor), frequency across participants, video clips for stakeholders. Types: moderated (facilitator present), unmoderated (tools: UserTesting, Maze), guerrilla (informal, quick), remote vs in-person.
Visual hierarchy guides user attention through size, color, contrast, spacing, typography, and positioning to communicate importance.
Principles: (1) Size: larger elements draw attention first. (2) Color/contrast: high contrast attracts, low contrast recedes. (3) Positioning: top-left (F-pattern reading cultures), center of focal area. (4) Typography: weight (bold), size (heading vs body), style hierarchy. (5) Whitespace: groups related items, separates sections, reduces cognitive load. (6) Repetition: consistent patterns create predictable hierarchy. (7) Proximity: related items close together (Gestalt). (8) Direction: lines, arrows, eye-gaze photos guide attention. Testing: squint test — blur design, hierarchy should still be clear.
Design thinking is a human-centered innovation framework: Empathize, Define, Ideate, Prototype, Test — iterative and non-linear.
Empathize: understand users through interviews, observation, immersion. Build empathy maps, journey maps. Define: synthesize research into problem statement. 'How Might We' reframes problems as opportunities. Point of View statement: [User] needs [need] because [insight]. Ideate: divergent thinking (quantity over quality), brainstorming, crazy 8s, SCAMPER. Prototype: quick, cheap, testable representations. Fail fast, learn fast. Test: usability testing with real users, gather feedback, iterate. Non-linear: jump between stages as needed. Stanford d.school methodology.
UX design focuses on the overall experience and user journey; UI design focuses on visual appearance and interactive elements.
UX (User Experience): research, information architecture, user flows, wireframes, usability testing, content strategy. Answers: 'Does it work well?' Deliverables: personas, journey maps, wireframes, prototypes, usability reports. UI (User Interface): visual design, color systems, typography, iconography, component design, responsive layouts, animations. Answers: 'Does it look and feel good?' Deliverables: style guides, design systems, high-fidelity mockups, interactive prototypes. Overlap: interaction design, prototyping. Both needed: great UX with poor UI feels cheap; great UI with poor UX frustrates users.
Define design tokens, build component library with guidelines, document patterns, ensure accessibility, and version and evolve.
Foundation: (1) Design tokens: colors, typography, spacing, shadows — single source of truth. (2) Components: buttons, inputs, cards, modals — designed in Figma, coded in React/Vue. (3) Patterns: layouts, forms, navigation, error handling. Documentation: usage guidelines, do's/don'ts, code examples, accessibility requirements. Process: design + engineering collaboration, RFC for new components, versioning (semver). Tools: Figma libraries, Storybook for component documentation, Chromatic for visual regression. Governance: who can contribute, review process. Examples: Material Design, Ant Design, Carbon.
Accessible design ensures products are usable by people with disabilities — visual, auditory, motor, and cognitive — following WCAG guidelines.
WCAG 2.1 Principles (POUR): Perceivable (alt text, captions, contrast), Operable (keyboard navigation, no time pressure), Understandable (clear language, predictable), Robust (works with assistive technologies). Key requirements: 4.5:1 text contrast ratio, focus indicators, screen reader compatibility, keyboard navigation, skip links, proper heading hierarchy, error identification. Legal: ADA, Section 508, European Accessibility Act. Business: 15% of population has disability + aging population + temporary disabilities. Testing: axe DevTools, screen reader (NVDA, VoiceOver), keyboard-only navigation.
Audit current experience, collect user feedback, identify pain points, define goals, design iteratively, and test before launch.
Process: (1) Audit: heuristic evaluation (Nielsen's 10), analytics review (drop-offs, bounce rates). (2) Research: user interviews, surveys, support ticket analysis. (3) Competitive analysis: what do competitors do well. (4) Define: prioritize improvements by impact vs effort. (5) Information architecture: card sorting, tree testing. (6) Design: incremental changes vs full redesign (risk vs reward). (7) Test: A/B testing, usability testing comparing old vs new. (8) Launch: gradual rollout, monitor metrics, collect feedback. Common mistake: redesigning everything at once — users resist drastic changes.
Present data-driven evidence, align with business goals, show user research, propose alternatives, and find compromise.
Approach: (1) Listen: understand their concern fully before defending. (2) Data: 'The usability test showed 4/5 users struggled with this flow.' (3) Business alignment: 'This design increases conversion by focusing on the primary CTA.' (4) Alternatives: present options with trade-offs. (5) Prototype and test: 'Let's test both approaches.' (6) Pick your battles: not every design decision is worth fighting. (7) Document decisions: decision log prevents revisiting settled issues. (8) Build trust: consistently deliver good results. Framework: impact vs effort matrix for prioritizing design changes.
Gestalt principles explain how humans perceive visual elements as organized patterns: proximity, similarity, continuity, closure, figure-ground.
Proximity: elements close together appear related (form fields with labels, navigation groups). Similarity: similar elements (color, shape, size) appear related (icon styles, button types). Continuity: eye follows lines and curves (progress indicators, breadcrumbs). Closure: mind completes incomplete shapes (logos, icons). Figure-ground: distinguish foreground from background (modals, overlays). Common fate: elements moving together appear related (animations, loading states). Prägnanz: preference for simple, orderly figures. Application: layout design, component grouping, visual hierarchy, icon design.
Material Design is Google's design system based on physical metaphors, bold colors, meaningful motion, and adaptive layouts.
Core principles: (1) Material is the metaphor: surfaces, edges, shadows simulate physical world. Elevation creates hierarchy. (2) Bold, graphic, intentional: typography, grids, color create visual hierarchy. (3) Motion provides meaning: transitions communicate relationships and feedback. Material 3 (M3, 2022): dynamic color (from wallpaper), updated components, design tokens. Components: buttons, cards, navigation, dialogs, text fields, bottom sheets. Theming: color, typography, shape customization. Accessibility: built-in contrast ratios, touch targets. Implementation: Android Jetpack Compose, Flutter, Web (MWC).
IA organizes and structures content so users can find information and complete tasks efficiently through clear navigation and labeling.
Components: (1) Organization: how content is grouped (alphabetical, chronological, topical). (2) Labeling: what things are called (menu items, buttons, headings). (3) Navigation: how users move through content (global nav, local nav, breadcrumbs). (4) Search: how users find specific content. Methods: card sorting (how users group items), tree testing (can users find items in structure), content inventory/audit. Deliverables: sitemap, navigation flow, content model. Tools: OptimalSort, Treejack, Miro. Principles: clear, consistent, scalable structure. Bad IA = users can't find anything regardless of visual design.
Track task success rate, time-on-task, error rate, SUS score, NPS, and combine quantitative metrics with qualitative insights.
Quantitative: (1) Task success rate: % completing tasks. (2) Time-on-task: efficiency measure. (3) Error rate: mistakes per task. (4) SUS (System Usability Scale): 10-question standardized survey (>68 = above average). (5) NPS (Net Promoter Score): likelihood to recommend. (6) CSAT: customer satisfaction. (7) Analytics: bounce rate, conversion rate, funnel completion, feature adoption. Qualitative: user interviews, open-ended survey responses, usability test observations. HEART framework (Google): Happiness, Engagement, Adoption, Retention, Task success. Set baselines, measure change, iterate.
Start with smallest screen constraints, prioritize content, use thumb-friendly touch targets, and progressively enhance for larger screens.
Principles: (1) Content priority: what's essential on small screen. (2) Touch targets: minimum 44x44pt (Apple), 48x48dp (Android). (3) Thumb zone: primary actions in easy-reach area. (4) Progressive disclosure: show essentials, hide details behind interactions. (5) Performance: optimize for mobile networks, lazy load. (6) Typography: minimum 16px for body text. (7) Navigation: bottom tab bar (thumb-friendly), hamburger menu for secondary. (8) Forms: appropriate keyboard types, large inputs, minimize typing. (9) Gestures: swipe, pull-to-refresh, pinch-to-zoom. (10) Test on real devices, not just responsive browser.
Minimize steps, show progress, offer guest checkout, auto-fill information, display trust signals, and optimize for mobile.
Best practices: (1) Guest checkout option (forced account creation = 26% abandonment). (2) Progress indicator (step 1 of 3). (3) Single-page or multi-step with clear progression. (4) Auto-fill: address (Google Places), saved payment (Apple Pay, Google Pay). (5) Error prevention: inline validation, clear error messages. (6) Trust signals: security badges, SSL, reviews. (7) Order summary visible throughout. (8) Multiple payment options. (9) Mobile: large touch targets, native keyboard types, simplified forms. (10) Cart abandonment: save cart, reminder emails. Cart abandonment rate is ~70% — every friction point costs revenue.
A design sprint is a 5-day structured process for solving problems through design, prototyping, and testing ideas with users.
Google Ventures framework: Day 1 (Monday): Map the problem, choose target area, expert interviews. Day 2 (Tuesday): Sketch solutions individually (Crazy 8s, Solution Sketches). Day 3 (Wednesday): Decide — vote on best solutions, create storyboard. Day 4 (Thursday): Prototype — build realistic prototype (fake it). Day 5 (Friday): Test — 5 user interviews, observe reactions. Team: 5-7 people, cross-functional (design, engineering, product, marketing). Benefits: answers critical questions in one week, reduces risk, aligns team. When to use: new product concepts, major features, pivotal design decisions.
Micro-interactions are small, functional animations providing feedback, guiding tasks, and making interfaces feel responsive and alive.
Structure (Dan Saffer): (1) Trigger: user action or system event. (2) Rules: what happens (animation, state change). (3) Feedback: visual/audio response. (4) Loops/Modes: repeated behavior, special states. Examples: like button animation, pull-to-refresh, toggle switch, loading spinner, form validation, hover effects, scroll indicators. Principles: have purpose (not decoration), keep short (150-500ms), match brand personality. Tools: Figma Smart Animate, Principle, ProtoPie, After Effects → Lottie. Implementation: CSS transitions, Framer Motion, Lottie. Impact: increase engagement, reduce perceived wait time, communicate state.
Use dark surfaces (not pure black), reduce contrast, adapt colors for OLED, adjust imagery, and test readability.
Guidelines: (1) Surface colors: #121212 or #1E1E1E, not #000000 (reduces eye strain, shows elevation). (2) Text: #E0E0E0 for body (not pure white — harsh on dark). (3) Primary colors: desaturate and lighten for dark backgrounds. (4) Elevation: lighter surfaces = higher elevation (Material Design). (5) Images: add dark overlay, avoid bright images without treatment. (6) Contrast: WCAG AA still applies (4.5:1 for text). (7) System preference: honor prefers-color-scheme, allow manual toggle. (8) Testing: test all states (empty, error, loading) in dark mode. Benefits: reduced battery (OLED), reduced eye strain, user preference.
Ready to master Ui ux?
Start learning with our comprehensive course and practice these questions.
