Introduction to UX Design: Key Principles & Best Practices

<!doctype html> <html class="no-js " lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://www.hotjar.com/ux-design/","20210811233640","https://web.archive.org/","web","/_static/", "1628725000"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"/> <link rel="preconnect" href="https://web.archive.org/web/20210811233640/https://static-cms.hotjar.com/"> <title>Introduction to UX Design: Key Principles & Best Practices</title> <meta name="description" content="Here we define UX design and review key principles & best practices to create a flawless user experience."/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script> try { document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); } catch (error) {} </script> <script src="https://web.archive.org/web/20210811233640js_/https://unpkg.com/@optimizely/optimizely-sdk@3.5.0/dist/optimizely.browser.umd.min.js" class="optanon-category-2"></script> <script src="https://web.archive.org/web/20210811233640js_/https://cdn.optimizely.com/datafiles/HgHVKrf9ZD2dsZYVFb9JnD.json/tag.js" class="optanon-category-2"></script> <script type="text/javascript" src="/web/20210811233640js_/https://www.hotjar.com/static/js/ensureSegmentId.b1ccc23e7c19.js"></script> <script type="text/plain" class="optanon-category-2"> generateAnonymousUserId(); </script> <script type="text/plain" src="/web/20210811233640js_/https://www.hotjar.com/static/js/experiments.41b6b1363e4b.js" class="optanon-category-2"></script> <script data-ot-ignore type="text/javascript" src="/web/20210811233640js_/https://www.hotjar.com/static/js/persistUtmParams.25a17fe9b49b.js" class="optanon-category-0" async></script> <script type="text/plain" class="optanon-category-2"> !function () { var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://web.archive.org/web/20210811233640/https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";n.className += 'optanon-category-2';var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0"; window.analytics.load("g8Y7cpfGC4EhnMZjwbdsW57ZJNJ5GOr1") window.SEGMENT_EVENT_OPTIONS = { context: { ip: '0.0.0.0' } }; window.analytics.ready(function () { window.analytics.user().anonymousId(window.ANONYMOUS_SEGMENT_ID); window.analytics.page(undefined, undefined, undefined, window.SEGMENT_EVENT_OPTIONS); }); }}(); </script> <link rel="canonical" href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/"/> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-57x57.6e3af4aafac2.png"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-114x114.90e747bdcbf2.png"/> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-72x72.a9cb165c089b.png"/> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-144x144.b5a83b0f4655.png"/> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-60x60.c5731fa82032.png"/> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-120x120.3cba0d32f263.png"/> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-76x76.4cc162a1eac6.png"/> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/apple-touch-icon-152x152.f752d92b4d55.png"/> <link rel="icon" type="image/png" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/favicon-196x196.dc148f3028ec.png" sizes="196x196"/> <link rel="icon" type="image/png" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/favicon-96x96.8528f738dc58.png" sizes="96x96"/> <link rel="icon" type="image/png" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/favicon-32x32.507752edfef8.png" sizes="32x32"/> <link rel="icon" type="image/png" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/favicon-16x16.a2c27f0767c3.png" sizes="16x16"/> <link rel="icon" type="image/png" href="/web/20210811233640im_/https://www.hotjar.com/static/images/favicons/favicon-128.95bc5d43fb60.png" sizes="128x128"/> <meta name="application-name" content=" "/> <meta name="msapplication-TileColor" content="#FFFFFF"/> <meta name="msapplication-TileImage" content="mstile-144x144.png"/> <meta name="msapplication-square70x70logo" content="mstile-70x70.png"/> <meta name="msapplication-square150x150logo" content="mstile-150x150.png"/> <meta name="msapplication-wide310x150logo" content="mstile-310x150.png"/> <meta name="msapplication-square310x310logo" content="mstile-310x310.png"/> <meta name="google-site-verification" content="Ratei17eff9irAz_Gjt15tOkbqM87geJ-qhtYOl9xZQ"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@hotjar"/> <meta name="twitter:domain" content="www.hotjar.com"/> <meta name="twitter:title" content="Introduction to UX Design: Key Principles & Best Practices"/> <meta name="twitter:description" content=""> <meta property="twitter:image" content="https://static-cms.hotjar.com/images/01-UXHub-UX-design-Homepage.width-450.jpg"/> <meta property="fb:app_id" content="HotjarApps"/> <meta property="og:type" content="website"/> <meta property="og:url" content="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/"/> <meta property="og:title" content="Introduction to UX Design: Key Principles & Best Practices"/> <meta property="og:image" content="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/01-UXHub-UX-design-Homepage.width-450.jpg"/> <meta property="og:description" content=""/> <meta property="og:site_name" content="Hotjar"/> <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://web.archive.org/web/20210811233640/https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap"> <link rel="stylesheet" type="text/css" href="/web/20210811233640cs_/https://www.hotjar.com/static/css/main.4e495b1e9b02.css"> <style> .nav__link--alt-one, .nav__link--alt-one:hover, .hub-page__sidebar, .hub-menu, .button--global-cta, .button--blog-cta { background-color: #fd3a5c; } /* to remove default hover/focus background-color (red) from CTA buttons in Hubs */ .button--global-cta:hover, .button--global-cta:focus, .button--blog-cta:hover, .button--blog-cta:focus { background-color: #fd3a5c; } .button-menu-toggle__line { background-color: #ffffff; } .header--hub .nav__link--alt-one, .hub-menu__link, .hub-menu__link:hover, .global-cta:not(.global-cta--full) .button--global-cta, .button--blog-cta { color: #ffffff; } /* to remove default hover/focus color (red) from CTA buttons in Hubs */ .button--global-cta:hover, .button--global-cta:focus, .button--blog-cta:hover, .button--blog-cta:focus { color: #ffffff; } /* mobile header styles */ .header--hub .header__sticky-header { background-color: #fd3a5c; } @media only screen and (min-width: 981px) { .header--hub .header__sticky-header { background-color: white; } } .header__logo, .hub-menu__logo, .hub-menu__icon { fill: #ffffff; } .hub-menu__toggle-icon { stroke: #ffffff; } .button-menu-toggle, .button-menu-toggle--hub:hover, .button-menu-toggle--hub:active, .button-menu-toggle--hub:focus, .button-menu-toggle__line:hover, .button-menu-toggle__line:active, .button-menu-toggle__line:focus { border-color: #ffffff; } /* set progress-bar color using hub theme color */ .progress-bar::-webkit-progress-bar { background-color: transparent; /* set here otherwise overridden */ } .progress-bar::-webkit-progress-value { color: #fd3a5c; /* For IE */ background-color: #fd3a5c; } .progress-bar::-moz-progress-bar { background-color: #fd3a5c; } .hub-pagination__icon, .hub-note__icon, .hub-quote-block__icon { fill: #fd3a5c; } </style> </head> <body class="template-hub-index"> <noscript><iframe src="https://web.archive.org/web/20210811233640if_/https://www.googletagmanager.com/ns.html?id=GTM-N4F4J3" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="hub-heatmaps" viewbox="0 0 17 21"> <path d="M15.784 8.28c-1.04-1.746-.857-2.974-.848-3.018a.659.659 0 00-.246-.627.65.65 0 00-.665-.08 3.862 3.862 0 00-1.899 2.449 9.303 9.303 0 00-.27 1.367c-.18-.298-.344-.606-.493-.921-1.387-3.06-.74-6.633-.734-6.668a.662.662 0 00-.2-.61.642.642 0 00-.622-.145c-.171.047-4.17 1.27-5.116 6.373a12.33 12.33 0 00.145 4.876 4.071 4.071 0 01-1.133-1.246 10.908 10.908 0 01-.94-2.378.652.652 0 00-1.201-.155C1.497 7.61 0 10.32 0 12.831 0 17.563 3.496 21 8.423 21S17 17.563 17 12.83c0-1.955-.272-2.972-1.21-4.55h-.006z"></path> </symbol> <symbol id="hub-recordings" viewbox="0 0 21 13"> <path d="M15.75 3.467V2.6c0-1.436-1.175-2.6-2.625-2.6h-10.5C1.175 0 0 1.164 0 2.6v7.8C0 11.836 1.175 13 2.625 13h10.5c1.45 0 2.625-1.164 2.625-2.6v-.867L21 13V0l-5.25 3.467z"></path> </symbol> <symbol id="hub-nps" viewbox="0 0 21 17"> <path d="M4.714 0v14.67l4.322-3.144h4.142l-.786 3.144 4.192 2.095.874-5.239 1.74-.005a1.574 1.574 0 001.577-1.567V4.715c0-.867-.703-1.572-1.572-1.572H9.036L4.714 0zM2.852 7.756H.582a.582.582 0 010-1.165h2.27a.582.582 0 110 1.165M3.142 4.497a.58.58 0 01-.343-.112L.88 2.985a.582.582 0 01.686-.94l1.92 1.4a.582.582 0 01-.344 1.052M1.224 12.414a.581.581 0 01-.344-1.052l1.92-1.4a.582.582 0 01.686.94l-1.92 1.4a.579.579 0 01-.342.112"></path> </symbol> <symbol id="hub-usability" viewbox="0 0 19 18"> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.36 10.786H1.64V1.568h15.72v9.218zM1.188 0h16.624C18.47 0 19 .503 19 1.125V13.5c0 .622-.53 1.125-1.188 1.125h-4.75v2.25h1.188V18h-9.5v-1.125h1.187v-2.25h-4.75C.533 14.625 0 14.122 0 13.5V1.125C0 .503.532 0 1.188 0zm1.95 9.814a.533.533 0 00.765.043L8.106 5.97l2.538 2.316L15.8 3.994a.571.571 0 00.08-.786.53.53 0 00-.761-.084l-4.442 3.7L8.1 4.474 3.18 9.025a.571.571 0 00-.042.79z"></path> </symbol> <symbol id="hub-cx" viewbox="0 0 20 20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.565 8.864a1.15 1.15 0 110-2.3 1.15 1.15 0 010 2.3zm.33 3.79a3.941 3.941 0 01-.917 1.257c-.39.36-.843.644-1.347.841a4.477 4.477 0 01-1.641.307c-.569 0-1.12-.103-1.641-.306A4.262 4.262 0 017 13.91a3.95 3.95 0 01-.916-1.257.417.417 0 01.758-.347c.17.371.414.705.724.993.313.29.678.517 1.085.676.847.331 1.83.331 2.675 0 .407-.16.772-.387 1.085-.676a3.11 3.11 0 00.724-.993.417.417 0 11.758.347zm-8.37-4.94a1.15 1.15 0 112.301 0 1.15 1.15 0 01-2.3 0zM10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0z"></path> </symbol> <symbol id="hub-cro" viewbox="0 0 21 19"> <path d="M20.145.668l-4 .829 1.114 1.119-5.539 5.54-4.12-4.12-7.6 6.9.972 1.07 6.58-5.974L11.72 10.2l6.56-6.56 1.023 1.028.841-4zM18.012 6.37l-4.398 4.397v8.1h4.398V6.37z"></path> <path d="M1.629 13.86c-.016.015-.033.027-.05.04l-.013.01v4.957h4.398v-8.92L1.629 13.86zM11.988 18.867H7.59V8.532l4.398 4.343v5.992z"></path> </symbol> <symbol id="hub-website-analysis" viewbox="0 0 20 20"> <path d="M9.898 3.679a4.37 4.37 0 011.288 3.11.484.484 0 11-.968 0c0-.917-.357-1.778-1.004-2.426A3.409 3.409 0 006.788 3.36a.484.484 0 110-.968 4.37 4.37 0 013.11 1.288z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.973 12.97l.5-.5 5.367 5.365-2.004 2.005-5.367-5.367.502-.5-1.91-1.91a6.768 6.768 0 01-4.273 1.514 6.789 6.789 0 115.275-2.516l1.91 1.91zM1.453 6.788c0 1.426.554 2.766 1.562 3.774a5.302 5.302 0 003.773 1.563 5.302 5.302 0 003.774-1.563 5.301 5.301 0 001.563-3.774 5.3 5.3 0 00-1.563-3.773 5.3 5.3 0 00-3.774-1.563 5.301 5.301 0 00-3.773 1.563 5.301 5.301 0 00-1.563 3.773z"></path> </symbol> <symbol id="hub-google-analytics" viewbox="0 0 19 21"> <path d="M16.5 5a2.5 2.5 0 10-2.328-1.586l-3.758 3.758A2.493 2.493 0 009.5 7c-.65 0-1.242.248-1.686.654L5 6.517V6.5a2.5 2.5 0 10-.814 1.846L7 9.483V9.5a2.5 2.5 0 104.828-.914l3.758-3.758c.283.11.591.172.914.172zM0 14a2 2 0 012-2h1a2 2 0 012 2v5a2 2 0 01-2 2H2a2 2 0 01-2-2v-5zM9 14a2 2 0 00-2 2v3a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H9zM14 11a2 2 0 012-2h1a2 2 0 012 2v8a2 2 0 01-2 2h-1a2 2 0 01-2-2v-8z"></path> </symbol> <symbol id="hub-customer-journey" viewbox="0 0 20 19"> <path d="M19.9 10L10 .1.1 10l9.9 9.9 9.9-9.9z"></path> </symbol> <symbol id="hub-web-redesign" viewbox="0 0 20 19"> <path d="M19.9 10L10 .1.1 10l9.9 9.9 9.9-9.9z"></path> </symbol> <symbol id="hub-sow-analytics" viewbox="0 0 16 16"> <g data-name="layer"> <path d="M5.03 13h2v2h-2zM10.03 13h2v2h-2zM13.03 6h1v7h-1zM14.03 7h1v5h-1zM12.03 5h1v9h-1zM11.03 4h1v9h-1zM10.03 3h1v6h-1z"/> <path d="M10.03 3h1v7h-1zM8.03 3h1v8h-1z"/> <path d="M7.03 2h1v9h-1zM6.03 4h1v6h-1zM9.03 2h1v9h-1zM6.03 1h3v1h-3z"/> <path d="M8.03 2h1v2h-1zM2.03 7.86h1v4.29h-1z"/> <path d="M3.03 7h1v6h-1zM4.03 6h1v8h-1zM5.03 5h1v8h-1z"/> </g> </symbol> <symbol id="hub-saas-guide" viewbox="0 0 17 21"> <path d="M15.784 8.28c-1.04-1.746-.857-2.974-.848-3.018a.659.659 0 00-.246-.627.65.65 0 00-.665-.08 3.862 3.862 0 00-1.899 2.449 9.303 9.303 0 00-.27 1.367c-.18-.298-.344-.606-.493-.921-1.387-3.06-.74-6.633-.734-6.668a.662.662 0 00-.2-.61.642.642 0 00-.622-.145c-.171.047-4.17 1.27-5.116 6.373a12.33 12.33 0 00.145 4.876 4.071 4.071 0 01-1.133-1.246 10.908 10.908 0 01-.94-2.378.652.652 0 00-1.201-.155C1.497 7.61 0 10.32 0 12.831 0 17.563 3.496 21 8.423 21S17 17.563 17 12.83c0-1.955-.272-2.972-1.21-4.55h-.006z"></path> </symbol> <symbol id="hub-generic" viewbox="0 0 20 19"> <path d="M19.9 10L10 .1.1 10l9.9 9.9 9.9-9.9z"></path> </symbol> <symbol id="hub-quote" viewbox="0 0 17 25"> <path d="M2.11 12.001A7.71 7.71 0 000 17.316C0 21.56 3.395 25 7.584 25c4.188 0 7.584-3.44 7.584-7.684 0-3.348-2.114-6.195-5.063-7.248L17 3.07 13.935 0 2.11 12.001z"></path> </symbol> <symbol id="hub-arrow-right" viewbox="0 0 34 26"> <path d="M32.734 11.665L20.384.94a1.659 1.659 0 0 0-2.26.008l-.004.005a1.53 1.53 0 0 0 .003 2.225l.009.008 9.47 8.229H2.143c-.885 0-1.642.694-1.642 1.59 0 .898.757 1.592 1.643 1.592h25.46l-9.47 8.217-.009.008a1.53 1.53 0 0 0 0 2.23 1.66 1.66 0 0 0 2.26.009L32.727 14.34a1.29 1.29 0 0 0 .291-.2c.329-.308.484-.728.479-1.13l-.5.007.002-.011.5.002a1.573 1.573 0 0 0-.476-1.145l-.002-.002a1.019 1.019 0 0 0-.212-.155l-.067-.037-.01-.004z"></path> </symbol> <symbol id="hub-arrow-up" viewbox="0 0 14 10"> <path d="M4.469 3.7L7.004.808l2.34 2.752 3.63 4.177a1 1 0 01-1.51 1.312L7.002 3.916 2.267 8.994A1 1 0 11.805 7.63L4.469 3.7z"></path> </symbol> <symbol id="hub-oval" viewbox="0 0 20 20"> <path d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10z"></path> </symbol> <symbol id="hub-rectangle" viewbox="0 0 20 20"> <path d="M19.9 10L10 .1.1 10l9.9 9.9 9.9-9.9z"></path> </symbol> <symbol id="product-tour-surveys" viewbox="0 0 96 96"> <defs></defs><g id="surveys_filled" data-name="surveys filled"><path d="M37.94 52V24.64A28 28 0 0015.91 52z"/><path d="M42 53.11l30.14 19.33a32.83 32.83 0 008-21.43c0-18.27-14.82-35.1-33.09-35.1a31.84 31.84 0 00-4.92.36z"/><path d="M39 56H16.23a28 28 0 0047.45 15.9l.07-.1z"/></g> </symbol> <symbol id="product-tour-forms" viewbox="0 0 96 96"> <defs></defs><g id="forms_copy" data-name="forms copy"><path d="M44.24 66.6l-16.32 1.47 1.49-16.3 30.11-30.11H17.33v56.93h57.09V36.41L44.24 66.6z"/><path d="M33.99 53.11l8.9 8.9-10.38 1.47 1.48-10.37z"/><path d="M59.2 27.9l8.9 8.9-22.24 22.23-8.9-8.9L59.2 27.9z"/><path d="M68.1 19l8.9 8.9-5.93 5.93-8.9-8.88L68.1 19z"/></g> </symbol> <symbol id="product-tour-funnels" viewbox="0 0 96 96"> <path d="M76.58 17.22H19.42v.2a3.28 3.28 0 000 6.19v.21L45.8 59v19.78l4.4-4.39V59l26.38-35.19v-.2a3.28 3.28 0 000-6.19v-.2zm0 0" fill-rule="evenodd"/> </symbol> <symbol id="product-tour-heatmaps" viewbox="0 0 96 96"> <path d="M72.64 40.53c-3.52-5.87-2.9-10-2.87-10.15A2.21 2.21 0 0066.69 28a13 13 0 00-6.42 8.24 31.15 31.15 0 00-.91 4.6 34.83 34.83 0 01-1.67-3.1c-4.69-10.29-2.5-22.31-2.48-22.43a2.22 2.22 0 00-.68-2.05 2.18 2.18 0 00-2.1-.49c-.58.16-14.1 4.27-17.3 21.44a41.27 41.27 0 00.49 16.4 13.72 13.72 0 01-3.83-4.19 36.58 36.58 0 01-3.18-8 2.2 2.2 0 00-1.85-1.63 2.23 2.23 0 00-2.21 1.11c-.22.38-5.28 9.49-5.28 17.94 0 15.92 11.82 27.48 28.48 27.48s29-11.56 29-27.48c0-6.58-.92-10-4.09-15.31zm0 0" fill-rule="evenodd"/> </symbol> <symbol id="product-tour-feedback" viewbox="0 0 96 96"> <path d="M80.08 11.69H6a1.73 1.73 0 00-1.56 2.49l6.72 13.89V74c0 5.67 5.21 10.28 11.62 10.28h57.3C86.49 84.31 91.7 79.7 91.7 74V22c0-5.7-5.21-10.31-11.62-10.31zM34.76 40a3.51 3.51 0 113.5 3.5 3.51 3.51 0 01-3.5-3.5zM52 63.25c-6.43 0-11.64-4.83-11.64-10.78h23.31c0 5.95-5.22 10.78-11.67 10.78zm13.84-19.79a3.51 3.51 0 113.5-3.5 3.5 3.5 0 01-3.5 3.5z"/> </symbol> <symbol id="product-tour-polls" viewbox="0 0 96 96"> <path d="M82.66 11.61H13.34a1.74 1.74 0 00-1.73 1.73v69.32a1.74 1.74 0 001.73 1.73h69.32a1.74 1.74 0 001.73-1.73V13.34a1.74 1.74 0 00-1.73-1.73zm-46.56 60a1.73 1.73 0 01-1.73 1.73H24.22a1.73 1.73 0 01-1.73-1.73V60a1.74 1.74 0 011.73-1.74h10.15A1.74 1.74 0 0136.1 60zm18.11 0a1.73 1.73 0 01-1.73 1.73H42.34a1.73 1.73 0 01-1.74-1.73V27a1.74 1.74 0 011.74-1.74h10.14A1.74 1.74 0 0154.21 27zm18.11 0a1.72 1.72 0 01-1.73 1.73H60.45a1.72 1.72 0 01-1.73-1.73V39.4a1.73 1.73 0 011.73-1.74h10.14a1.73 1.73 0 011.73 1.74z"/> </symbol> <symbol id="product-tour-recordings" viewbox="0 0 96 96"> <path d="M66 37.49v-3a9 9 0 00-9-9H21a9 9 0 00-9 9v27a9 9 0 009 9h36a9 9 0 009-9v-3l18 12v-45l-18 12zm0 0" fill-rule="evenodd"/> </symbol> <symbol id="product-tour-recruiters" viewbox="0 0 96 96"> <defs></defs><g id="recruiters-filled"><path d="M73.63 79.75a2.13 2.13 0 01-1.63.65 2.17 2.17 0 01-1.67-.65l-4.65-4.64a2.23 2.23 0 010-3.17 2.26 2.26 0 013.16 0L72 75.11l10.52-10.56A12.4 12.4 0 1085 68.39z"/><path d="M57.12 72.74a15.81 15.81 0 014.54-11.09c-3.56-.87-6.67-1.56-7.94-1.84 8-4.48 12.93-15.21 12.93-25.29 0-13.14-3.81-23.78-21-23.78s-21 10.64-21 23.78c0 10.1 5 20.89 13 25.31-4.08.91-21.38 4.75-23.4 6.64-3.65 3.42-5.12 13.67-1.48 18.79H63.2a15.85 15.85 0 01-6.08-12.52z"/></g> </symbol> <symbol id="magnifying-glass" viewbox="0 0 250.313 250.313"> <path d="M244.186,214.604l-54.379-54.378c-0.289-0.289-0.628-0.491-0.93-0.76c10.7-16.231,16.945-35.66,16.945-56.554C205.822,46.075,159.747,0,102.911,0S0,46.075,0,102.911c0,56.835,46.074,102.911,102.91,102.911c20.895,0,40.323-6.245,56.554-16.945c0.269,0.301,0.47,0.64,0.759,0.929l54.38,54.38c8.169,8.168,21.413,8.168,29.583,0C252.354,236.017,252.354,222.773,244.186,214.604z M102.911,170.146c-37.134,0-67.236-30.102-67.236-67.235c0-37.134,30.103-67.236,67.236-67.236c37.132,0,67.235,30.103,67.235,67.236C170.146,140.044,140.043,170.146,102.911,170.146z"></path> </symbol> <symbol id="comment" viewbox="0 0 512 512"> <path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"></path> </symbol> <symbol id="twitter" viewbox="0 0 26 21"> <path d="M25.188 0L22.75 1.612l-.475.234C21.307.726 19.887 0 18.281 0 15.364 0 13 1.942 13 4.836c0 .395.051 1.177.134 1.54L13 6.447S2.437 4.836 1.625.806c0 0-2.438 4.03 1.625 7.254 0 0-1.625.806-2.438 0 0 0 0 2.418 4.063 4.835 0 0-1.625.806-2.438 0 0 0 3.25 3.224 4.876 3.224 0 0 0 2.418-7.313 2.418 0 0 9.245 6.045 17.875-.806 4.387-3.482 5.455-7.89 5.512-11.219.104-.41.175-.83.175-1.273v-.403L26 2.418l-2.438.806L25.188 0z"></path> </symbol> <symbol id="facebook" viewbox="0 0 14 26"> <path d="M8.75 9.528L8.6 6.693c0-1.37.364-2.35 2.311-2.35h3.037v-4.1C13.518.183 12.616 0 10.901 0 7.319 0 4.28 2.41 4.28 6.459l.094 3.069H0v4.335h4.375V26H8.75V13.863h4.375L14 9.528H8.75"></path> </symbol> <symbol id="linkedin" viewbox="0 0 448 512"> <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path> </symbol> <symbol id="email" viewbox="0 0 512 512"> <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path> </symbol> <symbol id="home" viewbox="0 0 512 512"> <path d="M506.555,208.064L263.859,30.367c-4.68-3.426-11.038-3.426-15.716,0L5.445,208.064 c-5.928,4.341-7.216,12.665-2.875,18.593s12.666,7.214,18.593,2.875L256,57.588l234.837,171.943c2.368,1.735,5.12,2.57,7.848,2.57 c4.096,0,8.138-1.885,10.744-5.445C513.771,220.729,512.483,212.405,506.555,208.064z"></path> <path d="M442.246,232.543c-7.346,0-13.303,5.956-13.303,13.303v211.749H322.521V342.009c0-36.68-29.842-66.52-66.52-66.52 s-66.52,29.842-66.52,66.52v115.587H83.058V245.847c0-7.347-5.957-13.303-13.303-13.303s-13.303,5.956-13.303,13.303v225.053 c0,7.347,5.957,13.303,13.303,13.303h133.029c6.996,0,12.721-5.405,13.251-12.267c0.032-0.311,0.052-0.651,0.052-1.036v-128.89 c0-22.009,17.905-39.914,39.914-39.914s39.914,17.906,39.914,39.914v128.89c0,0.383,0.02,0.717,0.052,1.024 c0.524,6.867,6.251,12.279,13.251,12.279h133.029c7.347,0,13.303-5.956,13.303-13.303V245.847 C455.549,238.499,449.593,232.543,442.246,232.543z"></path> </symbol> <symbol id="close" viewbox="0 0 352 512"> <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path> </symbol> <symbol id="arrow" viewbox="0 0 14 9"> <path d="M1.5 1L7 7l5.5-6" fill-rule="nonzero" stroke-width="2" fill="none" stroke-linecap="round"></path> </symbol> <symbol id="arrow--alt" viewbox="0 0 10 13"> <path d="M4.707.623c-.024.024-.036.055-.053.084L.617 5.357a.434.434 0 0 0 0 .592c.159.164.408.164.564 0l3.412-3.927v10.05a.42.42 0 0 0 .41.428.42.42 0 0 0 .408-.429V2.021L8.82 5.95c.155.164.41.164.565 0a.435.435 0 0 0 0-.592L5.346.707c-.017-.029-.029-.06-.054-.084A.384.384 0 0 0 5.006.5L5.002.5c-.11 0-.213.04-.295.123z"></path> </symbol> <symbol id="double-quotes" viewbox="0 0 122 86.02"> <path d="M48.74 0l-41 41a26.36 26.36 0 1 0 27.62-6.15l24.11-24.12zm49.13 34.86L122 10.73 111.27 0l-41 41a26.37 26.37 0 1 0 27.62-6.15z"/> </symbol> <symbol id="tick-circle" viewbox="0 0 3168 3168" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"> <path d="M1584 0c875 0 1584 709 1584 1584s-709 1584-1584 1584S0 2459 0 1584 709 0 1584 0zM879 1745c-20-18-31-43-32-69-1-25 7-51 25-72 0 0 0-1 1-1 18-20 43-31 69-32 25-1 52 7 72 26l334 303 801-839c19-20 44-30 70-31s51 8 71 28c20 19 30 44 31 70s-8 51-28 72l-869 910-2 2c-18 18-43 28-67 29-25 1-51-8-71-26l-406-368z"></path> </symbol> <symbol id="logo--colorable" viewbox="0 0 733 352"> <path d="M46.3 175.5c4.2-2.9 14.2-7.4 25.3-7.4 12.2 0 15.9 7.1 15.9 17.6v78.2c0 8.8 4.3 13 13.1 13H120c8.8 0 13.1-4.2 13.1-13v-85c0-27.2-11.1-47.6-49.8-47.6-15.7 0-27 4-37 9.1V77.5c0-8.8-4.3-13-13.1-13H13.9C5.1 64.5.8 68.7.8 77.5V264c0 8.8 4.3 13 13.1 13h19.3c8.8 0 13.1-4.2 13.1-13v-88.5z"></path><path d="M219.2 167.6c15.6 0 21.3 10.2 21.3 38.5s-5.7 38.5-21.3 38.5c-15.7 0-21.3-10.2-21.3-38.5 0-28.4 5.7-38.5 21.3-38.5zm0 113.3c52.6 0 66.8-30.6 66.8-74.8 0-44.2-14.2-74.8-66.8-74.8-52.6 0-66.9 30.6-66.9 74.8 0 44.2 14.3 74.8 66.9 74.8z" fill-rule="nonzero"></path><path d="M317 136.7l-12.8 3.4c-8.2 2.3-11.4 6-11.4 13.3v6.5c0 8.8 4.3 13 13.1 13H317v57.8c0 33.4 14.5 50.2 54.9 50.2 5.4 0 10-.5 12.8-1.1 6-1.1 11.7-5.9 11.7-14.2v-9.3c0-7.4-5.7-11.9-12.2-11.9h-2.9c-14.5 0-18.8-6.3-18.8-17.3V173h22.2c8.8 0 13.1-4.2 13.1-13v-11.6c0-8.8-4.3-13-13.1-13h-22.2v-23.8c0-8.8-5.1-14.7-17.1-11.6l-14.8 4c-10.3 2.9-13.7 6-13.7 14.2v18.5h.1zM473.9 148.3c0-8.8-4.2-13-13.1-13h-19.1c-8.8 0-13.1 4.2-13.1 13v146.3c0 13.3-8.3 17.8-16.5 18.7-10.3 1.1-12.8 6.6-12.8 12.8v13c0 8.5 6.6 12.7 17.1 12.7 29.3 0 57.5-15.3 57.5-53.8V148.3z"></path><path d="M574.8 211.5v31.4c-4.6 4.5-12.3 6.8-20.5 6.8-9.7 0-16.5-6.3-16.5-16.7 0-11.1 5.1-17.3 17.9-19l19.1-2.5zM558 167.9c12.2 0 16.8 3.4 16.8 9.9v9.1l-25.9 2.6c-25.6 2.6-53.7 8.2-53.7 46.5 0 21.3 12.2 45.1 48.4 45.1 17.1 0 31.6-5.7 41.8-14.7l1.1 2c3.7 6.5 6.3 8.8 13.4 8.8h6c8.8 0 13.1-4.2 13.1-13v-79.1c0-31.7-9.7-53.6-60.9-53.6-18.5 0-35.5 4-43.8 6.5-5.7 1.7-10.2 6-10.2 15v7.7c0 8.5 6.5 15.3 17.9 12.8 3.9-1.1 20.9-5.6 36-5.6z" fill-rule="nonzero"></path><path d="M733 144c0-7.9-4-12.7-16.8-12.7-16.5 0-34.1 7.4-41.2 14.2-4-7.1-4.9-10.2-12.8-10.2h-7.1c-8.8 0-13.1 4.2-13.1 13v115.6c0 8.8 4.3 13 13.1 13h19.3c8.8 0 13.1-4.2 13.1-13v-87c3.7-3.4 16.8-8.2 32.7-8.2 8 0 12.8-4.5 12.8-13V144zM493.1 37.2C476.4 6.9 427.3.3 427.3.3S450 25.5 421 45.5c-18.3 12.6-25.6 29-17.7 46.8 6 13.7 18.7 19.3 32.4 21.3-3.5-6.8-4.4-16.5-1.8-26.6.3-1 .5-2.1.9-3 3.8 5.9 10.1 9.2 16.3 7.7 8.4-2.1 13.4-12.2 11.1-22.7-.5-2.4-1.4-4.5-2.5-6.5.3.1.7.1 1 .2 10.5 3 15.6 18.7 11.3 35.1-1.4 5.3-3.6 10.1-6.3 13.9 18-5.8 30.1-20.3 33.4-33.3 3.4-13.5.7-29.1-6-41.2z"></path> </symbol> <symbol id="logo" viewbox="0 0 733 352"> <path d="M46.29,175.51 C53.8940931,170.789885 62.6408687,168.231539 71.59,168.11 C83.82,168.11 87.52,175.21 87.52,185.68 L87.52,263.92 C87.52,272.7 91.8,276.92 100.62,276.92 L120,276.92 C128.82,276.92 133.11,272.67 133.11,263.92 L133.11,178.87 C133.11,151.67 122.01,131.28 83.32,131.28 C70.4207916,131.159589 57.6980407,134.28182 46.32,140.36 L46.32,77.43 C46.32,68.65 42.04,64.43 33.22,64.43 L13.86,64.43 C5.04,64.43 0.75,68.68 0.75,77.43 L0.75,263.92 C0.75,272.7 5.04,276.92 13.86,276.92 L33.19,276.92 C42.01,276.92 46.29,272.67 46.29,263.92 L46.29,175.51 Z" fill="#1D1D1B"></path> <path d="M219.23,167.56 C234.87,167.56 240.54,177.74 240.54,206.11 C240.54,234.48 234.87,244.62 219.23,244.62 C203.59,244.62 197.89,234.45 197.89,206.11 C197.89,177.77 203.56,167.56 219.23,167.56 Z M219.23,280.9 C271.84,280.9 286.08,250.3 286.08,206.11 C286.08,161.92 271.84,131.28 219.23,131.28 C166.62,131.28 152.35,161.89 152.35,206.11 C152.35,250.33 166.59,280.9 219.23,280.9 Z" fill="#1D1D1B"></path> <path d="M317,136.66 L304.18,140.07 C295.95,142.34 292.8,146.07 292.8,153.39 L292.8,159.91 C292.8,168.7 297.08,172.91 305.91,172.91 L317,172.91 L317,230.72 C317,264.14 331.5,280.87 371.91,280.87 C376.196339,280.903014 380.475955,280.524613 384.69,279.74 C391.569932,278.586321 396.550767,272.543648 396.37,265.57 L396.37,256.23 C396.37,248.84 390.66,244.34 384.14,244.34 L381.28,244.34 C366.79,244.34 362.5,238.08 362.5,227.02 L362.5,172.94 L384.69,172.94 C393.51,172.94 397.8,168.7 397.8,159.94 L397.8,148.27 C397.8,139.48 393.51,135.27 384.69,135.27 L362.48,135.27 L362.48,111.47 C362.48,102.68 357.36,96.75 345.42,99.87 L330.63,103.82 C320.38,106.67 316.98,109.82 316.98,117.99 L317,136.66 Z" fill="#1D1D1B"></path> <path d="M473.92,148.27 C473.92,139.48 469.67,135.27 460.85,135.27 L441.78,135.27 C432.96,135.27 428.71,139.51 428.71,148.27 L428.71,294.52 C428.71,307.81 420.44,312.35 412.2,313.19 C401.95,314.33 399.39,319.74 399.39,325.97 L399.39,338.97 C399.39,347.46 405.94,351.71 416.45,351.71 C445.77,351.71 473.92,336.41 473.92,297.9 L473.92,148.27 Z" fill="#1D1D1B"></path> <path d="M574.81,211.49 L574.81,242.94 C570.24,247.48 562.55,249.75 554.31,249.75 C544.65,249.75 537.8,243.49 537.8,233.02 C537.8,221.96 542.93,215.74 555.74,214.02 L574.81,211.49 Z M558,167.86 C570.23,167.86 574.8,171.22 574.8,177.74 L574.8,186.82 L548.88,189.38 C523.3,191.94 495.14,197.58 495.14,235.84 C495.14,257.11 507.37,280.9 543.51,280.9 C560.56,280.9 575.06,275.23 585.31,266.19 L586.45,268.19 C590.14,274.71 592.71,276.98 599.81,276.98 L605.81,276.98 C614.63,276.98 618.88,272.73 618.88,263.98 L618.88,184.84 C618.88,153.1 609.22,131.28 558,131.28 C543.160118,131.39106 528.409378,133.58583 514.18,137.8 C508.51,139.48 503.97,143.8 503.97,152.8 L503.97,160.45 C503.97,168.98 510.48,175.75 521.87,173.23 C525.87,172.36 542.93,167.86 558,167.86 Z" fill="#1D1D1B"></path> <path d="M733,144 C733,136.09 729,131.26 716.2,131.26 C699.72,131.26 682.08,138.62 674.98,145.43 C670.98,138.36 670.11,135.22 662.16,135.22 L655.06,135.22 C646.24,135.22 641.95,139.46 641.95,148.22 L641.95,263.92 C641.95,272.7 646.24,276.92 655.06,276.92 L674.39,276.92 C683.21,276.92 687.5,272.67 687.5,263.92 L687.5,176.92 C691.19,173.51 704.26,168.72 720.19,168.72 C728.19,168.72 733,164.18 733,155.72 L733,144 Z" fill="#1D1D1B"></path> <path d="M493.1,37.16 C476.37,6.89 427.28,0.26 427.28,0.26 C427.28,0.26 449.94,25.48 420.98,45.44 C402.68,58.03 395.43,74.39 403.27,92.26 C409.27,105.95 421.97,111.51 435.67,113.6 C432.15,106.83 431.27,97.05 433.87,87.02 C434.13,86.02 434.42,84.97 434.75,84.02 C438.59,89.96 444.89,93.21 451.04,91.71 C459.46,89.71 464.4,79.52 462.1,69.05 C461.574483,66.7790133 460.722274,64.5962804 459.57,62.57 C459.9,62.65 460.23,62.68 460.57,62.79 C471.08,65.79 476.16,81.5 471.92,97.9 C470.663774,102.867396 468.544924,107.575576 465.66,111.81 C483.7,106 495.7,91.45 499,78.49 C502.48,65 499.84,49.28 493.1,37.16 Z" fill="#FD3A5C"></path> </symbol> </svg> <div class="hub-page"> <div class="hub-page__sidebar" data-hub-menu> <div class="hub-page__sidebar-inner"> <nav class="hub-menu" aria-label="Secondary"> <ul> <li> <a href="/web/20210811233640/https://www.hotjar.com/" class="hub-menu__link hub-menu__link--home" title="home page"> <svg class="hub-menu__logo" aria-hidden="true"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#logo--colorable"></use> </svg> </a> </li> <li class="hub-menu__list-item"> <a class="hub-menu__link hub-menu__link--current" href="/web/20210811233640/https://www.hotjar.com/ux-design/"> <svg class="hub-menu__icon" aria-hidden="true" fill="#ffffff"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#hub-generic"></use> </svg> UX Design Guide </a> </li> <li class="hub-menu__list-item"> <a class="hub-menu__link " href="/web/20210811233640/https://www.hotjar.com/ux-design/tools/"> <span class="hub-menu__parent-text">UX tools</span> </a> <span class="hub-menu__divider"></span> </li> <li class="hub-menu__list-item"> <a class="hub-menu__link " href="/web/20210811233640/https://www.hotjar.com/ux-design/analysis/"> <span class="hub-menu__parent-text">UX analysis</span> </a> <span class="hub-menu__divider"></span> </li> <li class="hub-menu__list-item"> <a class="hub-menu__link " href="/web/20210811233640/https://www.hotjar.com/ux-design/surveys/"> <span class="hub-menu__parent-text">UX surveys</span> </a> <span class="hub-menu__divider"></span> </li> <li class="hub-menu__list-item"> <a class="hub-menu__link " href="/web/20210811233640/https://www.hotjar.com/ux-design/metrics/"> <span class="hub-menu__parent-text">UX metrics</span> </a> <span class="hub-menu__divider"></span> </li> </ul> </nav> </div> </div> <div class="hub-page__content"> <header class="header header--hub"> <div class="header__sticky-header" data-header> <div class="header__inner wrapper--hub-header "> <a href="/web/20210811233640/https://www.hotjar.com/" class="header__logo-link header__logo-link--hubs" title="Home page"> <svg class="header__logo"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#logo--colorable"></use> </svg> </a> <div class="header__menu-open"> <span class="hidden">Menu</span> <button class="button-menu-toggle button-menu-toggle--hub" data-hub-menu-toggle aria-haspopup="true" aria-label="Mobile menu open"> <span class="button-menu-toggle__line"></span> <span class="button-menu-toggle__line"></span> <span class="button-menu-toggle__line"></span> </button> </div> <section class="header__menus header__menus--desktop"> <svg style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-heatmaps-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6575 6.35431C18.6485 6.40231 18.437 7.72513 19.6295 9.60278C20.708 11.2955 21.0185 12.3953 21.0185 14.5016C21.0185 19.5981 16.8845 23.2955 11.1875 23.2955C5.53248 23.2955 1.52148 19.5967 1.52148 14.5016C1.52148 11.7967 3.24048 8.88278 3.31398 8.76137C3.46398 8.51008 3.75648 8.37596 4.06248 8.4056C4.36548 8.44372 4.61448 8.64843 4.69248 8.92655C4.69698 8.94349 5.16048 10.5797 5.77248 11.4889C6.18348 12.0974 6.59898 12.5308 7.06848 12.8301C6.75048 11.5341 6.50748 9.58302 6.90348 7.58255C7.98948 2.08937 12.575 0.773605 12.7715 0.72137C13.0265 0.652194 13.292 0.712899 13.4855 0.878076C13.676 1.04325 13.763 1.29313 13.7135 1.53455C13.7133 1.53575 13.7125 1.54071 13.7109 1.54931C13.6636 1.81413 13.0006 5.5228 14.558 8.69643C14.705 8.99431 14.9075 9.34019 15.1265 9.68608C15.188 9.21031 15.284 8.70631 15.434 8.21502C16.0203 6.27502 17.5375 5.61118 17.6099 5.5795L17.6105 5.57925C17.8655 5.47055 18.161 5.50725 18.3815 5.6696C18.602 5.83196 18.707 6.09455 18.6575 6.35431ZM3.02148 14.5002C3.02148 18.7765 6.40098 21.8781 11.1875 21.8781C16.0145 21.8781 19.5185 18.7765 19.5185 14.5002C19.5185 12.655 19.2785 11.7981 18.344 10.3299C17.72 9.34869 17.4125 8.46774 17.2655 7.7661C17.1155 7.99198 16.9775 8.2701 16.8755 8.60469C16.4367 10.048 16.5264 11.729 16.5344 11.8804C16.5348 11.8869 16.535 11.8905 16.535 11.8913C16.559 12.2075 16.3535 12.4983 16.037 12.6042C15.7205 12.7101 15.3695 12.6056 15.176 12.3459C15.1175 12.271 13.7855 10.4908 13.196 9.2908C11.9765 6.80186 11.9975 4.11104 12.1205 2.56233C10.8845 3.23998 8.98698 4.75621 8.37798 7.84233C7.78548 10.8437 8.93748 13.8452 8.95098 13.8748C9.04998 14.119 8.99748 14.3972 8.81448 14.5948C8.62998 14.7896 8.34798 14.8772 8.07498 14.8165C7.98198 14.7953 5.87148 14.2757 4.50498 12.2456C4.26048 11.8814 4.04148 11.4423 3.85698 11.0132C3.44598 11.9929 3.02148 13.2946 3.02148 14.5002Z"/> </symbol> <symbol id="icon-recordings-line" viewbox="0 0 24 16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 3.50146V4.50046L24 0.501465V15.5015L18 11.5025V12.5015C18 14.1575 16.656 15.5015 15 15.5015H3C1.344 15.5015 0 14.1575 0 12.5015V3.50146C0 1.84546 1.344 0.501465 3 0.501465H15C16.656 0.501465 18 1.84546 18 3.50146ZM16.5 8.75146L22.5 12.5015V3.50146L16.5 7.25146V3.50146C16.5 2.67196 15.8295 2.00146 15 2.00146H3C2.172 2.00146 1.5 2.67196 1.5 3.50146V12.5015C1.5 13.3295 2.172 14.0015 3 14.0015H15C15.8295 14.0015 16.5 13.3295 16.5 12.5015V8.75146Z"/> </symbol> <symbol id="icon-forms-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.38472 12.4052L4.87418 12.9021L4.36363 18.36L9.98691 17.8631L10.5425 17.3224L23.2771 4.96235L18.1658 0L15.0982 2.976L14.0771 3.97129L5.38472 12.4052ZM18.1644 1.98637L21.232 4.96237L19.1869 6.9459L16.1193 3.9699L18.1644 1.98637ZM18.1644 7.93976L15.0967 4.96376L7.42981 12.4052L10.4974 15.3812L18.1644 7.93976ZM6.40728 13.3976L9.47346 16.3736L5.89528 16.8706L6.40728 13.3976ZM1.45455 21.1821H20.3636V9.88801H21.8182V22.5939H0V1.41742H13.0909V2.82918H1.45455V21.1821Z"/> </symbol> <symbol id="icon-funnels-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.85725 0H23.1427V0.07875C23.6408 0.25575 24 0.72675 24 1.28625C24 1.84425 23.6408 2.3145 23.1427 2.49225V2.571L12.8573 16.2855V21.4282L11.1427 24V16.2855L0.85725 2.57175V2.49225C0.35925 2.3145 0 1.84425 0 1.28625C0 0.72675 0.35925 0.2565 0.85725 0.07875V0ZM2.57174 1.71524L12 14.5717H12.0007L21.429 1.71524H2.57174Z"/> </symbol> <symbol id="icon-incoming-feedback-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.000521739 3H20.7997C22.2073 3 23.3489 4.19291 23.3489 5.66455V17.79C23.3489 19.2616 22.2078 20.4545 20.7997 20.4545H5.71513C4.30748 20.4545 3.16591 19.2616 3.16591 17.79V6.54709L0 3H0.000521739ZM20.8252 4.06636H2.32018L4.1807 6.13254V17.8167C4.1807 18.6851 4.85426 19.3887 5.68487 19.3887H20.8252C21.6558 19.3887 22.3294 18.6845 22.3294 17.8167V5.63836C22.3294 4.77 21.6558 4.06636 20.8252 4.06636ZM10.2083 9.76853C10.2083 10.2982 9.79511 10.7274 9.28485 10.7274C8.77459 10.7274 8.36137 10.2982 8.36137 9.76853C8.36137 9.23889 8.77459 8.80962 9.28485 8.80962C9.79511 8.80962 10.2083 9.23889 10.2083 9.76853ZM17.365 10.7274C17.8753 10.7274 18.2885 10.2982 18.2885 9.76853C18.2885 9.23889 17.8748 8.80962 17.365 8.80962C16.8548 8.80962 16.4415 9.23889 16.4415 9.76853C16.4415 10.2982 16.8548 10.7274 17.365 10.7274ZM13.321 16.5306C11.5915 16.5306 10.1687 15.2384 9.99234 13.5797H16.6497C16.4739 15.2378 15.0506 16.5306 13.321 16.5306Z"/> </symbol> <symbol id="icon-polls-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 23.2742V0.00146484H24V23.2742H0ZM13.5 4.3651H10.5V20.3651H13.5V4.3651ZM19.5 8.72873H16.5V20.3651H19.5V8.72873ZM22.5 21.8196H1.5V1.45601H22.5V21.8196ZM4.5 13.0924H7.5V20.3651H4.5V13.0924Z"/> </symbol> <symbol id="icon-surveys-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12.7389C24 15.7411 22.854 18.4771 20.97 20.5818L21.003 20.6007L20.9355 20.624C20.6595 20.928 20.37 21.2218 20.0625 21.4996L19.146 20.9236L17.8635 20.3243C15.9675 22.1454 13.3785 23.2843 10.5015 23.2843C5.2125 23.2843 0.849 19.4894 0.12 14.5571H0V13.1025C0 8.23124 4.2855 3.92287 9 2.92214V0.0130538C9.95509 -0.00180912 10.2831 0.00171889 10.7006 0.00620943C10.9368 0.00875027 11.2017 0.0115993 11.625 0.0115993C18.4605 0.0115993 24 6.11196 24 12.7389ZM9 13.1025V4.37671C5.121 5.34689 1.5 9.03707 1.5 13.1025H9ZM10.5 21.8298C6.04048 21.8298 2.34898 18.6821 1.63348 14.5571L8.99998 14.56L16.5705 19.52C14.97 20.9454 12.8475 21.8298 10.5 21.8298ZM10.5 13.1054L17.5755 18.4654L18.8415 19.2582L19.6935 19.7891C21.4305 17.92 22.5 15.456 22.5 12.7403C22.5 6.91635 17.6295 1.46762 11.625 1.46762H10.5V13.1054Z"/> </symbol> </defs> </svg> <nav role="navigation" aria-label="Primary"> <ul class="nav nav--primary" role="menubar" data-sticky-nav data-primary-navigation> <li class="nav__item nav__item--primary nav__item--dropdown" role="presentation"> <a title="Product" class="nav__link" href="/web/20210811233640/https://www.hotjar.com/tour/" aria-haspopup="true" aria-expanded="false">Product</a> <ul class="nav__submenu" role="menu"> <li role="none"> <a title="Heatmaps" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#heatmaps"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-heatmaps-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Heatmaps</strong> <span class="nav__submenu-subtitle">Visualize your user behavior</span> </span> </a> </li> <li role="none"> <a title="Recordings" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#recordings"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-recordings-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Recordings</strong> <span class="nav__submenu-subtitle">See what your users see</span> </span> </a> </li> <li role="none"> <a title="Incoming Feedback" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#incoming-feedback"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-incoming-feedback-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Incoming Feedback</strong> <span class="nav__submenu-subtitle">Instant visual feedback</span> </span> </a> </li> <li role="none"> <a title="Polls" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#polls"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-polls-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Surveys</strong> <span class="nav__submenu-subtitle">Get the context behind users’ actions</span> </span> </a> </li> <li role="none" class="nav__submenu-footer"> <a title="Demo" class="nav__submenu-link" role="menuitem" target="_blank" rel="noopener" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/login?demo"> <b>See it in action </b> <span>Try our interactive demo</span> <svg> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#hub-arrow-right"></use> </svg> </a> </li> </ul> </li> <li class="nav__item nav__item--primary" role="presentation"> <a title="Pricing" class="nav__link" href="/web/20210811233640/https://www.hotjar.com/pricing/">Pricing</a> </li> <li class="nav__item nav__item--primary nav__item--dropdown" role="presentation"> <a title="Resources" class="nav__link" aria-haspopup="true" aria-expanded="false" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us">Resources</a> <ul class="nav__submenu nav__submenu--single-column" role="menu"> <li role="none"> <a title="Guides" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/guides/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Guides</strong> <span class="nav__submenu-subtitle">Get the most out of Hotjar</span> </span> </a> </li> <li role="none"> <a title="Blog" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/blog/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Blog</strong> <span class="nav__submenu-subtitle">Tips & tutorials from the Hotjar team</span> </span> </a> </li> <li role="none"> <a title="Support documentation" class="nav__submenu-link" role="menuitem" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Support documentation</strong> <span class="nav__submenu-subtitle">Get help with step-by-step instructions</span> </span> </a> </li> <li role="none"> <a title="Product updates" class="nav__submenu-link" role="menuitem" href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/updates/en"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Product updates</strong> <span class="nav__submenu-subtitle">What's new in Hotjar</span> </span> </a> </li> <li role="none"> <a title="Case studies" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/customers/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Case studies</strong> <span class="nav__submenu-subtitle">See how current customers use Hotjar</span> </span> </a> </li> <li role="none"> <a title="Survey Templates" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/survey-templates/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Survey templates</strong> <span class="nav__submenu-subtitle">Get started with a set of predefined questions</span> </span> </a> </li> </ul> </li> <li class="nav__item nav__item--primary nav__item--dropdown" role="presentation"> <a title="Company" class="nav__link" href="/web/20210811233640/https://www.hotjar.com/about-us/" aria-haspopup="true" aria-expanded="false">Company</a> <ul class="nav__submenu nav__submenu--single-column" role="menu"> <li role="none"> <a title="About us" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/about-us/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">About us</strong> <span class="nav__submenu-subtitle">Who we are and what we do</span> </span> </a> </li> <li role="none"> <a title="Careers" class="nav__submenu-link" role="menuitem" href="https://web.archive.org/web/20210811233640/https://careers.hotjar.com/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Careers</strong> <span class="nav__submenu-subtitle">See our open roles</span> </span> </a> </li> <li role="none"> <a title="Privacy & Hotjar" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/privacy/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Privacy & Hotjar</strong> <span class="nav__submenu-subtitle">Hotjar’s approach to end-user privacy</span> </span> </a> </li> </ul> </li> <li class="nav__item nav__item--primary" role="presentation"> <a title="Try it free" class="nav__link nav__link--alt nav__link--alt-one" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/register?c=da35c33027914dfded1b7de847f5887a&signup_source=top-cta">Try it free</a> </li> <li class="nav__item nav__item--primary" role="presentation"> <a title="Sign in" class="nav__link nav__link--alt nav__link--alt-two" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/login">Sign in</a> </li> </ul> </nav> </section> <section class="header__menus header__menus--mobile" data-mobile-menu> <button class="header__menu-close" data-mobile-menu-close aria-label="Mobile menu close"> <svg class="icon"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#close"></use> </svg> </button> <svg style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-heatmaps-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6575 6.35431C18.6485 6.40231 18.437 7.72513 19.6295 9.60278C20.708 11.2955 21.0185 12.3953 21.0185 14.5016C21.0185 19.5981 16.8845 23.2955 11.1875 23.2955C5.53248 23.2955 1.52148 19.5967 1.52148 14.5016C1.52148 11.7967 3.24048 8.88278 3.31398 8.76137C3.46398 8.51008 3.75648 8.37596 4.06248 8.4056C4.36548 8.44372 4.61448 8.64843 4.69248 8.92655C4.69698 8.94349 5.16048 10.5797 5.77248 11.4889C6.18348 12.0974 6.59898 12.5308 7.06848 12.8301C6.75048 11.5341 6.50748 9.58302 6.90348 7.58255C7.98948 2.08937 12.575 0.773605 12.7715 0.72137C13.0265 0.652194 13.292 0.712899 13.4855 0.878076C13.676 1.04325 13.763 1.29313 13.7135 1.53455C13.7133 1.53575 13.7125 1.54071 13.7109 1.54931C13.6636 1.81413 13.0006 5.5228 14.558 8.69643C14.705 8.99431 14.9075 9.34019 15.1265 9.68608C15.188 9.21031 15.284 8.70631 15.434 8.21502C16.0203 6.27502 17.5375 5.61118 17.6099 5.5795L17.6105 5.57925C17.8655 5.47055 18.161 5.50725 18.3815 5.6696C18.602 5.83196 18.707 6.09455 18.6575 6.35431ZM3.02148 14.5002C3.02148 18.7765 6.40098 21.8781 11.1875 21.8781C16.0145 21.8781 19.5185 18.7765 19.5185 14.5002C19.5185 12.655 19.2785 11.7981 18.344 10.3299C17.72 9.34869 17.4125 8.46774 17.2655 7.7661C17.1155 7.99198 16.9775 8.2701 16.8755 8.60469C16.4367 10.048 16.5264 11.729 16.5344 11.8804C16.5348 11.8869 16.535 11.8905 16.535 11.8913C16.559 12.2075 16.3535 12.4983 16.037 12.6042C15.7205 12.7101 15.3695 12.6056 15.176 12.3459C15.1175 12.271 13.7855 10.4908 13.196 9.2908C11.9765 6.80186 11.9975 4.11104 12.1205 2.56233C10.8845 3.23998 8.98698 4.75621 8.37798 7.84233C7.78548 10.8437 8.93748 13.8452 8.95098 13.8748C9.04998 14.119 8.99748 14.3972 8.81448 14.5948C8.62998 14.7896 8.34798 14.8772 8.07498 14.8165C7.98198 14.7953 5.87148 14.2757 4.50498 12.2456C4.26048 11.8814 4.04148 11.4423 3.85698 11.0132C3.44598 11.9929 3.02148 13.2946 3.02148 14.5002Z"/> </symbol> <symbol id="icon-recordings-line" viewbox="0 0 24 16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 3.50146V4.50046L24 0.501465V15.5015L18 11.5025V12.5015C18 14.1575 16.656 15.5015 15 15.5015H3C1.344 15.5015 0 14.1575 0 12.5015V3.50146C0 1.84546 1.344 0.501465 3 0.501465H15C16.656 0.501465 18 1.84546 18 3.50146ZM16.5 8.75146L22.5 12.5015V3.50146L16.5 7.25146V3.50146C16.5 2.67196 15.8295 2.00146 15 2.00146H3C2.172 2.00146 1.5 2.67196 1.5 3.50146V12.5015C1.5 13.3295 2.172 14.0015 3 14.0015H15C15.8295 14.0015 16.5 13.3295 16.5 12.5015V8.75146Z"/> </symbol> <symbol id="icon-forms-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.38472 12.4052L4.87418 12.9021L4.36363 18.36L9.98691 17.8631L10.5425 17.3224L23.2771 4.96235L18.1658 0L15.0982 2.976L14.0771 3.97129L5.38472 12.4052ZM18.1644 1.98637L21.232 4.96237L19.1869 6.9459L16.1193 3.9699L18.1644 1.98637ZM18.1644 7.93976L15.0967 4.96376L7.42981 12.4052L10.4974 15.3812L18.1644 7.93976ZM6.40728 13.3976L9.47346 16.3736L5.89528 16.8706L6.40728 13.3976ZM1.45455 21.1821H20.3636V9.88801H21.8182V22.5939H0V1.41742H13.0909V2.82918H1.45455V21.1821Z"/> </symbol> <symbol id="icon-funnels-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.85725 0H23.1427V0.07875C23.6408 0.25575 24 0.72675 24 1.28625C24 1.84425 23.6408 2.3145 23.1427 2.49225V2.571L12.8573 16.2855V21.4282L11.1427 24V16.2855L0.85725 2.57175V2.49225C0.35925 2.3145 0 1.84425 0 1.28625C0 0.72675 0.35925 0.2565 0.85725 0.07875V0ZM2.57174 1.71524L12 14.5717H12.0007L21.429 1.71524H2.57174Z"/> </symbol> <symbol id="icon-incoming-feedback-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.000521739 3H20.7997C22.2073 3 23.3489 4.19291 23.3489 5.66455V17.79C23.3489 19.2616 22.2078 20.4545 20.7997 20.4545H5.71513C4.30748 20.4545 3.16591 19.2616 3.16591 17.79V6.54709L0 3H0.000521739ZM20.8252 4.06636H2.32018L4.1807 6.13254V17.8167C4.1807 18.6851 4.85426 19.3887 5.68487 19.3887H20.8252C21.6558 19.3887 22.3294 18.6845 22.3294 17.8167V5.63836C22.3294 4.77 21.6558 4.06636 20.8252 4.06636ZM10.2083 9.76853C10.2083 10.2982 9.79511 10.7274 9.28485 10.7274C8.77459 10.7274 8.36137 10.2982 8.36137 9.76853C8.36137 9.23889 8.77459 8.80962 9.28485 8.80962C9.79511 8.80962 10.2083 9.23889 10.2083 9.76853ZM17.365 10.7274C17.8753 10.7274 18.2885 10.2982 18.2885 9.76853C18.2885 9.23889 17.8748 8.80962 17.365 8.80962C16.8548 8.80962 16.4415 9.23889 16.4415 9.76853C16.4415 10.2982 16.8548 10.7274 17.365 10.7274ZM13.321 16.5306C11.5915 16.5306 10.1687 15.2384 9.99234 13.5797H16.6497C16.4739 15.2378 15.0506 16.5306 13.321 16.5306Z"/> </symbol> <symbol id="icon-polls-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 23.2742V0.00146484H24V23.2742H0ZM13.5 4.3651H10.5V20.3651H13.5V4.3651ZM19.5 8.72873H16.5V20.3651H19.5V8.72873ZM22.5 21.8196H1.5V1.45601H22.5V21.8196ZM4.5 13.0924H7.5V20.3651H4.5V13.0924Z"/> </symbol> <symbol id="icon-surveys-line" viewbox="0 0 24 24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12.7389C24 15.7411 22.854 18.4771 20.97 20.5818L21.003 20.6007L20.9355 20.624C20.6595 20.928 20.37 21.2218 20.0625 21.4996L19.146 20.9236L17.8635 20.3243C15.9675 22.1454 13.3785 23.2843 10.5015 23.2843C5.2125 23.2843 0.849 19.4894 0.12 14.5571H0V13.1025C0 8.23124 4.2855 3.92287 9 2.92214V0.0130538C9.95509 -0.00180912 10.2831 0.00171889 10.7006 0.00620943C10.9368 0.00875027 11.2017 0.0115993 11.625 0.0115993C18.4605 0.0115993 24 6.11196 24 12.7389ZM9 13.1025V4.37671C5.121 5.34689 1.5 9.03707 1.5 13.1025H9ZM10.5 21.8298C6.04048 21.8298 2.34898 18.6821 1.63348 14.5571L8.99998 14.56L16.5705 19.52C14.97 20.9454 12.8475 21.8298 10.5 21.8298ZM10.5 13.1054L17.5755 18.4654L18.8415 19.2582L19.6935 19.7891C21.4305 17.92 22.5 15.456 22.5 12.7403C22.5 6.91635 17.6295 1.46762 11.625 1.46762H10.5V13.1054Z"/> </symbol> </defs> </svg> <nav role="navigation" aria-label="Primary"> <ul class="nav nav--primary" role="menubar" data-sticky-nav data-primary-navigation> <li class="nav__item nav__item--primary nav__item--dropdown" role="presentation"> <a title="Product" class="nav__link" href="/web/20210811233640/https://www.hotjar.com/tour/" aria-haspopup="true" aria-expanded="false">Product</a> <ul class="nav__submenu" role="menu"> <li role="none"> <a title="Heatmaps" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#heatmaps"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-heatmaps-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Heatmaps</strong> <span class="nav__submenu-subtitle">Visualize your user behavior</span> </span> </a> </li> <li role="none"> <a title="Recordings" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#recordings"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-recordings-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Recordings</strong> <span class="nav__submenu-subtitle">See what your users see</span> </span> </a> </li> <li role="none"> <a title="Incoming Feedback" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#incoming-feedback"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-incoming-feedback-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Incoming Feedback</strong> <span class="nav__submenu-subtitle">Instant visual feedback</span> </span> </a> </li> <li role="none"> <a title="Polls" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/tour/#polls"> <svg class="nav__submenu-icon"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#icon-polls-line"></use></svg> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Surveys</strong> <span class="nav__submenu-subtitle">Get the context behind users’ actions</span> </span> </a> </li> <li role="none" class="nav__submenu-footer"> <a title="Demo" class="nav__submenu-link" role="menuitem" target="_blank" rel="noopener" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/login?demo"> <b>See it in action </b> <span>Try our interactive demo</span> <svg> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#hub-arrow-right"></use> </svg> </a> </li> </ul> </li> <li class="nav__item nav__item--primary" role="presentation"> <a title="Pricing" class="nav__link" href="/web/20210811233640/https://www.hotjar.com/pricing/">Pricing</a> </li> <li class="nav__item nav__item--primary nav__item--dropdown" role="presentation"> <a title="Resources" class="nav__link" aria-haspopup="true" aria-expanded="false" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us">Resources</a> <ul class="nav__submenu nav__submenu--single-column" role="menu"> <li role="none"> <a title="Guides" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/guides/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Guides</strong> <span class="nav__submenu-subtitle">Get the most out of Hotjar</span> </span> </a> </li> <li role="none"> <a title="Blog" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/blog/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Blog</strong> <span class="nav__submenu-subtitle">Tips & tutorials from the Hotjar team</span> </span> </a> </li> <li role="none"> <a title="Support documentation" class="nav__submenu-link" role="menuitem" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Support documentation</strong> <span class="nav__submenu-subtitle">Get help with step-by-step instructions</span> </span> </a> </li> <li role="none"> <a title="Product updates" class="nav__submenu-link" role="menuitem" href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/updates/en"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Product updates</strong> <span class="nav__submenu-subtitle">What's new in Hotjar</span> </span> </a> </li> <li role="none"> <a title="Case studies" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/customers/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Case studies</strong> <span class="nav__submenu-subtitle">See how current customers use Hotjar</span> </span> </a> </li> <li role="none"> <a title="Survey Templates" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/survey-templates/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Survey templates</strong> <span class="nav__submenu-subtitle">Get started with a set of predefined questions</span> </span> </a> </li> </ul> </li> <li class="nav__item nav__item--primary nav__item--dropdown" role="presentation"> <a title="Company" class="nav__link" href="/web/20210811233640/https://www.hotjar.com/about-us/" aria-haspopup="true" aria-expanded="false">Company</a> <ul class="nav__submenu nav__submenu--single-column" role="menu"> <li role="none"> <a title="About us" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/about-us/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">About us</strong> <span class="nav__submenu-subtitle">Who we are and what we do</span> </span> </a> </li> <li role="none"> <a title="Careers" class="nav__submenu-link" role="menuitem" href="https://web.archive.org/web/20210811233640/https://careers.hotjar.com/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Careers</strong> <span class="nav__submenu-subtitle">See our open roles</span> </span> </a> </li> <li role="none"> <a title="Privacy & Hotjar" class="nav__submenu-link" role="menuitem" href="/web/20210811233640/https://www.hotjar.com/privacy/"> <span class="nav__submenu-text"> <strong class="nav__submenu-title">Privacy & Hotjar</strong> <span class="nav__submenu-subtitle">Hotjar’s approach to end-user privacy</span> </span> </a> </li> </ul> </li> <li class="nav__item nav__item--primary" role="presentation"> <a title="Try it free" class="nav__link nav__link--alt nav__link--alt-one" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/register?c=da35c33027914dfded1b7de847f5887a&signup_source=top-cta">Try it free</a> </li> <li class="nav__item nav__item--primary" role="presentation"> <a title="Sign in" class="nav__link nav__link--alt nav__link--alt-two" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/login">Sign in</a> </li> </ul> </nav> </section> <div class="header__menu-underlay" data-mobile-menu-underlay></div> </div> </div> </header> <progress class="progress-bar" data-progress-bar></progress> <main class="wrapper"> <div class="wrapper--hub-wide"> <div class="hub-intro"> <div class="hub-intro__left"> <div class="hub-last-updated"> <p>Last updated Jun 17 2021</p> </div> </div> <div class="hub-intro__right"> <div class="badge badge--hub"> <a href="https://web.archive.org/web/20210811233640/https://www.g2.com/products/hotjar/reviews" class="badge__link" target="_blank"> <img src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/documents/G2Crowd_Spring_r8kDuGx.svg" class="badge__image" alt="Leader in Spring 2021"> </a> </div> </div> </div> <div class="hub-hero"> <div class="hub-hero__left-column"> <h1 class="hub-hero__title">Introduction to UX design: key principles, best practices, and mistakes to avoid</h1> <a class="banner banner--green " href="/web/20210811233640/https://www.hotjar.com/blog/product-teams-customer-delight/" target="_blank"> <h4 class="banner__title"><p>Hey, product teams, <br>customer delight is just one click away</p></h4> <p class="banner__description">You already know it: what's best for your users is best for your business. But do you have the right information to make that</p> <p class="banner__cta">Read full article</p> </a> <div class="rich-text"><p><b>Every touchpoint users have with your brand and product contributes to the overall user experience (UX)</b>: the landing page that sells them on your product or service, the signup and onboarding flow, and every feature or element inside your product impacts UX and how users think about your brand.</p><p>The user experience often determines if users stick around, whether free users convert to paid, and whether they churn. <b>UX is a concept that transcends every team and every role within an organization</b>, and it’s an even more vital concept for product teams.</p><p>This guide covers everything you need to know about UX design. We start with introducing UX design, why it matters, and the key principles and best practices you should know about. In later chapters, we'll cover <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/tools/" target="_blank" rel="noopener noreferrer">UX tools</a>, <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/surveys/" target="_blank" rel="noopener noreferrer">surveys</a>, <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/metrics/" target="_blank" rel="noopener noreferrer">metrics</a>, how to conduct <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/analysis/" target="_blank" rel="noopener noreferrer">UX analysis</a>, and key UX design trends (stay tuned!).</p></div> </div> <div class="hub-hero__right-column"> <img class="hub-hero__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/01-UXHub-UX-design-Homepage.width-750.jpg" alt="01-UXHub-UX-design-Homepage"> </div> </div> </div> <div class="main-body wrapper--hub-small" id="body-top"> <div class="hub-heading highlight-heading"> <h2 id="what-is-ux-design">What is UX design?</h2> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>User experience (UX) design is the process of building products that are easy and enjoyable for people to use.</b> By building products to be as effortless as possible for users, you can encourage adoption, retention, and loyalty.</p><p><b>UX is an iterative process of constant improvement</b>: product teams and designers use data and <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/usability-testing/" target="_blank" rel="noopener noreferrer">usability testing</a> to continuously refine the product experience so it becomes easier for users as the product develops.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="the-ux-design-process-in-5-steps">The UX design process in 5 steps</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>There’s no universal workflow that every UX and product team follows—products, users, and internal processes vary. Some teams follow the <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/lean-ux/" target="_blank" rel="noopener noreferrer">Lean UX model</a>, for example, which includes three broad phases:</p><ol><li><b>THINK:</b> teams draw on user feedback, product and usage data, competitive analysis, and other research to identify blockers and pain points, and brainstorm ways to improve the product to solve problems for their users.</li><li><b>MAKE:</b> developers and designers build the change or new feature into the product.</li><li><b>CHECK:</b> teams use surveys, <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/conversion-rate-optimization/glossary/ab-testing/" target="_blank" rel="noopener noreferrer"><u>A/B</u></a> or multivariate (<a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/conversion-rate-optimization/glossary/multivariate-testing/" target="_blank" rel="noopener noreferrer"><u>MVT</u></a>) testing, and other <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/analysis/" target="_blank" rel="noopener noreferrer">tools and methods</a> to check whether the change or new feature improves UX and solves the original problem for their users.</li></ol><p>The basic UX design process we outline below is similar, but we break it down into five steps to illustrate the <b>cyclical, iterative nature of UX design</b>:</p></div></div> </div> <div class="hub-heading highlight-heading"> <h4 id="1-research-and-understanding">1. Research and understanding</h4> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>User experience design begins with extensive UX research before any designs are mocked up.</p><ul><li><b>User research</b>: identify pain points, goals, blockers, and characteristics among users, and draw up detailed <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/user-personas/" target="_blank" rel="noopener noreferrer">user personas</a> that inform design decisions to keep the UX design process focused on users.</li><li><b>Market research</b>: understand the market and similar products available, what those products share in terms of UX, and identify opportunities to differentiate your product based on UX.</li><li><b>Historical analysis:</b> get a sense of the history of your product, and use previous iterations to inform future design decisions, ensure mistakes aren’t repeated, and continuously improve your product’s UX based on what you’ve learned.</li></ul></div></div> </div> <div class="hub-heading highlight-heading"> <h4 id="2-prototyping-and-wireframing">2. Prototyping and wireframing</h4> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>After the research stage, a designer creates a prototype and wireframe of your product, outlining how users will flow from one feature or element to the next, and how the product will look visually.</p><p><b>The prototype is your minimum viable product (MVP)</b>: a version of your product with enough features to allow your first users to test it and offer feedback. The prototype generally doesn’t look like a finished product, but it provides a sense of how the finished product will work.</p><p>Prototyping and wireframing—and then testing, which is the next step—lets you get valuable user feedback <i>before</i> you spend resources finalizing your product, potentially avoiding a lot of work and time spent developing the wrong features and UX for your users.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h4 id="3-testing">3. Testing</h4> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>Next, your product team will conduct user tests—like A/B tests, MVT, and <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/conversion-rate-optimization/glossary/split-testing/" target="_blank" rel="noopener noreferrer"><u>split tests</u></a>—to <b>identify existing or potential design issues</b> that may cause friction for users. For example, your team may find:</p><ul><li>The UX is confusing and prevents users from accomplishing their goals</li><li>Some features aren’t worth developing further because users aren’t interested in them</li><li>Certain user actions create friction in the product experience</li></ul><p>Some user testing may include using product experience and behavior analytics tools like <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/heatmaps/" target="_blank" rel="noopener noreferrer"><u>heatmaps</u></a> and <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/session-recordings/" target="_blank" rel="noopener noreferrer"><u>session recordings</u></a> and collecting user feedback that can help identify blockers and pain points (more on this later).</p></div></div> </div> <div class="sf-section"> <div class="hub-note background-override" style="background:#FEE1E6;"> <div class="hub-note__header"> </div> <div class="hub-note__content"> <div class="highlight-heading" style="text-align: center;"> <h5 id="if-youre-using-hotjar">🔥 If you're using Hotjar</h5> </div> <span style="text-align: left;"><div class="rich-text"><p><u><br/></u><a href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us/articles/360034887494-How-to-Recruit-User-Testers-with-Surveys" target="_blank" rel="noopener noreferrer"><u>Use on-site Surveys to recruit testers</u></a> from users on your site. Just create a Survey from your dashboard, add a Statement to invite users to participate, then ask a few follow-up questions to better understand your testers.</p><p><b>Optional:</b> offer <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/how-to-conduct-surveys/#4-distribute-your-survey" target="_blank" rel="noopener noreferrer"><u>incentive</u></a> to testers to encourage participation!</p></div></span> <figure class="image-block"> <img alt="poll questions recruiter usecase" class="image-block__image" height="643" loading="lazy" sizes="(min-width: 300px) 90%, (min-width: 900px) 83%, (min-width: 1300px) 57%" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-750.png" srcset="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-265.png 265w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-530.png 530w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-460.png 460w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-920.png 920w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-750.png 750w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/poll_questions_recruiter_usecase.width-1500.png 1500w" style="" width="750"> </figure> </div> </div> </div> <div class="hub-heading highlight-heading"> <h4 id="4-launch">4. Launch</h4> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>Throughout the testing phase, you’ll refine your prototype based on results and user feedback, make changes, and add final touches before launch.</p><p>Once your product is ready, <b>launch is often done in stages</b>. For example, your UX team might release a beta version or ‘soft launch’, where a new design is launched to a small group of users first, to get additional user feedback and usage data before rolling it out to your whole user base.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h4 id="5-iteration">5. Iteration</h4> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>UX design is a constant, iterative process—you’re never</b> <b><i>done</i></b><b> creating good UX</b>—so more testing follows the product’s launch.</p><p>In the iteration stage, your team will continue to make updates and improvements as needed, and closely monitor how those changes impact the product experience.</p><p>A/B and multivariate testing are often part of this stage, so your team can see the impact of product changes and compare multiple versions of the design to see which creates the best user experience. Then the winning version is rolled out.</p></div></div> </div> <div class="sf-section"> <div class="hub-note "> <div class="hub-note__header"> <svg class="hub-note__icon" aria-hidden="true"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#hub-generic"></use> </svg> </div> <div class="hub-note__content"> <div class="highlight-heading" style="text-align: center;"> <h5 id="ux-design-in-action">UX design in action</h5> </div> <span style="text-align: left;"><div class="rich-text"><p><br/>When the Product Design team at Razorpay wanted to <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/customers/razorpay/" target="_blank" rel="noopener noreferrer">launch an update</a> to their user dashboard, they took the ‘soft launch’ approach we mentioned earlier, releasing the new design to 10% of their users and gathering feedback.</p><p>Using <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/customer-experience/survey/" target="_blank" rel="noopener noreferrer">Hotjar Surveys</a>, they asked users to rate their experience with the new dashboard:</p></div></span> <figure class="image-block"> <img alt="UX design survey question" class="image-block__image" height="408" loading="lazy" sizes="(min-width: 300px) 90%, (min-width: 900px) 83%, (min-width: 1300px) 57%" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-750.png" srcset="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-265.png 265w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-530.png 530w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-460.png 460w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-920.png 920w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-750.png 750w, https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/UX_design_survey_question.width-1500.png 1500w" style="max-width: 550px;" width="666"> <figcaption class="image-block__caption">Razorpay asked users to rate their experience with the new dashboard</figcaption> </figure> <span style="text-align: left;"><div class="rich-text"><p>If a user gave the new design a low score, the team used <a href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us/articles/115011774728-How-to-Set-Up-Surveys-Based-on-Visitor-Replies-using-Survey-Logic" target="_blank" rel="noopener noreferrer">Survey Logic</a> to ask open-ended follow-up questions to understand why the user gave the dashboard a low rating.</p><p>The survey feedback helped the Razorpay team understand how their users felt about the new design and identify areas where they could improve UX before launching the new dashboard to the rest of their users.</p></div></span> </div> </div> </div> <div class="hub-heading highlight-heading"> <h3 id="the-difference-between-ui-and-ux-design">The difference between UI and UX design</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>User interface (UI) design is a part of UX design that focuses on the visual look of a product. For example, a UI designer may focus on the <i>layout</i> of a website page or app screen, or the color used for <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/conversion-rate-optimization/glossary/call-to-action/" target="_blank" rel="noopener noreferrer"><u>CTA buttons</u></a>.</p><p>UI and UX design are often confused or considered to be the same thing. That's understandable: <b>the user interface</b> <b><i>is</i></b> <b><i>a part</i></b><b> of the user experience</b>, but UI design is more narrowly focused on the visuals and aesthetics of the interface users see, whereas UX is a broader process of identifying and solving user problems.</p><p>For example: typography, color scheme, branding, button design, animations, and imagery are all a part of UI; while user flow, product features, and accessibility are a part of UX.</p></div></div> </div> <div class="sf-section"> <div class="call-to-action call-to-action--hub"> <div class="call-to-action__content"> <h2 class="call-to-action__title">Improve UX with product experience insights from Hotjar</h2> <p class="call-to-action__summary">Use Hotjar to understand how real users are experiencing your website or app—then improve it for them!</p> <a class="button button--blog-cta" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/register" target="_blank">Sign up now. It's free!</a> </div> <div class="call-to-action__image-wrapper"> </div> </div> </div> <div class="hub-heading highlight-heading"> <h2 id="why-is-ux-design-important-for-product-teams">Why is UX design important for product teams?</h2> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>A poor user experience will cost you customers</b>: if users aren’t satisfied with their experience in your product—if it’s difficult for them to navigate, if they encounter <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/website-bugs/" target="_blank" rel="noopener noreferrer"><u>bugs</u></a> or issues that cause friction—they might churn. When you make UX design a key part of your product development process, and keep product experience top of mind, you can <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/retention-metrics/" target="_blank" rel="noopener noreferrer">mitigate churn</a>.</p><p>Investing in the user experience will help you <b>create a valuable product that solves problems for your users and helps them reach their goals.</b> Your product team, in particular, can draw on UX design to:</p><ul><li>Convert more users</li><li>Drive adoption</li><li>Boost customer retention and loyalty</li><li>Banish churn</li></ul></div></div> </div> <div class="hub-heading highlight-heading"> <h2 id="4-key-principles-of-ux-design">4 key principles of UX design</h2> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>In many cases, 'good UX design' can be a little murky and hard to wrap your head around. After all, UX is all about the user and helping them reach their goals—and that varies from one product and one user base to another.</p><p>That said, <b>good UX is really just a user experience that solves users' needs in the most frictionless and enjoyable way possible.</b></p><p>Here are four things good user experiences have in common:</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="1-the-user-comes-first-always">1. The user comes first (always)</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>The number one principle of UX design is that the user comes first.</b> It may sound obvious, but given the myriad internal priorities and <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/18-product-workflow-red-flags-how-to-spot-resolve-them/" target="_blank" rel="noopener noreferrer">pressures product teams face</a>, it’s worth mentioning.</p><p>Good UX design centers the needs of users in every decision—the product helps users reach their goals or solve their problems in the fastest, easiest way possible. Every part of the design, every change, and every new feature flows from that.</p><p>And there’s a reason <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/lean-ux/" target="_blank" rel="noopener noreferrer">user-centered design</a> is such a competitive advantage for companies that get it right: it isn’t always easy to put users first. Your business goals become secondary—of course you <i>have</i> goals, but they shouldn’t interfere with the <i>users'</i> needs and goals.</p><p>In fact, <b>your business goals should be a reflection of your users' needs</b> and should work to support them.</p><p>Recipe websites are a great example of this: lengthy written blog posts help their recipes rank in search engines, but they also get in the way and prevent users from getting to the content they <i>want</i> to see. (We just want to know how to make the food so we can eat the food, please!)</p><p>To improve the user experience, some sites add a ‘Jump to recipe’ button so people can get what they came for as quickly as possible.</p></div></div> </div> <div class="sf-section"> <figure class="image-block image-block--hub"> <img class="image-block__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/user_centered_design_jump_to_recipe.width-750.png" alt="user-centered-design-jump-to-recipe"> <figcaption class="image-block__caption">Some recipe websites put the user first with ‘Jump to recipe’ buttons</figcaption> </figure> </div> <div class="hub-heading highlight-heading"> <h3 id="2-simplicity-hierarchy-and-consistency">2. Simplicity, hierarchy, and consistency</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>(Okay, so maybe these are three principles in one, but they’re very closely related.)</p><p><b>Simple, hierarchical, and consistent UX design enables users to quickly and easily find what they’re looking for and do what they came to do.</b> Whenever possible, your product should use the simplest design, the simplest copy, and the simplest actions to get users where they want to go.</p><p>That doesn’t mean you need to emphasize simplicity over function, of course (more on that in a second)—but you should <b>simplify</b> your UX design, eliminate visual clutter wherever possible, and cut any unnecessary elements or steps that complicate the user experience.</p><p>Then, organizing your design with a clear <b>hierarchy</b> ensures the product elements that remain are easy to understand and navigate. Users should be able to find exactly what they’re looking for without spending too much time in your product.</p><p>Finally, <b>consistency</b>: UX extends far beyond the experience users have inside your product. It also includes things like branding, marketing, and support. Creating a consistent style and ‘feel’ across all user touchpoints helps to unify the user experience.</p><p>Apple’s App Store is a good example of this: users can pick up any device—be it an Apple Watch, MacBook, iPad, or iPhone—and the product experience is consistent, with similar gestures, icons, hierarchy, and visual style.</p></div></div> </div> <div class="sf-section"> <figure class="image-block image-block--hub"> <img class="image-block__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/images/apple_ux_design.width-750.jpg" alt="apple-ux-design"> <figcaption class="image-block__caption">‘Get’ means the same thing across Apple devices</figcaption> </figure> </div> <div class="hub-heading highlight-heading"> <h3 id="3-functionality-first-then-design">3. Functionality first, then design</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>Product function comes before product design, which is another one of the differences between UI and UX: while UI focuses on the look of your product, UX focuses on how your product functions.</p><p>Good UX means <b>making it as effortless as possible for users to do what they came to do on your site or app</b>—that’s the ultimate goal. That means clarity and function always come first. The design itself should never make the users' life harder or slower.</p><p>Moleskine’s iOS calendar app, Timepage, is a counter-example: the app lets users choose the color theme, but while the UI <i>looks</i> cool, it makes it harder for users to view their options and tap the color they want.</p></div></div> </div> <div class="sf-section"> <figure class="image-block image-block--hub"> <img class="image-block__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/original_images/design_over_function_timepage.gif" alt="design over function timepage" style="max-width: 400px;"> <figcaption class="image-block__caption">Timepage’s design is cool, but it puts design over functionality</figcaption> </figure> </div> <div class="hub-heading highlight-heading"> <h3 id="4-draw-on-the-familiar">4. Draw on the familiar</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>Great UX leans into design frameworks and interactions that make sense for users, giving users what they</b> <b><i>expect</i></b><b>.</b></p><p>Designing interactions that <i>aren’t</i> familiar to users may add barriers and make it harder for users to accomplish their goals, because it creates a learning curve when users adopt your product.</p><p>Drawing on elements and interactions users <i>are</i> familiar with often makes for better UX.</p><p>Some mobile apps are a great example of this: iPhone users are used to swiping right and left, so the UX of every iPhone app can benefit from drawing on that familiar interaction. It’s what users <i>expect</i>, and building that into your design ensures users have an easier time using your product. That’s why Tinder does it!</p></div></div> </div> <div class="sf-section"> <figure class="image-block image-block--hub"> <img class="image-block__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/original_images/giphy_pRk4NFZ.gif" alt="giphy tinder swipe"> <figcaption class="image-block__caption">Tinder users swipe right to ‘like’ someone</figcaption> </figure> </div> <div class="hub-heading highlight-heading"> <h2 id="ux-design-best-practices-for-refining-products">UX design best practices for refining products</h2> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>The four principles above are a great place to start and can help you get a better sense of what makes a good user experience. Now, let’s get into <b>how you can</b> <b><i>create</i></b><b> that kind of experience.</b></p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="start-with-a-deep-understanding-of-users-and-their-intent">Start with a deep understanding of users and their intent</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>The first step in the UX design process above is 'research and understanding'. Whether you’re building a new product from scratch or iterating on an existing one, you still need to <b>start with a deep understanding of your users and their intent.</b></p><p>There are a lot of ways to develop that understanding—like using <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/behavior-analytics/tools/" target="_blank" rel="noopener noreferrer">behavior analytics and product experience insight tools</a>, listening to sales and support calls, and analyzing product usage data.</p><p>But <b>there’s no substitute for actually talking to your users.</b> Often, that looks like either an <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/how-to-conduct-surveys/" target="_blank" rel="noopener noreferrer">online survey</a> or a <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/mastering-user-interviews/" target="_blank" rel="noopener noreferrer">one-on-one interview</a>. Both can help you better understand customers, empathize with their needs and challenges, and build valuable user personas to refer to throughout the UX design process.</p><p><i>Note: visit the</i> <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/surveys/" target="_blank" rel="noopener noreferrer"><i>UX surveys</i></a><i> page of this guide for some examples of UX-specific questions to ask your users to get the feedback and</i> <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/ux-design/metrics/" target="_blank" rel="noopener noreferrer"><i>UX metrics</i></a><i> you need to create the best user experience.</i></p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="develop-a-plan-for-how-users-should-experience-your-product">Develop a plan for how users should experience your product</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>UX and product experience tools—like <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/heatmap-analytics/" target="_blank" rel="noopener noreferrer"><u>heatmaps</u></a> and <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/session-recording-software/" target="_blank" rel="noopener noreferrer"><u>session recordings</u></a>—can help you visualize how users move through your product, but that information is even more helpful when you have something to compare it to: your <i>ideal</i> user flow.</p><p>Based on what you know about why people use your product, you should be able to <b>map out an ideal user flow</b> with the steps users need to take in your product to accomplish their goals. (This is much like a <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/customer-journey-map/" target="_blank" rel="noopener noreferrer"><u>customer journey map</u></a>.) For example:</p><ul><li>To send money to a friend using Venmo, a new user needs to: download the app > sign up for a new account > connect and verify their bank account > search for their friend > enter the dollar amount > and send the money</li><li>For an <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/ecommerce-customer-journey/" target="_blank" rel="noopener noreferrer">ecommerce store</a>, the user flow might look like this: click on Instagram ad > browse products > view product page > add product to cart > start checkout and create an account > and complete checkout</li></ul><p>That ideal flow drives everything inside your product, from design and interactions to content architecture and element hierarchy.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="monitor-user-behavior-for-signs-of-friction-and-eliminate-blockers">Monitor user behavior for signs of friction, and eliminate blockers</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>Your ideal user flow helps inform initial product design and serves as a baseline for continuously improving UX. When you see users deviate from your ideal flow—when they encounter blockers or friction in your design that veers them off course—<b>tools like</b> <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/tour/#heatmaps" target="_blank" rel="noopener noreferrer"><b>heatmaps</b></a><b> and</b> <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/tour/#recordings" target="_blank" rel="noopener noreferrer"><b>recordings</b></a><b> can help you quickly identify user pain points, so you can remove them.</b></p><p>For example, if you see users dropping off before reaching their goal, <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/session-recordings/user-analysis/" target="_blank" rel="noopener noreferrer"><u>analyzing session recordings</u></a> can help you identify possible explanations. Then, you can ask for more feedback to help you understand <i>why</i> the drop-off is happening. Maybe an element distracts users from taking the next step, for example, or a dialogue box blocks the next step on mobile.</p></div></div> </div> <div class="sf-section"> <div class="hub-note background-override" style="background:#FEE1E6;"> <div class="hub-note__header"> </div> <div class="hub-note__content"> <div class="highlight-heading" style="text-align: center;"> <h5 id="if-youre-using-hotjar">🔥 If you're using Hotjar</h5> </div> <span style="text-align: left;"><div class="rich-text"><p><br/>Use <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/updates/en/advanced-filters-for-recordings-referrer-url-rage-clicks--u_turns" target="_blank" rel="noopener noreferrer"><u>rage clicks as a filter</u></a> in Session Recordings to pinpoint the moments when a user repeatedly clicks on an element or area of your site, which can help you identify blockers or friction points in the user experience. Use what you learn to prioritize changes to optimize UX and improve the customer experience.</p></div></span> <figure class="image-block"> <img class="image-block__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/original_images/pictures_neKB6Di.gif" alt="rage clicks" style="" loading="lazy"> </figure> <span style="text-align: left;"><div class="rich-text"><p><b>Bonus reading:</b> learn <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/rage-clicks/" target="_blank" rel="noopener noreferrer"><u>how to analyze rage clicks</u></a> to understand customer behavior and improve the user experience.</p></div></span> </div> </div> </div> <div class="hub-heading highlight-heading"> <h3 id="consider-the-multi-platform-experience">Consider the multi-platform experience</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>Users should enjoy the same easy, frictionless experience no matter how they access your product</b>. If your product allows for mobile, tablet, and smartphone usage, the design should support that with good UX regardless of the device.</p><p>For example, a behavior analytics or product experience tool can help you <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/updates/en/increase-your-response-rate-with-mobile_optimized-full_screen-surveys" target="_blank" rel="noopener noreferrer"><u>get feedback on how mobile users behave in your product</u></a>. Then, you can <b>compare the mobile user experience to your web or desktop product experience</b> and identify how the experiences differ across devices.</p><p>If there are any variations, you can dig deeper by combining tools like <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/session-recordings/advanced/" target="_blank" rel="noopener noreferrer"><u>session recordings and feedback surveys</u></a> to identify <i>why</i> users behave differently across platforms and how you can build a more consistent UX.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="ground-users-in-the-product">Ground users in the product</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>Good UX design is <b>proactive about giving users a sense of where they are, where they can go, and how to get back to where they started</b>. Clear and explicit navigation is key—without it, it’s easy for users to get lost in your product. When that happens, it slows users down, they can't do what they came to do, and they have a bad experience.</p><p>For example, think about a web app you might file your taxes with:</p><p>There are modules for personal details, income, and deductions and credits. Let’s say you wrap up the income section and move on to deductions, but then you find a rogue income form hidden under one of your stacks of paperwork. You need to go back to the income section to add it, but how?</p><p>There’s no obvious navigation to take you back to the income section. Will the ‘back’ button take you there? Can you go to the ‘home’ screen and find it that way? Will you lose the information you’ve entered if you do?</p><p>Oh, the suspense.</p><p><b>Good UX design recognizes that some users take a nonlinear route through a product</b>. To accommodate the <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/ecommerce-conversion-funnel/" target="_blank" rel="noopener noreferrer"><u>nonlinear journey</u></a>, use clear markers and explicit navigation cues to help users move within your product.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h2 id="5-common-mistakes-product-teams-make-with-ux-design-and-how-to-avoid-them">5 common mistakes product teams make with UX design (and how to avoid them)</h2> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p>When you’re building a product and trying to balance user needs with internal requirements, it’s easy to make mistakes. Here are five common mistakes product teams make when designing for UX and how to avoid them:</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="1-failing-to-make-user-driven-product-decisions">1. Failing to make user-driven product decisions</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>The mistake:</b> one of the most common mistakes product teams make with UX design is failing to put the user first. Especially as you gain experience in your role and within your product, it’s easy to fall into the trap of believing you know what users want or need—but the reality is <i>you are not your user</i>.</p><p><b>How to avoid it:</b> proactively gather <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/blog/user-feedback/" target="_blank" rel="noopener noreferrer"><u>user feedback</u></a> and let that feedback drive changes to the product. Use feedback to validate whether users need (or even want) the features and updates on your product roadmap.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="2-aimless-redesigning">2. Aimless redesigning</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>The mistake:</b> UX design is a constant, iterative process—but that doesn’t mean you need to constantly and completely redesign your product. Users often don’t like change, even if it ultimately benefits them, so there’s no use in aimlessly designing and redesigning your UX.</p><p><b>How to avoid it:</b> if you don’t have a compelling reason to change things—if you don’t have a clear goal and business case for the redesign—don’t do it. When you <i>do</i> need to make changes, avoid shocking users by keeping changes small and iterative, gathering feedback via A/B or multivariate testing as you go.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="3-not-testing-before-iterating-on-product-design">3. Not testing before iterating on product design</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>The mistake:</b> this one goes hand-in-hand with Mistakes 1 and 2—if you <i>think</i> you know what users need, you aren’t likely to spend time testing, gathering feedback, and iterating.</p><p><b>How to avoid it:</b> testing and iterating is important at every stage of UX design, but it’s particularly important for prototyping. Testing pre-launch iterations is key to ensuring you’re heading in the right direction <i>before</i> going through the launch process.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="4-giving-users-too-much">4. Giving users too much</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>The mistake:</b> too much information, too many options, too many features… giving users too much of <i>anything</i> can spell problems for the user experience. This goes back to the 'simplicity' principle we talked about before.</p><p><b>How to avoid it:</b> if a graphic, button, or feature isn’t 100% necessary, cut it. Otherwise, you risk confusing and overwhelming users.</p></div></div> </div> <div class="hub-heading highlight-heading"> <h3 id="5-siloing-ux-decisions-within-the-product-team">5. Siloing UX decisions within the product team</h3> </div> <div class="sf-section"> <div class="hub-paragraph" style="text-align: left;"><div class="rich-text"><p><b>The mistake:</b> if you silo UX decisions within the product team, you can’t create a consistent experience for users. UX design is a cross-team effort—creating consistency across the whole user experience requires a coordinated effort from teams across your whole company.</p><p><b>How to avoid it:</b> product teams should work together with marketing, support, design, and other teams. Share user data and feedback across teams, collaborate on any big UX design changes, and keep other teams in the loop.</p></div></div> </div> <div class="sf-section"> <div class="hub-note background-override" style="background:#FEE1E6;"> <div class="hub-note__header"> </div> <div class="hub-note__content"> <div class="highlight-heading" style="text-align: center;"> <h5 id="if-youre-using-hotjar">🔥 If you're using Hotjar</h5> </div> <span style="text-align: left;"><div class="rich-text"><p><br/>Whether your team has new targets, you’re going through a redesign, or you’re prioritizing product optimizations, back up your plans for your next moves with experience insights from <i>real users</i> in Hotjar and <a href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/updates/en/hotjar-x-slack-pt--get-your-team-synced-on-recordings--surveys-" target="_blank" rel="noopener noreferrer"><u>get the conversation flowing in Slack.</u></a></p><p>It's easy:</p></div></span> <figure class="image-block"> <img class="image-block__image" src="https://web.archive.org/web/20210811233640im_/https://static-cms.hotjar.com/original_images/SlackxHotjarRecordings.gif" alt="Slackx Hotjar Recordings" style="" loading="lazy"> </figure> </div> </div> </div> <div class="sf-section"> <div class="call-to-action call-to-action--hub"> <div class="call-to-action__content"> <h2 class="call-to-action__title">Improve UX with product experience insights from Hotjar</h2> <p class="call-to-action__summary">Use Hotjar to understand how real users are experiencing your website or app—then improve it for them!</p> <a class="button button--blog-cta" href="https://web.archive.org/web/20210811233640/https://insights.hotjar.com/register" target="_blank">Sign up now. It's free!</a> </div> <div class="call-to-action__image-wrapper"> </div> </div> </div> <div class="hub-heading highlight-heading"> <h2 id="frequently-asked-questions-about-ux-design">Frequently asked questions about UX design</h2> </div> <div class="sf-section"> <div role="tablist" aria-multiselectable="true"> <section class="faq-section" itemscope itemtype="https://schema.org/FAQPage"> <div class="faqs accordion accordion--hub-fqa-block" data-accordion> <div class="faq" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <a href="" class="accordion__title" data-accordion-question role="tab" aria-controls="answer-1" aria-expanded="false" aria-selected="false" tabindex="0" id="question-1"> <h3 class="faq-question" itemprop="name">What is UX design?</h3> <svg class="accordion__icon" aria-hidden="true"> <title>Arrow icon</title> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </a> <div class="faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div aria-live="polite" class="accordion__content" data-accordion-answer id="answer-1" role="tabpanel" aria-labelledby="question-1" aria-hidden="false" itemprop="text"> <div class="rich-text"><p><b>User experience (UX) design is the process of building products that are easy and enjoyable for people to use.</b> While designers and product managers typically handle it, UX design transcends every team and every role within an organization.</p><p>The basic idea of UX design is that by building products to be as effortless as possible for users, you can encourage adoption, retention, and loyalty.</p></div> </div> </div> </div> </div> <div class="faqs accordion accordion--hub-fqa-block" data-accordion> <div class="faq" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <a href="" class="accordion__title" data-accordion-question role="tab" aria-controls="answer-2" aria-expanded="false" aria-selected="false" tabindex="0" id="question-2"> <h3 class="faq-question" itemprop="name">Why is UX design important?</h3> <svg class="accordion__icon" aria-hidden="true"> <title>Arrow icon</title> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </a> <div class="faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div aria-live="polite" class="accordion__content" data-accordion-answer id="answer-2" role="tabpanel" aria-labelledby="question-2" aria-hidden="false" itemprop="text"> <div class="rich-text"><p>UX design is one way to make sure your product effectively solves problems for your users. Your product team can draw on UX design to:</p><ul><li>Help convert more users and drive adoption</li><li>Boost customer retention and loyalty</li><li>Banish churn</li></ul></div> </div> </div> </div> </div> <div class="faqs accordion accordion--hub-fqa-block" data-accordion> <div class="faq" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <a href="" class="accordion__title" data-accordion-question role="tab" aria-controls="answer-3" aria-expanded="false" aria-selected="false" tabindex="0" id="question-3"> <h3 class="faq-question" itemprop="name">What is good UX design?</h3> <svg class="accordion__icon" aria-hidden="true"> <title>Arrow icon</title> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </a> <div class="faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div aria-live="polite" class="accordion__content" data-accordion-answer id="answer-3" role="tabpanel" aria-labelledby="question-3" aria-hidden="false" itemprop="text"> <div class="rich-text"><p>Good UX design is simple, functional, and frictionless, enabling users to fulfill whatever they turn to your product to do—as quickly and easily as possible.</p></div> </div> </div> </div> </div> <div class="faqs accordion accordion--hub-fqa-block" data-accordion> <div class="faq" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <a href="" class="accordion__title" data-accordion-question role="tab" aria-controls="answer-4" aria-expanded="false" aria-selected="false" tabindex="0" id="question-4"> <h3 class="faq-question" itemprop="name">How are UI and UX different?</h3> <svg class="accordion__icon" aria-hidden="true"> <title>Arrow icon</title> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </a> <div class="faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"> <div aria-live="polite" class="accordion__content" data-accordion-answer id="answer-4" role="tabpanel" aria-labelledby="question-4" aria-hidden="false" itemprop="text"> <div class="rich-text"><p>UI design is more narrowly focused on the aesthetics and functions of the interface users interact with, whereas UX design is a broader process of identifying and solving user problems.</p></div> </div> </div> </div> </div> </section> </div> </div> </div> <div class="wrapper--hub-wide"> <nav aria-label="Pagination"> <ul class="hub-pagination"> <li class="hub-pagination__next"> <a href="/web/20210811233640/https://www.hotjar.com/ux-design/tools/" aria-label="Next"> <svg class="hub-pagination__icon"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#hub-arrow-right"></use> </svg> <p class="hub-pagination__title">UX tools</p> </a> </li> </ul> </nav> </div> </main> <footer class="footer footer--hub" role="contentinfo" data-footer> <div class="wrapper wrapper--footer"> <div class="footer__inner wrapper wrapper--large"> <section class="footer__section footer__section--nav-container"> <a class="footer__home-link footer__home-link--mobile" href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/"> <svg class="footer__logo footer__logo--mobile"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#logo--colorable"></use> </svg> </a> <nav class="footer-nav" role="navigation"> <ul class="footer-nav__list"> <li class="footer-nav__item footer-nav__item--footer accordion accordion--footer" data-accordion> <span class="footer-nav__title accordion__title" data-accordion-question role="tab" aria-controls="answer-1" aria-expanded="false" aria-selected="false" tabindex="0" id="question-1"> HOTJAR <svg class="accordion__icon" aria-hidden="true"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </span> <ul class="footer-nav__subnav accordion__content" aria-live="polite" data-accordion-answer id="answer-1" role="tabpanel" aria-labelledby="question-1" aria-hidden="false"> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/tour/">Product tour</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/pricing/">Pricing</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/customers/">Customer stories</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/updates/en">Product updates</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/blog/what-is-hotjar/">What is Hotjar?</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" href="https://web.archive.org/web/20210811233640/https://status.hotjar.com/">Status</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us/articles/115009335727-Will-Hotjar-Slow-Down-My-Site-">Site performance</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/privacy/">Your privacy & Hotjar</a> </li> </ul> </li> <li class="footer-nav__item footer-nav__item--footer accordion accordion--footer" data-accordion> <span class="footer-nav__title accordion__title" data-accordion-question role="tab" aria-controls="answer-2" aria-expanded="false" aria-selected="false" tabindex="0" id="question-2"> RESOURCES <svg class="accordion__icon" aria-hidden="true"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </span> <ul class="footer-nav__subnav accordion__content" aria-live="polite" data-accordion-answer id="answer-2" role="tabpanel" aria-labelledby="question-2" aria-hidden="false"> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/blog/">Blog</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/guides/">Guides</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" data-track-click="true" data-name="Support documentation" data-position="Footer navigation" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us">Support documentation</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/heatmaps/">Heatmap handbook</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/conversion-rate-optimization/">CRO action plan</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/customer-experience/">CX resources</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/usability-testing/">Usability testing hub</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/blog/website-feedback/">Website feedback 101</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/website-tracking/">Website tracking</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/ux-design/">UX design</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/behavior-analytics/">Behavior analytics</a> </li> </ul> </li> <li class="footer-nav__item footer-nav__item--footer accordion accordion--footer" data-accordion> <span class="footer-nav__title accordion__title" data-accordion-question role="tab" aria-controls="answer-4" aria-expanded="false" aria-selected="false" tabindex="0" id="question-4"> COMPLIANCE <svg class="accordion__icon" aria-hidden="true"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </span> <ul class="footer-nav__subnav accordion__content" aria-live="polite" data-accordion-answer id="answer-4" role="tabpanel" aria-labelledby="question-4" aria-hidden="false"> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us/categories/360003405813">Compliance, legal & security</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/legal/policies/terms-of-service/">Terms of service</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/legal/policies/privacy/">Privacy policy</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/legal/policies/acceptable-use/">Acceptable use policy</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us/articles/115011789248-Hotjar-Cookies">Cookie info</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer ot-sdk-show-settings">Cookie settings</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/privacy/do-not-track/">Do not track</a> </li> </ul> </li> <li class="footer-nav__item footer-nav__item--footer accordion accordion--footer" data-accordion> <span class="footer-nav__title accordion__title" data-accordion-question role="tab" aria-controls="answer-3" aria-expanded="false" aria-selected="false" tabindex="0" id="question-3"> COMPANY <svg class="accordion__icon" aria-hidden="true"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#arrow"></use> </svg> </span> <ul class="footer-nav__subnav accordion__content" aria-live="polite" data-accordion-answer id="answer-3" role="tabpanel" aria-labelledby="question-3" aria-hidden="false"> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/about-us/">About us</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" href="https://web.archive.org/web/20210811233640/https://careers.hotjar.com/">Careers</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" href="/web/20210811233640/https://www.hotjar.com/founding-members/">Founding members</a> </li> <li class="footer-nav__item footer-nav__item--footer" role="presentation"> <a class="footer-nav__link footer-nav__link--footer" target="_blank" data-track-click="true" data-name="Get Help" data-position="Footer navigation" href="https://web.archive.org/web/20210811233640/https://help.hotjar.com/hc/en-us?itm_source=footer_get_help">Get help</a> </li> </ul> </li> </ul> </nav> </section> <section class="footer__section footer__section--bottom"> <a class="footer__home-link footer__home-link--desktop" href="https://web.archive.org/web/20210811233640/https://www.hotjar.com/"> <svg class="footer__logo footer__logo--desktop"> <use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#logo--colorable"></use> </svg> </a> <span class="footer__copyright">Copyright © 2014 - 2021 Hotjar Ltd. All rights reserved.</span> <section class="footer__social-links"> <a href="https://web.archive.org/web/20210811233640/https://www.facebook.com/HotjarApps"> <svg class="footer__social-icon footer__social-icon--facebook"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#facebook"></use></svg> </a> <a href="https://web.archive.org/web/20210811233640/https://twitter.com/hotjar"> <svg class="footer__social-icon footer__social-icon--twitter"><use xlink:href="/web/20210811233640im_/https://www.hotjar.com/ux-design/#twitter"></use></svg> </a> </section> </section> </div> </div> </footer> </div> </div> <script data-ot-ignore type="text/javascript" src="/web/20210811233640js_/https://www.hotjar.com/static/js/main.78b9b0d0f6c5.js" class="optanon-category-0"></script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20210811233640/https://www.googletagmanager.com/gtm.js?id='+i+dl+''; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM\u002DN4F4J3');</script> </body> </html>

CINXE.COM

Introduction to UX Design: Key Principles & Best Practices