Techniques
Practical UX techniques — card sorting, A/B testing, heuristic evaluation, affinity mapping, and hands-on methods you can apply immediately.
55 articles
Accessible visual identity: brand, colour and contrast without conflict
Logos are exempt from contrast in WCAG, but the rest of the visual identity is not. What 1.4.3 and 1.4.11 require of brand colour and how to audit a palette.
Affinity Mapping
Learn how to use Affinity Mapping, a collaborative technique for organizing large amounts of qualitative data, such as brainstorming ideas or interview observations, and finding meaningful patterns.
Autocomplete Patterns: Search Suggestions and Fields That Fill Themselves
How to design autocomplete in search and forms: Baymard's suggestion limits, the HTML autocomplete attribute, and WCAG 1.3.5 on the purpose of each input.
Button Hierarchy: Primary, Secondary, and Tertiary
Button hierarchy sets the main action, the secondary ones, and the destructive ones. Carbon and PatternFly rules for choosing, grouping, and placing buttons.
Card Sorting
Learn what Card Sorting is, a fundamental UX research technique for designing an intuitive Information Architecture by understanding how your users group and categorize content.
Checkout UX: Removing Friction Without Losing Trust
How to remove checkout friction without losing trust: guest checkout, visible costs, only the fields you need, and technical errors that make people abandon.
Chunking in UI Flows: Intelligent Fragmentation
Learn to apply chunking in your interfaces and user flows to break information into manageable blocks, reducing cognitive load and improving success rates.
Color Contrast Math: Readability and Ratio
Learn the mathematical rules and contrast ratios required by WCAG to ensure your interface design is legible for people with low vision and color blindness.
Color palettes and tokens: how to organize a system's color
A palette is the set of tones a brand uses; tokens give them names and functions. How to structure primitive, semantic and theme colors without losing control.
Component API Design: Predictability and Flexibility
Learn to design robust and consistent component APIs that facilitate handoff between design and development, reducing errors and accelerating product construction.
Component Prop Organization: Structure and Hierarchy
Learn to organize and prioritize your components' properties (props) to create a more intuitive user experience for the designers and developers consuming your design system.
Constraints and Auto Layout Logic in Figma
Master advanced Constraints and Auto Layout logic in Figma to create responsive components and layouts that adapt perfectly to any screen size.
Crazy 8's
Discover Crazy 8's, a rapid ideation exercise fundamental to Design Sprints that forces you to generate 8 design ideas in 8 minutes to explore a wide variety of solutions.
Dark Mode Design: More Than Inverting Colors
A well-made dark mode isn't black and white swapped: it means rebuilding surfaces, elevation, saturation, and contrast. What the guidelines and evidence say.
Dashboard Design: Fewer Charts, More Decisions
A dashboard earns its place when it helps people decide. How many metrics to show, what goes first, how to use filters and drill-down, and how to split views.
Data Tables: Designing for Scanning, Comparing, and Acting
A data table must let people find, compare, and act on rows. How to align numbers, mark sort order, freeze headers, and use W3C's accessible table markup.
Date Pickers: The Most Hated Component and How to Design It Well
When to use three fields, a calendar, or a native input for dates, and how to meet WCAG with clear formats, useful error messages, and manual entry.
Dot Voting
A quick, visual voting technique that reveals team consensus without lengthy discussion—essential for prioritization workshops.
Empty States: The First Blank Screen Also Needs Design
An empty state is the screen shown when there is no data. Learn the types (first use, no results, no data yet), what to say, and which action to offer.
Error state patterns: what to show when something goes wrong
Error states are the screens and messages that appear when something fails. Patterns for validation, system failures and recovery, based on WCAG and NN/g.
Filters and Faceted Search: When to Use Them and How to Show What Is Applied
Filters exclude results and faceted search combines several by category. When to use each one and how to show applied filters on desktop and mobile.
Focus Management: Navigation without a Mouse
Learn to design and manage navigation focus in your digital product to ensure a smooth experience for keyboard users, screen readers, and assistive technology.
Form Design: Labels, Order, and Field Length
A good form keeps labels visible, sizes fields to the expected input, and marks optional fields. What NN/g, the GOV.UK Design System, and a CHI 2014 study say.
Form Validation Timing: Reward and Rules
Learn when the optimal moment is to validate your form data to reduce user flow interruption and improve your interfaces' conversion rate.
Functional animation principles: moving with a purpose
Functional animation explains a change, directs attention or confirms an action. NN/g durations, easing, frequency and how to respect reduced motion.
Heuristic Evaluations
Learn how to conduct a Heuristic Evaluation, a usability inspection method for identifying design problems in an interface based on recognized usability principles.
How to Write Error Messages That Help People Fix the Problem
A good error message says what happened, where and how to fix it, without blaming the person. Rules from NN/g and Nielsen's heuristic 9, with examples.
Input Masking Dangers: Usability vs. Format
Learn why input masks can be a usability trap and discover alternative strategies to guide the user without frustrating them.
Intrinsic Layout Decisions: Content vs. Boxes
Learn to make design decisions based on intrinsic logic to create layouts that intelligently adapt to content without relying on rigid grids.
Layout Decisions: Grid vs. Intrinsic
Learn to choose between a grid-based design (Grid) and a content-based design (Intrinsic) to create fluid and modern digital layouts.
Loading States: The Indulgent Wait in UX
Learn to design loading states that reduce user anxiety, communicate system progress, and improve the perceived speed of your digital product.
Microcopy: The Small Words That Guide
Microcopy is the short text in an interface: buttons, labels, hints, and errors. Its three jobs according to NN/g and how to write buttons and placeholders.
Mobile accessibility: target sizes, gestures and reflow that matter
Mobile accessibility has no standard of its own: WCAG 2.2 applies to small screens. Target size, reflow, gestures and Apple and Android guidance.
Mobile Gestures: Discoverability and Alternatives
How to design mobile gestures users can discover, with single-tap alternatives under WCAG 2.5.1, and when a gesture must not be the only way to act.
Modals, Drawers, and Popovers: When to Use Each
A modal blocks the screen until the person responds; a popover does not. When to use modals, drawers, and popovers, according to NN/g, Carbon, and Atlassian.
Navigation Patterns: Tabs, Sidebar, Bottom Nav, and the Hamburger Menu
Navigation patterns determine how people find each section of your product. Compare tabs, sidebars, bottom bars, and the hamburger menu, with data from NN/g.
Notifications and Toasts: When to Interrupt and When Not To
A toast is a brief message that disappears on its own. When to use one to confirm an action, when not to, and how to keep it from being missed or annoying.
Onboarding Patterns: Tours, Tooltips, Checklists, and Empty States
Onboarding patterns help a new user start without a mandatory tutorial. Compare product tours, tooltips, checklists, progressive disclosure, and sample data.
Optimistic Updates and Rollback UX
Learn to design optimistic updates so your application feels instantaneous to the user, and how to manage network failures with elegant rollback experiences.
Pagination vs. Infinite Scroll vs. Load More: Which to Choose and Why
Pagination, infinite scroll, and load more solve long lists in different ways. How to choose based on the task, the footer, and keyboard access.
Paper prototyping: testing ideas with pencil and cardboard
Paper prototyping uses printed or hand-drawn sketches to test an interface before coding it. Learn how it works, what it finds, and where it falls short.
Quantitative Data
Understand what Quantitative Data is in UX and how it differs from qualitative data. Learn how to use metrics to measure user behavior at scale.
Responsive Scaling Strategies: Liquid UI
Learn to choose and apply different responsive scaling strategies so your components and layouts adapt fluidly to any screen size.
Roles, permissions and user states in the UI: what to show when something is not possible
When a role or permission blocks an action, the UI can hide, disable or explain. Criteria from Nielsen, SAP and OWASP, with accessibility and security in mind.
Safeguards for Destructive Actions: Positive Friction
Learn to design safeguards and intentional friction mechanisms to prevent your users from accidentally performing irreversible actions in your digital product.
Screen Reader Testing: The Ear of UX
Learn to effectively perform screen reader testing to verify that your design and information architecture are accessible to blind or visually impaired users.
Search UX: Box, Suggestions, and Results Without Dead Ends
Search UX covers the search box, autocomplete, and the no-results page. What Baymard's research recommends, common mistakes, and how to design the way out.
Settings page design: how to organize an app's preferences
How to design settings pages: group options, choose sensible defaults, add search, and decide when changes save. Patterns and common mistakes.
Token Aliasing and Inheritance Strategy
Learn to implement a design token aliasing and inheritance strategy to create highly flexible, maintainable systems prepared for multiple themes.
Touch Targets: Minimum Sizes and Spacing for Mobile
What a touch target is, the minimum sizes WCAG, Android, and Nielsen Norman Group recommend, and why spacing between controls matters as much as size.
Tree Testing
Tree Testing is a UX research technique that measures the findability of topics in a site's information architecture. Users locate items in a text-only hierarchy, without the influence of visual design or navigation.
Type Scale: Rhythm and Hierarchy in an Interface
A type scale is a limited set of text sizes assigned to roles. How to build one, which numbers to start from, and why size alone does not create hierarchy.
Variant Explosion Control (Wrangling Systems)
Learn to optimize and simplify your Figma component architecture to avoid unmanageable variant explosions and improve the performance of your design files.
Wizard of Oz: testing before building, with a person behind the curtain
In Wizard of Oz testing, a hidden person simulates a system that does not exist yet. Learn when to use it, how to prepare it, and what ethics it requires.
Wizards and Steppers: Long Tasks in Steps Without Losing the User
When to use a wizard or stepper for long tasks, how many steps make sense, how to show progress, and how to review answers before confirming.