UX
101 bites tagged UX — interview questions with model answers, and 60-second explainers.
Optimistic UI updates for actions
Update UI immediately on the assumption of success, send the request, then confirm or roll back on failure. perceived-performance technique with rollback. applying optimistic state without any rollback or error path.
Core roles on a design system team
Name design, engineering, product/PM, and accessibility/docs roles with clear ownership. Whether you see a design system as a product. Treating it as a side project with no dedicated owners.
Component versus pattern in a design system
A component is a single reusable UI building block; a pattern is a documented way of composing components to solve a recurring problem. vocabulary precision. using the two terms interchangeably.
What is the purpose of an Angular Resolve guard vs ngOnInit?
Tests routing lifecycle timing and UX state management. Strong answers: Resolve blocks activation until data returns; ngOnInit renders first then fetches, causing flicker.
Team Charter: Shared Agreements for Collaboration
A team charter is the operating agreement that keeps collaboration aligned, distinct from the design rules the team produces. Teams use it to establish shared norms alongside principles and heuristics.
Vienna Circle Café Culture Holds Web Civility Lessons
Vienna Circle's 1928-34 meetings kept Gödel and Wittgenstein productive despite vicious feuds. Leader Moritz Schlick and lingering-friendly cafés turned conflict into collaboration.
Gamified Prototypes: Test Loops Before Code
A gamified prototype tests motivation loops without code. In Figma, you simulate points and badges with variants and Smart Animate to validate reward timing before engineers build scoring logic.
Simulate Form Validation in Figma
A form prototype is an interactive script, not a picture. You pre-build every state — empty, typing, error, success — and link them so stakeholders feel validation timing before engineers code it. The trap is logic you cannot maintain across design changes.
Conditional Logic in Figma Prototypes
Conditional logic turns static click-throughs into state-aware flows. Use it to unlock a button only after form fields are valid, or to branch checkout based on payment method. The footgun is building a brittle fake app instead of a focused testable flow.
Design a multi-step wizard form pattern in React
Shared state, step validation, and resilient navigation. A great answer uses one form instance with per-step Zod schemas, a context stepper, and localStorage persistence. Red flag: isolated forms per step that lose data on navigation.
HEART Framework: Five Metrics for Product Health
HEART is a vital-signs panel for product health, not a single score. Use it to pick metrics for feature launches so you track user value, not vanity numbers. Measuring all five dimensions when only one matters creates dashboard bloat and analysis paralysis.
Component library vs style guide vs design system
A design system is holistic parent for scale; a style guide is a narrow visual/content child; a component library is a coded child of reusable UI elements. Knowledge of hierarchy in design artifacts. Do not conflate them.
Component Usage Guidelines as Guardrails
Usage guidelines are guardrails, not the component itself. They tell engineers when to pick primary versus secondary buttons, or when a modal becomes a page. Without them, teams reinvent one component for different contexts, fragmenting the system.
Apple HIG Compliance
Apple's HIG is the rulebook for native iOS and macOS apps. Compliance means matching platform conventions for layout and navigation. The footgun is treating it as a visual skin while ignoring interaction patterns, making apps that look right but feel wrong.
What is font-display and how do swap and block differ?
This tests knowledge of the font display timeline. Swap shows fallback immediately then swaps in custom font, while block hides text for a short block period before fallback. A red flag is claiming swap prevents layout shift or that block is superior.
What client-side and server-side validations belong on a campaign sign-up form?
This tests defense in depth and UX trade-offs. A strong answer maps validations to layers: regex and immediate feedback client-side, strict schema and rate limiting server-side, plus duplicate checks. Red flag: claiming client-side validation is sufficient.
Optimistic UI: Assume Success for a Faster Feel
An optimistic UI assumes an action will succeed, updating the interface instantly instead of waiting for the server. This makes actions like liking a post or adding to a cart feel instant. The footgun is failing to revert the UI when the server reports an.
Multivariate Testing: Find Which UI Changes Interact
Multivariate testing finds the best *combination* of UI changes, not just which single design wins. Use it to see how a new headline interacts with a new button on a high-traffic page. The footgun: it requires far more traffic than A/B testing to get a.
Clickstream Analysis: Following the User's Footsteps
Clickstream analysis is like watching a replay of a user's journey through your site, click by click. It's used to optimize conversion funnels and find friction points. The footgun is focusing on the *what* (the path) without asking *why* a user took it.
Heatmaps: Visualizing User Attention
Think of a heatmap as a weather map for your app, showing 'hot' spots of user clicks and 'cold' spots they ignore. It reveals if users are clicking key buttons or getting distracted. The footgun: a hot spot can mean rage-clicks, not just engagement.
GOMS Model: Predicting User Performance as a Script
The GOMS model predicts expert user performance by breaking down tasks into a script of Goals, Operators, Methods, and Selection rules. It's used to get quantitative estimates of task efficiency, but its footgun is assuming a perfect user who never makes…
Cognitive Walkthrough: See Through a New User's Eyes
A cognitive walkthrough is like role-playing a new user trying a specific task for the first time. It finds usability flaws early by simulating a first-time user's journey. The footgun is confusing it with a holistic review; this method is for specific tasks.
Think Aloud Protocol: Hear Your User's Inner Monologue
See your product through a user's eyes by having them narrate their thoughts live during a task. It's used in usability testing to uncover confusion, mismatched expectations, and the "why" behind clicks.
User Mental Models: What Users Believe About Your System
A user's mental model is their internal story of how your system works, based on belief, not facts. It shapes every interaction, from predicting button actions to checkout flows.
Get UX bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.