Web Usability 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>Web Usability 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_teamdesk_api_for_user_profile_override': false,'enable_user_auth_redesign': true,'use_cart_redesign': false,'use_local_user_profile_cert_and_exam_meta_data_apis': true,'banner_sales': false,'use_profile_redesign_flag': false,'not': false,'use_local_user_profile_exam_api': false,'enable_reportcart_dataclass': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'create_course_reminders': true,'allow_course_new_fields_editing': false,'send_exam_availability_reminder_email': false,'send_repeated_course_emails': false,'use_virtual_overview_redesign': true,'permanently-migrate-slack': false,'use_teamdesk_message_etl': true,'slack-integration': true,'use_course_search_redesign': false,'use_course_calendar_redesign': 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><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="Web Usability Articles, Videos, Reports, and Training Courses"/><meta property="og:url" content="https://www.nngroup.com/topic/web-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/topic/web-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.1b70725e7506.css" type="text/css"> </head> <body class=" sidebar-base right-sidebar publication publication-list publication-tabs articles-topic " > <div class="skip"><a href="#main">Skip to content</a></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 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-information"> <circle cx="8" cy="8.08008" r="7.25" fill="currentColor" stroke="black" stroke-width="1.5"/> <path d="M7.24718 11.7468V6.64511H8.75918V11.7468H7.24718ZM7.99804 5.89425C7.74433 5.89425 7.53861 5.82225 7.3809 5.67825C7.22318 5.53425 7.14433 5.34225 7.14433 5.10225C7.14433 4.86225 7.22318 4.67025 7.3809 4.52625C7.53861 4.38225 7.74433 4.31025 7.99804 4.31025C8.25176 4.31025 8.45747 4.38225 8.61518 4.52625C8.7729 4.67025 8.85176 4.86225 8.85176 5.10225C8.85176 5.34225 8.7729 5.53425 8.61518 5.67825C8.45747 5.82225 8.25176 5.89425 7.99804 5.89425Z" fill="black"/> </g> </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="true" 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 Live Courses</a> </li> <li class=""> <a href="/training/live-courses/">About Live 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=" "> <a 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="true" 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="true" 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="562fc62a44f3e67b0e9b1d7a40fb17e2" data-index="Document_production_query_suggestions" > <button type="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="mb-6"> <h1 class="article-h1"><strong>Web Usability</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/destination-pages-vs-transition-pages/">Destination Pages vs. Transition Pages</a></h2> <time><span class="small large desktop only">January 22, 2025</span><span class="mobile only">Jan 22, 2025</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/destination-pages-vs-transition-pages/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Destination pages fulfill users' information needs through detailed content, while transition pages guide them toward these destinations through navigation and brief overviews. Content prioritization based on user goals and information needs is key in designing both pages. </p> </div> <div class="media four-wide"> <a href="/videos/destination-pages-vs-transition-pages/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.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/seq-vs-sus/">SEQ vs. SUS</a></h2> <time><span class="small large desktop only">January 8, 2025</span><span class="mobile only">Jan 8, 2025</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/seq-vs-sus/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_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> Pair qualitative methods with quantitative metrics like the System Usability Scale (SUS) for benchmarking and the Single Ease Question (SEQ) for task-level insights. Use both carefully with qualitative data. </p> </div> <div class="media four-wide"> <a href="/videos/seq-vs-sus/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_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/ux-quiz/">UX Quiz: 2024 Year in Review</a> </h2> <time><span class="small large desktop only">January 3, 2025</span><span class="mobile only">Jan 3, 2025</span> | Article: 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Test your usability knowledge by taking our quiz. All questions and answers are based on articles that we published last year.</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/efficient-error-messages/">Create Efficient Error Messages</a></h2> <time><span class="small large desktop only">October 16, 2024</span><span class="mobile only">Oct 16, 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/efficient-error-messages/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_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> You need efficient error messages to keep users engaged in their workflow. Follow these four efficiency guidelines to design error messages that respect users' effort and offer time-saving guidance. </p> </div> <div class="media four-wide"> <a href="/videos/efficient-error-messages/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_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/error-message-communication-guidelines/">Error Messages: 4 Guidelines for Effective Communication</a></h2> <time><span class="small large desktop only">September 23, 2024</span><span class="mobile only">Sep 23, 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/error-message-communication-guidelines/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Communicate effectively with your error messages by using human-readable language, concisely and precisely describing the issue, offering constructive advice, and not blaming the user. </p> </div> <div class="media four-wide"> <a href="/videos/error-message-communication-guidelines/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.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/top-tasks/">A Lesson on Top Tasks from Hurricane Beryl</a> </h2> <time><span class="small large desktop only">July 19, 2024</span><span class="mobile only">Jul 19, 2024</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Companies that do not support their users’ top tasks in a crisis fail their users and their reason for existence.</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/homepage-design-mistakes/">Homepage Design: 4 Common Mistakes</a></h2> <time><span class="small large desktop only">July 10, 2024</span><span class="mobile only">Jul 10, 2024</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/homepage-design-mistakes/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_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> Enhance your homepage design by avoiding false floors, providing clear scrolling cues, adhering to familiar web standards, and creating a distinct visual hierarchy to focus user attention. </p> </div> <div class="media four-wide"> <a href="/videos/homepage-design-mistakes/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_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/menu-design/">Menu-Design Checklist: 17 UX Guidelines</a> </h2> <time><span class="small large desktop only">June 7, 2024</span><span class="mobile only">Jun 7, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>People rely on menus to find content and use features. Use this checklist to make sure your menus do their job.</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/tabs-vs-accordions/">Tabs vs. Accordions: When to Use Each</a></h2> <time><span class="small large desktop only">May 20, 2024</span><span class="mobile only">May 20, 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/tabs-vs-accordions/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_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> Tabs and accordions organize and layer content on the same page. Tabs suit a few long sections, while accordions fit many short ones. Choose based on your content structure and user needs for optimal layout. </p> </div> <div class="media four-wide"> <a href="/videos/tabs-vs-accordions/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_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/breakpoints-in-responsive-design/">Breakpoints in Responsive Design</a> </h2> <time><span class="small large desktop only">April 5, 2024</span><span class="mobile only">Apr 5, 2024</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>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> </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/in-page-links/">In-Page Links: 3 Usability Tips</a></h2> <time><span class="small large desktop only">April 3, 2024</span><span class="mobile only">Apr 3, 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/in-page-links/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_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> In-page links help users navigate to specific content sections on the same page. For effective use, use descriptive headings that match the destination, and clearly distinguish in-page links from other links. </p> </div> <div class="media four-wide"> <a href="/videos/in-page-links/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_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/homepage-design-principles/">Homepage Design: 5 Fundamental Principles</a> </h2> <time><span class="small large desktop only">March 15, 2024</span><span class="mobile only">Mar 15, 2024</span> | Article: 12 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Effective homepages are simple and easy to access, communicate the organization’s and site’s purpose, show engaging content, and prompt users to take action.</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/responsive-web-design/">Responsive Web Design: 3 Key Fundamentals</a></h2> <time><span class="small large desktop only">February 19, 2024</span><span class="mobile only">Feb 19, 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/responsive-web-design/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_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> Responsive web design adapts to various screen sizes while emphasizing developmental efficiency over device-specific designs. It's key to prioritize content based on different contexts of use across devices and create a cohesive experience for all users. </p> </div> <div class="media four-wide"> <a href="/videos/responsive-web-design/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_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/comparison-tables/">Comparison Tables for Products, Services, and Features</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>Use this versatile GUI tool to support users when they need to make a decision that involves considering multiple attributes of a small number of items.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ux-quiz/ux-quiz-2023/">User-Experience Quiz: 2023 UX Year in Review</a> </h2> <time><span class="small large desktop only">January 5, 2024</span><span class="mobile only">Jan 5, 2024</span> | Article: 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Test your usability knowledge by taking our quiz. All questions and answers are based on articles that we published last year.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/in-page-links-content-navigation/">In-Page Links for Content Navigation</a> </h2> <time><span class="small large desktop only">October 1, 2023</span><span class="mobile only">Oct 1, 2023</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>In-page links, often embedded in the table of contents, help users navigate to specific content sections on the same page. While research showed increased user familiarity with the design pattern, carefully consider content structures before implementation.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/web-ux-study-guide/">Web UX: Study Guide</a> </h2> <time><span class="small large desktop only">August 27, 2023</span><span class="mobile only">Aug 27, 2023</span> | Article: 12 <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 users interact with the web and how to design effective web user experiences.</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/cognitive-walkthroughs/">Cognitive Walkthroughs Help Assess Interface Learnability</a></h2> <time><span class="small large desktop only">August 4, 2023</span><span class="mobile only">Aug 4, 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/cognitive-walkthroughs/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_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> A cognitive walkthrough is a task-based usability-inspection technique used to evaluate the learnability of a system from the perspective of a new user. </p> </div> <div class="media four-wide"> <a href="/videos/cognitive-walkthroughs/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_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/visual-treatments-accessibility/">Visual Treatments that Improve Accessibility</a></h2> <time><span class="small large desktop only">July 31, 2023</span><span class="mobile only">Jul 31, 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/visual-treatments-accessibility/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_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> To design accessible visuals, account for color contrast, don’t rely on color alone, and make interactive elements easy to identify. </p> </div> <div class="media four-wide"> <a href="/videos/visual-treatments-accessibility/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_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=9"> 9 </a> <a href="?page=10"> 10 </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/destination-pages-vs-transition-pages/">Destination Pages vs. Transition Pages</a></h2> <time><span class="small large desktop only">January 22, 2025</span><span class="mobile only">Jan 22, 2025</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/destination-pages-vs-transition-pages/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Destination pages fulfill users' information needs through detailed content, while transition pages guide them toward these destinations through navigation and brief overviews. Content prioritization based on user goals and information needs is key in designing both pages. </p> </div> <div class="media four-wide"> <a href="/videos/destination-pages-vs-transition-pages/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Artboard_11-20.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/seq-vs-sus/">SEQ vs. SUS</a></h2> <time><span class="small large desktop only">January 8, 2025</span><span class="mobile only">Jan 8, 2025</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/seq-vs-sus/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_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> Pair qualitative methods with quantitative metrics like the System Usability Scale (SUS) for benchmarking and the Single Ease Question (SEQ) for task-level insights. Use both carefully with qualitative data. </p> </div> <div class="media four-wide"> <a href="/videos/seq-vs-sus/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/SEQ_vs._SUS_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/efficient-error-messages/">Create Efficient Error Messages</a></h2> <time><span class="small large desktop only">October 16, 2024</span><span class="mobile only">Oct 16, 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/efficient-error-messages/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_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> You need efficient error messages to keep users engaged in their workflow. Follow these four efficiency guidelines to design error messages that respect users' effort and offer time-saving guidance. </p> </div> <div class="media four-wide"> <a href="/videos/efficient-error-messages/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Create_Efficient_Error_Messages_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/error-message-communication-guidelines/">Error Messages: 4 Guidelines for Effective Communication</a></h2> <time><span class="small large desktop only">September 23, 2024</span><span class="mobile only">Sep 23, 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/error-message-communication-guidelines/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Communicate effectively with your error messages by using human-readable language, concisely and precisely describing the issue, offering constructive advice, and not blaming the user. </p> </div> <div class="media four-wide"> <a href="/videos/error-message-communication-guidelines/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Error_Messages_4_Guidelines_for_Effective_Communication_Thumbnail_1.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/homepage-design-mistakes/">Homepage Design: 4 Common Mistakes</a></h2> <time><span class="small large desktop only">July 10, 2024</span><span class="mobile only">Jul 10, 2024</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/homepage-design-mistakes/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_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> Enhance your homepage design by avoiding false floors, providing clear scrolling cues, adhering to familiar web standards, and creating a distinct visual hierarchy to focus user attention. </p> </div> <div class="media four-wide"> <a href="/videos/homepage-design-mistakes/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/X_Common_Homepage_Design_Mistakes_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/tabs-vs-accordions/">Tabs vs. Accordions: When to Use Each</a></h2> <time><span class="small large desktop only">May 20, 2024</span><span class="mobile only">May 20, 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/tabs-vs-accordions/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_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> Tabs and accordions organize and layer content on the same page. Tabs suit a few long sections, while accordions fit many short ones. Choose based on your content structure and user needs for optimal layout. </p> </div> <div class="media four-wide"> <a href="/videos/tabs-vs-accordions/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Tabs_vs._Accordions_-_When_to_Use_Each_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/in-page-links/">In-Page Links: 3 Usability Tips</a></h2> <time><span class="small large desktop only">April 3, 2024</span><span class="mobile only">Apr 3, 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/in-page-links/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_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> In-page links help users navigate to specific content sections on the same page. For effective use, use descriptive headings that match the destination, and clearly distinguish in-page links from other links. </p> </div> <div class="media four-wide"> <a href="/videos/in-page-links/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/In-Page_Link_101_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/responsive-web-design/">Responsive Web Design: 3 Key Fundamentals</a></h2> <time><span class="small large desktop only">February 19, 2024</span><span class="mobile only">Feb 19, 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/responsive-web-design/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_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> Responsive web design adapts to various screen sizes while emphasizing developmental efficiency over device-specific designs. It's key to prioritize content based on different contexts of use across devices and create a cohesive experience for all users. </p> </div> <div class="media four-wide"> <a href="/videos/responsive-web-design/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/What_is_Responsive_Web_Design_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/cognitive-walkthroughs/">Cognitive Walkthroughs Help Assess Interface Learnability</a></h2> <time><span class="small large desktop only">August 4, 2023</span><span class="mobile only">Aug 4, 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/cognitive-walkthroughs/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_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> A cognitive walkthrough is a task-based usability-inspection technique used to evaluate the learnability of a system from the perspective of a new user. </p> </div> <div class="media four-wide"> <a href="/videos/cognitive-walkthroughs/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Cognitive_Walkthroughs_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/visual-treatments-accessibility/">Visual Treatments that Improve Accessibility</a></h2> <time><span class="small large desktop only">July 31, 2023</span><span class="mobile only">Jul 31, 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/visual-treatments-accessibility/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_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> To design accessible visuals, account for color contrast, don’t rely on color alone, and make interactive elements easy to identify. </p> </div> <div class="media four-wide"> <a href="/videos/visual-treatments-accessibility/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Treatments_that_Improve_Accessibility_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/usability-101/">Usability 101</a></h2> <time><span class="small large desktop only">March 24, 2023</span><span class="mobile only">Mar 24, 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/usability-101/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Usability_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Usability_101_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> Usability assesses how easy user interfaces are to use. Usability is defined by 5 quality components: learnability, efficiency, memorability, errors, and satisfaction. </p> </div> <div class="media four-wide"> <a href="/videos/usability-101/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Usability_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Usability_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Usability_101_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/design-for-them/">Design for Them Not for You (UX Slogan #13)</a></h2> <time><span class="small large desktop only">October 14, 2022</span><span class="mobile only">Oct 14, 2022</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/design-for-them/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Design_for_Them_Not_for_You_UX_Slogan_13_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Design_for_Them_Not_for_You_UX_Slogan_13_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> It does not matter whether you like a design or whether you find the product easy to use. We must design for the way real customers actually behave. </p> </div> <div class="media four-wide"> <a href="/videos/design-for-them/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Design_for_Them_Not_for_You_UX_Slogan_13_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Design_for_Them_Not_for_You_UX_Slogan_13_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Design_for_Them_Not_for_You_UX_Slogan_13_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/why-ux-keynote/">Why UX?</a></h2> <time><span class="small large desktop only">September 30, 2022</span><span class="mobile only">Sep 30, 2022</span> | 22 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/why-ux-keynote/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_UX_Jakob_2022_Keynote_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_UX_Jakob_2022_Keynote_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> Key arguments why companies should have systematic user-experience processes. Plus a discussion of the main arguments against UX. (Jakob Nielsen's UX Conference keynote.) </p> </div> <div class="media four-wide"> <a href="/videos/why-ux-keynote/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Why_UX_Jakob_2022_Keynote_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_UX_Jakob_2022_Keynote_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_UX_Jakob_2022_Keynote_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/audience-based-website-navigation/">Audience-Based Website Navigation</a></h2> <time><span class="small large desktop only">September 23, 2022</span><span class="mobile only">Sep 23, 2022</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/audience-based-website-navigation/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Audience-Based_Website_Navigation_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Audience-Based_Website_Navigation_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> Segmenting a website's navigation by audience categories will often degrade usability, either because users belong in multiple categories, or because they feel the need to look at content targeted at several segments. </p> </div> <div class="media four-wide"> <a href="/videos/audience-based-website-navigation/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Audience-Based_Website_Navigation_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Audience-Based_Website_Navigation_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Audience-Based_Website_Navigation_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/you-cant-impose-joy-ux-slogan-3/">You Can't Impose Joy (UX Slogan #3)</a></h2> <time><span class="small large desktop only">May 13, 2022</span><span class="mobile only">May 13, 2022</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/you-cant-impose-joy-ux-slogan-3/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Cant_Impose_Joy_Slogan_3_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Cant_Impose_Joy_Slogan_3_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> Some UX designers (and many clients) aim to "jazz up" the design to supposedly engage users. This usually backfires because extraneous design elements get in the way of users' tasks. </p> </div> <div class="media four-wide"> <a href="/videos/you-cant-impose-joy-ux-slogan-3/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Cant_Impose_Joy_Slogan_3_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Cant_Impose_Joy_Slogan_3_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Cant_Impose_Joy_Slogan_3_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/repeated-user-actions-are-frustrating/">Repeated User Actions Are Frustrating</a></h2> <time><span class="small large desktop only">November 5, 2021</span><span class="mobile only">Nov 5, 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/repeated-user-actions-are-frustrating/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Repeated_User_Actions_Are_Frustrating_Thumbnail.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Repeated_User_Actions_Are_Frustrating_Thumbnail.jpeg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> It's frustrating for users to go back-and-forth and back-and-forth to the same web page, bouncing around without getting what they need. Analytics data can help identify pages that don't help users progress. </p> </div> <div class="media four-wide"> <a href="/videos/repeated-user-actions-are-frustrating/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Repeated_User_Actions_Are_Frustrating_Thumbnail.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Repeated_User_Actions_Are_Frustrating_Thumbnail.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Repeated_User_Actions_Are_Frustrating_Thumbnail.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/level-up-your-visual-design-skills/">3 Ways to Level Up Your Visual Design Skills</a></h2> <time><span class="small large desktop only">October 29, 2021</span><span class="mobile only">Oct 29, 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/level-up-your-visual-design-skills/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Level_Up_Your_Visual_Design_Skills_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Level_Up_Your_Visual_Design_Skills_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> Designers, researchers, and generalists alike can improve their visual design skills through creative exercises focused on identification, replication, or exploration. </p> </div> <div class="media four-wide"> <a href="/videos/level-up-your-visual-design-skills/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Level_Up_Your_Visual_Design_Skills_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Level_Up_Your_Visual_Design_Skills_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/3_Ways_to_Level_Up_Your_Visual_Design_Skills_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/top-10-web-design-mistakes/">Top 10 Web-Design Mistakes</a></h2> <time><span class="small large desktop only">October 29, 2021</span><span class="mobile only">Oct 29, 2021</span> | 21 <span class="small large desktop only">minute</span><span class="mobile only">min</span> video</time> <p> <span class="media"> <a href="/videos/top-10-web-design-mistakes/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Top10WebDesignMistakes_Thumbnail.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Top10WebDesignMistakes_Thumbnail.jpeg.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 condemns 10 awful design flaws that plague today's websites, as voted by the audience at his Virtual UX Conference keynote. </p> </div> <div class="media four-wide"> <a href="/videos/top-10-web-design-mistakes/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Top10WebDesignMistakes_Thumbnail.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Top10WebDesignMistakes_Thumbnail.jpeg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Top10WebDesignMistakes_Thumbnail.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="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=3#videos"> 3 </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/ux-quiz/">UX Quiz: 2024 Year in Review</a> </h2> <time><span class="small large desktop only">January 3, 2025</span><span class="mobile only">Jan 3, 2025</span> | Article: 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Test your usability knowledge by taking our quiz. All questions and answers are based on articles that we published last year.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/top-tasks/">A Lesson on Top Tasks from Hurricane Beryl</a> </h2> <time><span class="small large desktop only">July 19, 2024</span><span class="mobile only">Jul 19, 2024</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Companies that do not support their users’ top tasks in a crisis fail their users and their reason for existence.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/menu-design/">Menu-Design Checklist: 17 UX Guidelines</a> </h2> <time><span class="small large desktop only">June 7, 2024</span><span class="mobile only">Jun 7, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>People rely on menus to find content and use features. Use this checklist to make sure your menus do their job.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/breakpoints-in-responsive-design/">Breakpoints in Responsive Design</a> </h2> <time><span class="small large desktop only">April 5, 2024</span><span class="mobile only">Apr 5, 2024</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>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> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/homepage-design-principles/">Homepage Design: 5 Fundamental Principles</a> </h2> <time><span class="small large desktop only">March 15, 2024</span><span class="mobile only">Mar 15, 2024</span> | Article: 12 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Effective homepages are simple and easy to access, communicate the organization’s and site’s purpose, show engaging content, and prompt users to take action.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/comparison-tables/">Comparison Tables for Products, Services, and Features</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>Use this versatile GUI tool to support users when they need to make a decision that involves considering multiple attributes of a small number of items.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ux-quiz/ux-quiz-2023/">User-Experience Quiz: 2023 UX Year in Review</a> </h2> <time><span class="small large desktop only">January 5, 2024</span><span class="mobile only">Jan 5, 2024</span> | Article: 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Test your usability knowledge by taking our quiz. All questions and answers are based on articles that we published last year.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/in-page-links-content-navigation/">In-Page Links for Content Navigation</a> </h2> <time><span class="small large desktop only">October 1, 2023</span><span class="mobile only">Oct 1, 2023</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>In-page links, often embedded in the table of contents, help users navigate to specific content sections on the same page. While research showed increased user familiarity with the design pattern, carefully consider content structures before implementation.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/web-ux-study-guide/">Web UX: Study Guide</a> </h2> <time><span class="small large desktop only">August 27, 2023</span><span class="mobile only">Aug 27, 2023</span> | Article: 12 <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 users interact with the web and how to design effective web user experiences.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ux-quiz/ux-quiz-2022/">User-Experience Quiz: 2022 UX Year in Review</a> </h2> <time><span class="small large desktop only">January 1, 2023</span><span class="mobile only">Jan 1, 2023</span> | Article: 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Test your usability knowledge by taking our quiz. All questions and answers are based on articles that we published last year.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/pillars-user-delight/">Three Pillars of User Delight</a> </h2> <time><span class="small large desktop only">November 27, 2022</span><span class="mobile only">Nov 27, 2022</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Delight can be experienced viscerally, behaviorally, and reflectively. A great design is supported by all three of these pillars and is best evaluated with specific research methods.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/demographics-in-ux/">Why and How to Use Demographics in UX</a> </h2> <time><span class="small large desktop only">November 27, 2022</span><span class="mobile only">Nov 27, 2022</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Well-designed questions related to age, gender, race, income and other demographic characteristics help UX researchers screen participants, recruit a diverse participant pool, and segment data. These questions are sensitive and should put research participants at ease.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/visual-treatments-accessibility/">5 Visual Treatments that Improve Accessibility</a> </h2> <time><span class="small large desktop only">October 30, 2022</span><span class="mobile only">Oct 30, 2022</span> | Article: 3 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>To design accessible visuals, account for color contrast, don’t rely on color alone, make interactive elements easy to identify, provide useful alternative text for images, and test your visuals with real users.</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/using-grids-in-interface-designs/">Using Grids in Interface Designs</a> </h2> <time><span class="small large desktop only">July 17, 2022</span><span class="mobile only">Jul 17, 2022</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/products-with-multiple-variants/">Design Guidelines for Selling Products with Multiple Variants</a> </h2> <time><span class="small large desktop only">May 8, 2022</span><span class="mobile only">May 8, 2022</span> | Article: 11 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Different products should have different listings; product variations should be displayed under a single listing.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/cognitive-walkthroughs/">Evaluate Interface Learnability with Cognitive Walkthroughs</a> </h2> <time><span class="small large desktop only">February 13, 2022</span><span class="mobile only">Feb 13, 2022</span> | Article: 7 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Learnability is a crucial component of UX for complex and novel interfaces. Cognitive walkthroughs can identify design problems that derail new users.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ux-quiz/ux-quiz-2021/">User-Experience Quiz: 2021 UX Year in Review</a> </h2> <time><span class="small large desktop only">January 2, 2022</span><span class="mobile only">Jan 2, 2022</span> | Article: 2 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Test your usability knowledge by taking our quiz. All questions and answers are based on articles that we published last year.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/usability-heuristics-complex-applications/">10 Usability Heuristics Applied to Complex Applications</a> </h2> <time><span class="small large desktop only">August 15, 2021</span><span class="mobile only">Aug 15, 2021</span> | Article: 12 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Nielsen’s 10 usability heuristics can be used to analyze the UX of applications that support domain-specific, complex workflows.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/overlay-overload/">Overlay Overload: Competing Popups Are an Increasing Menace</a> </h2> <time><span class="small large desktop only">August 1, 2021</span><span class="mobile only">Aug 1, 2021</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Today’s users are overwhelmed by a plethora of site and browser-initiated popups with content unrelated to their current task.</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=8#articles"> 8 </a> <a href="?apage=9#articles"> 9 </a> <a href="?apage=10#articles"> 10 </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 Web Usability Resources</em></h1> <div> <h2 class="heading-large">Research Reports</h2> <ul class="no-bullet relaxed"> <li><a href="/reports/b2b-websites-usability/">B2B Website Usability for Converting Users into Leads and Customers</a></li> <li><a href="/reports/make-decisions/">Helping Users Make Decisions: Reduce Choice Overload and Avoid Overwhelming Users</a></li> <li><a href="/reports/strategic-design-faqs/">Strategic Design for Frequently Asked Questions</a></li> </ul> </div> <div> <h2 class="heading-large">UX Conference Training</h2> <ul class="no-bullet relaxed"> <li><a href="/courses/human-mind/">The Human Mind and Usability</a></li> <li><a href="/courses/web-page-design/">Web Page UX Design</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/careers-ux/">UX Careers</a> </li> <li> Web Usability </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> <a href="/topic/mobile-and-tablet-design/">Mobile & Tablet</a> </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/careers-ux/">UX Careers</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> Web Usability </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/lola-famulegun/">Lola Famulegun</a></li> <li><a href="/articles/author/pablo-fernandez-vallejo/">Pablo Fernández Vallejo</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/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/alita-kendrick/">Alita Kendrick</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/the-experts-at-nng/">The Experts at NN/g</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 for="newsletter-subscribe-email" class="label-medium">Email</label> <input autocomplete="email" 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 Live Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">About Live 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-2025 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a class="cookie-button">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" aria-label="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.4573ebdb8665.js" defer></script> <script src="https://media.nngroup.com/static/js/publication-nav.aa539b40719d.js"></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>

CINXE.COM

Web Usability Articles, Videos, Reports, and Training Courses