Microinteractions in User Experience

<!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>Microinteractions in User Experience</title><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="721be388-83be-48ef-9882-002f0dc9dc4f"></script><script>(function(){ var FLAGS = { 'use_server_algolia_search_flag': false,'use_local_user_profile_cert_and_exam_meta_data_apis': false,'use_teamdesk_api_for_user_profile_override': false,'navigation_2024': true,'banner_sales': true,'use_new_homepage_template': true,'use_local_user_profile_attendance_api': true,'enable_user_auth_redesign': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'log_exam_access_at_event_records': false,'use_local_exam_data': true,'create_course_reminders': true,'use_teamdesk_message_etl': false,'slack-integration': false,'use_virtual_overview_redesign': false,'use_course_redesign': true,'allow_course_new_fields_editing': false,'send_sign_in_reminders': false }, SAMPLES = { }; window.waffle = { "flag_is_active": function waffle_flag(flag_name) { return !!FLAGS[flag_name]; }, "switch_is_active": function waffle_switch(switch_name) { return !!SWITCHES[switch_name]; }, "sample_is_active": function waffle_sample(sample_name) { return !!SAMPLES[sample_name]; }, "FLAGS": FLAGS, "SWITCHES": SWITCHES, "SAMPLES": SAMPLES }; })(); </script><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="description" content="Microinteractions convey system status, support error prevention, and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging."/><meta property="og:description" content="Microinteractions convey system status, support error prevention, and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging."/><meta name="keywords" content="microinteraction, user experience, system status, prevent errors, branding, GUI, gesture, voice, feedback, user, system, animation, notification, engagement, empower, progress, standby, trigger, assistant, undo, rework, xbox, video game, registration,"/><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="Microinteractions in User Experience"/><meta property="og:url" content="https://www.nngroup.com/articles/microinteractions/"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:type" content="article"><meta property="og:image" content="https://media.nngroup.com/media/articles/opengraph_images/microinteractions.png"><meta name="twitter:site" content="@nngroup"/><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://www.nngroup.com/articles/microinteractions/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.9cae50358e22.css" type="text/css"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Microinteractions in User Experience", "image": [ "https://media.nngroup.com/media/articles/opengraph_images/microinteractions.png" ], "datePublished": "2018-10-21T16:00:00+0000", "dateModified": "2018-10-22T18:09:49+0000", "author": [ { "@type": "Person", "name": "Alita Joyce" ,"url": "https://www.nngroup.com/articles/author/alita-joyce/" } ] } </script> </head> <body class=" article-detail " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="banner-sales hidden"> <p class="text"> <strong class="label-small"><span>Save up to 20% when you</span> <span>register for 2+ <a href="/course-calendar/"><span class="visually-hidden">upcoming</span> courses</a></span></strong> Until January 21 </p> <button aria-label="Close promotion banner"> <svg class="open-nav" aria-hidden width="16" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-close" /> </svg> </button> </div> <div class="svg-definitions"> <svg width="0" id="icon-error-svg" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/> </svg> <svg width="0" id="icon-error-svg-outlined" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/> <circle cx="12" cy="18.625" r="1.5" fill="black"/> <path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/> </svg> <svg width="0" id="icon-confirm-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/> </svg> <svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor"/> <path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor"/> <path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor"/> <path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor"/> </g> <g id="icon-burger"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" /> </g> <path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor"/> <path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor"/> <g id="icon-cart"> <circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor"/> <circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor"/> <path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> <path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/> </g> </svg> <svg id="icon-close-svg" viewbox="0 0 22 22" width="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-close"> <path d="M1 1L20.5 20.5" stroke="currentColor" stroke-width="2" /> <path d="M20.5 1L1 20.5" stroke="currentColor" stroke-width="2" /> </g> </svg> </div> <header class="banner-image" > <nav class="nav-main desktop" aria-label="main"> <button class="burger-button"> <svg width="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Open main navigation</title> <use href="#icon-burger" /> </svg> </button> <a href="/" class="logo" aria-label="Nielsen Norman Group - Home"> <svg width="71" viewBox="0 0 71 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Nielsen Norman Group</title> <use href="#logo" /> </svg> </a> <ul> <li class=" has-subnav"> <button aria-controls="nav-live-courses" aria-expanded="false">Training & UX Certification <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-live-courses"> <li class=""> <a href="/courses/">All Courses</a> </li> <li class=""> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class=""> <a href="/team-training/">Private Team Training</a> </li> <li class=""> <a href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a href="/ux-certification/">UX Certification</a> </li> </ul> </li> <li class="selected "> <a aria-current="page" 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 width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul id="nav-about-home"> <li class=""> <a href="/about/">Overview</a> </li> <li class=""> <a href="/people/">People</a> </li> <li class=""> <a href="/about/about-client-list/">Clients</a> </li> <li class=""> <a href="/news/">News</a> </li> <li class=""> <a href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty" aria-hidden> <a href=/cart/> <svg width="30" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-cart" /> </svg> <span></span> </a> </div> <div class="profile has-subnav"> <button class="loading" aria-expanded="false">Profile <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> </div> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="9f70340d433027a479c60e38395a089c" data-index="Document_production_query_suggestions" > <button class="search-button search-toggle-button" aria-controls="search-form-content" aria-expanded="false"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> <div class="form-content" id="search-form-content"> <label class="visually-hidden" for="search">Search</label> <div id="search-autocomplete"><input id="search" name="q" type="search" /></div> <button type="reset" class="reset-button empty" disabled> <svg width="13" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Reset</title> <use href="#icon-close" /> </svg> </button> <button type="submit" class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> </div> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <article> <span id="gaDataLength" class="ga-data-layer" aria-hidden="true">9</span> <div class="article-header"> <h1 class="article-h1">Microinteractions in User Experience</h1> <div class="article-authors"> <span id="gaDataAuthors" class="ga-data-layer" aria-hidden="true">Alita Joyce</span> <div class="author-tile multiple body-small"> <div class="author-photos"> <img height="64" width="64" class="author-photo fluid" src="https://media.nngroup.com/media/people/photos/Alita_Joyce_Headshot_copy.jpg.256x256_q75_autocrop_crop-smart_upscale.jpg" alt=""> </div> <div class="author-meta"> <span class="authors-list"><a class="ga-article-author" href="/articles/author/alita-joyce/"> Alita Joyce</a></span> <p class="publication-date"> October 21, 2018 <span id="gaDataPubDate" class="ga-data-layer" aria-hidden="true">2018-10-21</span> </p> </div> </div> </div> <div class="article-share"> <a class="article-share-title ga-share" href="#"> <span class="article-share-icon"></span> <p class="article-share-label body-medium">Share</p> </a> <div class="share-links tooltip"> <div class="tip-arrow"></div> <ul> <li class="body-medium"> <a class="ga-share-email" target="_blank" href="mailto:?subject=NN/g Article: Microinteractions in User Experience&body=https://www.nngroup.com/articles/microinteractions/" data-share-type="Email"> <span class="icon envelope"></span>Email article </a> </li> <li class="body-medium"> <a class="ga-share-linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.nngroup.com/articles/microinteractions/&title=Microinteractions in User Experience&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn"> <span class="icon linkedin"></span>Share on LinkedIn </a> </li> <li class="body-medium"> <a class="ga-share-twitter" target="_blank" href="https://twitter.com/intent/tweet?url=http://www.nngroup.com/articles/microinteractions/&text=Microinteractions in User Experience&via=nngroup" data-share-type="Twitter"> <span class="icon twitter"></span>Share on Twitter </a> </li> </ul> </div> </div> </div> <div class="article-container"> <div class="article-content"> <div class="article-summary article-heading-small-light"> <span class="article-summary-label"> Summary:  </span>Microinteractions convey system status, support error prevention, and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging. </div> <div class="article-body"> <div class="table-of-contents"> <div class="content"> <div class="header"> <div class="toc-header"> <h2 class="toc-title article-heading-small"> In This Article: </h2> <span class="expand-icon"></span> </div> <a class="current-element" href="#"></a> </div> <ul class="toc-items"> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-what-are-microinteractions-1">What Are Microinteractions?</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-why-are-microinteractions-important-2">Why Are Microinteractions Important?</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-show-system-status-3">Show System Status</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-error-prevention-4">Error Prevention</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-communicate-brand-5">Communicate Brand</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-conclusion-6">Conclusion</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-reference-7">Reference</a> </li> </ul> </div> </div><h2 id="toc-what-are-microinteractions-1">What Are Microinteractions?</h2> <p>Many of our everyday interactions with computer systems fall under the large umbrella of microinteractions. Microinteractions provide feedback to the user, often through conveying <a href="https://www.nngroup.com/articles/visibility-system-status/">system status</a> or helping users <a href="https://www.nngroup.com/articles/slips/">prevent errors</a>. Additionally, microinteractions can be used as a vehicle for <a href="https://www.nngroup.com/articles/brand-intention-interpretation/">branding</a>.</p> <p style="margin-left:.5in;">Definition: <strong>Microinteractions </strong>are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.</p> <p>User-initiated triggers can consist of a GUI command or can be gestural or voice-based, whereas a system-initiated trigger involves meeting a set of predetermined conditions. When a microinteraction is triggered by a GUI command, a visual feedback element will be usually placed in close proximity to that trigger.</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="673" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/microinteractio-flow.png" width="553"/> <figcaption><em>A process flow indicating how microinteractions are either user- or system- triggered, and result in feedback communicated to the user by a small change in the user interface.</em></figcaption> </figure> </div> <p>Microinteractions encompass a substantial number of digital elements, but not every element is part of a microinteraction. Static elements that are always present on the screen are not microinteractions because they do not have a distinct trigger. Additionally, flows composed of multiple actions are not microinteractions. Some examples of microinteractions are described in the table below.</p> <table align="center" border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width:208px;"> <p><strong>Digital element</strong></p> </td> <td style="width:208px;"> <p><strong>Is it a microinteraction?</strong></p> </td> <td style="width:208px;"> <p><strong>Reason</strong></p> </td> </tr> <tr> <td style="width:208px;"> <p>Scrollbar</p> </td> <td style="width:208px;"> <p>Yes</p> </td> <td style="width:208px;"> <p>User triggered; visual feedback to user changing location within a page</p> </td> </tr> <tr> <td style="width:208px;"> <p>Digital alarm</p> </td> <td style="width:208px;"> <p>Yes</p> </td> <td style="width:208px;"> <p>System triggered; auditory (and visual) feedback to time condition being met</p> </td> </tr> <tr> <td style="width:208px;"> <p>Button</p> </td> <td style="width:208px;"> <p>It depends</p> </td> <td style="width:208px;"> <p>If there is no feedback when a user clicks the button, there is no microinteraction</p> </td> </tr> <tr> <td style="width:208px;"> <p>Pull-to-refresh animation</p> </td> <td style="width:208px;"> <p>Yes</p> </td> <td style="width:208px;"> <p>User triggered; visual feedback to a user action</p> </td> </tr> <tr> <td style="width:208px;"> <p>GIFs</p> </td> <td style="width:208px;"> <p>No</p> </td> <td style="width:208px;"> <p>Not triggered by the system or a user</p> </td> </tr> <tr> <td style="width:208px;"> <p>Swipe animation</p> </td> <td style="width:208px;"> <p>Yes</p> </td> <td style="width:208px;"> <p>User triggered; visual feedback that a user has swiped an element</p> </td> </tr> <tr> <td style="width:208px;"> <p>Email notification</p> </td> <td style="width:208px;"> <p>Yes</p> </td> <td style="width:208px;"> <p>System triggered; provides user with feedback that a new message has arrived</p> </td> </tr> <tr> <td style="width:208px;"> <p>Video player</p> </td> <td style="width:208px;"> <p>No</p> </td> <td style="width:208px;"> <p>Feature, not a microinteraction; volume control within the video player would be a microinteraction</p> </td> </tr> </tbody> </table> <div style="clear:both;"> </div> <p>In 2014, Dan Saffer published the book <cite>Microinteractions</cite>, which defined this concept and outlined a model for designing microinteractions.</p> <p>In this article, we focus on why microinteractions are important to the user experience and provide several examples from the user’s perspective.</p> <h2 id="toc-why-are-microinteractions-important-2">Why Are Microinteractions Important?</h2> <p>One of the greatest joys of using technology comes through <a href="https://www.nngroup.com/articles/user-empowerment-and-the-fun-factor/">user empowerment and engagement</a>. An enjoyable experience means more than just usability — it needs to be engaging, and that’s where microinteractions can play a macro role, by positively contributing to the look-and-feel of a product or service.</p> <p>Microinteractions can improve a product’s user experience by:</p> <ul> <li>Encouraging engagement</li> <li>Displaying system status</li> <li>Providing error prevention</li> <li>Communicating brand</li> </ul> <p>Standard microinteractions such as <a href="https://www.nngroup.com/articles/scrolling-and-scrollbars/">scrollbars</a> are less likely to be poorly designed compared to their modern counterparts like pull-to-refresh elements. It is these new microinteractions that require more effort and thought to create a meaningful, well-designed experience.</p> <p>Let’s walk through a quick case study of a microinteraction done well.</p> <p>To keep track of day-to-day tasks, I use the task-management tool Asana. There are a few aspects of the tool that I especially enjoy, like the tags and the visual design. But by far, my favorite aspect of Asana is the sporadic flying unicorn that soars across my browser when I complete a task. This interaction is an example of a microinteraction.</p> <p>When a user marks a task as complete, a small dialog box appears in the bottom left corner of the page. This dialog provides system feedback that the task has been marked completed and an error-prevention option to undo this action in case it was a <a href="https://www.nngroup.com/articles/user-mistakes/">mistake</a>. About a split second after this box appears, a unicorn flies across the bottom left quadrant of the browser in celebration of a job well done. In this case, there are two microinteractions: the utilitarian dialog box and the gamification-inspired unicorn animation.</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="425" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/asana-unicorn.png" width="497"/> <figcaption><em>On the Asana site, when a user marks a task as completed, a dialog box appears with a confirmation text and a button to undo the action. Additionally, a unicorn (or another mystical animal) occasionally soars across the screen.</em></figcaption> </figure> </div> <p>If you’ve ever used a task-management tool, you probably know that there are a lot of options to choose from — Asana, Jira, Trello, or Wrike, to name a few. These products have a lot in common. They share features like the ability to assign tasks to team members, create boards, or integrate with other products. However, the differences between these products become quite clear when analyzing the microinteractions embedded throughout the experience. In Trello, moving a task to the <em>Done</em> column generates no extra fanfare. And, for many people, that perfectly meets expectations. Me, I crave the positive reinforcement of completing a task and hoping that I see the unicorn.</p> <p>However, microinteractions do more than just make users feel good. Microinteractions convey system status, support error prevention, and communicate brand. These use cases add significant value, thereby making microinteractions a key way to differentiate your product from competitors. Microinteractions provide feedback to keep users informed and engaged, and without them, your customer experience will suffer.</p> <h2 id="toc-show-system-status-3">Show System Status</h2> <p>The first <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">usability heuristic</a> focuses on the visibility of <a href="https://www.nngroup.com/articles/visibility-system-status/">system status</a>. This heuristic reinforces the need to be transparent with the user. By being transparent and communicating the current state of the system, users will feel empowered and engaged. Any display of system status is a microinteraction because the interaction naturally includes a trigger (either a user action or a change of system state) and feedback.</p> <h3>Communicate Progress</h3> <p><a href="https://www.nngroup.com/articles/progress-indicators/">Progress indicators</a>, a subcategory of microinteractions, let users know that the system is still working to respond to their actions. They can show a specific or undetermined wait time and may include components like linear or circular progress indicators. Such elements encourage the user to remain committed to a product while they wait for something to happen.</p> <p>LinkedIn uses circular progress indicators when users pull-to-refresh their newsfeed. This component communicates that the system is working so that users don’t second-guess whether the system recognized their action. Due to this microinteraction, users are likely to (briefly) wait for more posts to load and thereby continue to engage with LinkedIn.</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="623" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/linkedin-progress.PNG" width="350"/> <figcaption><em>In the LinkedIn app, when users pull-to-refresh their newsfeed, a progress indicator communicates that the system is working on the request.</em></figcaption> </figure> </div> <h3>Standby</h3> <p>Sometimes systems need to communicate that they’re waiting for further user input. After the initial trigger, microinteractions <strong>notify the user that the system is in standby</strong> and needs additional information. This type of microinteraction encourages the user to continue interacting with a product.</p> <p>For example, in iOS, when you press and hold an app icon on the device’s home screen, the system responds by slightly shaking all of the apps. This movement communicates that the system is waiting for further action (that is, either tapping the ‘X’ in the top-left corner of the app to delete it or dragging the icon to a different position on the screen in order to move it).</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="623" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/ios-app-delete.PNG" width="350"/> <figcaption><em>iOS uses a microinteraction (shaking of the app icons) when a user presses-and-holds an app to communicate that the system is waiting for additional input.</em></figcaption> </figure> </div> <p>Microinteractions aren’t limited to websites. Voice-based assistants such as Google Home use microinteractions to communicate standby mode when waiting for a user command. After the user says, ‘Hey Google,’ the device displays a circular animation of four dots. Almost instantly the dots form the shape of a diamond with a subtle flickering motion. Through this visual feedback, the user knows that the device is listening and can follow up with a question such as ‘What’s the weather like?’</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="475" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/google-home-example-copy.png" width="356"/> <figcaption><em>Google Home lights up upon hearing the trigger Hey Google, in order to communicate that the device is on standby and waiting for a command from the user.</em></figcaption> </figure> </div> <h2 id="toc-error-prevention-4">Error Prevention</h2> <p><a href="https://www.nngroup.com/articles/user-mistakes/">Error prevention</a>, another one of the 10 usability heuristics, focuses on getting rid of error-prone situations and providing confirmation actions. Microinteractions communicate these situations to users and can facilitate a satisfactory experience by supporting undo and preventing rework.</p> <h3>Support Undo</h3> <p><a href="https://www.nngroup.com/articles/slips/">Everyone makes mistakes</a> and, in the digital world, this means that sometimes we click things by accident. Systems should make it easy to undo actions so that users don’t have to jump through hoops to reverse something that they didn’t mean to do in the first place. Microinteractions <strong>communicate the state of a UI component</strong> and suggest that further interaction is possible. Microinteractions are the perfect way to support undo because they inform the user that a change in state has occurred.</p> <p>Gap.com allows you to add items to your favorites by clicking a heart icon in the upper right-hand corner of the product image. This microinteraction uses a pumping-heart animation to communicate that you’ve ‘favorited’ the product. You can easily undo this action by clicking again on the heart icon, which will then revert back to its original grey state.</p> <p>This pulsating heart is an <a href="https://www.nngroup.com/articles/animation-usability/">appropriate use of animation to draw attention</a>, for multiple reasons:</p> <ul> <li>It’s subtle enough to not brutally yank the user’s attention away from the primary task. (In contrast, an aggressive animation would be too intrusive.)</li> <li>By only animating the heart for a short duration, this effect remains a microinteraction, as opposed to being inappropriately permanent.</li> <li>The distinction between the pumping heart and the “regular” colored heart (from previously favorited items) is helpful in communicating the change in system state and directing the user’s attention to the effect of a potential accidental activation (something that’s sadly all too common in touch-driven user interfaces).</li> </ul> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="520" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/gap-exampleasset-2.png" width="692"/> <figcaption><em>Gap.com uses microinteractions to communicate that a user has favorited a product.</em></figcaption> </figure> </div> <h3>Prevent Rework</h3> <p>In the account-creation process, there are few things more frustrating than clicking the final submit button and receiving an error that your <a href="https://www.nngroup.com/articles/password-creation/">password</a> does not meet requirements that were not previously specified. Microinteractions communicate to users whether their password meets all field requirements and <strong>prevent repeat work</strong> (i.e. filling out the form again). Without these microinteractions, users get annoyed with the product and, if the task isn’t critical, likely disengage altogether.</p> <p>eBay uses microinteractions in the registration form to prevent validation errors. For instance, when the password field is active, a list of password requirements appears. While typing, as the password meets each of these requirements, the list updates dynamically. If the field is left without meeting all requirements, a red error message appears under the field. This series of microinteractions works together to ensure users receive consistent feedback and have a smooth experience.</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="261" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/ebay-exampleasset-3.png" width="692"/> <figcaption><em>eBay uses microinteractions in its registration form to communicate whether a password meets field requirements.</em></figcaption> </figure> </div> <h2 id="toc-communicate-brand-5">Communicate Brand</h2> <p>Microinteractions shouldn’t be fluffy and should always serve a purpose — but that doesn’t mean that they shouldn’t embody a brand. If your branding is fun and colorful, it’s okay to let that show in your microinteractions. Alternatively, if your brand is professional and reliable, using something comical, like a donut, in your pull-to-refresh microinteraction is ill-advised. Just as your copywriting has a <a href="https://www.nngroup.com/articles/tone-voice-users/">tone of voice</a>, your microinteractions have a tone as well. (A good example of <a href="https://www.nngroup.com/articles/brand-experience-ux/">brand as experience</a>.)</p> <p>When sending a happy-birthday text message on Apple’s Messages app, balloons fill the screen. Apple presents itself as an innovative yet humanistic brand; the birthday microinteraction is in line with this personality by creating an emotional and sensory experience.</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="618" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/imessage.png" width="350"/> <figcaption><em>Messages uses microinteractions to declare a celebration when a user sends someone a ‘happy birthday’ text.</em></figcaption> </figure> </div> <p>In Snapchat, microinteractions are used to communicate that two Bitmoji users are in the same chat window. When your chat partner is typing, his Bitmoji appears with a thought bubble. If he’s reading the message, his Bitmoji peaks over the text-input field. In this case, the feedback provided encourages users to continue the conversation and stay engaged with the app.</p> <div style="text-align:center"> <figure class="caption" style="display:inline-block"><img alt="" height="374" loading="lazy" src="https://media.nngroup.com/media/editor/2018/09/18/snapchatasset-4.png" width="429"/> <figcaption><em>Snapchat uses microinteractions to show that two users are in the same chat window. When the conversation partner reads the chat, his Bitmoji can be seen peeking in the bottom left corner (left). When the conversation partner is actively typing, his Bitmoji appears with a thought bubble (right).</em></figcaption> </figure> </div> <p>Many brands rely heavily on visuals to communicate to us, but sound can be just as powerful. If you were asked to draw the logo of an insurance company versus sing their commercial jingle, which would be easier? If you watch a lot of television, the jingle will likely come to mind first. Microinteractions can involve auditory responses as well. For example, the Xbox One console provides auditory and visual feedback when a user turns the system on: the Xbox button illuminates, and the system emits a short, characteristic melody. Owners of Xbox One can likely differentiate this sound from the Xbox’s system-off tune, as well as from other gaming platforms’ sounds. This microinteraction is a signature element of the interaction with the system as well as of the Xbox brand.</p> <figure> <video controls="" poster="" src="https://media.nngroup.com/media/editor/2018/09/18/xbox-system-on.mp4" width="100%">Your browser does not support the video tag.</video> <figcaption><em>Xbox One uses auditory and visual feedback when the user powers it on. To its users, the auditory feedback is an instantly recognizable aspect of the system. (In most browsers, hover over the video to display the controls if they're not already visible.)</em></figcaption> </figure> <h2 id="toc-conclusion-6">Conclusion</h2> <p>Well-designed microinteractions can make a big impact on your user experience. They provide value by serving as a vehicle to communicate with the user. Microinteractions provide visual feedback of the system status or help users to prevent errors. Additionally, microinteractions can enrich your product by communicating brand, which thereby encourages users to select your product over your competitors. In sum, these little details can transform a good product into a great product, and disengaged user into an engaged user.</p> <h2 id="toc-reference-7">Reference</h2> <p>Saffer, D. (2014). <em><a href="https://www.amazon.com/dp/1491945923?tag=useitcomusablein">Microinteractions</a>.</em> O’Reilly Media.</p> </div> </div> <div class="article-sidebar"> <div class="sidebar-wrapper"> <span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">Interaction Design,animation,gestures,ui elements</span> <div class="sidebar-item related-topics"> <h2 class="article-heading-small">Related Topics</h2> <ul> <li> <span id="gaDataTopic" class="ga-data-layer" aria-hidden="true">Interaction Design</span> <a class="ga-article-related-topic" href="/topic/interaction-design/">Interaction Design</a> </li> </ul> </div> </div> </div> </div> </article> </div> </section> <section class="learn-more"> <div class="wrapper"> <div class="related-content-container padded"> <h2 class="article-heading-small learn-more-title">Learn More:</h2> <div class="article-videos"> <div class="related-content related-videos"> <ul class="no-bullet three column grid"> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="UX vs. UI" href="/videos/ux-vs-ui/?lm=microinteractions&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/UX_vs_UI_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/UX_vs_UI_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/UX_vs_UI_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> UX vs. UI </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Sarah Gibbons </span> · <span class="related-content-duration body-small">3 min</span> </p> </div> </a> </div> </div> </li> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="Why Microinteractions Are Important for UX" href="/videos/microinteractions/?lm=microinteractions&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Why_Microinteractions_are_Important_for_UX_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_Microinteractions_are_Important_for_UX_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_Microinteractions_are_Important_for_UX_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> Why Microinteractions Are Important for UX </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Alita Joyce </span> · <span class="related-content-duration body-small">3 min</span> </p> </div> </a> </div> </div> </li> <li> <div class="tile video"> <div class="media"> <a class="ga-article-related-video" data-video-title="Why Interaction Cost Matters to UX" href="/videos/interaction-cost/?lm=microinteractions&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Why_interaction_cost_matters_to_UX_Raluca.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Why_interaction_cost_matters_to_UX_Raluca.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Why_interaction_cost_matters_to_UX_Raluca.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> Why Interaction Cost Matters to UX </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Raluca Budiu </span> · <span class="related-content-duration body-small">2 min</span> </p> </div> </a> </div> </div> </li> </ul> </div> </div> <div class="related-content related-articles"> <h2 class="article-heading-small related-articles-title">Related Articles:</h2> <ul class="no-bullet three column grid"> <li> <a class="tile ga-article-related-article" data-article-title="Change Blindness in UX: Definition" href="/articles/change-blindness-definition/?lm=microinteractions&pt=article"> <p class="related-content-title">Change Blindness in UX: Definition</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Raluca Budiu </span> · <span class="related-content-duration body-small">8 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Scan and Shake: A Lesson in Technology Adoption from China’s WeChat" href="/articles/wechat-qr-shake/?lm=microinteractions&pt=article"> <p class="related-content-title">Scan and Shake: A Lesson in Technology Adoption from China’s WeChat</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Yunnuo Cheng and Raluca Budiu </span> · <span class="related-content-duration body-small">13 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="7 Tips for Successful Customization" href="/articles/customization/?lm=microinteractions&pt=article"> <p class="related-content-title">7 Tips for Successful Customization</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Amy Schade </span> · <span class="related-content-duration body-small">5 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Customization vs. Personalization in the User Experience" href="/articles/customization-personalization/?lm=microinteractions&pt=article"> <p class="related-content-title">Customization vs. Personalization in the User Experience</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Amy Schade </span> · <span class="related-content-duration body-small">4 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Timing Guidelines for Exposing Hidden Content" href="/articles/timing-exposing-content/?lm=microinteractions&pt=article"> <p class="related-content-title">Timing Guidelines for Exposing Hidden Content</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Aurora Harley </span> · <span class="related-content-duration body-small">6 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="First Principles of Interaction Design (Revised & Expanded)" href="http://asktog.com/atc/principles-of-interaction-design/?lm=microinteractions&pt=article"> <p class="related-content-title">First Principles of Interaction Design (Revised & Expanded)</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Bruce "Tog" Tognazzini </span> · <span class="related-content-duration body-small"></span> </p> </a> </li> </ul> </div> </div> </div> </section> </main> <footer class="footer"> <div class="wrapper row"> <div class="subscribe"> <h2 class="title-large">Subscribe to Our Newsletter</h2> <p class="body-medium">Get weekly UX articles, videos, and upcoming training events straight to your inbox.</p> <form class="form-validated" action="https://nngroup.us4.list-manage.com/subscribe/post?u=538d934a891681a5d850bb4e5&id=7f29a2b335" id="subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" > <div class="form-field"> <div class="outline"> <label for="newsletter-subscribe-email" class="label-medium">Email</label> <input class="body-small" id="newsletter-subscribe-email" placeholder="norman@gmail.com" name="EMAIL" type="email" value=""> </div> <div class="error-local"></div> </div> <input class="button-fill button-small" name="subscribe" type="submit" value="Subscribe"> </form> </div> <div class="follow"> <h2 class="title-large">Follow Us</h2> <ul> <li class="label-large"> <a href="https://www.linkedin.com/company/nielsen-norman-group"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-linkedin.svg" alt=""> LinkedIn </a> </li> <li class="label-large"> <a href="https://www.instagram.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-instagram.svg" alt=""> Instagram </a> </li> <li class="label-large"> <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-youtube.svg" alt=""> Youtube </a> </li> <li class="label-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup "> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-podcast.svg" alt=""> Podcast </a> </li> <li class="label-large"> <a href="https://twitter.com/nngroup"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-x.svg" alt=""> X (Twitter) </a> </li> <li class="label-large"> <a href="https://www.facebook.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-facebook.svg" alt=""> Facebook </a> </li> </ul> </div> </div> <section class="navigation"> <div class="wrapper"> <ul> <li><span class="title-small">Certification</span> <ul> <li class="body-large"> <a href="/ux-certification/">What is UX Certification?</a> </li> <li class="body-large"> <a href="/ux-certification/specialties/">Specialties</a> </li> <li class="body-large"> <a href="/ux-certification/exams/">Exams</a> </li> <li class="body-large"> <a href="/ux-certification/people/">UX Certified People</a> </li> </ul> </li> <li> <span class="title-small">UX Training</span> <ul> <li class="body-large"> <a href="/courses/">All Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class="body-large"> <a href="/team-training/">Private Team Training</a> </li> <li class="body-large"> <a href="/course-calendar/">Course Calendar</a> </li> </ul> </li> <li> <span class="title-small">Consulting</span> <ul> <li class="body-large"> <a href="/consulting/expert-review/">Expert Review</a> </li> <li class="body-large"> <a href="/consulting/user-testing/">User Testing</a> </li> <li class="body-large"> <a href="/consulting/user-research/">Customized Research</a> </li> <li class="body-large"> <a href="/consulting/applied-workshops/">Applied Workshops</a> </li> <li class="body-large"> <a href="/consulting/keynote-speaking/">Keynote Speaking</a> </li> </ul> </li> <li> <span class="title-small">Free Guidance</span> <ul> <li class="body-large"> <a href="/articles/">Articles & Videos</a> </li> <li class="body-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup">The NN/g UX Podcast</a> </li> </ul> </li> <li> <span class="title-small">About</span> <ul> <li class="body-large" > <a href="/about/why-nng/">Why NN/g</a> </li> <li class="body-large" > <a href="/about/">About Us</a> </li> <li class="body-large" > <a href="/people/">People</a> </li> <li class="body-large" > <a href="/about/about-client-list/">Clients</a> </li> <li class="body-large" > <a href="/about/contact/">Contact</a> </li> <li class="body-large" > <a href="/return-policy/">Return Policy</a> </li> </ul> </li> </ul> </div> </section> <div class="copyright"> <div class="wrapper"> <p><a href="/copyright-and-reprint-info/">Copyright</a> © 1998-2024 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a href="javascript:Cookiebot.show();">Cookie Preferences</a></li> <li><a href="/cookie-declaration/">Cookie Declaration</a></li> <li><a href="/privacy-policy/">Privacy Policy</a></li> </ul> </div> </div> </footer> <button class="back-to-top" title="Back to top"><span class="text"><span class="fas fa-caret-up arrow" aria-hidden="true"></span><br>Top</span></button> <script src="https://media.nngroup.com/static/js/output.c386d66e942d.js" defer></script> <script src="https://media.nngroup.com/static/js/article-detail.7e820ce13132.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

Microinteractions in User Experience