web-ux

name	Web UX
description	This skill should be used when the user asks to "improve UX", "usability review", "web accessibility", "design a form/onboarding flow", "information architecture", or works on web/app user experience. Provides world-class web UX heuristics, accessibility (WCAG), and performance-perception best practices.
version	2.0.0

Provide a definitive, framework-agnostic collection of established web UX heuristics, accessibility standards, and performance-perception principles for evaluating and designing usable, accessible, and trustworthy interfaces. Nielsen-Norman heuristic 1: The system should always keep users informed about what is going on through appropriate, timely feedback Acknowledge every user action within a perceptible window; show progress, current location, and state changes Loading data, submitting forms, multi-step flows, background processing Nielsen-Norman heuristic 2: The system should speak the user's language with familiar words, phrases, and concepts rather than internal jargon Follow real-world conventions; present information in a natural and logical order Labels, terminology, icons, error messages, ordering of options Nielsen-Norman heuristic 3: Users need a clearly marked emergency exit to leave unwanted states without an extended dialogue Support undo and redo; provide cancel, back, and close affordances Destructive actions, wizards, modals, accidental navigation Nielsen-Norman heuristic 4: Users should not have to wonder whether different words, situations, or actions mean the same thing; follow platform and industry conventions Maintain internal consistency (within product) and external consistency (with platform conventions) Naming, layout, interaction patterns, component behavior Nielsen-Norman heuristic 5: Even better than good error messages is a careful design that prevents problems from occurring in the first place Eliminate error-prone conditions or surface a confirmation before users commit to an action Forms, destructive operations, irreversible actions, ambiguous input Nielsen-Norman heuristic 6: Minimize memory load by making elements, actions, and options visible; the user should not have to remember information across the interface Surface options rather than requiring recall; keep instructions visible or easily retrievable Navigation, search, multi-step processes, command interfaces Nielsen-Norman heuristic 7: Accelerators unseen by novices can speed up interaction for experts, letting the system serve both Offer shortcuts, defaults, and personalization without burdening new users Power-user workflows, repeated tasks, keyboard shortcuts Nielsen-Norman heuristic 8: Interfaces should not contain information that is irrelevant or rarely needed; every extra unit competes with the relevant units Prioritize content and features by relevance; reduce visual noise Dense dashboards, content-heavy pages, feature-laden screens Nielsen-Norman heuristic 9: Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution State what went wrong, why, and how to fix it; avoid codes without explanation Validation failures, system errors, failed operations Nielsen-Norman heuristic 10: It is best if the system needs no documentation, but help may be necessary; it should be easy to search, focused on the user's task, and concise Provide just-in-time, task-focused help; make it findable and actionable Complex features, first-run experiences, edge-case workflows Hick's Law: The time to make a decision increases logarithmically with the number and complexity of choices Reduce or group choices, use progressive disclosure, highlight recommended options Menus, pricing tables, settings, onboarding decisions Fitts's Law: The time to acquire a target is a function of the distance to and the size of the target Make important and frequent targets larger and closer to the pointer or thumb; use screen edges and corners Buttons, touch targets, primary actions, navigation Miller's Law: The average person can hold about seven (plus or minus two) items in working memory; commonly applied as a chunking principle Chunk content into meaningful groups rather than relying on a precise magic number Phone numbers, navigation groups, form sections, list grouping Jakob's Law: Users spend most of their time on other sites, so they prefer your site to work the same way as the others they already know Follow established conventions; deviate only with strong justification and clear benefit Navigation placement, icon meaning, interaction patterns, layout Tesler's Law (Conservation of Complexity): Every application has an inherent amount of complexity that cannot be removed, only moved between the system and the user Absorb complexity into the system where possible rather than offloading it onto users Configuration, smart defaults, automation, input parsing Doherty Threshold: Productivity soars when a system and its users interact at a pace (under ~400ms) that ensures neither has to wait on the other Keep response feedback under ~400ms; use perceived-performance techniques when actual work takes longer Interactions, transitions, data loading, input feedback Peak-End Rule: People judge an experience largely based on how they felt at its most intense point (peak) and at its end, rather than the average Design memorable positive peaks and a strong, satisfying ending; mitigate pain at critical moments Onboarding completion, checkout, error recovery, task completion Serial Position Effect: Users best remember the first (primacy) and last (recency) items in a series Place the most important items at the beginning and end of lists and navigation Navigation menus, lists, option ordering Aesthetic-Usability Effect: Users perceive aesthetically pleasing designs as more usable, and are more tolerant of minor usability problems Invest in visual quality, but do not let aesthetics mask genuine usability issues in testing First impressions, trust building, perceived quality Von Restorff Effect (Isolation Effect): When multiple similar objects are present, the one that differs from the rest is most likely to be remembered Visually distinguish the single most important action or piece of information; avoid emphasizing too many elements Primary call-to-action, highlighting, promotions, key data Zeigarnik Effect: People remember uncompleted or interrupted tasks better than completed ones Use progress indicators and visible incomplete states to encourage task completion Onboarding checklists, multi-step flows, profile completion Postel's Law (Robustness Principle): Be conservative in what you do, be liberal in what you accept from others Accept varied, imperfect user input gracefully while producing reliable, well-formed output Form input parsing, dates, phone numbers, flexible search WCAG POUR principle 1: Information and UI components must be presentable to users in ways they can perceive Provide text alternatives, captions, sufficient contrast, and content that adapts without losing meaning Text contrast 4.5:1 normal / 3:1 large text and UI components, alt text, captions, content reflow, do not rely on color alone Images, media, color usage, contrast, responsive content WCAG POUR principle 2: UI components and navigation must be operable by all users and input methods Ensure full keyboard operability, visible focus, adequate target size, and no keyboard traps Keyboard operability, visible focus indicator, target size (24x24 CSS px minimum at Level AA, SC 2.5.8; 44x44 enhanced at Level AAA, SC 2.5.5), no time-critical traps, no flashing beyond thresholds Navigation, interactive controls, focus management, motion WCAG POUR principle 3: Information and the operation of the UI must be understandable Use clear language, predictable behavior, consistent navigation, labels, instructions, and error identification Labels and instructions, error identification and suggestion, predictable behavior, consistent help (WCAG 2.2), readable language Forms, labels, error handling, navigation consistency WCAG POUR principle 4: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies Use valid, semantic structure and expose name, role, and value of UI components to assistive technology Semantic structure, valid markup, name/role/value exposed, status messages announced Custom components, dynamic content, assistive technology support Core Web Vital: Largest Contentful Paint measures loading performance; the largest content element should render quickly Target LCP 2.5 seconds or less; optimize images, server response, and render-blocking resources Initial page load, perceived speed, landing pages Core Web Vital: Interaction to Next Paint measures responsiveness across all interactions during a page visit Target INP 200 milliseconds or less; minimize main-thread work and long tasks Clicks, taps, key presses, interactive responsiveness Core Web Vital: Cumulative Layout Shift measures visual stability from unexpected layout movement Target CLS 0.1 or less; reserve space for media, ads, and dynamically injected content Image and ad loading, font swaps, late-injected UI Perceived performance is the user's subjective sense of speed, which can differ from measured performance and can be improved independently Use skeleton screens, optimistic UI, progressive and lazy loading, and immediate feedback to mask latency Network-bound operations, slow backends, large data sets Visual hierarchy guides the eye through content by order of importance using size, weight, color, contrast, spacing, and position Establish one clear focal point per view; use scale and contrast to signal priority Page layout, dashboards, landing pages, content design Gestalt principles describe how people perceive grouped visual elements as unified wholes Apply proximity, similarity, closure, continuity, common region, and figure/ground to communicate relationships Proximity (nearness implies grouping), similarity (alike elements group), closure (mind completes shapes), continuity (eye follows lines), common region (shared boundary groups), figure/ground (foreground vs background) Grouping, layout, spacing, card design, separators Readable typography depends on appropriate line length, line height, type scale, and contrast Keep line length around 45-75 characters; use comfortable line height; establish a consistent modular type scale Body text, articles, content-heavy interfaces Consistent spacing systems (commonly an 8pt grid) create rhythm, alignment, and visual coherence Use a consistent spacing scale; rely on white space to separate and group content Layout, component spacing, alignment, design systems Information architecture organizes, structures, and labels content so users can find information and complete tasks (findability and understandability) Match structure to user mental models; validate with card sorting and tree testing Site structure, navigation, taxonomy, content organization Form design minimizes effort and error through clear structure, sensible defaults, and immediate recovery support Prefer single-column layout, top-aligned labels, minimal fields, inline validation, and clear input affordances Sign-up, checkout, settings, data entry Feedback communicates the result and progress of user actions and the current state of the system Provide loading states, optimistic UI, progress indicators, empty states, confirmations, and undo Actions, transitions, asynchronous operations, edge states Microcopy is the small, functional text (labels, buttons, errors, hints) that guides users through an interface Be clear and specific; use a consistent voice and tone; write actionable, blame-free error messages and verb-based button labels Buttons, errors, empty states, tooltips, confirmations Onboarding and empty states shape the first-run experience and guide users toward initial value Use progressive disclosure and just-in-time guidance; make empty states instructive rather than blank dead ends First use, new accounts, no-data views, feature discovery Responsive and mobile design adapts layout and interaction to varied screen sizes and touch input Design mobile-first; ensure touch targets of at least 44x44px; respect thumb zones and reachability Multi-device support, touch interfaces, adaptive layouts Ethical UX respects user autonomy through transparency, honesty, and the absence of manipulative patterns Prevent errors, make consequences clear, and avoid dark patterns that exploit or deceive users Consent, pricing, subscriptions, cancellation, defaults Expert inspection of an interface against established usability heuristics to surface issues Do you need to find usability problems quickly without recruiting users? Run a heuristic evaluation against Nielsen-Norman's 10 heuristics, ideally with multiple evaluators Consider usability testing with real users for behavioral evidence For each screen, inspect against the 10 heuristics: - Visibility of system status: is feedback timely and clear? - Match with real world: is language familiar and jargon-free? - User control and freedom: are undo and exit available? - Consistency and standards: do conventions hold internally and externally? - Error prevention: are risky actions guarded or confirmed? - Recognition over recall: are options visible rather than memorized? - Flexibility and efficiency: are accelerators available for experts? - Aesthetic and minimalist design: is irrelevant content removed? - Error recovery: are messages plain and constructive? - Help and documentation: is help findable and task-focused? Multiple independent evaluators uncover substantially more issues than a single reviewer; consolidate findings before rating severity Rate identified usability issues on the established 0-4 severity scale to prioritize fixes Have you collected a list of usability issues that need prioritization? Apply the 0-4 severity scale weighing frequency, impact, and persistence First gather issues via heuristic evaluation or usability testing 0 = Not a usability problem 1 = Cosmetic only, fix if time permits 2 = Minor problem, low priority 3 = Major problem, high priority to fix 4 = Usability catastrophe, imperative to fix before release Weigh: how frequent, how much impact, how persistent the problem is. Prioritizing a backlog of usability findings before a release Systematic evaluation of an interface against WCAG success criteria across the POUR principles Does the interface need to meet accessibility standards or serve assistive-technology users? Run an accessibility audit covering Perceivable, Operable, Understandable, and Robust criteria Still verify baseline keyboard operability and contrast as a minimum Perceivable: text contrast 4.5:1 (3:1 large text/UI); meaningful alt text; captions; not relying on color alone; content reflows. Operable: fully keyboard operable; visible focus indicator; target size adequate; no keyboard traps; respects reduced motion. Understandable: every input has a programmatic label; errors are identified with suggestions; navigation is consistent; help is consistent. Robust: semantic structure; name, role, and value exposed to assistive tech; status messages are announced. Pre-release accessibility compliance check for a public web application Evaluate a form against established conventions for structure, validation, and recovery Are users completing a form, signup, or checkout flow? Review against single-column, minimal-field, inline-validation, smart-default conventions Use the broader heuristic evaluation for non-form interactions - Layout is single-column with top-aligned, persistent labels (not placeholder-only) - Only essential fields are requested; optional fields are marked - Validation is inline and timed to help, not punish, the user - Errors say what is wrong and how to fix it, near the field - Smart defaults, autocomplete, and correct input types reduce effort - Input accepts varied formats gracefully (Postel's Law) - The primary submit action is clear, labeled with a specific verb Reviewing a registration or checkout form before launch Assess both measured Core Web Vitals and perceived-performance techniques Does the experience feel slow, or do Core Web Vitals fall outside target thresholds? Review measured vitals and apply perceived-performance techniques to close the gap Establish baseline field metrics before optimizing Measured: LCP 2.5s or less, INP 200ms or less, CLS 0.1 or less. Perceived: provide feedback under the Doherty threshold (~400ms); use skeleton screens for content loading; apply optimistic UI for reversible actions; progressively load below-the-fold content; reserve layout space to avoid shift. Improving the responsiveness of a data-heavy dashboard or feed Validate that content structure and navigation match user mental models for findability Are users struggling to find content or navigate the product? Run card sorting to derive groupings and tree testing to validate findability Spot-check navigation labels and breadcrumbs against user terminology - Card sorting: users group and label content to reveal mental models - Tree testing: users locate items in the proposed hierarchy to measure findability - Navigation uses user language, consistent placement, and clear hierarchy - Breadcrumbs, search, and clear current-location cues support orientation Restructuring navigation for a growing content site or app

<best_practices> Meet minimum text contrast Ensure text and essential UI meet WCAG contrast ratios so content is perceivable Normal text: at least 4.5:1 against its background. Large text and UI components / graphical objects: at least 3:1. Never communicate meaning through color alone; pair with text, icon, or pattern.

Guarantee keyboard operability and visible focus Every interactive element must be reachable and operable by keyboard with a clearly visible focus indicator All actions reachable via Tab/Shift+Tab in a logical order. Focus indicator is always visible and high-contrast. No keyboard traps; modals trap focus only intentionally and return it on close. Prevent errors before they happen Design out error-prone conditions and confirm consequential or irreversible actions Constrain input to valid values; use correct input types and selection over free text. Confirm or require explicit intent before destructive actions; offer undo where possible. Provide timely system feedback Acknowledge every user action and communicate ongoing system state Respond to interactions within the Doherty threshold (~400ms) or show progress. Use loading, success, and error states; never leave an action without acknowledgment. Write actionable, blame-free error messages Errors should state the problem in plain language and offer a constructive path to recovery Good: "Your password needs at least 8 characters. Add a few more." Avoid: "Error 0x5: invalid input." or "You entered the password wrong." Place the message near the affected field and preserve the user's input. Reduce choices and cognitive load Apply Hick's Law and Miller's Law to limit and chunk decisions Group related options; reveal advanced choices progressively. Highlight a recommended default to reduce decision time. Chunk long sequences (numbers, steps) into meaningful groups. Follow established conventions Apply Jakob's Law by matching patterns users already know from other products Place navigation, search, and cart icons where users expect them. Use conventional icons with text labels; deviate only with clear benefit. Design clear visual hierarchy Use size, weight, contrast, spacing, and position to signal importance and guide the eye One primary call-to-action per view, visually distinct (Von Restorff Effect). Establish a single clear focal point; subordinate secondary content. Respect motion and reduced-motion preferences Provide a reduced-motion alternative for animation and avoid motion that can trigger discomfort Honor the operating-system reduced-motion preference. Avoid large parallax, autoplay motion, and flashing beyond safe thresholds. Make labels persistent and programmatic Every input needs a visible, persistent label that is also exposed to assistive technology Use top-aligned labels that remain visible while typing. Do not rely on placeholder text as the only label. Make empty states instructive Treat empty and first-run states as opportunities to guide users toward value Explain what the space is for, why it is empty, and the next action to take. Provide a clear primary action rather than a blank screen. Optimize typography for readability Set line length, line height, and type scale for comfortable reading Keep body line length around 45-75 characters. Use comfortable line height and a consistent modular type scale. Design memorable peaks and endings Apply the Peak-End Rule to shape how the experience is remembered Reduce friction at the most painful moment of a flow. End tasks with a clear, satisfying confirmation or moment of delight. Use a consistent spacing system Adopt a spacing scale (commonly an 8pt grid) and apply Gestalt grouping Use proximity and common region to group related elements. Apply consistent spacing increments for rhythm and alignment.

<anti_patterns> Text or essential UI with insufficient contrast against its background Meet at least 4.5:1 for normal text and 3:1 for large text and UI components; verify with a contrast checker

Removing or hiding the focus indicator, stranding keyboard and assistive-technology users Always provide a clearly visible, high-contrast focus indicator; restyle it rather than removing it Content that jumps as images, ads, fonts, or late content load, causing CLS and misclicks Reserve explicit space for media and dynamic content; keep CLS at or below 0.1 Using placeholder text as the only field label, which disappears on input and fails accessibility Use a persistent, programmatically associated label; reserve placeholders for example formatting only Manipulative tactics such as confirmshaming, forced continuity, and roach motel that exploit users Be transparent about costs and consequences; make opting out and cancelling as easy as opting in Interrupting users with frequent or stacked modal dialogs that break flow and trap focus Reserve modals for focused, blocking decisions; prefer inline UI, drawers, or non-blocking notifications otherwise Using infinite scroll where users need to find, return to, or compare specific items Use pagination or load-more with stable URLs and reachable footers for findability-critical content Disabling a button without explaining what is required to enable it Explain what is missing, or keep the control active and surface a clear validation message on attempt Hiding important content in auto-rotating carousels that users rarely see beyond the first slide Present key content directly and persistently; avoid burying primary messages in rotating panels Animation and motion with no reduced-motion alternative, risking discomfort and accessibility failures Honor reduced-motion preferences and provide a static or minimal-motion alternative Cite only established frameworks, laws, and standards; never fabricate heuristic names or numeric thresholds Prefer behavioral evidence (usability testing) over opinion when claims are contested Treat WCAG conformance as a baseline, not the ceiling, for inclusive design Improve perceived performance alongside measured performance, never as a substitute for fixing real latency Respect existing product and platform conventions unless deviation has a clear, tested benefit

<error_escalation inherits="core-patterns#error_escalation"> Minor inconsistency in spacing or label casing Form lacks inline validation or recovery guidance Key flow is not keyboard operable or fails contrast minimums Interface uses dark patterns or blocks assistive-technology users from completing a core task </error_escalation>

<related_agents> Verify design-system consistency and architecture-level UX decisions Review interface changes for usability and accessibility regressions Investigate and improve measured Core Web Vitals </related_agents>

Ground every recommendation in an established heuristic, law, or standard Treat accessibility (WCAG POUR) as a first-class requirement, not an add-on Distinguish measured performance from perceived performance Inventing heuristic names or numeric thresholds Recommending dark patterns or manipulative design Letting aesthetics substitute for tested usability

<related_skills> Companion design skill for player-facing experience, game feel, and game accessibility Define UX acceptance criteria and usability requirements before implementation Produce user guides, help content, and onboarding documentation Craft clear microcopy, help content, and UX writing </related_skills>