https://theuxshop.com/patterns/

1<!doctype html>
2<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-patterns/index" data-has-hydrated="false">
3<head>
4<meta charset="UTF-8">
5<meta name="generator" content="Docusaurus v3.7.0">
6<title data-rh="true">Patterns | The UX Shop</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://theuxshop.com/img/hero/home-1600x900.jpg"><meta data-rh="true" name="twitter:image" content="https://theuxshop.com/img/hero/home-1600x900.jpg"><meta data-rh="true" property="og:url" content="https://theuxshop.com/patterns/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="UX, user experience, design patterns, accessibility, usability"><meta data-rh="true" name="theme-color" content="#2563eb"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Patterns | The UX Shop"><meta data-rh="true" name="description" content="Common UX interaction patterns with implementation guidance and accessibility considerations."><meta data-rh="true" property="og:description" content="Common UX interaction patterns with implementation guidance and accessibility considerations."><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://theuxshop.com/patterns/"><link data-rh="true" rel="alternate" href="https://theuxshop.com/patterns/" hreflang="en"><link data-rh="true" rel="alternate" href="https://theuxshop.com/patterns/" hreflang="x-default">

6<script src="/t/umami" async defer="defer" data-website-id="d22ea6b1-f9a6-4a82-b28a-9553bc41ff2d" data-api="/t/api/send"></script>

6<link rel="stylesheet" href="/assets/css/styles.a0ab86c0.css">

7<script src="/assets/js/runtime~main.37527ecc.js" defer="defer"></script>

7

8<script src="/assets/js/main.47e421ab.js" defer="defer"></script>

8
9</head>
10<body class="navigation-with-keyboard">

11<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script>

11<div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="The UX Shop" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="The UX Shop" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">The UX Shop</b></a><a class="navbar__item navbar__link" href="/about/">About</a><a class="navbar__item navbar__link" href="/guides/">Guides</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/patterns/">Patterns</a><a class="navbar__item navbar__link" href="/tools/">Tools</a><a href="https://linear.theuxshop.com/" target="_self" rel="noopener noreferrer" class="navbar__item navbar__link">Linear<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/newsletter/">Newsletter</a><a class="navbar__item navbar__link" href="/say-hi/">Contact</a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/patterns/">Patterns</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/navigation/">Navigation Patterns</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/forms/">Forms Patterns</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/onboarding/">Onboarding Patterns</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/interaction-feedback/">Interaction Feedback Patterns</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/error-states/">Error States Pattern</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/micro-interactions-feedback-language/">Micro-interactions: The Subtle UX Language for Feedback</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/multimodal-ui-patterns-zero-ui/">Multimodal UI Patterns: Best Practices for Voice &amp; Zero-UI</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/patterns/nostalgia-and-glassmorphism/">Nostalgia &amp; Glassmorphism: Retro Design Trends Revived</a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Patterns</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Patterns</h1></header>
12<p>Documented interaction patterns with implementation considerations, accessibility requirements, and practical examples. Each pattern addresses common design challenges with tested solutions.</p>
13<h2 class="anchor anchorWithStickyNavbar_LWe7" id="navigation">

