Visual Design 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>Visual Design 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="Visual Design Articles, Videos, Reports, and Training Courses"/><meta property="og:url" content="https://www.nngroup.com/topic/visual-design/"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:type" content="website"/><meta name="twitter:site" content="@nngroup"/><link rel="canonical" href="https://www.nngroup.com/topic/visual-design/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.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>Visual Design</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 article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/testing-visual-design/">Testing Visual Design: A Comprehensive Guide</a> </h2> <time><span class="small large desktop only">December 13, 2024</span><span class="mobile only">Dec 13, 2024</span> | Article: 10 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use methods like 5-second testing, first-click testing, and preference testing to gain insights into how users perceive your visual design.</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/cyclical-design-trends/">Why 90’s Designs Are Coming Back</a></h2> <time><span class="small large desktop only">October 23, 2024</span><span class="mobile only">Oct 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/cyclical-design-trends/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Understanding the cyclical nature of design trends allows us to build on the past and fulfill the evolving needs of users. 3 examples of returning trends are neumorphism, dark mode, and gradients. </p> </div> <div class="media four-wide"> <a href="/videos/cyclical-design-trends/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.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/glassmorphism/">Glassmorphism: Definition and Best Practices</a> </h2> <time><span class="small large desktop only">June 7, 2024</span><span class="mobile only">Jun 7, 2024</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Glassmorphism is a UI design trend that features translucent interface components to create depth.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/design-systems-vs-style-guides/">Design Systems vs. Style Guides</a> </h2> <time><span class="small large desktop only">May 24, 2024</span><span class="mobile only">May 24, 2024</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Design systems are a set of standards (like Google’s Material Design or IBM’s Carbon Design System) needed to manage design at scale. Style guides (like content or visual style guides) are just one piece in a design system.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/visual-design-cheat-sheet/">Visual Design: Glossary</a> </h2> <time><span class="small large desktop only">May 17, 2024</span><span class="mobile only">May 17, 2024</span> | Article: 8 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use this glossary to quickly clarify key terms and concepts related to visual design.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/typography-terms-ux/">Typography Terms: Glossary</a> </h2> <time><span class="small large desktop only">May 10, 2024</span><span class="mobile only">May 10, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use this glossary to clarify key definitions related to typography.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/7-tips-memorable-imagery/">7 Tips for Memorable and Easy-to-Understand Imagery</a> </h2> <time><span class="small large desktop only">May 3, 2024</span><span class="mobile only">May 3, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>A few relevant, high-quality visuals placed next to associated text can boost users’ comprehension of your content and its memorability.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/picture-superiority-effect/">The Picture-Superiority Effect: Harness the Power of Visuals</a> </h2> <time><span class="small large desktop only">April 26, 2024</span><span class="mobile only">Apr 26, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>People often remember visuals better than words. Designers can leverage the picture-superiority effect to make their products memorable and learnable.</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/whitespace/">What is Whitespace?</a></h2> <time><span class="small large desktop only">April 8, 2024</span><span class="mobile only">Apr 8, 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/whitespace/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_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> Whitespace is an effective principle to achieve a balanced design, making it easier for your users to scan and read. Consider using a consistent spacing system and the proximity principle to achieve a balanced use of whitespace. </p> </div> <div class="media four-wide"> <a href="/videos/whitespace/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_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/skeuomorphism/">Skeuomorphism</a> </h2> <time><span class="small large desktop only">March 15, 2024</span><span class="mobile only">Mar 15, 2024</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Skeuomorphism involves designing digital interfaces that imitate physical elements, reducing the learning curve for unfamiliar interactions.</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/junior-designer-mistakes/">5 Common Mistakes Junior Designers Make</a></h2> <time><span class="small large desktop only">March 4, 2024</span><span class="mobile only">Mar 4, 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/junior-designer-mistakes/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_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> There are 5 common mistakes junior designers make. They focus on the look instead of usability, commit type crimes, work outside of design systems, lack confidence when presenting their designs, and ask for feedback too often. </p> </div> <div class="media four-wide"> <a href="/videos/junior-designer-mistakes/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_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/aesthetic-usability-effect/">The Aesthetic-Usability Effect</a> </h2> <time><span class="small large desktop only">February 3, 2024</span><span class="mobile only">Feb 3, 2024</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Users are more tolerant of minor usability issues when they find an interface visually appealing. This aesthetic-usability effect can mask UI problems during usability testing. Identify instances of the aesthetic-usability effect in your user research by watching what your users do, as well as listening to what they say.</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/squint-test/">Squint Test</a></h2> <time><span class="small large desktop only">December 11, 2023</span><span class="mobile only">Dec 11, 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/squint-test/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.650x364_q75_autocrop_crop-smart_upscale.png, https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.1300x728_q75_autocrop_crop-smart_upscale.png 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Use the squint test to identify elements that catch attention and assess the visual hierarchy in your design. Ensure high-priority content stands out visually. </p> </div> <div class="media four-wide"> <a href="/videos/squint-test/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.650x364_q75_autocrop_crop-smart_upscale.png" srcset="https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.650x364_q75_autocrop_crop-smart_upscale.png, https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.1300x728_q75_autocrop_crop-smart_upscale.png 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </a> </div> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/dark-mode-users-issues/">Dark Mode: How Users Think About It and Issues to Avoid</a> </h2> <time><span class="small large desktop only">August 27, 2023</span><span class="mobile only">Aug 27, 2023</span> | Article: 14 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.</p> </div> </div> </li> <li class="publication-list-item 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-design-hacks/">Visual Design Hacks for the Non-designer</a></h2> <time><span class="small large desktop only">August 23, 2023</span><span class="mobile only">Aug 23, 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-design-hacks/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_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> Make your work look visually compelling by using these visual-design hacks: preexisting color palettes, cohesive icons, and grids for alignment. </p> </div> <div class="media four-wide"> <a href="/videos/visual-design-hacks/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_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/balance-in-ux-design/">Balance in UX Design: Symmetry, Asymmetry, and Radial Balance</a></h2> <time><span class="small large desktop only">August 11, 2023</span><span class="mobile only">Aug 11, 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/balance-in-ux-design/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_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> The kind of balance you use in your visual depends on what you want to convey. Symmetry is quiet and static. Asymmetry creates energy and movement. Radial balance leads attention to the central point. </p> </div> <div class="media four-wide"> <a href="/videos/balance-in-ux-design/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_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-design-ux-maps/">Visual Design of UX Maps</a></h2> <time><span class="small large desktop only">August 2, 2023</span><span class="mobile only">Aug 2, 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/visual-design-ux-maps/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_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> Don’t make a UX map pretty for the sake of making it pretty. Invest in creating a visual system for your map then testing it and getting feedback. </p> </div> <div class="media four-wide"> <a href="/videos/visual-design-ux-maps/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_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/chartjunk/">Clutter-Free Charts</a></h2> <time><span class="small large desktop only">July 24, 2023</span><span class="mobile only">Jul 24, 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/chartjunk/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_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> Clear out chartjunk (unnecessary visual elements) for a more minimalist and understandable data visualization. </p> </div> <div class="media four-wide"> <a href="/videos/chartjunk/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_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/imagery-in-visual-design/">Using Imagery in Visual Design</a> </h2> <time><span class="small large desktop only">July 23, 2023</span><span class="mobile only">Jul 23, 2023</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>When choosing images for your visual designs, match similar characteristics, balance high quality with adequate file size, prioritize information-carrying images over purely decorative ones, and provide robust alternative text.</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="?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=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/cyclical-design-trends/">Why 90’s Designs Are Coming Back</a></h2> <time><span class="small large desktop only">October 23, 2024</span><span class="mobile only">Oct 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/cyclical-design-trends/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Understanding the cyclical nature of design trends allows us to build on the past and fulfill the evolving needs of users. 3 examples of returning trends are neumorphism, dark mode, and gradients. </p> </div> <div class="media four-wide"> <a href="/videos/cyclical-design-trends/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.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/whitespace/">What is Whitespace?</a></h2> <time><span class="small large desktop only">April 8, 2024</span><span class="mobile only">Apr 8, 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/whitespace/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_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> Whitespace is an effective principle to achieve a balanced design, making it easier for your users to scan and read. Consider using a consistent spacing system and the proximity principle to achieve a balanced use of whitespace. </p> </div> <div class="media four-wide"> <a href="/videos/whitespace/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Whitespace_in_UX_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/junior-designer-mistakes/">5 Common Mistakes Junior Designers Make</a></h2> <time><span class="small large desktop only">March 4, 2024</span><span class="mobile only">Mar 4, 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/junior-designer-mistakes/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_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> There are 5 common mistakes junior designers make. They focus on the look instead of usability, commit type crimes, work outside of design systems, lack confidence when presenting their designs, and ask for feedback too often. </p> </div> <div class="media four-wide"> <a href="/videos/junior-designer-mistakes/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Mistakes_Junior_Designers_Make_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/squint-test/">Squint Test</a></h2> <time><span class="small large desktop only">December 11, 2023</span><span class="mobile only">Dec 11, 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/squint-test/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.650x364_q75_autocrop_crop-smart_upscale.png, https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.1300x728_q75_autocrop_crop-smart_upscale.png 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Use the squint test to identify elements that catch attention and assess the visual hierarchy in your design. Ensure high-priority content stands out visually. </p> </div> <div class="media four-wide"> <a href="/videos/squint-test/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.650x364_q75_autocrop_crop-smart_upscale.png" srcset="https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.650x364_q75_autocrop_crop-smart_upscale.png, https://media.nngroup.com/media/videos/thumbnails/Squint_Test_Thumbnail.png.1300x728_q75_autocrop_crop-smart_upscale.png 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-design-hacks/">Visual Design Hacks for the Non-designer</a></h2> <time><span class="small large desktop only">August 23, 2023</span><span class="mobile only">Aug 23, 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-design-hacks/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_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> Make your work look visually compelling by using these visual-design hacks: preexisting color palettes, cohesive icons, and grids for alignment. </p> </div> <div class="media four-wide"> <a href="/videos/visual-design-hacks/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Hacks_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/balance-in-ux-design/">Balance in UX Design: Symmetry, Asymmetry, and Radial Balance</a></h2> <time><span class="small large desktop only">August 11, 2023</span><span class="mobile only">Aug 11, 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/balance-in-ux-design/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_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> The kind of balance you use in your visual depends on what you want to convey. Symmetry is quiet and static. Asymmetry creates energy and movement. Radial balance leads attention to the central point. </p> </div> <div class="media four-wide"> <a href="/videos/balance-in-ux-design/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principle_of_Balance_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-design-ux-maps/">Visual Design of UX Maps</a></h2> <time><span class="small large desktop only">August 2, 2023</span><span class="mobile only">Aug 2, 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/visual-design-ux-maps/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_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> Don’t make a UX map pretty for the sake of making it pretty. Invest in creating a visual system for your map then testing it and getting feedback. </p> </div> <div class="media four-wide"> <a href="/videos/visual-design-ux-maps/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_of_UX_Maps_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/chartjunk/">Clutter-Free Charts</a></h2> <time><span class="small large desktop only">July 24, 2023</span><span class="mobile only">Jul 24, 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/chartjunk/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_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> Clear out chartjunk (unnecessary visual elements) for a more minimalist and understandable data visualization. </p> </div> <div class="media four-wide"> <a href="/videos/chartjunk/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Clutter_Free_Charts_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-weight/">What is Visual Weight?</a></h2> <time><span class="small large desktop only">July 19, 2023</span><span class="mobile only">Jul 19, 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-weight/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Weight_of_Design_Elements_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Weight_of_Design_Elements_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> Visual weight measures how much design elements draw attention from the viewer. Objects that are bigger in size, simpler in shape, use dark colors, or have high contrast appear visually heavier. </p> </div> <div class="media four-wide"> <a href="/videos/visual-weight/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Weight_of_Design_Elements_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Weight_of_Design_Elements_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Weight_of_Design_Elements_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/choosing-chart-types/">Choosing Chart Types</a></h2> <time><span class="small large desktop only">June 28, 2023</span><span class="mobile only">Jun 28, 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/choosing-chart-types/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Choosing_Chart_Types_2.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Choosing_Chart_Types_2.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <span class="overlay"> <span class="color icon fab fa-youtube"></span> </span> </a> </span> Pick a chart type that will help you make your point. In the vast majority of cases, use bar charts, line charts, or scatterplots. </p> </div> <div class="media four-wide"> <a href="/videos/choosing-chart-types/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Choosing_Chart_Types_2.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Choosing_Chart_Types_2.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Choosing_Chart_Types_2.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/choosing-color-palette/">Choosing a Color Palette</a></h2> <time><span class="small large desktop only">June 23, 2023</span><span class="mobile only">Jun 23, 2023</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/choosing-color-palette/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Choosing_a_Color_Palette_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Choosing_a_Color_Palette_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> Colors in an effective color palette work together, follow your brand’s color guidelines, and avoid overwhelming users. </p> </div> <div class="media four-wide"> <a href="/videos/choosing-color-palette/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Choosing_a_Color_Palette_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Choosing_a_Color_Palette_1.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Choosing_a_Color_Palette_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/il1-typography-test/">The IL1 Typography Test</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/il1-typography-test/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/The_IL1_Typography_Test_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_IL1_Typography_Test_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> Using typefaces with distinct characters can help users easily differentiate alphanumeric data. Choose typefaces that pass the I-L-1 test for data tables and information seen at-a-glance. </p> </div> <div class="media four-wide"> <a href="/videos/il1-typography-test/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/The_IL1_Typography_Test_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/The_IL1_Typography_Test_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/The_IL1_Typography_Test_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/common-region-gestalt/">Common Region: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">March 3, 2023</span><span class="mobile only">Mar 3, 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/common-region-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Region_Gestalt_Principle_for_UI_Design_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Region_Gestalt_Principle_for_UI_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> Items within a boundary are perceived as a group and assumed to share some common characteristic or functionality. </p> </div> <div class="media four-wide"> <a href="/videos/common-region-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Common_Region_Gestalt_Principle_for_UI_Design_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Region_Gestalt_Principle_for_UI_Design_Thumbnail_.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Region_Gestalt_Principle_for_UI_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/figure-ground-gestalt/">Figure/Ground: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">February 17, 2023</span><span class="mobile only">Feb 17, 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/figure-ground-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Figure_Ground-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Figure_Ground-_Gestalt_Principle_for_User_Interface_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> Users perceive interface design elements that differentiate the foreground (figure) from the background (ground) as something to focus on or interact with. </p> </div> <div class="media four-wide"> <a href="/videos/figure-ground-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Figure_Ground-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Figure_Ground-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Figure_Ground-_Gestalt_Principle_for_User_Interface_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/continuation-gestalt/">Continuation: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">February 3, 2023</span><span class="mobile only">Feb 3, 2023</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/continuation-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Continuation-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Continuation-_Gestalt_Principle_for_User_Interface_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> The eye automatically follows lines and curves, continuing them. Employ continuation to guide users along desired paths in the UI. </p> </div> <div class="media four-wide"> <a href="/videos/continuation-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Continuation-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Continuation-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Continuation-_Gestalt_Principle_for_User_Interface_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/common-fate-gestalt/">Common Fate: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">January 20, 2023</span><span class="mobile only">Jan 20, 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/common-fate-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Fate-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Fate-_Gestalt_Principle_for_User_Interface_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> Things that move in synch are perceived as belonging to the same group and being different than other screen elements that stay put or move differently. </p> </div> <div class="media four-wide"> <a href="/videos/common-fate-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Common_Fate-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Common_Fate-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Common_Fate-_Gestalt_Principle_for_User_Interface_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/connectedness-gestalt/">Connectedness: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">December 30, 2022</span><span class="mobile only">Dec 30, 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/connectedness-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Connectedness-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Connectedness-_Gestalt_Principle_for_User_Interface_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> Visual design elements that are connected (for example, by a line) are seen as belonging together. This principle is strong enough to overrule small differences between the items. </p> </div> <div class="media four-wide"> <a href="/videos/connectedness-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Connectedness-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Connectedness-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Connectedness-_Gestalt_Principle_for_User_Interface_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/closure-gestalt/">Closure: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">December 16, 2022</span><span class="mobile only">Dec 16, 2022</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/closure-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Closure-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Closure-_Gestalt_Principle_for_User_Interface_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> People often fill in the gaps between visual elements, using closure to perceive them as a whole instead of being separate UI items. </p> </div> <div class="media four-wide"> <a href="/videos/closure-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Closure-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Closure-_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Closure-_Gestalt_Principle_for_User_Interface_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/proximity-gestalt/">Proximity: Gestalt Principle for User Interface Design</a></h2> <time><span class="small large desktop only">December 2, 2022</span><span class="mobile only">Dec 2, 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/proximity-gestalt/"> <img loading="lazy" src="" srcset="https://media.nngroup.com/media/videos/thumbnails/Proximity_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Proximity_Gestalt_Principle_for_User_Interface_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> UI elements that are close together are perceived as belonging together, whereas users think that things that are apart play different roles in the interaction. </p> </div> <div class="media four-wide"> <a href="/videos/proximity-gestalt/" tabindex="-1" aria-hidden="true"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Proximity_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Proximity_Gestalt_Principle_for_User_Interface_Design_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Proximity_Gestalt_Principle_for_User_Interface_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="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/testing-visual-design/">Testing Visual Design: A Comprehensive Guide</a> </h2> <time><span class="small large desktop only">December 13, 2024</span><span class="mobile only">Dec 13, 2024</span> | Article: 10 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use methods like 5-second testing, first-click testing, and preference testing to gain insights into how users perceive your visual design.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/glassmorphism/">Glassmorphism: Definition and Best Practices</a> </h2> <time><span class="small large desktop only">June 7, 2024</span><span class="mobile only">Jun 7, 2024</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Glassmorphism is a UI design trend that features translucent interface components to create depth.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/design-systems-vs-style-guides/">Design Systems vs. Style Guides</a> </h2> <time><span class="small large desktop only">May 24, 2024</span><span class="mobile only">May 24, 2024</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Design systems are a set of standards (like Google’s Material Design or IBM’s Carbon Design System) needed to manage design at scale. Style guides (like content or visual style guides) are just one piece in a design system.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/visual-design-cheat-sheet/">Visual Design: Glossary</a> </h2> <time><span class="small large desktop only">May 17, 2024</span><span class="mobile only">May 17, 2024</span> | Article: 8 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use this glossary to quickly clarify key terms and concepts related to visual design.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/typography-terms-ux/">Typography Terms: Glossary</a> </h2> <time><span class="small large desktop only">May 10, 2024</span><span class="mobile only">May 10, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Use this glossary to clarify key definitions related to typography.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/7-tips-memorable-imagery/">7 Tips for Memorable and Easy-to-Understand Imagery</a> </h2> <time><span class="small large desktop only">May 3, 2024</span><span class="mobile only">May 3, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>A few relevant, high-quality visuals placed next to associated text can boost users’ comprehension of your content and its memorability.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/picture-superiority-effect/">The Picture-Superiority Effect: Harness the Power of Visuals</a> </h2> <time><span class="small large desktop only">April 26, 2024</span><span class="mobile only">Apr 26, 2024</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>People often remember visuals better than words. Designers can leverage the picture-superiority effect to make their products memorable and learnable.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/skeuomorphism/">Skeuomorphism</a> </h2> <time><span class="small large desktop only">March 15, 2024</span><span class="mobile only">Mar 15, 2024</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Skeuomorphism involves designing digital interfaces that imitate physical elements, reducing the learning curve for unfamiliar interactions.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/aesthetic-usability-effect/">The Aesthetic-Usability Effect</a> </h2> <time><span class="small large desktop only">February 3, 2024</span><span class="mobile only">Feb 3, 2024</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Users are more tolerant of minor usability issues when they find an interface visually appealing. This aesthetic-usability effect can mask UI problems during usability testing. Identify instances of the aesthetic-usability effect in your user research by watching what your users do, as well as listening to what they say.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/dark-mode-users-issues/">Dark Mode: How Users Think About It and Issues to Avoid</a> </h2> <time><span class="small large desktop only">August 27, 2023</span><span class="mobile only">Aug 27, 2023</span> | Article: 14 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/imagery-in-visual-design/">Using Imagery in Visual Design</a> </h2> <time><span class="small large desktop only">July 23, 2023</span><span class="mobile only">Jul 23, 2023</span> | Article: 5 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>When choosing images for your visual designs, match similar characteristics, balance high quality with adequate file size, prioritize information-carrying images over purely decorative ones, and provide robust alternative text.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/why-does-a-design-look-good-part2/">The Anatomy of a Good Design: An Analysis of 4 Sites</a> </h2> <time><span class="small large desktop only">March 5, 2023</span><span class="mobile only">Mar 5, 2023</span> | Article: 8 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/ux-mapping-methods-visual-design-guide/">UX Mapping Methods: Visual-Design Guide</a> </h2> <time><span class="small large desktop only">December 4, 2022</span><span class="mobile only">Dec 4, 2022</span> | Article: 6 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Visual-design principles can be applied consistently throughout the process of creating a polished UX map. Start by choosing a tool, then create a visual system, establish the basic layout, and finally add content and make adjustments.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/visual-design-in-ux-study-guide/">Visual Design in UX: Study Guide</a> </h2> <time><span class="small large desktop only">November 6, 2022</span><span class="mobile only">Nov 6, 2022</span> | Article: 3 <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 about visual design in UX.</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/fitts-law/">Fitts's Law and Its Applications in UX</a> </h2> <time><span class="small large desktop only">July 31, 2022</span><span class="mobile only">Jul 31, 2022</span> | Article: 10 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>The movement time to a target depends on the size of the target and the distance to the target.</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/pairing-typefaces/">The Dos and Don’ts of Pairing Typefaces</a> </h2> <time><span class="small large desktop only">June 19, 2022</span><span class="mobile only">Jun 19, 2022</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>When choosing typography to use in designs, narrow down your options by understanding the most common classifications, looking for typefaces with multiple variations and distinct characters, and pairing typefaces together with consistency and readability in mind.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/choosing-chart-types/">Choosing Chart Types: Consider Context</a> </h2> <time><span class="small large desktop only">January 30, 2022</span><span class="mobile only">Jan 30, 2022</span> | Article: 9 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Clearly visualize your UX data by providing context and contrast, while avoiding clutter.</p> </div> </div> </li> <li class="publication-list-item article"> <div class="article teaser"> <div class="content"> <h2 class="title"> <a href="/articles/golden-ratio-ui-design/">The Golden Ratio and User-Interface Design</a> </h2> <time><span class="small large desktop only">October 31, 2021</span><span class="mobile only">Oct 31, 2021</span> | Article: 4 <span class="small large desktop only">minute</span><span class="mobile only">min</span>s to read</time> <p>Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces.</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=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 Visual Design Resources</em></h1> <div> <h2 class="heading-large">Research Reports</h2> <ul class="no-bullet relaxed"> <li><a href="/reports/intranet-branding-interaction-design/">- Vol. 4: Intranet Branding, Visual and Interaction 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> <a href="/topic/web-usability/">Web Usability</a> </li> <li> <a href="/topic/writing-web/">Writing for the Web</a> </li> <li><strong><a id="navTopics__seeAll"><span class="far fa-caret-right"></span> See all topics</a></strong></li> </ul> </div> <div id="navTopicsAll" class="topic-list all-topic-nav" style="display: none;"> <h1><em>All Topics</em></h1> <ul class="relaxed no-bullet topics" id="article-all-topics"> <li><strong><a id="navTopics__seeFewer"><span class="far fa-caret-down"></span> See fewer topics</a></strong></li> <li> <a href="/topic/accessibility/">Accessibility</a> </li> <li> <a href="/topic/agile/">Agile</a> </li> <li> <a href="/topic/analytics-and-metrics/">Analytics & Metrics</a> </li> <li> <a href="/topic/applications/">Application Design</a> </li> <li> <a href="/topic/ai/">Artificial Intelligence</a> </li> <li> <a href="/topic/b2b-websites/">B2B Websites</a> </li> <li> <a href="/topic/behavior-patterns/">Behavior Patterns</a> </li> <li> <a href="/topic/branding/">Branding</a> </li> <li> <a href="/topic/content-strategy/">Content Strategy</a> </li> <li> <a href="/topic/corporate-websites/">Corporate Websites</a> </li> <li> <a href="/topic/customer-journeys/">Customer Journeys</a> </li> <li> <a href="/topic/design-patterns/">Design Patterns</a> </li> <li> <a href="/topic/ux-design-process/">Design Process</a> </li> <li> <a href="/topic/e-commerce/">Ecommerce</a> </li> <li> <a href="/topic/email/">Email</a> </li> <li> <a href="/topic/eyetracking/">Eyetracking</a> </li> <li> <a href="/topic/heuristic-evaluation/">Heuristic Evaluation</a> </li> <li> <a href="/topic/human-computer-interaction/">Human Computer Interaction</a> </li> <li> <a href="/topic/ux-ideation/">Ideation</a> </li> <li> <a href="/topic/information-architecture/">Information Architecture</a> </li> <li> <a href="/topic/interaction-design/">Interaction Design</a> </li> <li> <a href="/topic/international-users/">International Users</a> </li> <li> <a href="/topic/intranets/">Intranets</a> </li> <li> <a href="/topic/ux-management/">Managing UX Teams</a> </li> <li> <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> Visual Design </li> <li> <a href="/topic/web-usability/">Web Usability</a> </li> <li> <a href="/topic/writing-web/">Writing for the Web</a> </li> <li> <a href="/topic/young-users/">Young Users</a> </li> </ul> </div> <div class="mobile only"> <div id="navAuthorsMain" class="article-authors"> <h1>Authors</h1> <ul class="relaxed no-bullet" id="article-initial-authors"> <li><a href="/articles/author/bruce-tognazzini/">Bruce Tognazzini</a></li> <li><a href="/articles/author/don-norman/">Don Norman</a></li> <li><a href="/articles/author/jakob-nielsen/">Jakob Nielsen</a></li> <li><strong><a id="navAuthors__seeAll"><span class="fas fa-caret-right"></span> See all authors</a></strong></li> </ul> </div> <div id="navAuthorsAll" class="article-authors" style="display: none;"> <h1>All Authors</h1> <ul class="relaxed no-bullet" id="article-all-authors"> <li><strong><a id="navAuthors__seeFewer"><span class="fas fa-caret-down"></span> See fewer authors</a></strong></li> <li><a href="/articles/author/mayya-azarova/">Mayya Azarova</a></li> <li><a href="/articles/author/sana-behnam/">Sana Behnam</a></li> <li><a href="/articles/author/maddie-brown/">Maddie Brown</a></li> <li><a href="/articles/author/megan-brown/">Megan Brown</a></li> <li><a href="/articles/author/raluca-budiu/">Raluca Budiu</a></li> <li><a href="/articles/author/patty-caya/">Patty Caya</a></li> <li><a href="/articles/author/connor-chan/">Connor Chan</a></li> <li><a href="/articles/author/megan-chan/">Megan Chan</a></li> <li><a href="/articles/author/nishi-chitale/">Nishi Chitale</a></li> <li><a href="/articles/author/emma-cionca/">Emma Cionca</a></li> <li><a href="/articles/author/taylor-dykes/">Taylor Dykes</a></li> <li><a href="/articles/author/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

Visual Design Articles, Videos, Reports, and Training Courses