Mobile & Tablet Articles, Videos, Reports, and Training Courses

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>Mobile & Tablet Articles, Videos, Reports, and Training Courses</title><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="721be388-83be-48ef-9882-002f0dc9dc4f"></script><script>(function(){ var FLAGS = { 'use_server_algolia_search_flag': false,'use_local_user_profile_cert_and_exam_meta_data_apis': false,'use_teamdesk_api_for_user_profile_override': false,'navigation_2024': true,'banner_sales': true,'use_new_homepage_template': true,'use_local_user_profile_attendance_api': true,'enable_user_auth_redesign': true,'can_generate_certificates': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'log_exam_access_at_event_records': false,'use_local_exam_data': true,'create_course_reminders': true,'use_teamdesk_message_etl': false,'slack-integration': false,'use_virtual_overview_redesign': false,'use_course_redesign': true,'allow_course_new_fields_editing': false,'send_sign_in_reminders': false }, SAMPLES = { }; window.waffle = { "flag_is_active": function waffle_flag(flag_name) { return !!FLAGS[flag_name]; }, "switch_is_active": function waffle_switch(switch_name) { return !!SWITCHES[switch_name]; }, "sample_is_active": function waffle_sample(sample_name) { return !!SAMPLES[sample_name]; }, "FLAGS": FLAGS, "SWITCHES": SWITCHES, "SAMPLES": SAMPLES }; })(); </script><script data-cookieconsent="ignore"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) } gtag("consent", "default", { ad_personalization: "denied", ad_storage: "denied", ad_user_data: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 500 }); gtag("set", "ads_data_redaction", true); gtag("set", "url_passthrough", false); </script><script type="text/plain" data-cookieconsent="statistics">(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://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=oQvLGCv6ryZLP7PJLlpI-g&gtm_preview=env-2&gtm_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THJDDHK');</script><script> window.addEventListener('CookiebotOnConsentReady', function () { if (window.Cookiebot.consent.marketing && window.Cookiebot.consent.method === "explicit") { // the experiment will load in any case but, according to the support, // "Cookies are set, tracking is sent, and integrations send data only after consent is given." window._conv_q.push(['consentGiven']); } }) </script><script src="//cdn-4.convertexperiments.com/js/10041905-10042313.js"></script><link rel="preconnect" href="https://media.nngroup.com/"/><link rel="preconnect" href="https://consent.cookiebot.com/"/><link rel="preconnect" href="https://consentcdn.cookiebot.com/"/><link rel="preconnect" href="https://www.googletagmanager.com/"/><link rel="preconnect" href="https://dnn506yrbagrg.cloudfront.net/"/><script src="https://media.nngroup.com/static/js/output.2e14f0aaa8d0.js" async></script><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.55aab3a9e87a.css" type="text/css"><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="Mobile & Tablet Articles, Videos, Reports, and Training Courses"/><meta property="og:url" content="https://www.nngroup.com/topic/mobile-and-tablet-design/"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:type" content="website"/><meta name="twitter:site" content="@nngroup"/><link rel="canonical" href="https://www.nngroup.com/topic/mobile-and-tablet-design/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.df057ffb02d7.css" type="text/css"> </head> <body class=" sidebar-base right-sidebar landing-page publication publication-list publication-tabs articles-topic " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="banner-sales hidden"> <div class="text"> <strong class="label-small"><span>Save up to 20% when you</span> <span>register for 2+ <a href="/course-calendar/"><span class="visually-hidden">upcoming</span> courses</a></span></strong> Until January 21 </div> <button> <svg class="open-nav" aria-hidden width="16" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-close" /> </svg> </button> </div> <div class="svg-definitions"> <svg width="0" id="icon-error-svg" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/> </svg> <svg width="0" id="icon-error-svg-outlined" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/> <circle cx="12" cy="18.625" r="1.5" fill="black"/> <path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/> </svg> <svg width="0" id="icon-confirm-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/> </svg> <svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor"/> <path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor"/> <path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor"/> <path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor"/> </g> <g id="icon-burger"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" /> </g> <path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor"/> <path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor"/> <g id="icon-cart"> <circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor"/> <circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor"/> <path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> <path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/> </g> </svg> <svg id="icon-close-svg" viewbox="0 0 22 22" width="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-close"> <path d="M1 1L20.5 20.5" stroke="currentColor" stroke-width="2" /> <path d="M20.5 1L1 20.5" stroke="currentColor" stroke-width="2" /> </g> </svg> </div> <header class="banner-image" > <nav class="nav-main desktop" aria-label="main"> <button class="burger-button"> <svg width="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Open main navigation</title> <use href="#icon-burger" /> </svg> </button> <a href="/" class="logo" aria-label="Home"> <svg width="71" viewBox="0 0 71 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Nielsen Norman Group</title> <use href="#logo" /> </svg> </a> <ul> <li class=" has-subnav"> <button aria-expanded="false">Training & UX Certification <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul class="visually-hidden"> <li class=""> <a tabindex="-1" href="/courses/">All Courses</a> </li> <li class=""> <a tabindex="-1" href="/training/live-courses/">Live Online Courses</a> </li> <li class=""> <a tabindex="-1" href="/team-training/">Private Team Training</a> </li> <li class=""> <a tabindex="-1" href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a tabindex="-1" href="/ux-certification/">UX Certification</a> </li> </ul> </li> <li class=" "> <a href="/articles/">Articles & Videos</a> </li> <li class=" "> <a href="/consulting/">Consulting</a> </li> <li class=" "> <a href="/reports/">Reports & Books</a> </li> <li class=" has-subnav"> <button aria-expanded="false">About NN/g <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul class="visually-hidden"> <li class=""> <a tabindex="-1" href="/about/">Overview</a> </li> <li class=""> <a tabindex="-1" href="/people/">People</a> </li> <li class=""> <a tabindex="-1" href="/about/about-client-list/">Clients</a> </li> <li class=""> <a tabindex="-1" href="/news/">News</a> </li> <li class=""> <a tabindex="-1" href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty"> <a href=/cart/> <svg width="30" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-cart" /> </svg> <span></span> </a> </div> <div class="profile has-subnav"> <button class="loading" aria-expanded="false">Profile <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> </div> <button class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="9f70340d433027a479c60e38395a089c" data-index="Document_production_query_suggestions" > <label class="visually-hidden" for="search">Search</label> <div id="search-autocomplete"><input id="search" name="q" type="search" /></div> <button type="reset" class="reset-button empty" disabled> <svg width="13" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Reset</title> <use href="#icon-close" /> </svg> </button> <button type="submit" class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <div class="mb-6"> <h1 class="article-h1"><strong>Mobile & Tablet</strong> Articles & Videos</h1> </div> <div class="fixed twelve column grid m-row-gapless clearfix"> <div class="nine wide m-12-wide m-row-1 body-content" id="body-content"> <div class="tab-container"> <span class="tab-target" id="recent"></span> <span class="tab-target" id="videos"></span> <span class="tab-target" id="articles"></span> <div class="tab-content"> <ul class="tabs"> <li class="tab recent-tab default"><a href="#recent">Most Recent</a></li> <li class="tab videos-tab"><a href="#videos">Videos Only</a></li> <li class="tab articles-tab"><a href="#articles">Articles Only</a></li> </ul> <div class="tab-body default" id="recentTabContent"> <ul class="publication-list"> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/smartwatch-notification-formula/">The Smartwatch Notification Formula</a></h2> <time><span class="small large desktop only">July 24, 2024</span><span class="mobile only">Jul 24, 2024</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/smartwatch-notification-formula/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Maximize the value of your smartwatch notifications by making them personally relevant, appropriately timed, non-repetitive, and sufficiently informative. </p> </div> <div class="media four-wide"> <a href="/videos/smartwatch-notification-formula/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/breakpoints/">Breakpoints in Responsive Design: What & Why</a></h2> <time><span class="small large desktop only">June 24, 2024</span><span class="mobile only">Jun 24, 2024</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/breakpoints/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Breakpoints determine when a webpage may adjust to different layouts. They help designers (and developers) maintain layout consistency across multiple screen sizes, orientations, and devices. </p> </div> <div class="media four-wide"> <a href="/videos/breakpoints/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/qr-code-guidelines/">13 QR-Code Usability Guidelines</a> </h2> <time><span class="small large desktop only">February 9, 2024</span><span class="mobile only">Feb 9, 2024</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>To be effective, QR codes need clear, brief, contextual information and must lead the user to relevant pages.</p> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/accessibility-widget/">Accessibility Widgets Are Not Enough for Screen-Reader Users</a></h2> <time><span class="small large desktop only">January 3, 2024</span><span class="mobile only">Jan 3, 2024</span> | 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/accessibility-widget/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Website accessibility widgets add little value in making your site accessible to users with partial or no vision. </p> </div> <div class="media four-wide"> <a href="/videos/accessibility-widget/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/mobile-table-of-contents/">Tables of Contents on Mobile</a></h2> <time><span class="small large desktop only">December 20, 2023</span><span class="mobile only">Dec 20, 2023</span> | 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/mobile-table-of-contents/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Tables of contents show mobile users an overview of the information on the page and allow them to easily access the piece of content that is relevant to them. Two possible implementations involve in-page links and accordions. </p> </div> <div class="media four-wide"> <a href="/videos/mobile-table-of-contents/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/smartwatch-app/">Should You Build a Smartwatch App?</a> </h2> <time><span class="small large desktop only">December 1, 2023</span><span class="mobile only">Dec 1, 2023</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Applications native to smartwatch operating systems get used the most. Just because a new smartwatch app could offer basic functionality, it does not mean that users will find it valuable.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/smartwatch-interactions/">6 Types of Useful Smartwatch Interactions</a> </h2> <time><span class="small large desktop only">November 17, 2023</span><span class="mobile only">Nov 17, 2023</span> | Article: 18 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Smartwatches are for more than just receiving notifications and tracking steps. They afford at least 6 different types of interactions that users find useful.</p> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/mobile-images/">Images on Mobile</a></h2> <time><span class="small large desktop only">November 8, 2023</span><span class="mobile only">Nov 8, 2023</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/mobile-images/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Decorative images should not be used on mobile, as they lengthen the page and make it load more slowly. Use images only if they add informational value to your page. </p> </div> <div class="media four-wide"> <a href="/videos/mobile-images/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/passwordless-accounts/">Passwordless Accounts</a></h2> <time><span class="small large desktop only">October 13, 2023</span><span class="mobile only">Oct 13, 2023</span> | 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/passwordless-accounts/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> A new pattern allows users to create an account without defining a password. Later on, they can log in through an OTP or a passkey. </p> </div> <div class="media four-wide"> <a href="/videos/passwordless-accounts/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/content-dispersion/">The Negative Impact of Mobile-First Web Design on Desktop</a> </h2> <time><span class="small large desktop only">October 13, 2023</span><span class="mobile only">Oct 13, 2023</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.</p> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/accordions-on-mobile/">Accordions on Mobile</a></h2> <time><span class="small large desktop only">September 22, 2023</span><span class="mobile only">Sep 22, 2023</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/accordions-on-mobile/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Accordions provide an overview of the whole page and mitigate the problem of long mobile pages, allowing users to directly access the content of interest. </p> </div> <div class="media four-wide"> <a href="/videos/accordions-on-mobile/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/dark-mode-users-issues/">Dark Mode: How Users Think About It and Issues to Avoid</a> </h2> <time><span class="small large desktop only">August 27, 2023</span><span class="mobile only">Aug 27, 2023</span> | Article: 14 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/passwordless-accounts/">Passwordless Accounts: One-Time Passwords (OTPs) and Passkeys</a> </h2> <time><span class="small large desktop only">June 25, 2023</span><span class="mobile only">Jun 25, 2023</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Two recent developments make login and registration much easier.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/bottom-sheet/">Bottom Sheets: Definition and UX Guidelines</a> </h2> <time><span class="small large desktop only">June 11, 2023</span><span class="mobile only">Jun 11, 2023</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>A bottom sheet is a user-interface pattern used commonly in mobile apps for providing contextual details or controls in the lower area of the screen.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/screen-reader-type-control/">How Screen-Reader Users Type on and Control Mobile Devices</a> </h2> <time><span class="small large desktop only">May 28, 2023</span><span class="mobile only">May 28, 2023</span> | Article: 13 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Users who are blind or have low vision prefer dictation over typing with a keyboard whenever possible. Screen readers on touchscreen devices are restricted to a well-defined set of gestures which makes interaction more challenging than on computers.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/mobile-accessibility-research/">Conducting Mobile Accessibility Research with Screen-Reader Users</a> </h2> <time><span class="small large desktop only">May 14, 2023</span><span class="mobile only">May 14, 2023</span> | Article: 13 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use word of mouth to recruit research participants who rely on screen readers. Conduct the study in person to help participants feel comfortable, and plan to record the screen-reader output.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/screen-reader-users-on-mobile/">Challenges for Screen-Reader Users on Mobile</a> </h2> <time><span class="small large desktop only">April 30, 2023</span><span class="mobile only">Apr 30, 2023</span> | Article: 12 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Using a screen reader on mobile is challenging because users must access information sequentially and they cannot easily scan page content. Screen-reader users do not consider accessibility menus helpful.</p> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/unmanned-restaurants/">The User Experience of Unmanned Restaurants in China</a></h2> <time><span class="small large desktop only">February 10, 2023</span><span class="mobile only">Feb 10, 2023</span> | 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/unmanned-restaurants/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Our Beijing-based user research team conducted a field study in automated restaurants that serve diners with no staff. Current designs have some advantages, but the UI is too complicated for customized ordering. </p> </div> <div class="media four-wide"> <a href="/videos/unmanned-restaurants/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/mobile-ux-study-guide/">Mobile UX: Study Guide</a> </h2> <time><span class="small large desktop only">January 12, 2023</span><span class="mobile only">Jan 12, 2023</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Unsure where to start? Use this collection of links to our articles and videos to learn how to write and present information that aligns with users’ needs and online behaviors.</p> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/infinite-scrolling-when/">Infinite Scrolling: When to Use It, When to Avoid It</a></h2> <time><span class="small large desktop only">January 6, 2023</span><span class="mobile only">Jan 6, 2023</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/infinite-scrolling-when/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Infinite scrolling through long lists of homogeneous items can lower interaction costs, but is less suited to support specific tasks such as finding a particular item. </p> </div> <div class="media four-wide"> <a href="/videos/infinite-scrolling-when/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="pagination"> <span><span class="show-for-medium-up only small large desktop">Previous « </span> <span class="show-for-small-down mobile only">Prev « </span></span> <span class="currentpage"> 1 </span> <a href="?page=2"> 2 </a> <a href="?page=3"> 3 </a> <a href="?page=4"> 4 </a> <a href="?page=5"> 5 </a> <a href="?page=6"> 6 </a> <a href="?page=7"> 7 </a> <a href="?page=8"> 8 </a> <a href="?page=2"><span> » Next</span></a> </li> </ul> </div> <div class="tab-body" id="videosTabContent"> <ul class="publication-list"> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/smartwatch-notification-formula/">The Smartwatch Notification Formula</a></h2> <time><span class="small large desktop only">July 24, 2024</span><span class="mobile only">Jul 24, 2024</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/smartwatch-notification-formula/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Maximize the value of your smartwatch notifications by making them personally relevant, appropriately timed, non-repetitive, and sufficiently informative. </p> </div> <div class="media four-wide"> <a href="/videos/smartwatch-notification-formula/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Smartwatch_Notifications_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/breakpoints/">Breakpoints in Responsive Design: What & Why</a></h2> <time><span class="small large desktop only">June 24, 2024</span><span class="mobile only">Jun 24, 2024</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/breakpoints/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Breakpoints determine when a webpage may adjust to different layouts. They help designers (and developers) maintain layout consistency across multiple screen sizes, orientations, and devices. </p> </div> <div class="media four-wide"> <a href="/videos/breakpoints/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Breakpoints_in_UX_What__Why_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/accessibility-widget/">Accessibility Widgets Are Not Enough for Screen-Reader Users</a></h2> <time><span class="small large desktop only">January 3, 2024</span><span class="mobile only">Jan 3, 2024</span> | 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/accessibility-widget/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Website accessibility widgets add little value in making your site accessible to users with partial or no vision. </p> </div> <div class="media four-wide"> <a href="/videos/accessibility-widget/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accessibility_widgets_are_not_enough_for_screen-reader_users_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/mobile-table-of-contents/">Tables of Contents on Mobile</a></h2> <time><span class="small large desktop only">December 20, 2023</span><span class="mobile only">Dec 20, 2023</span> | 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/mobile-table-of-contents/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Tables of contents show mobile users an overview of the information on the page and allow them to easily access the piece of content that is relevant to them. Two possible implementations involve in-page links and accordions. </p> </div> <div class="media four-wide"> <a href="/videos/mobile-table-of-contents/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Table_of_Contents_on_Mobile_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/mobile-images/">Images on Mobile</a></h2> <time><span class="small large desktop only">November 8, 2023</span><span class="mobile only">Nov 8, 2023</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/mobile-images/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Decorative images should not be used on mobile, as they lengthen the page and make it load more slowly. Use images only if they add informational value to your page. </p> </div> <div class="media four-wide"> <a href="/videos/mobile-images/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Images_on_Mobile-Script_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/passwordless-accounts/">Passwordless Accounts</a></h2> <time><span class="small large desktop only">October 13, 2023</span><span class="mobile only">Oct 13, 2023</span> | 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/passwordless-accounts/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> A new pattern allows users to create an account without defining a password. Later on, they can log in through an OTP or a passkey. </p> </div> <div class="media four-wide"> <a href="/videos/passwordless-accounts/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Passwordless_Accounts.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/accordions-on-mobile/">Accordions on Mobile</a></h2> <time><span class="small large desktop only">September 22, 2023</span><span class="mobile only">Sep 22, 2023</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/accordions-on-mobile/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Accordions provide an overview of the whole page and mitigate the problem of long mobile pages, allowing users to directly access the content of interest. </p> </div> <div class="media four-wide"> <a href="/videos/accordions-on-mobile/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Accordions.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/unmanned-restaurants/">The User Experience of Unmanned Restaurants in China</a></h2> <time><span class="small large desktop only">February 10, 2023</span><span class="mobile only">Feb 10, 2023</span> | 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/unmanned-restaurants/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Our Beijing-based user research team conducted a field study in automated restaurants that serve diners with no staff. Current designs have some advantages, but the UI is too complicated for customized ordering. </p> </div> <div class="media four-wide"> <a href="/videos/unmanned-restaurants/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_User_Experience_of_Unmanned_Restaurants_in_China_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/infinite-scrolling-when/">Infinite Scrolling: When to Use It, When to Avoid It</a></h2> <time><span class="small large desktop only">January 6, 2023</span><span class="mobile only">Jan 6, 2023</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/infinite-scrolling-when/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Infinite scrolling through long lists of homogeneous items can lower interaction costs, but is less suited to support specific tasks such as finding a particular item. </p> </div> <div class="media four-wide"> <a href="/videos/infinite-scrolling-when/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Infinite_Scrolling-_When_to_Use_It_When_to_Avoid_It_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/augmented-reality-calibration/">5 Tips for Augmented Reality Calibration</a></h2> <time><span class="small large desktop only">November 25, 2022</span><span class="mobile only">Nov 25, 2022</span> | 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/augmented-reality-calibration/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/5_Tips_for_Augmented-Reality_Calibration_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/5_Tips_for_Augmented-Reality_Calibration_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Before users can use an AR app, they must often calibrate it first. Usability studies find many big problems in calibration designs that can prevent people from ever getting into the actual AR experience. </p> </div> <div class="media four-wide"> <a href="/videos/augmented-reality-calibration/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/5_Tips_for_Augmented-Reality_Calibration_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/5_Tips_for_Augmented-Reality_Calibration_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/5_Tips_for_Augmented-Reality_Calibration_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/big-tables-small-screens/">How to Fit Big Tables on Small Screens</a></h2> <time><span class="small large desktop only">August 20, 2021</span><span class="mobile only">Aug 20, 2021</span> | 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/big-tables-small-screens/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/BigTablesSmallScreens.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/BigTablesSmallScreens.jpeg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> No matter your screen size, some data tables will be too big for the screen. This problem is particularly common on mobile devices. Simple interaction techniques can help, but you may need to offer users more advanced features for information hiding and column reordering. </p> </div> <div class="media four-wide"> <a href="/videos/big-tables-small-screens/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/BigTablesSmallScreens.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/BigTablesSmallScreens.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/BigTablesSmallScreens.jpeg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/onboarding-new-users/">3 Ways to Onboard New Users</a></h2> <time><span class="small large desktop only">July 30, 2021</span><span class="mobile only">Jul 30, 2021</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/onboarding-new-users/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/3_Types_of_Onboarding_New_Users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/3_Types_of_Onboarding_New_Users_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> How to familiarize users with new user interfaces? Onboarding techniques include feature promotion, customization, and instructions. All must be kept simple. </p> </div> <div class="media four-wide"> <a href="/videos/onboarding-new-users/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/3_Types_of_Onboarding_New_Users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/3_Types_of_Onboarding_New_Users_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/3_Types_of_Onboarding_New_Users_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/onboarding-skip-it-when-possible/">Onboarding: Skip it When Possible</a></h2> <time><span class="small large desktop only">January 15, 2021</span><span class="mobile only">Jan 15, 2021</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/onboarding-skip-it-when-possible/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Onboarding_Skip_it_When_Possible_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Onboarding_Skip_it_When_Possible_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Onboarding instructions that users must digest before they start using an app or other product require attention and effort and thus reduce usability. They should be avoided as much as possible. </p> </div> <div class="media four-wide"> <a href="/videos/onboarding-skip-it-when-possible/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Onboarding_Skip_it_When_Possible_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Onboarding_Skip_it_When_Possible_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Onboarding_Skip_it_When_Possible_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/mobile-input-fields/">Easier Input on Mobile Devices</a></h2> <time><span class="small large desktop only">January 1, 2021</span><span class="mobile only">Jan 1, 2021</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/mobile-input-fields/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Easier_Input_on_Mobile_Devices_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Easier_Input_on_Mobile_Devices_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Form filling and other user input on mobile devices such as smartphones can be awkward and error prone, but by taking advantage of the strengths of the phone, designers can improve the usability of these tasks substantially. </p> </div> <div class="media four-wide"> <a href="/videos/mobile-input-fields/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Easier_Input_on_Mobile_Devices_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Easier_Input_on_Mobile_Devices_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Easier_Input_on_Mobile_Devices_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/ui-design-fails/">User Interface Design Fails</a></h2> <time><span class="small large desktop only">October 9, 2020</span><span class="mobile only">Oct 9, 2020</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/ui-design-fails/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/User_Interface_Design_Fails_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/User_Interface_Design_Fails_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Jakob Nielsen discusses the biggest failures in today's user interface design. (Recorded at the Virtual UX Conference.) </p> </div> <div class="media four-wide"> <a href="/videos/ui-design-fails/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/User_Interface_Design_Fails_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/User_Interface_Design_Fails_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/User_Interface_Design_Fails_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/virtual-reality-and-user-experience/">Virtual Reality and User Experience</a></h2> <time><span class="small large desktop only">September 25, 2020</span><span class="mobile only">Sep 25, 2020</span> | 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/virtual-reality-and-user-experience/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Virtual_Reality_and_User_Experience_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Virtual_Reality_and_User_Experience_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Virtual reality (VR) user interfaces are currently more difficult for users to manipulate than a traditional GUI, partly because of more degrees of freedom and partly because VR is still new, so people have less experience using it. Advice for how to employ usability studies to alleviate this problem. </p> </div> <div class="media four-wide"> <a href="/videos/virtual-reality-and-user-experience/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Virtual_Reality_and_User_Experience_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Virtual_Reality_and_User_Experience_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Virtual_Reality_and_User_Experience_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/carousels-websites-mobile-apps/">Designing Effective Carousels for Websites and Mobile Apps</a></h2> <time><span class="small large desktop only">September 6, 2019</span><span class="mobile only">Sep 6, 2019</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/carousels-websites-mobile-apps/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Designing_Effective_Carousels_for_Websites_and_Mobile_Apps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Designing_Effective_Carousels_for_Websites_and_Mobile_Apps_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Sliding hero images that rotate through a set of promotions, news, or the like on the top of web pages are often annoying to users and are definitely error prone, unless they are designed according to usability guidelines. </p> </div> <div class="media four-wide"> <a href="/videos/carousels-websites-mobile-apps/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Designing_Effective_Carousels_for_Websites_and_Mobile_Apps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Designing_Effective_Carousels_for_Websites_and_Mobile_Apps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Designing_Effective_Carousels_for_Websites_and_Mobile_Apps_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/simple-design-relative/">Simple Design Is Relative</a></h2> <time><span class="small large desktop only">June 21, 2019</span><span class="mobile only">Jun 21, 2019</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/simple-design-relative/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Simple_Design_is_Relative_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Simple_Design_is_Relative_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Simplicity depends on the capacity of the information channel and what's simple for one device, can be primitive or intricate for another, since screens are information channels with a limited capacity. When you're designing for multiple devices, don't go by common cliches like "simple is good." </p> </div> <div class="media four-wide"> <a href="/videos/simple-design-relative/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Simple_Design_is_Relative_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Simple_Design_is_Relative_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Simple_Design_is_Relative_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/the-vortex/">Why Users Feel Trapped in Their Devices: The Vortex</a></h2> <time><span class="small large desktop only">April 5, 2019</span><span class="mobile only">Apr 5, 2019</span> | 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/the-vortex/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_Users_Feel_Trapped_in_Their_Devices_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_Users_Feel_Trapped_in_Their_Devices_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Many users report anxiety and lack of control over the amount of time they spend online. We call this feeling “the Vortex.” </p> </div> <div class="media four-wide"> <a href="/videos/the-vortex/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Why_Users_Feel_Trapped_in_Their_Devices_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_Users_Feel_Trapped_in_Their_Devices_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_Users_Feel_Trapped_in_Their_Devices_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item video"> <div class="video teaser"> <div class="fixed twelve column grid"> <div class="content eight-wide m-twelve-wide"> <h2 class="title"><a href="/videos/mobile-checkout-experience-tips/">Mobile-Checkout Experience: Tips</a></h2> <time><span class="small large desktop only">February 22, 2019</span><span class="mobile only">Feb 22, 2019</span> | 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/mobile-checkout-experience-tips/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/MobileCheckoutThumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/MobileCheckoutThumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Remember these essential experience elements that are often overlooked or easily forgotten during the mobile-checkout design process. </p> </div> <div class="media four-wide"> <a href="/videos/mobile-checkout-experience-tips/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/MobileCheckoutThumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/MobileCheckoutThumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/MobileCheckoutThumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="pagination"> <span><span class="show-for-medium-up only small large desktop">Previous « </span> <span class="show-for-small-down mobile only">Prev « </span></span> <span class="currentpage"> 1 </span> <a href="?vpage=2#videos"> 2 </a> <a href="?vpage=2#videos"><span> » Next</span></a> </li> </ul> </div> <div class="tab-body" id="articlesTabContent"> <ul class="publication-list"> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/qr-code-guidelines/">13 QR-Code Usability Guidelines</a> </h2> <time><span class="small large desktop only">February 9, 2024</span><span class="mobile only">Feb 9, 2024</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>To be effective, QR codes need clear, brief, contextual information and must lead the user to relevant pages.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/smartwatch-app/">Should You Build a Smartwatch App?</a> </h2> <time><span class="small large desktop only">December 1, 2023</span><span class="mobile only">Dec 1, 2023</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Applications native to smartwatch operating systems get used the most. Just because a new smartwatch app could offer basic functionality, it does not mean that users will find it valuable.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/smartwatch-interactions/">6 Types of Useful Smartwatch Interactions</a> </h2> <time><span class="small large desktop only">November 17, 2023</span><span class="mobile only">Nov 17, 2023</span> | Article: 18 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Smartwatches are for more than just receiving notifications and tracking steps. They afford at least 6 different types of interactions that users find useful.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/content-dispersion/">The Negative Impact of Mobile-First Web Design on Desktop</a> </h2> <time><span class="small large desktop only">October 13, 2023</span><span class="mobile only">Oct 13, 2023</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/dark-mode-users-issues/">Dark Mode: How Users Think About It and Issues to Avoid</a> </h2> <time><span class="small large desktop only">August 27, 2023</span><span class="mobile only">Aug 27, 2023</span> | Article: 14 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/passwordless-accounts/">Passwordless Accounts: One-Time Passwords (OTPs) and Passkeys</a> </h2> <time><span class="small large desktop only">June 25, 2023</span><span class="mobile only">Jun 25, 2023</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Two recent developments make login and registration much easier.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/bottom-sheet/">Bottom Sheets: Definition and UX Guidelines</a> </h2> <time><span class="small large desktop only">June 11, 2023</span><span class="mobile only">Jun 11, 2023</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>A bottom sheet is a user-interface pattern used commonly in mobile apps for providing contextual details or controls in the lower area of the screen.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/screen-reader-type-control/">How Screen-Reader Users Type on and Control Mobile Devices</a> </h2> <time><span class="small large desktop only">May 28, 2023</span><span class="mobile only">May 28, 2023</span> | Article: 13 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Users who are blind or have low vision prefer dictation over typing with a keyboard whenever possible. Screen readers on touchscreen devices are restricted to a well-defined set of gestures which makes interaction more challenging than on computers.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/mobile-accessibility-research/">Conducting Mobile Accessibility Research with Screen-Reader Users</a> </h2> <time><span class="small large desktop only">May 14, 2023</span><span class="mobile only">May 14, 2023</span> | Article: 13 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use word of mouth to recruit research participants who rely on screen readers. Conduct the study in person to help participants feel comfortable, and plan to record the screen-reader output.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/screen-reader-users-on-mobile/">Challenges for Screen-Reader Users on Mobile</a> </h2> <time><span class="small large desktop only">April 30, 2023</span><span class="mobile only">Apr 30, 2023</span> | Article: 12 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Using a screen reader on mobile is challenging because users must access information sequentially and they cannot easily scan page content. Screen-reader users do not consider accessibility menus helpful.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/mobile-ux-study-guide/">Mobile UX: Study Guide</a> </h2> <time><span class="small large desktop only">January 12, 2023</span><span class="mobile only">Jan 12, 2023</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Unsure where to start? Use this collection of links to our articles and videos to learn how to write and present information that aligns with users’ needs and online behaviors.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/state-mobile-ux/">The State of Mobile User Experience</a> </h2> <time><span class="small large desktop only">January 1, 2023</span><span class="mobile only">Jan 1, 2023</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Fifteen years from the original iPhone, the quality of mobile user experience has stabilized. Mobile standards have emerged and the lines between the mobile web and native apps are becoming blurrier.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ar-ux-guidelines/">The Usability of Augmented Reality</a> </h2> <time><span class="small large desktop only">November 20, 2022</span><span class="mobile only">Nov 20, 2022</span> | Article: 13 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>AR features in mobile apps are plagued by usability issues such as poor discoverability and findability of items with AR, low-visibility instructions, or vague icons and signifiers.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ar-calibration/">Augmented-Reality Calibration in Mobile Apps: 10 Guidelines</a> </h2> <time><span class="small large desktop only">October 9, 2022</span><span class="mobile only">Oct 9, 2022</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Instructions for calibration should be clear, high-contrast, descriptive, and augmented with unambiguous visual examples. Users should be given explicit feedback about the results of their actions and about the progress of the calibration.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ar-walkthroughs/">AR-Onboarding Walkthroughs in Mobile Apps</a> </h2> <time><span class="small large desktop only">September 25, 2022</span><span class="mobile only">Sep 25, 2022</span> | Article: 12 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Mobile apps using augmented reality benefit from interactive walkthroughs that guide users through a simple AR experience. These walkthroughs should include information about what to expect, how to handle the device, and how to prepare the environment.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/accidental-overlay-dismissal/">Accidental Dismissal of Overlays: A Common Mobile Usability Problem</a> </h2> <time><span class="small large desktop only">September 18, 2022</span><span class="mobile only">Sep 18, 2022</span> | Article: 10 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Overlays often need to be dismissed in a manner that goes against users’ expectations.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/testing-ar-apps/">Guidelines for Testing Mobile Augmented-Reality Apps</a> </h2> <time><span class="small large desktop only">August 28, 2022</span><span class="mobile only">Aug 28, 2022</span> | Article: 8 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Whether you’re running in-person or remote research on AR apps, ensure that the test is safe for study participants, the task wording is easy to understand, participants know what to expect in advance of the session, and your recording equipment can capture the participant’s screen and their movements.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/unmanned-restaurant-case-study/">Exploring the Boundaries of Unmanned Restaurant Services: Irreplaceable Human Services Are Still Needed</a> </h2> <time><span class="small large desktop only">June 19, 2022</span><span class="mobile only">Jun 19, 2022</span> | Article: 9 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Unmanned restaurant services are gaining varying degrees of adoption in China. Still, there are glitches in the whole self-service flow and areas where human services cannot be replaced.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/surface-duo/">Multitasking on Microsoft’s Surface Duo</a> </h2> <time><span class="small large desktop only">April 25, 2021</span><span class="mobile only">Apr 25, 2021</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>The Duo is a two-screen foldable mobile device that enables users to use two applications side by side, but most apps do not take advantage of the two screens. Support for information transfer from one app to the other is limited and multitasking within the same app is at times confusing.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/augmented-reality-ecommerce-guidelines/">UX Guidelines for Augmented-Reality Shopping Tools</a> </h2> <time><span class="small large desktop only">December 6, 2020</span><span class="mobile only">Dec 6, 2020</span> | Article: 13 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Ecommerce AR tools are relatively new, so must be highly discoverable and easy to learn. Calibration issues run rampant, and users must dedicate focused attention to interact with this unfamiliar feature.</p> </div> </div> </li> <li class="pagination"> <span><span class="show-for-medium-up only small large desktop">Previous « </span> <span class="show-for-small-down mobile only">Prev « </span></span> <span class="currentpage"> 1 </span> <a href="?apage=2#articles"> 2 </a> <a href="?apage=3#articles"> 3 </a> <a href="?apage=4#articles"> 4 </a> <a href="?apage=5#articles"> 5 </a> <a href="?apage=6#articles"> 6 </a> <a href="?apage=7#articles"> 7 </a> <a href="?apage=2#articles"><span> » Next</span></a> </li> </ul> </div> </div> </div> </div> <aside class="three wide m-12-wide m-row-2 sidebar right-content right-aside"> <div class="more-resources"> <h1><em>More Mobile & Tablet Resources</em></h1> <div> <h2>Research Reports</h2> <ul class="no-bullet relaxed"> <li><a href="/reports/mobile-website-and-application-usability/">User Experience for Mobile Applications and Websites</a></li> <li><a href="/reports/enterprise-mobile-showcase/">Mobile Intranets and Enterprise Apps</a></li> <li><a href="/reports/tablets/">Tablet Website and Application UX</a></li> <li><a href="/reports/ipad-app-and-website-usability/">iPad App and Website Usability</a></li> </ul> </div> </div> <div> <h1 class="only mobile"><strong>Browse By Topic or Author</strong></h1> <div class="nav-container"> <div id="navTopicsPopular" class="topic-list popular-topic-nav"> <h1 class="only mobile">Topics</h1> <div class="small large desktop only"> <h1><em>Other Popular Topics</em></h1> </div> <ul class="relaxed no-bullet topics" id="article-popular-topics"> <li> <a href="/topic/agile/">Agile</a> </li> <li> <a href="/topic/ai/">Artificial Intelligence</a> </li> <li> <a href="/topic/ux-design-process/">Design Process</a> </li> <li> <a href="/topic/e-commerce/">Ecommerce</a> </li> <li> <a href="/topic/intranets/">Intranets</a> </li> <li> <a href="/topic/navigation/">Navigation</a> </li> <li> <a href="/topic/psychology-and-ux/">Psychology and UX</a> </li> <li> <a href="/topic/research-methods/">Research Methods</a> </li> <li> <a href="/topic/study-guide/">Study Guides</a> </li> <li> <a href="/topic/user-testing/">User Testing</a> </li> <li> <a href="/topic/web-usability/">Web Usability</a> </li> <li> <a href="/topic/writing-web/">Writing for the Web</a> </li> <li><strong><a id="navTopics__seeAll"><span class="far fa-caret-right"></span> See all topics</a></strong></li> </ul> </div> <div id="navTopicsAll" class="topic-list all-topic-nav" style="display: none;"> <h1><em>All Topics</em></h1> <ul class="relaxed no-bullet topics" id="article-all-topics"> <li><strong><a id="navTopics__seeFewer"><span class="far fa-caret-down"></span> See fewer topics</a></strong></li> <li> <a href="/topic/accessibility/">Accessibility</a> </li> <li> <a href="/topic/agile/">Agile</a> </li> <li> <a href="/topic/analytics-and-metrics/">Analytics & Metrics</a> </li> <li> <a href="/topic/applications/">Application Design</a> </li> <li> <a href="/topic/ai/">Artificial Intelligence</a> </li> <li> <a href="/topic/b2b-websites/">B2B Websites</a> </li> <li> <a href="/topic/behavior-patterns/">Behavior Patterns</a> </li> <li> <a href="/topic/branding/">Branding</a> </li> <li> <a href="/topic/content-strategy/">Content Strategy</a> </li> <li> <a href="/topic/corporate-websites/">Corporate Websites</a> </li> <li> <a href="/topic/customer-journeys/">Customer Journeys</a> </li> <li> <a href="/topic/design-patterns/">Design Patterns</a> </li> <li> <a href="/topic/ux-design-process/">Design Process</a> </li> <li> <a href="/topic/e-commerce/">Ecommerce</a> </li> <li> <a href="/topic/email/">Email</a> </li> <li> <a href="/topic/eyetracking/">Eyetracking</a> </li> <li> <a href="/topic/heuristic-evaluation/">Heuristic Evaluation</a> </li> <li> <a href="/topic/human-computer-interaction/">Human Computer Interaction</a> </li> <li> <a href="/topic/ux-ideation/">Ideation</a> </li> <li> <a href="/topic/information-architecture/">Information Architecture</a> </li> <li> <a href="/topic/interaction-design/">Interaction Design</a> </li> <li> <a href="/topic/international-users/">International Users</a> </li> <li> <a href="/topic/intranets/">Intranets</a> </li> <li> <a href="/topic/ux-management/">Managing UX Teams</a> </li> <li> Mobile & Tablet </li> <li> <a href="/topic/navigation/">Navigation</a> </li> <li> <a href="/topic/non-profit-websites/">Non-Profit Websites</a> </li> <li> <a href="/topic/personas/">Personas</a> </li> <li> <a href="/topic/persuasive-design/">Persuasive Design</a> </li> <li> <a href="/topic/prototyping/">Prototyping</a> </li> <li> <a href="/topic/psychology-and-ux/">Psychology and UX</a> </li> <li> <a href="/topic/remote-ux-work/">Remote UX Work</a> </li> <li> <a href="/topic/research-methods/">Research Methods</a> </li> <li> <a href="/topic/search/">Search</a> </li> <li> <a href="/topic/social-media/">Social Media</a> </li> <li> <a href="/topic/strategy/">Strategy</a> </li> <li> <a href="/topic/study-guide/">Study Guides</a> </li> <li> <a href="/topic/user-testing/">User Testing</a> </li> <li> <a href="/topic/ux-humor/">UX Humor</a> </li> <li> <a href="/topic/ux-teams/">UX Teams</a> </li> <li> <a href="/topic/visual-design/">Visual Design</a> </li> <li> <a href="/topic/web-usability/">Web Usability</a> </li> <li> <a href="/topic/writing-web/">Writing for the Web</a> </li> <li> <a href="/topic/young-users/">Young Users</a> </li> </ul> </div> <div class="mobile only"> <div id="navAuthorsMain" class="article-authors"> <h1>Authors</h1> <ul class="relaxed no-bullet" id="article-initial-authors"> <li><a href="/articles/author/bruce-tognazzini/">Bruce Tognazzini</a></li> <li><a href="/articles/author/don-norman/">Don Norman</a></li> <li><a href="/articles/author/jakob-nielsen/">Jakob Nielsen</a></li> <li><strong><a id="navAuthors__seeAll"><span class="fas fa-caret-right"></span> See all authors</a></strong></li> </ul> </div> <div id="navAuthorsAll" class="article-authors" style="display: none;"> <h1>All Authors</h1> <ul class="relaxed no-bullet" id="article-all-authors"> <li><strong><a id="navAuthors__seeFewer"><span class="fas fa-caret-down"></span> See fewer authors</a></strong></li> <li><a href="/articles/author/mayya-azarova/">Mayya Azarova</a></li> <li><a href="/articles/author/sana-behnam/">Sana Behnam</a></li> <li><a href="/articles/author/maddie-brown/">Maddie Brown</a></li> <li><a href="/articles/author/megan-brown/">Megan Brown</a></li> <li><a href="/articles/author/raluca-budiu/">Raluca Budiu</a></li> <li><a href="/articles/author/patty-caya/">Patty Caya</a></li> <li><a href="/articles/author/connor-chan/">Connor Chan</a></li> <li><a href="/articles/author/megan-chan/">Megan Chan</a></li> <li><a href="/articles/author/nishi-chitale/">Nishi Chitale</a></li> <li><a href="/articles/author/emma-cionca/">Emma Cionca</a></li> <li><a href="/articles/author/taylor-dykes/">Taylor Dykes</a></li> <li><a href="/articles/author/therese-fessenden/">Therese Fessenden</a></li> <li><a href="/articles/author/kim-flaherty/">Kim Flaherty</a></li> <li><a href="/articles/author/sarah-gibbons/">Sarah Gibbons</a></li> <li><a href="/articles/author/kelley-gordon/">Kelley Gordon</a></li> <li><a href="/articles/author/aurora-harley/">Aurora Harley</a></li> <li><a href="/articles/author/alita-joyce/">Alita Joyce</a></li> <li><a href="/articles/author/anna-kaley/">Anna Kaley</a></li> <li><a href="/articles/author/lexie-kane/">Lexie Kane</a></li> <li><a href="/articles/author/kate-kaplan/">Kate Kaplan</a></li> <li><a href="/articles/author/tanner-kohler/">Tanner Kohler</a></li> <li><a href="/articles/author/rachel-krause/">Rachel Krause</a></li> <li><a href="/articles/author/page-laubheimer/">Page Laubheimer</a></li> <li><a href="/articles/author/feifei-liu/">Feifei Liu</a></li> <li><a href="/articles/author/hoa-loranger/">Hoa Loranger</a></li> <li><a href="/articles/author/kate-moran/">Kate Moran</a></li> <li><a href="/articles/author/tarun-mugunthan/">Tarun Mugunthan</a></li> <li><a href="/articles/author/tim-neusesser/">Tim Neusesser</a></li> <li><a href="/articles/author/jakob-nielsen/">Jakob Nielsen</a></li> <li><a href="/articles/author/don-norman/">Don Norman</a></li> <li><a href="/articles/author/sara-ramaswamy/">Sara Paul</a></li> <li><a href="/articles/author/kara-pernice/">Kara Pernice</a></li> <li><a href="/articles/author/christian-rohrer/">Christian Rohrer</a></li> <li><a href="/articles/author/maria-rosala/">Maria Rosala</a></li> <li><a href="/articles/author/katie-sherwin/">Katie Sherwin</a></li> <li><a href="/articles/author/caleb-sponheim/">Caleb Sponheim</a></li> <li><a href="/articles/author/evan-sunwall/">Evan Sunwall</a></li> <li><a href="/articles/author/samhita-tankala/">Samhita Tankala</a></li> <li><a href="/articles/author/bruce-tognazzini/">Bruce Tognazzini</a></li> <li><a href="/articles/author/huei-hsin-wang/">Huei-Hsin Wang</a></li> <li><a href="/articles/author/kathryn-whitenton/">Kathryn Whitenton</a></li> <li><a href="/articles/author/amy-zhang/">Amy Zhang</a></li> <li><a href="/articles/author/mingjin-zhang/">Mingjin Zhang</a></li> </ul> </div> </div> </div> </div> </aside> </div> </div> </section> </main> <footer class="footer"> <div class="wrapper row"> <div class="subscribe"> <h2 class="title-large">Subscribe to Our Newsletter</h2> <p class="body-medium">Get weekly UX articles, videos, and upcoming training events straight to your inbox.</p> <form class="form-validated" action="https://nngroup.us4.list-manage.com/subscribe/post?u=538d934a891681a5d850bb4e5&id=7f29a2b335" id="subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" > <div class="form-field"> <div class="outline"> <label class="label-medium">Email</label> <input class="body-small" id="newsletter-subscribe-email" placeholder="norman@gmail.com" name="EMAIL" type="email" value=""> </div> <div class="error-local"></div> </div> <input class="button-fill button-small" name="subscribe" type="submit" value="Subscribe"> </form> </div> <div class="follow"> <h2 class="title-large">Follow Us</h2> <ul> <li class="label-large"> <a href="https://www.linkedin.com/company/nielsen-norman-group"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-linkedin.svg" alt=""> LinkedIn </a> </li> <li class="label-large"> <a href="https://www.instagram.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-instagram.svg" alt=""> Instagram </a> </li> <li class="label-large"> <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-youtube.svg" alt=""> Youtube </a> </li> <li class="label-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup "> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-podcast.svg" alt=""> Podcast </a> </li> <li class="label-large"> <a href="https://twitter.com/nngroup"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-x.svg" alt=""> X (Twitter) </a> </li> <li class="label-large"> <a href="https://www.facebook.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-facebook.svg" alt=""> Facebook </a> </li> </ul> </div> </div> <section class="navigation"> <div class="wrapper"> <ul> <li><span class="title-small">Certification</span> <ul> <li class="body-large"> <a href="/ux-certification/">What is UX Certification?</a> </li> <li class="body-large"> <a href="/ux-certification/specialties/">Specialties</a> </li> <li class="body-large"> <a href="/ux-certification/exams/">Exams</a> </li> <li class="body-large"> <a href="/ux-certification/people/">UX Certified People</a> </li> </ul> </li> <li> <span class="title-small">UX Training</span> <ul> <li class="body-large"> <a href="/courses/">All Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class="body-large"> <a href="/team-training/">Private Team Training</a> </li> <li class="body-large"> <a href="/course-calendar/">Course Calendar</a> </li> </ul> </li> <li> <span class="title-small">Consulting</span> <ul> <li class="body-large"> <a href="/consulting/expert-review/">Expert Review</a> </li> <li class="body-large"> <a href="/consulting/user-testing/">User Testing</a> </li> <li class="body-large"> <a href="/consulting/user-research/">Customized Research</a> </li> <li class="body-large"> <a href="/consulting/applied-workshops/">Applied Workshops</a> </li> <li class="body-large"> <a href="/consulting/keynote-speaking/">Keynote Speaking</a> </li> </ul> </li> <li> <span class="title-small">Free Guidance</span> <ul> <li class="body-large"> <a href="/articles/">Articles & Videos</a> </li> <li class="body-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup">The NN/g UX Podcast</a> </li> </ul> </li> <li> <span class="title-small">About</span> <ul> <li class="body-large" > <a href="/about/why-nng/">Why NN/g</a> </li> <li class="body-large" > <a href="/about/">About Us</a> </li> <li class="body-large" > <a href="/people/">People</a> </li> <li class="body-large" > <a href="/about/about-client-list/">Clients</a> </li> <li class="body-large" > <a href="/about/contact/">Contact</a> </li> <li class="body-large" > <a href="/return-policy/">Return Policy</a> </li> </ul> </li> </ul> </div> </section> <div class="copyright"> <div class="wrapper"> <p><a href="/copyright-and-reprint-info/">Copyright</a> © 1998-2024 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a href="javascript:Cookiebot.show();">Cookie Preferences</a></li> <li><a href="/cookie-declaration/">Cookie Declaration</a></li> <li><a href="/privacy-policy/">Privacy Policy</a></li> </ul> </div> </div> </footer> <button class="back-to-top" title="Back to top"><span class="text"><span class="fas fa-caret-up arrow" aria-hidden="true"></span><br>Top</span></button> <script src="https://media.nngroup.com/static/js/output.dac7ffbca904.js" defer></script> <script src="https://media.nngroup.com/static/js/publication-nav.9e4a2e611654.js"></script> <script> function pushCookieConsent() { Cookiebot.consent.preferences&&window.dataLayer.push({event:"cookieconsent_preferences"}); Cookiebot.consent.statistics&&window.dataLayer.push({event:"cookieconsent_statistics"}); Cookiebot.consent.marketing&&window.dataLayer.push({event:"cookieconsent_marketing"}); }; window.addEventListener('CookiebotOnAccept', function (e) { pushCookieConsent(); if (Cookiebot.consent.statistics) { // Tell Convert A/B testing that consent has been given window._conv_q = window._conv_q || []; window._conv_q.push(['consentGiven']); } }); window.addEventListener('CookiebotOnDecline', function (e) {}); </script> </body> </html>

CINXE.COM

Mobile & Tablet Articles, Videos, Reports, and Training Courses