13Navigation<a href="#navigation" class="hash-link" aria-label="Direct link to Navigation" title="Direct link to Navigation">​</a></h2>
14<div class="ux-card-grid"><div class="ux-card"><h3 class="ux-card__title">Navigation</h3><p class="ux-card__description">Primary, secondary, and mobile navigation patterns. Breadcrumbs, menus, and wayfinding.</p><a class="ux-card__link" href="/patterns/navigation/">Learn more →</a></div></div>
15<h2 class="anchor anchorWithStickyNavbar_LWe7" id="forms--input">Forms &amp; Input<a href="#forms--input" class="hash-link" aria-label="Direct link to Forms &amp; Input" title="Direct link to Forms &amp; Input">​</a></h2>
16<div class="ux-card-grid"><div class="ux-card"><h3 class="ux-card__title">Forms</h3><p class="ux-card__description">Input types, validation, error handling, and mobile-friendly form design.</p><a class="ux-card__link" href="/patterns/forms/">Learn more →</a></div></div>
17<h2 class="anchor anchorWithStickyNavbar_LWe7" id="user-flows">User Flows<a href="#user-flows" class="hash-link" aria-label="Direct link to User Flows" title="Direct link to User Flows">​</a></h2>
18<div class="ux-card-grid"><div class="ux-card"><h3 class="ux-card__title">Onboarding</h3><p class="ux-card__description">First-run experiences, progressive disclosure, and empty states.</p><a class="ux-card__link" href="/patterns/onboarding/">Learn more →</a></div></div>
19<h2 class="anchor anchorWithStickyNavbar_LWe7" id="feedback--states">Feedback &amp; States<a href="#feedback--states" class="hash-link" aria-label="Direct link to Feedback &amp; States" title="Direct link to Feedback &amp; States">​</a></h2>
20<div class="ux-card-grid"><div class="ux-card"><h3 class="ux-card__title">Interaction Feedback</h3><p class="ux-card__description">Loading states, progress indicators, microinteractions, and success confirmations.</p><a class="ux-card__link" href="/patterns/interaction-feedback/">Learn more →</a></div><div class="ux-card"><h3 class="ux-card__title">Error States</h3><p class="ux-card__description">Error messages, validation feedback, system errors, and recovery paths.</p><a class="ux-card__link" href="/patterns/error-states/">Learn more →</a></div></div>
21<div class="ux-callout ux-callout--note"><div class="ux-callout__title">About these patterns</div><div class="ux-callout__content"><p>Each pattern includes accessibility requirements, common variations, and things to watch out for. Patterns are starting points - adapt them to your specific context rather than applying them blindly.</p></div></div>
22<h2 class="anchor anchorWithStickyNavbar_LWe7" id="how-to-use-patterns">How to use patterns<a href="#how-to-use-patterns" class="hash-link" aria-label="Direct link to How to use patterns" title="Direct link to How to use patterns">​</a></h2>
23<p>Patterns solve common problems, but they&#x27;re not one-size-fits-all:</p>
24<ol>
25<li><strong>Understand the problem first</strong>: Make sure the pattern actually addresses your specific challenge</li>
26<li><strong>Consider your context</strong>: User expectations, platform conventions, and technical constraints all affect which variation works best</li>
27<li><strong>Test with users</strong>: Even well-documented patterns can fail in specific contexts</li>
28<li><strong>Adapt thoughtfully</strong>: Patterns can be modified, but understand why they work before changing them</li>
29</ol>
30<h2 class="anchor anchorWithStickyNavbar_LWe7" id="contributing-to-patterns">Contributing to patterns<a href="#contributing-to-patterns" class="hash-link" aria-label="Direct link to Contributing to patterns" title="Direct link to Contributing to patterns">​</a></h2>
31<p>If you&#x27;ve encountered a pattern that should be documented, or have improvements to existing patterns, email us at <a href="/cdn-cgi/l/email-protection#a8c0cdc4c4c7e8dcc0cdddd0dbc0c7d886cbc7c5" target="_blank" rel="noopener noreferrer"><span class="__cf_email__" data-cfemail="ff979a939390bf8b979a8a878c97908fd19c9092">[email&#160;protected]</span></a>.</p>
32<hr>
33<p><em>Looking for practical guidance? Check our <a href="/guides/">guides</a> for foundational concepts, or <a href="/tools/">tools</a> for checklists and templates.</em></p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/patterns/navigation/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Navigation Patterns</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#navigation" class="table-of-contents__link toc-highlight">Navigation</a></li><li><a href="#forms--input" class="table-of-contents__link toc-highlight">Forms &amp; Input</a></li><li><a href="#user-flows" class="table-of-contents__link toc-highlight">User Flows</a></li><li><a href="#feedback--states" class="table-of-contents__link toc-highlight">Feedback &amp; States</a></li><li><a href="#how-to-use-patterns" class="table-of-contents__link toc-highlight">How to use patterns</a></li><li><a href="#contributing-to-patterns" class="table-of-contents__link toc-highlight">Contributing to patterns</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links">

33<div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/about/">About</a></li><li class="footer__item"><a class="footer__link-item" href="/guides/">Guides</a></li><li class="footer__item"><a class="footer__link-item" href="/patterns/">Patterns</a></li><li class="footer__item"><a class="footer__link-item" href="/tools/">Tools</a></li><li class="footer__item"><a class="footer__link-item" href="/feedback/">Feedback</a></li></ul></div><div class="col footer__col"><div class="footer__title">Product</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://linear.theuxshop.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Linear<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/newsletter/">Newsletter</a></li><li class="footer__item"><a class="footer__link-item" href="/changelog/">Changelog</a></li><li class="footer__item"><a class="footer__link-item" href="/press/">Press</a></li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/privacy/">Privacy</a></li><li class="footer__item"><a class="footer__link-item" href="/terms/">Terms</a></li><li class="footer__item"><a class="footer__link-item" href="/security/">Security</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">© 2026 The UX Shop. All rights reserved.</div></div></div></footer></div>

33
34<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

34<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"178d7e76d9c54c9b806590fa30647995","r":1,"spa":2}' crossorigin="anonymous"></script>

34
35</body>
36</html>