CINXE.COM
User Experience for Mobile Applications and Websites
<!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>User Experience for Mobile Applications and Websites</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 }, 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><!-- Google Consent Mode --><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><!-- End Google Consent Mode--><!-- Google Tag Manager --><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+ '>m_auth=oQvLGCv6ryZLP7PJLlpI-g>m_preview=env-2>m_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THJDDHK');</script><!-- End Google Tag Manager --><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="description" content="Nielsen Norman Group usability research report with 374 tips for improving user interfaces for touchscreen smartphones."/><meta property="og:description" content="Nielsen Norman Group usability research report with 374 tips for improving user interfaces for touchscreen smartphones."/><meta name="keywords" content="mobile phones, cellphones, cell phones, mobile usability, mobile sites, mobile websites, mobile apps, mobile applications, apps usability, iPhone, Android, Windows Phone, mobile user experience, mobile UX"/><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="User Experience for Mobile Applications and Websites"/><meta property="og:url" content="https://www.nngroup.com/reports/mobile-website-and-application-usability/"/><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/reports/mobile-website-and-application-usability/"><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.9cae50358e22.css" type="text/css"> </head> <body class=" sidebar-base left-sidebar report-detail " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="banner-sales hidden"> <p 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 </p> <button aria-label="Close promotion banner"> <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="Nielsen Norman Group - 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-controls="nav-live-courses" 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 id="nav-live-courses"> <li class=""> <a href="/courses/">All Courses</a> </li> <li class=""> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class=""> <a href="/team-training/">Private Team Training</a> </li> <li class=""> <a href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a 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="selected "> <a aria-current="page" href="/reports/">Reports & Books</a> </li> <li class=" has-subnav"> <button aria-controls="nav-about-home" 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 id="nav-about-home"> <li class=""> <a href="/about/">Overview</a> </li> <li class=""> <a href="/people/">People</a> </li> <li class=""> <a href="/about/about-client-list/">Clients</a> </li> <li class=""> <a href="/news/">News</a> </li> <li class=""> <a href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty" aria-hidden> <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> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="9f70340d433027a479c60e38395a089c" data-index="Document_production_query_suggestions" > <button class="search-button search-toggle-button" aria-controls="search-form-content" aria-expanded="false"> <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> <div class="form-content" id="search-form-content"> <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> </div> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <div class="twelve column grid"> <aside class="two wide mobile-twelve m-12-wide m-row-1 sidebar"> <div class="topic-list collapsable-content"> <h4 class="only small large desktop bottom padded"><strong>Browse by Topic</strong></h4> <h4 class="only mobile collapse-link bottom padded"><i class="icon fa fa-caret-right"></i> <strong>Browse by Topic</strong></h4> <div class="collapsable mobile collapsed"> <ul class="relaxed no-bullet topics"> <li> <a href="/reports/topic/accessibility/">Accessibility</a> </li> <li> <a href="/reports/topic/agile/">Agile</a> </li> <li> <a href="/reports/topic/applications/">Application Design</a> </li> <li> <a href="/reports/topic/b2b-websites/">B2B Websites</a> </li> <li> <a href="/reports/topic/content-strategy/">Content Strategy</a> </li> <li> <a href="/reports/topic/corporate-websites/">Corporate Websites</a> </li> <li> <a href="/reports/topic/ux-design-process/">Design Process</a> </li> <li> <a href="/reports/topic/e-commerce/">Ecommerce</a> </li> <li> <a href="/reports/topic/email/">Email</a> </li> <li> <a href="/reports/topic/eyetracking/">Eyetracking</a> </li> <li> <a href="/reports/topic/information-architecture/">Information Architecture</a> </li> <li> <a href="/reports/topic/interaction-design/">Interaction Design</a> </li> <li> <a href="/reports/topic/international-users/">International Users</a> </li> <li> <a href="/reports/topic/intranets/">Intranets</a> </li> <li> <a href="/reports/topic/ux-management/">Managing UX Teams</a> </li> <li> <a href="/reports/topic/mobile-and-tablet-design/">Mobile & Tablet</a> </li> <li> <a href="/reports/topic/navigation/">Navigation</a> </li> <li> <a href="/reports/topic/non-profit-websites/">Non-Profit Websites</a> </li> <li> <a href="/reports/topic/research-methods/">Research Methods</a> </li> <li> <a href="/reports/topic/search/">Search</a> </li> <li> <a href="/reports/topic/social-media/">Social Media</a> </li> <li> <a href="/reports/topic/strategy/">Strategy</a> </li> <li> <a href="/reports/topic/user-testing/">User Testing</a> </li> <li> <a href="/reports/topic/web-usability/">Web Usability</a> </li> <li> <a href="/reports/topic/writing-web/">Writing for the Web</a> </li> <li> <a href="/reports/topic/young-users/">Young Users</a> </li> </ul> <ul class="relaxed no-bullet topics pt-1"> <li> <a href="/reports/free/">Free Reports</a> </li> </ul> </div> </div> <div class="only small large desktop"> </div> </aside> <div id="body-content" class="ten wide mobile-twelve m-12-wide m-row-2 body-content"> <div class="twelve column grid"> <section class="nine wide"> <header> <h1 class="article-h1 normal height">User Experience for Mobile Applications and Websites</h1> <p>5th edition</p> <ul class="inline"> <span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">Mobile & Tablet</span> <li>Topics:</li> <span id="gaDataTopic" class="ga-data-layer" aria-hidden="true">Mobile & Tablet</span> <li><a href="/reports/topic/mobile-and-tablet-design/">Mobile & Tablet</a></li> </ul> </header> <div> <img loading="lazy" class="report-cover relative right" src="https://media.nngroup.com/media/report_images/UXforMobileApps.jpg.300x470_q75_autocrop_crop-scale_upscale.jpg" srcset="https://media.nngroup.com/media/report_images/UXforMobileApps.jpg.300x470_q75_autocrop_crop-scale_upscale.jpg, https://media.nngroup.com/media/report_images/UXforMobileApps.jpg.600x940_q75_autocrop_crop-scale_upscale.jpg 2x" alt=""> <h2><strong>Summary</strong></h2> <p>This report presents user-experience guidelines for designing applications and websites for mobile devices, as well as the findings from our user research with these devices. It is based on 19 in-person and 2 remote moderated usability studies with users in 8 countries (mostly in the USA, but also in Australia, Canada, China, Hong Kong, India, The Netherlands, Romania, and the UK). It presents a set of design recommendations intended to help designers create a good mobile user experience.</p> <p>This <strong>713-page</strong> report offers <strong>374 design guidelines</strong> based on our usability research. Discussions and more than <strong>1000 screenshot illustrations</strong> supplement our findings.</p> <h2><strong>Topics </strong></h2> <ul> <li>Activities commonly performed on mobile phones and types of content that mobile users expect</li> <li>Mobile limitations and strengths</li> <li>Relative advantages and disadvantages of mobile websites and web apps vs. mobile native apps</li> <li>Transitions to and from mobile channels <ul> <li>Access to your mobile site</li> <li>Transitioning from web to app</li> <li>Transitioning to full (desktop) site</li> </ul> </li> <li>Logo and company name</li> <li>Making apps findable and discoverable <ul> <li>Advertising mobile apps on websites</li> <li>Icons, names, and descriptions of mobile apps</li> <li>Dealing with multiple apps from the same company</li> <li>Advertising your app on the web</li> </ul> </li> <li>Creating multiple apps with different functionalities vs. a single app that includes all functionalities</li> <li>Touch targets <ul> <li>Size and placement</li> <li>Tappability signifiers</li> <li>Accidental touches and undo</li> <li>Icons and icon labels</li> <li>Buttons and button placement</li> </ul> </li> <li>Input <ul> <li>Typing and input fields</li> <li>Using phone features for input fields</li> <li>Sliders</li> <li>Pickers and date pickers</li> <li>Selectors</li> </ul> </li> <li>Overlays</li> <li>Accordions</li> <li>Menus <ul> <li>Types of menus: dropdowns, pie menus, marking menus</li> <li>Menu guidelines</li> </ul> </li> <li>Carousels and carousel signifiers</li> <li>Errors and alerts</li> <li>Permission requests</li> <li>Progress indicators</li> <li>Orientation</li> <li>Gestures <ul> <li>Horizontal swipe: swipe to turn page, swipe to navigate back, swipe to delete or access contextual actions, swipe to open menu</li> <li>Long press on iOS and Android</li> <li>Gesture ambiguity</li> <li>Tapping and content</li> </ul> </li> <li>Forms <ul> <li>Workflow and form steps</li> <li><em>Submit </em>buttons</li> <li>Login and registration forms: flows, passwords, passwordless accounts</li> </ul> </li> <li>Navigation <ul> <li>Common mobile navigation patterns: tabs, navigation bar, hamburger and other navigation menus, navigation hubs</li> <li>Making navigation accessible</li> <li>Navigation vs. IA on mobile</li> <li>Breadcrumbs</li> <li>Hidden navigation: hamburger and other navigation menus</li> <li>Subnavigation: submenus, section menus, sequential menus, category landing pages</li> <li>How to deal with deep hierarchies on mobile</li> <li>The <em>Back </em>button</li> <li>Overflow navigation: <em>More </em>and action overflow</li> </ul> </li> <li>Search, filter, sort <ul> <li>Search-feature design</li> <li>Scoped search</li> <li>Search results</li> <li>Filter design</li> </ul> </li> <li>List, grids, cards, decks of cards <ul> <li>List ordering</li> <li>View all, pagination, infinite lists</li> </ul> </li> <li>Content <ul> <li>Text content: readability and scannability</li> <li>Headlines and summaries</li> <li>Related content</li> <li>Images and videos</li> <li>Dealing with long pages: Mini-IA and in-page tables of contents</li> </ul> </li> <li>Location information <ul> <li>Locator forms</li> <li>Displaying location information</li> </ul> </li> <li>Instructions and help: <ul> <li>Tips</li> <li>Instructional overlays</li> <li>Onboarding tutorials and walkthroughs</li> <li>User manuals and help pages</li> </ul> </li> <li>Initial experience (onboarding)</li> </ul> <h2><strong>Benefits</strong></h2> <ul> <li>Checklist of 374 specific design recommendations: <ul> <li>Review your mobile user experience for these 374 items to discover what needs improvement</li> <li>Score your design against a checklist of usability guidelines to make sure you don't do anything wrong</li> </ul> </li> <li>Description of how users behave when using a variety of mobile sites and apps</li> <li>Learn from the users' comments and reactions to common design mistakes in the sites we tested</li> <li>$400,000 worth of research at 0.07% of the cost</li> <li>The differentiating factors that caused site visitors and app users to complete tasks</li> <li>successfully or unsuccessfully</li> <li>More than 1000 color screenshots from a very wide variety of mobile sites and apps, with descriptions of why they worked well or caused problems in usability testing</li> <li>Methodology description helping you define the protocol for running your own mobile usability studies</li> </ul> <h2><strong>What’s New in the Fifth Edition?</strong></h2> <p>This fifth edition of the mobile report is an improved and updated version of the fourth edition. Many of the existing guidelines were revisited and refreshed with new examples. The additions in this edition reflect the new mobile topics and patterns that emerged or were revived since the fourth edition. They include:</p> <ul> <li>Progressive web apps</li> <li>Transitions from web to app or between apps</li> <li>Date pickers</li> <li>Permission requests</li> <li>On-screen <em>Back </em>button differences between Android and iOS</li> <li>Skeleton screens</li> <li>Long press</li> <li>Passwordless accounts and passkeys</li> <li>OTPs and minimal login/registration flows</li> <li>Navigation UIs: breadcrumbs, sequential navigation, links to category-landing pages,</li> <li>Infinite lists</li> </ul> <p><a href="http://content.usatoday.com/communities/technologylive/post/2009/07/68494777/1#.UTllyhysh8E"><em>USA Today</em></a> article about the first edition</p> <h2><strong>Who Should Read This Report?</strong></h2> <ul> <li>Those responsible for a company's or organization's mobile strategy</li> <li>Mobile designers and UX researchers</li> </ul> <h2><strong>Research Method</strong></h2> <p>The information in this report is based on usability research with mobile users 20–50+ years old. We used several research methods:</p> <ul> <li>One-on-one in-person usability testing</li> <li>Remote moderated usability testing</li> <li>Remote unmoderated usability testing</li> <li>Diary-based longitudinal study, for which people recorded their experiences with their mobile devices</li> <li>Design reviews</li> <li>Mobile eyetracking</li> </ul> <p>Representative users tested a variety of websites and apps on a range of mobile devices, including touch phones and smartphones from many vendors. The studies took place in the United States, Australia, Canada, China, Hong Kong, India, the United Kingdom, the Netherlands, and Romania.</p> </div> </section> <section class="three wide"> <h2>Purchase</h2> <p>Digital files for immediate download</p> <p class="license padded"> <strong>Individual License</strong><br> <strong class="text extra large price">$298</strong><br> <a class="primary button" href="/cart/add/mobileindividual/">Add to Cart</a> </p> <p class="license"> <strong>Group License</strong><br> <strong class="text extra large price">$598</strong><br> <a class="primary button" href="/cart/add/mobilegroup/">Add to Cart</a> </p> <div class="collapsable-content"> <p class="padded collapse-link"><i class="icon fa fa-caret-right"></i> Which license should I purchase?</p> <div class="collapsable collapsed"> <strong>Individual License</strong> <ul class="padded bottom flush"> <li>Report or video will be used by only one person.</li> <li>Cannot share the report or video with anyone else, or post it to any internal or external file server, website, or intranet.<br /> <a href="//media.nngroup.com/static/license/individual_license.pdf" target="_blank">Individual License Terms</a></li> </ul> <strong>Group License</strong> <ul class="padded none flush"> <li>Report or video will be used by multiple people within your organization.</li> <li>Can post the report or video on internal file servers or intranets and make it available to others within the organization.</li> <li>Cannot make the report/video available to people not employed by your organization, the general public, or to post it to a publicly accessible website or file server.<br /> <a href="//media.nngroup.com/static/license/group_license.pdf" target="_blank">Group License Terms</a></li> </ul> </div> </div> </section> </div> <section class="related-content"> <h2>Related</h2> <div class="two column grid"> <div> <h3>Research Reports</h3> <ul class="no-bullet"> <li><a href="/reports/enterprise-mobile-showcase/?lm=mobile-website-and-application-usability&pt=report">Mobile Intranets and Enterprise Apps</a></li> <li><a href="/reports/tablets/?lm=mobile-website-and-application-usability&pt=report">Tablet Website and Application UX</a></li> <li><a href="/reports/ipad-app-and-website-usability/?lm=mobile-website-and-application-usability&pt=report">iPad App and Website Usability</a></li> </ul> </div> <div> <h3>Articles</h3> <ul class="no-bullet"> <li><a href="/articles/mobile-ux/?lm=mobile-website-and-application-usability&pt=report">Mobile User Experience: Limitations and Strengths</a></li> <li><a href="/articles/scaling-user-interfaces/?lm=mobile-website-and-application-usability&pt=report">Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design</a></li> <li><a href="/articles/tablet-usability/?lm=mobile-website-and-application-usability&pt=report">Tablet Usability</a></li> <li><a href="/articles/mobile-sharpens-usability-guidelines/?lm=mobile-website-and-application-usability&pt=report">Mobile UX Sharpens Usability Guidelines</a></li> <li><a href="/articles/qr-code-guidelines/?lm=mobile-website-and-application-usability&pt=report">13 QR-Code Usability Guidelines</a></li> </ul> </div> </div> </sectiion> </div> </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 for="newsletter-subscribe-email" 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> <div id="individualAddedModal" aria-hidden="true" class="modal slide"> <div class="overlay" tabindex="-1" data-micromodal-close> <div class="container" role="dialog" aria-modal="true" aria-labelledby="individualAddedModalTitle" > <header> <h2 id="individualAddedModalTitle">You鈥檝e just added the following to your cart:</h2> </header> <div class="content" id="individualAddedModalTitleContent"> <p><strong>User Experience for Mobile Applications and Websites</strong></p> <p>Individual License</p> <p>$298</p> </div> <footer> <button class="primary button" data-micromodal-close aria-label="Close this dialog window">Continue Browsing</button> <a href ="/cart/" class="primary button">Checkout Now</a> </footer> </div> </div> </div> <div id="groupAddedModal" aria-hidden="true" class="modal slide"> <div class="overlay" tabindex="-1" data-micromodal-close> <div class="container" role="dialog" aria-modal="true" aria-labelledby="groupAddedModalTitle" > <header> <h2 id="groupAddedModalTitle">You鈥檝e just added the following to your cart:</h2> </header> <div class="content" id="groupAddedModalTitleContent"> <p><strong>User Experience for Mobile Applications and Websites</strong></p> <p>Group License</p> <p>$598</p> </div> <footer> <button class="primary button" data-micromodal-close aria-label="Close this dialog window">Continue Browsing</button> <a href ="/cart/" class="primary button">Checkout Now</a> </footer> </div> </div> </div> <script src="https://media.nngroup.com/static/js/output.c386d66e942d.js" defer></script> <script src="https://media.nngroup.com/static/vendor/micromodal/micromodal.min-0.3.2.js"></script> <script> function initModal() { MicroModal.init(); }; initModal(); </script> <script> window.addEventListener('CookiebotOnAccept', function (e) { 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('CookiebotOnDecline', function (e) {}); </script> </body> </html>