Basics of UX | Articles

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/articles/ux-basics"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/articles/ux-basics" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/ux-basics" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/ux-basics?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/ux-basics?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/ux-basics?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/ux-basics?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/ux-basics?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/ux-basics?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/ux-basics?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/ux-basics?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/ux-basics?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/ux-basics?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/ux-basics?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/ux-basics?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/ux-basics?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/ux-basics?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/ux-basics?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/ux-basics?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/ux-basics?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/ux-basics?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/ux-basics?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/ux-basics?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/ux-basics" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/ux-basics" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/ux-basics?hl=vi" /><title>Basics of UX  |  Articles  |  web.dev</title> <meta property="og:title" content="Basics of UX  |  Articles  |  web.dev"><meta name="description" content="A step-by-step guide to the basics of UX design."> <meta property="og:description" content="A step-by-step guide to the basics of UX design."><meta property="og:url" content="https://web.dev/articles/ux-basics"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2016-10-01", "headline": "Basics of UX" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "Basics of UX", "item": "https://web.dev/articles/ux-basics" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Articles" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/articles" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Articles" > Articles </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Basics of UX </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>A step-by-step guide to the basics of UX design.</p> <p> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Mustafa Kurtuldu" src="https://web.dev/images/authors/mustafa.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Mustafa Kurtuldu </span> <div class="wd-author__links"> <a href="https://twitter.com/mustafa_x" aria-label="Mustafa Kurtuldu on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/mustafa-x" aria-label="Mustafa Kurtuldu on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://glitch.com/@mustafa-x" aria-label="Mustafa Kurtuldu on Glitch" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"> <title>Glitch</title> <path fill="currentColor" d="M31.734 16.76c-.385-.198-4.536 1.865-5.427 1.693-2.24-.401-1.828-.667-4.839-1.359-1.203-.266-1.031-.109-1.297-.307-.172-.135-.344-.161-.599-.401 4-.719 6.026-1.693 6.734-1.839.76-.146 5.161 1.958 5.427 1.469.266-.495-.964-1.578-.401-3.031.589-1.464-.693-2.422.016-3.583.719-1.161.573-2.932.396-3.026-.396-.203-4.531 1.865-5.438 1.693-2.24-.417-1.828-.682-4.839-1.359-1.203-.271-1.031-.12-1.297-.323-.266-.198-.521-.13-1.036-.974-.521-.839-6.51-2.13-6.906-2.13-.828 0-2.375 2.13-2.375 2.13s-.599 0-2.401.094c-1.802.094-3.375.896-5.495 2.563C-.173 9.737.134 11.414.134 11.414s1.969.667 1.969 1.042c0 .359-1.729.802-1.729.802 1.12 1.411 4.583 2.745 5.464 2.745h.693c-1.438.281-2.823 1.068-4.583 2.438-2.12 1.698-1.813 3.375-1.813 3.375s1.969.667 1.969 1.026-1.729.802-1.729.802c1.12 1.427 4.583 2.76 5.464 2.76.844 0 1.427.026 2.495-.172.078.172.906 1.932 2.599 2.292 1.786.385 2.776.078 2.776.078s.094-.786-.323-1.573c1.547.161 3.307.203 5.026-.068 4.76-.719 7.12-1.865 7.896-2.01.76-.161 5.161 1.948 5.427 1.464.266-.505-.964-1.583-.385-3.036.573-1.469-.708-2.417 0-3.589.719-1.161.573-2.932.396-3.026zM4.615 11.828a1.446 1.446 0 0 1-.297-.042h-.052c-.026-.01-.052-.026-.078-.042l-.052-.01-.083-.042h-.052a.418.418 0 0 1-.068-.042l-.068-.052-.063-.036-.057-.042c-.021-.016-.042-.036-.063-.052l-.042-.042c-.026-.026-.047-.052-.068-.078l-.026-.031a1.954 1.954 0 0 1-.094-.104l-.026-.026c-.021-.036-.036-.073-.052-.109l-.026-.036-.057-.083c-.005-.021-.016-.042-.026-.063l-.026-.083-.026-.052-.016-.094-.01-.068c-.01-.026-.021-.052-.026-.078v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.297 0-.719-.505-1.307-1.146-1.307-.625 0-1.13.573-1.146 1.281 0-.932.667-1.693 1.495-1.693.823 0 1.479.745 1.479 1.682 0 .932-.667 1.693-1.479 1.693zm-1-1.265c0-.203.13-.365.318-.365s.307.161.307.365c0 .198-.135.344-.307.344s-.318-.161-.318-.344zm1 11.651a.712.712 0 0 1-.146 0l-.057-.016a.6.6 0 0 1-.094-.01l-.052-.016-.078-.026-.052-.026c-.031-.005-.057-.016-.083-.026l-.052-.026c-.021-.016-.047-.026-.068-.042L3.881 22l-.068-.052-.052-.042-.068-.052-.042-.042c-.031-.031-.063-.057-.089-.094a.671.671 0 0 1-.094-.12l-.031-.026c-.016-.031-.036-.063-.052-.094l-.026-.052c-.016-.026-.036-.052-.052-.078l-.026-.057-.026-.094-.026-.052-.031-.094-.01-.052c-.01-.031-.021-.063-.026-.094v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.292 0-.724-.505-1.297-1.146-1.297-.625 0-1.13.563-1.146 1.266 0-.932.667-1.693 1.495-1.693.823 0 1.479.76 1.479 1.682 0 .917-.667 1.693-1.479 1.693zm-1-1.266c0-.188.13-.349.318-.349s.307.161.307.349c0 .188-.135.344-.307.344s-.318-.146-.318-.344zm6.77-7.333v-.042l.042-.078.078-.297c.182-.583.344-1.172.479-1.771.161-.708.229-1.281.203-1.599-.016-.12-.031-.245-.052-.359a8.276 8.276 0 0 0-.521-1.724l-.083-.172-.026-.068c-.12-.266.057-.573.323-.557h.188l.531.036 2.104.109 1.151.078a28.24 28.24 0 0 1 10.573 2.828l.891.401c.172.078.266.307.188.505-.068.188-.266.292-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.146-.068-.51-.026-1.599-.094h-.156c.188.51.339 1.031.453 1.562l.063.427c.042.453-.036 1.078-.224 1.88l-.203.823a23.62 23.62 0 0 1-.385 1.323l-.026.078v.042c-.068.188-.266.292-.438.214-.177-.068-.271-.292-.203-.495zm-2-6.349a.307.307 0 0 1 .479.026c.208.26.396.536.563.828.292.531.495 1.068.547 1.615.026.307 0 .651-.052 1.026a8.718 8.718 0 0 1-.271 1.104c-.094.313-.208.62-.333.922-.078.188-.276.266-.453.172-.172-.094-.24-.318-.156-.521l.026-.052.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.052-.802a3.47 3.47 0 0 0-.453-1.292 4.794 4.794 0 0 0-.443-.667l-.036-.042a.417.417 0 0 1 .026-.531zm1.537 13.869c-.063.38-.151.76-.271 1.13a9.549 9.549 0 0 1-.333.906c-.078.188-.276.266-.453.177-.172-.094-.24-.323-.156-.521l.026-.057.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.036-.802a3.365 3.365 0 0 0-.438-1.276 4.794 4.794 0 0 0-.443-.667l-.036-.057a.417.417 0 0 1 .026-.531.3.3 0 0 1 .464 0c.214.266.396.547.563.839.292.536.495 1.083.547 1.615.026.307 0 .651-.052 1.026zm16.531.157c-.068.188-.266.297-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.135-.063h-.063l-.458-.026c-.583-.036-1.172-.068-1.755-.094l.036.078c.234.615.396 1.255.479 1.906.042.453-.036 1.078-.224 1.88l-.203.828a24.99 24.99 0 0 1-.385 1.333l-.026.068v.036c-.068.203-.266.297-.438.229a.42.42 0 0 1-.203-.51v-.026l.042-.078.078-.292c.182-.589.344-1.177.479-1.776.161-.708.229-1.281.203-1.599-.016-.12-.031-.24-.052-.359a7.996 7.996 0 0 0-.521-1.708l-.052-.12-.031-.068-.026-.063c-.12-.271.057-.578.323-.563h.188l.531.042 2.12.104 1.135.083a28.14 28.14 0 0 1 10.573 2.823l.891.401c.172.078.266.307.188.505z"/> </svg></a> <a href="https://designtoday.info" aria-label="Mustafa Kurtuldu's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> </div></p> <p>This article introduces a workflow that can help teams, products, startups and companies create a robust and meaningful process for developing a better user experience for their customers. You could use different parts of the process separately but they ideally work best as a series of steps.</p> <p>This guide borrows heavily from the Design Sprint methodology that multiple teams across Google use to troubleshoot and solve challenges such as the <a href="https://www.google.com/selfdrivingcar/">Self Driving Car</a> and <a href="https://www.solveforx.com/loon/">Project Loon</a>.</p> <h3 id="double_diamond" data-text="Double Diamond" tabindex="-1">Double Diamond</h3> <p>This flow work is based on what we in UX circles call the double diamond, made popular by the <a href="https://www.designcouncil.org.uk/">British Design Council</a>, where your team diverges to understand an idea through research and then converges to define the challenge, diverges to sketch it individually, share the ideas, decide on what the best way forward is, test and validate.</p> <figure> <img src="/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8.png" alt="Phases of a project include; uderstand, define, diverge, decide, prototype and validate." width="800" height="513" srcset="https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_36.png 36w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_48.png 48w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_72.png 72w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_96.png 96w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_480.png 480w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_720.png 720w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_856.png 856w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_960.png 960w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_1440.png 1440w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_1920.png 1920w,https://web.dev/static/articles/ux-basics/image/phases-a-project-include-b133a789f7ae8_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">The 'double diamond' design process model pioneered by the British Design Council, the steps involve these phases of a project; <em>Understand</em>, <em>Define</em>, <em>Diverge</em>, <em>Decide</em>, <em>Prototype</em> and <em>Validate</em>.</figcaption> </figure> <h2 id="setting_the_stage" data-text="Setting the stage" tabindex="-1">Setting the stage</h2> <p>First thing is to start with the underlying challenge at hand and write it out like a proposal, asking yourself, “what is the problem I’m actually trying to solve?”. The challenge statement is the brief you are setting for the project that includes your goal.</p> <p>This challenge could be for an existing product feature that needs to be refined or a completely new product altogether. Whatever your task may be, simply adjust the language to fit the goal you are trying to achieve. A statement should be tied to your team goals, focused on your audience, inspiring and concise.</p> <p>These are some real life examples of products that I have worked on in the past;</p> <ul> <li><p>Design a system to manage the treatment and follow-up care of patients with clubfoot.</p></li> <li><p>Create an app that simplifies complex financial systems and pare them down to the essentials.</p></li> <li><p>Design a consistent mobile app across different platforms without sacrificing the brand.</p></li> </ul> <h3 id="updating_your_challenge_statement" data-text="Updating your challenge statement" tabindex="-1">Updating your challenge statement</h3> <p>Once you have written several variations of the goal, present it to your team to get a consensus. You may want to include a deadline as this will help the team focus on the problem. So with the added adjustments, the list above could be:</p> <ul> <li>Design a system to manage the treatment and follow-up care of children under the age of 2 with clubfoot for launch in Q1 this year.</li> <li>Create a simple financial app that allows you to buy and sell shares at the tap of a button without prior knowledge of the financial world, with initial launch on July 2017.</li> <li>Produce a design guide that is flexible across multiple platforms and positions the company's brand effectively on each platform by the end of this year.</li> </ul> <p>When the challenge statement is finished, display it in a prominent place so that you can see it while you work. You will need to refer back to it constantly, perhaps even updating or modifying it throughout your project.</p> <h2 id="validating_the_problem" data-text="Validating the problem" tabindex="-1">Validating the problem</h2> <p>The next step is to research the challenge and learn about the problem. What you need to discover is whether your team's understanding of the problem is valid. Quite often we look at problems from our own point of view, which is dangerous as most of us in tech are actually power users and are in fact a minority of users. We are a vocal minority and can be fooled into thinking something is actually a problem when it isn’t.</p> <p>There are various methods of collecting data to validate the challenge. Each one depends on your team and if you have access to users. The objective is to have a better understanding of the problem at hand.</p> <h3 id="internal_interviews_with_stakeholders" data-text="Internal interviews with stakeholders" tabindex="-1">Internal interviews with stakeholders</h3> <figure> <img src="/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d.jpg" alt="Interviews with stakeholders can be informative for discovering insights across a company or team." width="350" height="306" srcset="https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/interviews-stakeholders-aa5a3da4461d_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Interviews with stakeholders can be informative for discovering insights across a company or team.</figcaption> </figure> <p>The interviewing process involves interviewing each team member and stakeholder at your company, from marketing to accounts. This will help you find what they think the real challenges are and what they think potential solutions could be. When I say solution I am not speaking about technical solutions here, but rather what would be the best case scenario and end goal for the company or product. For example using the challenges above “having our clubfoot software in 80% of medical facilities by the end of the year” would be a great goal to aim for.</p> <p>There is one caveat. This method of validation is the least favoured as it prevents team discussion and collaboration, potentially creating a siloed atmosphere in an organization. Nevertheless it can yield some good information about the clients and the design challenge that you could otherwise miss.</p> <h3 id="lightning_talks" data-text="Lightning talks" tabindex="-1">Lightning talks</h3> <figure> <img src="/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5.jpg" alt="A lightning talk is a very short presentation lasting only a few minutes." width="800" height="356" srcset="https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/a-lightning-talk-is-very-cb348c77604e5_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">A lightning talk is a very short presentation lasting only a few minutes.</figcaption> </figure> <p>This is similar to the internal interviews, but this time you get every stakeholder into a single room. Then you Elect five or six of those stakeholders (marketing, sales, design, accounts, research etc.) to give a talk, each focusing on the challenge from their perspective for a maximum of 10 minutes. The topics they must cover in their presentation should be:</p> <ul> <li>Goals of the business</li> <li>Challenges of the project from their point of view (these could be technical, research gathering, design creation etc…)</li> <li>User research that you have currently</li> </ul> <p>Leave 5 minutes at the end for questions, with an elected person taking notes throughout. Once you are done you might want to update the challenge to reflect new learnings. The goal is to collect a list of bullet points that can drive a feature or flow that helps your achieve your products goal.</p> <h3 id="user_interviews" data-text="User interviews" tabindex="-1">User interviews</h3> <figure> <img src="/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476.jpg" alt="User interviews are a great way to learn about a persons pain points in any given task." width="800" height="356" srcset="https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/user-interviews-are-grea-cab753a7c7476_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">User interviews are a great way to learn about a person's pain points in any given task.</figcaption> </figure> <p>This is perhaps the best way of learning about the user's journey, pain points, and flow. Arrange at least five user interviews, more if you have access to them. The sorts of questions you ask them should include:</p> <ul> <li>How do they complete an existing task? For example, say you want to solve the challenge for the financial app above, you could ask them “how do you buy shares and stocks at the moment?”</li> <li>What do they like about this flow?</li> <li>What do they dislike about this flow?</li> <li>What similar products does the user currently use? <ul> <li>What do they like?</li> <li>What do they dislike?</li> </ul></li> <li>If they had a magic wand and could change one thing about this process what would it be?</li> </ul> <p>The idea of interviewing is to get the user to speak about the challenges they have. It is not a discussion point for you, which is why you must remain as quiet as possible. This is even true when a user stops speaking, always wait a moment as they could be gathering their thoughts. You would be surprised at how much someone will continue to speak after they have stopped for a few seconds.</p> <p>Take notes throughout and if possible record the conversation to help you capture anything you might have missed. The goal is to compare the challenge to the user insights that you gather. Do they align? Did you learn anything that helps you update your challenge statement?</p> <h3 id="ethnographic_field_research" data-text="Ethnographic field research" tabindex="-1">Ethnographic field research</h3> <figure> <img src="/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97.jpg" alt="Seeing users in their natural environment is a great way to understand how they solve their own challenges." width="350" height="307" srcset="https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/seeing-users-their-natur-bba375af4af97_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Seeing users in their natural environment is a great way to understand how they solve their own challenges.</figcaption> </figure> <p>This is where you observe the user in the field, in context while doing something like how they do their shopping, how they travel to work, how they send SMS messages etc… The reason is in some cases people will tell you what they think you want to hear. But if you watch users perform actions and tasks on their own it can be insightful. Basically you are observing without interfering, noting things which they find easy or difficult and things they may have missed. The goal is to immerse yourself in the user's environment to better empathize with their pain points.</p> <p>This technique usually involves some work done over a longer period of time and requires a researcher to lead this part of the project. But it is perhaps the most insightful as you get to see a group of people that you are studying in their natural environments.</p> <h3 id="gathering_it_altogether" data-text="Gathering it altogether" tabindex="-1">Gathering it altogether</h3> <p>Once you have completed the learnings phase of your project you need to take one last look at your challenge. Are you on the right path? Is there anything you need to adjust? Write down all of the things you have learnt and group them into categories. These could become the basis of a feature or a flow, depending on the problem you are solving. They could also be used to update and revise the challenge.</p> <p>Once you have enough feedback and insight it is time to apply that knowledge to creating a project map.</p> <h2 id="project_map" data-text="Project Map" tabindex="-1">Project Map</h2> <p>The problem you are trying to solve is usually made up of different types of people (or players), each with a stake in the project's flow. Based on your learnings you need to list out the possible players. It could be a user type or stakeholder, for example, “a doctor who treats clubfoot”, “a patient who has clubfoot”, “a care giver who looks after patient”, etc… Write down each player on a the left hand side of a sheet of paper or if you have access to one, on a whiteboard. On the right hand side write each player's goals.</p> <p>Finally for each player, write down the number of steps required for them to reach their goal. For example for "a doctor who treats clubfoot” the goal would be “cure a patient with clubfoot”, so the steps could be “register the patient in the system”, “start them on medical a plan”, “create a review cycle of their medical health” and “perform medical procedure”.</p> <figure> <img src="/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c.jpg" alt="Project maps plot out the main steps for each user or player in a flow." width="800" height="294" srcset="https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/project-maps-plot-the-ma-5053d7a28e90c_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Project maps plot out the main steps for each user or player in a flow.</figcaption> </figure> <p>The result is a project map with the main steps in the process. Think of it as an overview of the project without too many details. It also lets team members judge whether the map matches the challenge statement. Later, when you break down each step, there will be more details. But for now a project map gives you a high level breakdown of the steps a user will take to complete their end goal.</p> <h2 id="wireframing_and_storyboarding" data-text="Wireframing and storyboarding" tabindex="-1">Wireframing and storyboarding</h2> <h3 id="crazy_8s" data-text="Crazy 8s" tabindex="-1">Crazy 8s</h3> <p>For this, I recommend a method called crazy 8s that involves folding a piece of paper twice over so that you have eight panels. Then in each panel you draw out an idea based on all that you have learnt so far. Give yourself ten minutes to come up with ideas to fill all eight panels. If you give yourself more than 20 minutes you may start to procrastinate, go make yourself a coffee, check email, have a general chat with your team and essentially avoid doing the work. You want to create a sense of urgency in this step as it forces you to work quickly and more effectively.</p> <p>If you are working with a team get everyone to do their own as well. This process will kick start your brain and get you thinking about the challenge. Generally the sketch will be an interface design wireframe.</p> <p>Afterwards, you and everyone on your team presents their ideas to the group. Everyone must explain each of their eight ideas in detail and why they chose to go down a specific path. Remind each team member to use the learnings for justification of their ideas. Once everyone has presented it's time to vote on the ideas. Each person gets two sticky dots and can vote on any idea. They can give both votes to a single idea if they really like it.</p>  <div class="wd-switcher"> <figure> <img src="/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24.jpg" alt="Crazy 8s are a great way to get all of your ideas onto one page." width="350" height="250" srcset="https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/crazy-8s-are-great-to-8e72634078e24_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Crazy 8s are a great way to get all of your ideas onto one page.</figcaption> </figure> <figure> <img src="/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39.jpg" alt="Now you need to do a detailed design based on what you have learned." width="350" height="253" srcset="https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/now-need-do-detailed-d-d2a73513c9d39_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Now you need to do a detailed design based on what you have learned.</figcaption> </figure> </div> <h3 id="refine_your_design" data-text="Refine your design" tabindex="-1">Refine your design</h3> <p>After the voting take the idea with the most votes and sketch out a final idea. You can borrow from the other ideas that you heard from your colleagues as well. Give yourself another ten minutes to complete this task. Once you are done, again present the ideas to your team and vote like before.</p> <h3 id="storyboard_the_idea" data-text="Storyboard the idea" tabindex="-1">Storyboard the idea</h3> <figure> <img src="/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614.jpg" alt="The storyboard involves combining your sketches and ideas into a comprehensive flow." width="552" height="399" srcset="https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-c-56389a529b614_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">The storyboard involves combining your sketches and ideas into a comprehensive flow.</figcaption> </figure> <p>With your design in hand, it's time to storyboard it's engagement with the user. By this point you should have already thought about the different steps a user takes. It's quite common to incorporate one of your colleagues' designs into the flow as well. You want to have a clear step-by-step process with some points where the user might diverge. Refer back to the project map to validate your design against the goal.</p> <h2 id="creating_a_prototype" data-text="Creating a prototype" tabindex="-1">Creating a prototype</h2> <p>Creating a prototype is not about molding the perfect piece of code but to make something that is believable when used by someone. Tools used to create a prototype vary from person to person. Some like Keynote or Powerpoint as it forces you to think of the flow and not design details. You might want to invest time into learning tools like Balsamiq, Marvel or Framer which can give you more behavioral controls. Whatever tool you use make sure it is one that makes you focus on the flow and looks real. You need to test the prototype on real people so it needs to be as believable as possible but at the same time it shouldn’t take weeks of work to create.</p> <figure> <img src="/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f.jpg" alt="Prototypes need to be real enough to be believable" width="800" height="367" srcset="https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/prototypes-need-be-real-3ee6114df3d6f_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Prototypes need to be real enough to be believable.</figcaption> </figure> <p>Creating a prototype is a balance between time and realness, so be careful not to sway to much into either extreme. Either way, you could end up wasting time.</p> <h2 id="usability-test_your_designs" data-text="Usability-test your designs" tabindex="-1">Usability-test your designs</h2> <p>It's great if you have a testing lab. If you don't, creating one isn't difficult as long as you're mindful of creating a comfortable environment for your users that isn't distracting. Testing usually involves the user and two people from your team, one taking notes and the other asking questions. A good set up is to use an app like Hangouts and record their actions, this is also handy if you want the rest of the team to observe from a different room. This can be quite scary for us as app makers to do as we are seeing our designs out in the wild. It can be both a refreshing and sobering experience.</p> <figure> <img src="/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b.jpg" alt="The storyboard involves putting all of your sketches and ideas together into a comprehensive flow." width="800" height="360" srcset="https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_36.jpg 36w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_48.jpg 48w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_72.jpg 72w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_96.jpg 96w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_480.jpg 480w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_720.jpg 720w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_856.jpg 856w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_960.jpg 960w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_1440.jpg 1440w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_1920.jpg 1920w,https://web.dev/static/articles/ux-basics/image/the-storyboard-involves-p-20f7dd053549b_2880.jpg 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">The storyboard involves putting all of your sketches and ideas together into a comprehensive flow.</figcaption> </figure> <h3 id="questions_to_ask" data-text="Questions to ask" tabindex="-1">Questions to ask</h3> <p>When testing your design, ask the user to perform tasks in your app and get them to speak aloud and verbalize what they're doing and why. This is an odd thing to do but it helps you hear what they're thinking. Try not to interrupt or tell them what they should do when they get stuck. Simply ask them why they took a particular flow after they have completed (or NOT completed).</p> <p>What you need to find out is:</p> <ul> <li>What do they like about the prototype?</li> <li>What do they dislike about the prototype?</li> <li>What are the pain points? <ul> <li>Why did a flow work</li> <li>Why did a flow not work</li> </ul></li> <li>What would they like to improve?</li> <li>Does the overall design/flow meet their needs?</li> </ul> <h2 id="revisit_designs_and_another_round_of_testing" data-text="Revisit designs and another round of testing" tabindex="-1">Revisit designs and another round of testing</h2> <p>You have a working prototype with feedback. Now it’s time to revise your designs, and analyze what worked and what didn’t. Don't be afraid to create a completely new wireframe storyboard and make a new prototype. Starting over can create a better flow than trying to move things on your earlier prototype. Try not to be too precious of it because it is just a prototype.</p> <p>Once you are happy with your designs you can test it again and refine it some more. In cases where the prototype didn’t hit the mark at all, well you might think the project has failed. In actual fact it hasn’t. You've likely spent less development time than if you had actually built the design and you know more bout what user's actually like. With design sprints we have a philosophy where you either win or you learn, so don’t beat yourself up too much if the idea didn't work as planned.</p> <h2 id="make_it" data-text="Make it!" tabindex="-1">Make it!</h2> <p>You have tested your ideas. The user likes them. The stakeholders are invested because they've been involved since the beginning. Now it's time to make the thing. By now you should have a clear idea of what needs to be made and what the priorities of the experience are. At each milestone of the project you may want to introduce usability testing to help validate your work and keeping you on track.</p> <p>I can’t stress how important it is to find out as much as possible before you commit to a lot of work, time and energy on something that might not be the right solution.</p> <p>This article should now give you a basic grounding in UX and its importance. UX isn’t something that should be looked upon as a role for a designer or researcher. It is actually the responsibility of everyone involved in a project so I would recommend involvement at every opportunity.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2016-10-01 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2016-10-01 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Articles", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="A/C8jQUiwTid3mviFTE9oFxoD+qd7F"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Analytics__enable_clearcut_logging","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator","Profiles__enable_complete_playlist_endpoint","Search__enable_page_map","Profiles__enable_recognition_badges","Profiles__enable_public_developer_profiles","Cloud__enable_llm_concierge_chat","OnSwitch__enable","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_shell","Concierge__enable_pushui","Experiments__reqs_query_experiments","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__emergency_css","Cloud__enable_cloudx_ping","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__developers_footer_image","Cloud__enable_free_trial_server_call","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_dlp_service","EngEduTelemetry__enable_engedu_telemetry","BookNav__enable_tenant_cache_key","Cloud__enable_legacy_calculator_redirect","Profiles__enable_completecodelab_endpoint","Profiles__enable_page_saving","CloudShell__cloud_code_overflow_menu","TpcFeatures__enable_required_headers","Search__enable_ai_eligibility_checks","Profiles__enable_profile_collections","TpcFeatures__enable_mirror_tenant_redirects","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_project_variables","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_dashboard_curated_recommendations","Search__enable_suggestions_from_borg","Profiles__enable_awarding_url","Cloud__enable_cloudx_experiment_ids","CloudShell__cloud_shell_button","Profiles__enable_release_notes_notifications"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Basics of UX | Articles | web.dev