https://theuxshop.com/

1<!doctype html>
2<html lang="en" dir="ltr" class="plugin-pages plugin-id-default" 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">Practical UX Guidance | 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/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><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" property="og:title" content="Practical UX Guidance | The UX Shop"><meta data-rh="true" name="description" content="The UX Shop offers practical UX guidance, design patterns, and small tools for product teams and designers."><meta data-rh="true" property="og:description" content="The UX Shop offers practical UX guidance, design patterns, and small tools for product teams and designers."><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://theuxshop.com/"><link data-rh="true" rel="alternate" href="https://theuxshop.com/" hreflang="en"><link data-rh="true" rel="alternate" href="https://theuxshop.com/" hreflang="x-default">

6<script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span>  (default value)</p>\n   <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}document.addEventListener("DOMContentLoaded",function(){void 0===window.docusaurus&&insertBanner()})</script>

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 class="navbar__item navbar__link" 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"><main><section class="ux-hero"><h1 class="ux-hero__title">Practical UX guidance, patterns, and small tools</h1><p class="ux-hero__subtitle">A curated collection of design guidance, interaction patterns, and lightweight tools to help product teams ship thoughtful, accessible experiences.</p><div class="ux-hero__actions"><a class="ux-button ux-button--primary" href="/guides/ux-basics/">Start with UX Basics</a><a class="ux-button ux-button--secondary" href="/guides/">Browse All Guides</a></div></section><div class="container"><section style="margin-bottom:4rem"><h2>What you&#x27;ll find here</h2><p style="font-size:1.125rem;color:var(--ux-gray-600);max-width:680px">This site is a practice library for UX practitioners. We maintain guides on core UX principles, document common interaction patterns, and provide simple tools you can use during design reviews and usability testing.</p></section><section style="margin-bottom:4rem"><h2>Popular destinations</h2><div class="ux-card-grid"><div class="ux-card"><h3 class="ux-card__title">UX Basics</h3><p class="ux-card__description">Foundational concepts: user goals, constraints, feedback loops, and the iterative design process.</p><a class="ux-card__link" href="/guides/ux-basics/">Learn more →</a></div><div class="ux-card"><h3 class="ux-card__title">Accessibility Checklist</h3><p class="ux-card__description">A practical checklist organized by WCAG principles with testing steps you can follow today.</p><a class="ux-card__link" href="/guides/accessibility-checklist/">Learn more →</a></div><div class="ux-card"><h3 class="ux-card__title">Forms Patterns</h3><p class="ux-card__description">Input types, validation patterns, error handling, and mobile-friendly form design.</p><a class="ux-card__link" href="/patterns/forms/">Learn more →</a></div><div class="ux-card"><h3 class="ux-card__title">Heuristic Review Tool</h3><p class="ux-card__description">A printable checklist for conducting usability heuristic evaluations on any interface.</p><a class="ux-card__link" href="/tools/heuristic-review/">Learn more →</a></div><div class="ux-card"><h3 class="ux-card__title">Linear</h3><p class="ux-card__description">A precision measurement tool for checking spacing, alignment, and layout consistency.</p><a href="https://linear.theuxshop.com/" target="_blank" rel="noopener noreferrer" class="ux-card__link">Learn more →</a></div><div class="ux-card"><h3 class="ux-card__title">Newsletter</h3><p class="ux-card__description">Monthly updates on new patterns, tool improvements, and practical UX tips.</p><a class="ux-card__link" href="/newsletter/">Learn more →</a></div></div></section><section style="margin-bottom:4rem"><h2>Recent updates</h2><p style="color:var(--ux-gray-600);margin-bottom:1.5rem">See the full <a href="/changelog/">changelog</a> for all updates.</p><div class="ux-updates"><div class="ux-update"><div class="ux-update__date">Jan 2026</div><div class="ux-update__content"><div class="ux-update__title">Accessibility checklist expanded</div><div class="ux-update__description">Added WCAG 2.2 criteria and improved testing guidance.</div></div></div><div class="ux-update"><div class="ux-update__date">Dec 2025</div><div class="ux-update__content"><div class="ux-update__title">Linear keyboard shortcuts documented</div><div class="ux-update__description">Complete reference for all keyboard commands.</div></div></div><div class="ux-update"><div class="ux-update__date">Nov 2025</div><div class="ux-update__content"><div class="ux-update__title">Forms pattern library refreshed</div><div class="ux-update__description">New validation examples and mobile considerations.</div></div></div></div></section><section style="margin-bottom:4rem"><div class="ux-callout ux-callout--tip"><div class="ux-callout__title">Where to begin</div><div class="ux-callout__content"><p>If you&#x27;re new to UX or looking for a refresher, the<!-- --> <a href="/guides/ux-basics/">

11UX Basics guide</a> covers the core concepts that inform everything else on this site. From there, explore the<!-- --> <a href="/patterns/">patterns library</a> or try one of our<!-- --> <a href="/tools/">practical tools</a>.</p>              <p>Many UX teams also use AI transcription to process recorded usability sessions and research interviews. If you&#x27;re evaluating tools,<!-- --> <a href="https://diyai.io/studio/speech-to-text/">speech to text in DIY AI Studio</a> <!-- -->can help you compare options before committing to a transcription workflow.</p>              </div></div></section><section style="margin-bottom:4rem"><h2>Browse by category</h2><div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem"><a class="ux-button ux-button--secondary" style="justify-content:center" href="/guides/">📚 Guides</a><a class="ux-button ux-button--secondary" style="justify-content:center" href="/patterns/">🧩 Patterns</a><a class="ux-button ux-button--secondary" style="justify-content:center" href="/tools/">🛠️ Tools</a><a href="https://linear.theuxshop.com/" class="ux-button ux-button--secondary" style="justify-content:center">📐 Linear</a></div></section></div></main></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><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>

12<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>

12
13</body>
14</html>