UX
101 bites tagged UX — interview questions with model answers, and 60-second explainers.
Pre-attentive Attributes: Your Brain on Autopilot
Pre-attentive attributes are visual properties your brain processes in milliseconds, before you consciously focus. They're the workhorses of data visualization, making outliers and patterns pop out of a dashboard. The biggest mistake is using too many at once.
The `inert` Attribute: Making UI Sections Unreachable
The `inert` attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
Focus Trapping: Guiding Keyboard Users, Not Caging Them
Focus trapping intentionally confines keyboard navigation to a component, like a modal. It's a feature, not a bug, when used to prevent users from interacting with the page behind an overlay.
Build Accessible Animations with `prefers-reduced-motion`
`prefers-reduced-motion` lets you respect a user's system-wide request to minimize animations. Use this CSS media query to replace potentially jarring effects like zooms or parallax with simpler fades, preventing discomfort for users with vestibular disorders.
Component Library: Your UI's LEGO Box
A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.
Preheader Text: The Second Chance to Earn an Open
Preheader text is the snippet after an email subject line that gives a second reason to open. It's vital for marketing and transactional emails to boost open rates. The footgun: if you don't set it, clients grab the first text they find, often 'View in.
The Framing Effect: How Presentation Changes Decisions
The way you frame a choice—as a gain or a loss—changes how people decide, even if the options are identical. This is why "80% lean" sells better than "20% fat." The footgun is assuming people are rational; presentation often beats pure logic.
WCAG: The Technical Standard for Web Accessibility
WCAG is the technical rulebook for making web content usable by people with disabilities. It provides testable criteria for websites and apps, often required by law. The footgun is aiming too low; Level AA is the standard target, not just Level A.
Session Replay: A DVR for Your User's Experience
Session replay is like a DVR for your website, letting you watch a user's exact journey. It's used to debug issues, find conversion blockers, and understand user behavior. The footgun is watching aimlessly; without a hypothesis, you're just invading privacy.
Heatmap Analysis: Seeing Where Your Users Look
A heatmap is a weather map for your webpage, showing 'hot' spots of high engagement and 'cold' spots users ignore. Use it to see which headlines get clicks or how far down a sales page users scroll.
UX Copy Localization: More Than Just Translation
UX copy localization adapts UI text to a new market's cultural and linguistic norms, going beyond literal translation. It's critical for onboarding flows, error messages, and button labels.
Information Scent: Guiding Users to Their Goal
Users hunt for information like animals forage for food, following a trail of cues. This applies to website navigation, headlines, and link text, where clear 'scents' guide users to their goal. The footgun is using vague labels that weaken the scent.
Conversational Design: Scripting a Dialogue, Not Just a UI
Think of conversational design as scripting a dialogue where the user is the main character. It's how voice assistants and chatbots create natural, two-way interactions.
Progressive Disclosure: Show, Don't Overwhelm
Progressive disclosure is a guided tour for your UI, revealing information only as needed. It simplifies complex forms and setup wizards by deferring advanced options, making apps easier to learn.
Tooltips: For Optional Hints, Not Critical Info
Tooltips are hover-activated hints providing optional, extra context for UI elements. Use them to explain why a form field is needed or what an ambiguous icon means. The footgun is hiding critical info, like password rules, inside them.
Designing Helpful UX Error Messages
An error message is a guide, not a dead end. Design them to be visible and constructive by placing them near the error's source with clear, high-contrast styling. The footgun is showing errors prematurely, which feels hostile and punishes exploration.
Microcopy: The Small Words with Big Impact
Microcopy is the small, functional text that guides users through an interface. It's the button labels, error messages, and tooltips that help users complete tasks.
Content Strategy: The Plan Before the Content
Content strategy is the blueprint for your content, guiding its planning, creation, and management. It's the thinking behind a company's blog or help docs. The common mistake is confusing strategy with just writing; it's the 'why' and 'how' behind the words.
The Kano Model: Not All Features Are Created Equal
The Kano model sorts features by how they impact user satisfaction. Use it to prioritize a product roadmap, deciding between fixing basic needs, improving core features, or adding delightful surprises.
User Interviews: Uncover Needs, Not Just Test Designs
User interviews are structured conversations to understand the 'why' behind user actions, not just 'what' they do. Use them in discovery to learn user motivations and pain points, informing personas and journey maps.
Survey Research: How to Ask Better Questions
Survey research is the science of asking the right questions to the right people. It's used in market research and user feedback to understand a population. The footgun: assuming any questionnaire yields truth. Biased questions or samples create garbage data.
User Personas: Designing for Someone, Not Everyone
A user persona is a semi-fictional character built from real user data to represent a target group. It helps teams design for "Sarah the busy manager," not a vague "user." The footgun is forgetting the persona is an archetype, not a literal person.
In-app Updates: Update Your App Without Leaving It
In-app updates prompt users to update without leaving your app. Use the 'Flexible' flow for routine updates and the 'Immediate' flow for critical fixes. The footgun is overusing the disruptive 'Immediate' flow for non-critical changes.
The HEART Framework: Measuring User-Centric Success
The HEART framework measures user-centric success, not just clicks. It provides five categories (Happiness, Engagement, Adoption, Retention, Task Success) to track product health.
Get UX bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.