Direct Manipulation: Definition

<!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>Direct Manipulation: Definition</title><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="721be388-83be-48ef-9882-002f0dc9dc4f"></script><script>(function(){ var FLAGS = { 'use_server_algolia_search_flag': false,'use_local_user_profile_cert_and_exam_meta_data_apis': false,'use_teamdesk_api_for_user_profile_override': false,'navigation_2024': true,'banner_sales': true,'use_new_homepage_template': true,'use_local_user_profile_attendance_api': true,'enable_user_auth_redesign': true,'can_generate_certificates': true }, SWITCHES = { 'stripe_invoice_auto_send': false,'exclude_bank_transfer_payment': false,'log_exam_access_at_event_records': false,'use_local_exam_data': true,'create_course_reminders': true,'use_teamdesk_message_etl': false,'slack-integration': false,'use_virtual_overview_redesign': false,'use_course_redesign': true,'allow_course_new_fields_editing': false,'send_sign_in_reminders': false }, SAMPLES = { }; window.waffle = { "flag_is_active": function waffle_flag(flag_name) { return !!FLAGS[flag_name]; }, "switch_is_active": function waffle_switch(switch_name) { return !!SWITCHES[switch_name]; }, "sample_is_active": function waffle_sample(sample_name) { return !!SAMPLES[sample_name]; }, "FLAGS": FLAGS, "SWITCHES": SWITCHES, "SAMPLES": SAMPLES }; })(); </script><script data-cookieconsent="ignore"> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) } gtag("consent", "default", { ad_personalization: "denied", ad_storage: "denied", ad_user_data: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 500 }); gtag("set", "ads_data_redaction", true); gtag("set", "url_passthrough", false); </script><script type="text/plain" data-cookieconsent="statistics">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=oQvLGCv6ryZLP7PJLlpI-g&gtm_preview=env-2&gtm_cookies_win=x';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THJDDHK');</script><script> window.addEventListener('CookiebotOnConsentReady', function () { if (window.Cookiebot.consent.marketing && window.Cookiebot.consent.method === "explicit") { // the experiment will load in any case but, according to the support, // "Cookies are set, tracking is sent, and integrations send data only after consent is given." window._conv_q.push(['consentGiven']); } }) </script><script src="//cdn-4.convertexperiments.com/js/10041905-10042313.js"></script><link rel="preconnect" href="https://media.nngroup.com/"/><link rel="preconnect" href="https://consent.cookiebot.com/"/><link rel="preconnect" href="https://consentcdn.cookiebot.com/"/><link rel="preconnect" href="https://www.googletagmanager.com/"/><link rel="preconnect" href="https://dnn506yrbagrg.cloudfront.net/"/><script src="https://media.nngroup.com/static/js/output.2e14f0aaa8d0.js" async></script><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.55aab3a9e87a.css" type="text/css"><meta name="description" content="Direct-manipulation UIs support interaction with visible objects of interest via physical, reversible, incremental actions that receive immediate feedback."/><meta property="og:description" content="Direct-manipulation UIs support interaction with visible objects of interest via physical, reversible, incremental actions that receive immediate feedback."/><meta name="keywords" content="direct manipulation, DM, direct-manipulation interaction, interaction techniques, user interface styles, command-line interaction, UI, UX, design, touch interaction, skeuomorphism"/><meta name="robots" content="noarchive"/><meta name="twitter:dnt" content="on"/><meta property="og:title" content="Direct Manipulation: Definition"/><meta property="og:url" content="https://www.nngroup.com/articles/direct-manipulation/"/><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/Slide21.png"><meta name="twitter:site" content="@nngroup"/><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://www.nngroup.com/articles/direct-manipulation/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.df057ffb02d7.css" type="text/css"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Direct Manipulation: Definition", "image": [ "https://media.nngroup.com/media/articles/opengraph_images/Slide21.png" ], "datePublished": "2016-08-21T16:00:00+0000", "dateModified": "2024-10-12T22:10:29+0000", "author": [ { "@type": "Person", "name": "Raluca Budiu" ,"url": "https://www.nngroup.com/articles/author/raluca-budiu/" } , { "@type": "Person", "name": "Samyukta Sherugar" } ] } </script> </head> <body class=" article-detail " > <div class="skip"><a href="#main">Skip to content</a></div> <div class="banner-sales hidden"> <div class="text"> <strong class="label-small"><span>Save up to 20% when you</span> <span>register for 2+ <a href="/course-calendar/"><span class="visually-hidden">upcoming</span> courses</a></span></strong> Until January 21 </div> <button> <svg class="open-nav" aria-hidden width="16" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-close" /> </svg> </button> </div> <div class="svg-definitions"> <svg width="0" id="icon-error-svg" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/> </svg> <svg width="0" id="icon-error-svg-outlined" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/> <circle cx="12" cy="18.625" r="1.5" fill="black"/> <path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/> </svg> <svg width="0" id="icon-confirm-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/> </svg> <svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="logo"> <path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor"/> <path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor"/> <path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor"/> <path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor"/> </g> <g id="icon-burger"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" /> </g> <path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor"/> <path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor"/> <g id="icon-cart"> <circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor"/> <circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor"/> <path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/> <path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square"/> </g> </svg> <svg id="icon-close-svg" viewbox="0 0 22 22" width="0" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="icon-close"> <path d="M1 1L20.5 20.5" stroke="currentColor" stroke-width="2" /> <path d="M20.5 1L1 20.5" stroke="currentColor" stroke-width="2" /> </g> </svg> </div> <header class="banner-image" > <nav class="nav-main desktop" aria-label="main"> <button class="burger-button"> <svg width="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Open main navigation</title> <use href="#icon-burger" /> </svg> </button> <a href="/" class="logo" aria-label="Home"> <svg width="71" viewBox="0 0 71 34" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Nielsen Norman Group</title> <use href="#logo" /> </svg> </a> <ul> <li class=" has-subnav"> <button aria-expanded="false">Training & UX Certification <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul class="visually-hidden"> <li class=""> <a tabindex="-1" href="/courses/">All Courses</a> </li> <li class=""> <a tabindex="-1" href="/training/live-courses/">Live Online Courses</a> </li> <li class=""> <a tabindex="-1" href="/team-training/">Private Team Training</a> </li> <li class=""> <a tabindex="-1" href="/training/bulk-discounts/">Bulk Discounts</a> </li> <li class=""> <a tabindex="-1" href="/ux-certification/">UX Certification</a> </li> </ul> </li> <li class="selected "> <a href="/articles/">Articles & Videos</a> </li> <li class=" "> <a href="/consulting/">Consulting</a> </li> <li class=" "> <a href="/reports/">Reports & Books</a> </li> <li class=" has-subnav"> <button aria-expanded="false">About NN/g <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> <ul class="visually-hidden"> <li class=""> <a tabindex="-1" href="/about/">Overview</a> </li> <li class=""> <a tabindex="-1" href="/people/">People</a> </li> <li class=""> <a tabindex="-1" href="/about/about-client-list/">Clients</a> </li> <li class=""> <a tabindex="-1" href="/news/">News</a> </li> <li class=""> <a tabindex="-1" href="/about/contact/">Contact Us</a> </li> </ul> </li> </ul> <div class="cart empty"> <a href=/cart/> <svg width="30" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-cart" /> </svg> <span></span> </a> </div> <div class="profile has-subnav"> <button class="loading" aria-expanded="false">Profile <svg class="open-nav" aria-hidden width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#icon-open-nav" /> </svg> </button> </div> <button class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> <form role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="9f70340d433027a479c60e38395a089c" data-index="Document_production_query_suggestions" > <label class="visually-hidden" for="search">Search</label> <div id="search-autocomplete"><input id="search" name="q" type="search" /></div> <button type="reset" class="reset-button empty" disabled> <svg width="13" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Reset</title> <use href="#icon-close" /> </svg> </button> <button type="submit" class="search-button"> <svg title="Search" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <title>Search</title> <use href="#icon-search"> </svg> </button> </form> </nav> </header> <main id="main"> <section class="padded"> <div class="wrapper"> <article> <span id="gaDataLength" class="ga-data-layer" aria-hidden="true">7</span> <div class="article-header"> <h1 class="article-h1">Direct Manipulation: Definition</h1> <div class="article-authors"> <span id="gaDataAuthors" class="ga-data-layer" aria-hidden="true">Samyukta Sherugar, Raluca Budiu</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/IMG_0755_copy-square.jpg.256x256_q75_autocrop_crop-smart_upscale.jpg" alt=""> <img height="64" width="64" class="author-photo fluid" src="https://media.nngroup.com/media/people/photos/2023-04-portraits-raluca.jpg.256x256_q75_autocrop_crop-smart_upscale.jpg" alt=""> </div> <div class="author-meta"> <span class="authors-list"> Samyukta Sherugar and <a class="ga-article-author" href="/articles/author/raluca-budiu/"> Raluca Budiu</a></span> <p class="publication-date"> August 21, 2016 · Updated Oct. 14, 2024 <span id="gaDataPubDate" class="ga-data-layer" aria-hidden="true">2024-10-14</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: Direct Manipulation: Definition&body=https://www.nngroup.com/articles/direct-manipulation/" 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/direct-manipulation/&title=Direct Manipulation: Definition&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/direct-manipulation/&text=Direct Manipulation: Definition&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>Direct manipulation is an interaction style in which UI elements are visible and can be acted upon via actions that receive immediate feedback. </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-introduction-1">Introduction</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-the-characteristics-of-direct-manipulation-2">The Characteristics of Direct Manipulation</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-direct-manipulation-vs-skeuomorphism-3">Direct Manipulation vs. Skeuomorphism</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-disadvantages-of-direct-manipulation-4">Disadvantages of Direct Manipulation</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-conclusion-5">Conclusion</a> </li> <li class="article-table-of-content"> <a class="ga-article-toc-item" href="#toc-references-6">References</a> </li> </ul> </div> </div><h2 id="toc-introduction-1">Introduction</h2> <p>Let’s say that you’re looking at an image of a concert you went to and want to see the performer on stage more clearly. What do you do? Something like this?</p> <figure class="caption"><img alt="A photo of the zooming gesture over a mobile screen that is displaying an image of a concert" loading="lazy" src="https://media.nngroup.com/media/editor/2024/10/12/zoom.jpg" width="692"/> <figcaption><em>On a mobile phone, you can pinch out to zoom into an image and pinch in to zoom out.</em></figcaption> </figure> <p>The action of using your fingertips to zoom in and out of the image is an example of a <strong>direct-manipulation</strong> <strong>interaction</strong>. Another classic example is dragging a file from one folder to another in order to move it.</p> <figure class="caption"><img alt="A screenshot of moving a document from one folder to another." height="210" loading="lazy" src="https://media.nngroup.com/media/editor/2016/08/19/2016-08-18_dm-move3.png" width="800"/> <figcaption><em>Moving a file on MacOS using direct manipulation involves dragging that file from the source folder and moving it into the destination folder.</em></figcaption> </figure> <blockquote> <p><strong>Direct manipulation (DM)</strong> is an interaction style in which users act on displayed objects of interest using physical, incremental, and reversible actions whose effects are immediately visible on the screen.</p> </blockquote> <p>Ben Shneiderman first coined the term “direct manipulation” in the early 1980s, at a time when the dominant interaction style was the command line. In <strong>command-line interfaces, </strong>the user must remember the system label for a desired action and type it in together with the names of the objects of the action.</p> <figure class="caption"><img alt="A screenshot of the the Mac terminal displaying command lines to move a file to a different folder." height="119" loading="lazy" src="https://media.nngroup.com/media/editor/2016/08/19/2016-08-18_dm-correct-command-2.png" width="700"/> <figcaption><em>Moving a file in a command-line interface involves remembering the name of the command (“mv” in this case), the names of the source and destination folders, as well as the name of the file to be moved.</em></figcaption> </figure> <p>Direct manipulation is one of the central concepts of graphical user interfaces (GUIs) and is sometimes equated with “what you see is what you get” (WYSIWYG). These interfaces <strong>combine menu-based interaction with physical actions</strong> such as <a href="https://www.nngroup.com/articles/drag-drop/">dragging and dropping</a> in order to help the user use the interface with <a href="https://www.nngroup.com/articles/power-law-learning/">minimal learning</a>.</p> <h2 id="toc-the-characteristics-of-direct-manipulation-2">The Characteristics of Direct Manipulation</h2> <p>In his analysis of direct manipulation, Shneiderman identified several attributes of this interaction style that make it superior to command-line interfaces:</p> <h3><strong>Continuous Representation of the Object of Interest</strong></h3> <p>In direct-manipulation interactions, users can see visual representations of the objects that they can interact with. As soon as they perform an action, they can see its effects on the state of the system.</p> <p>For example, when moving a file using drag-and-drop, users can see the initial file displayed in the source folder, select it, and, as soon as the action is completed, they can see it disappear from the source and appear in the destination — an immediate confirmation that their action had the intended result.</p> <p>Thus, direct-manipulation UIs satisfy, by definition, the first <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">usability heuristic</a>: the <a href="https://www.nngroup.com/articles/visibility-system-status/">visibility of the system status</a>. In contrast, in a command-line interface, users usually must explicitly check that their actions had the intended result (for example, by listing the content of the destination directory).</p> <h3><strong>Physical Actions Instead of Complex Syntax</strong></h3> <p>Actions are invoked physically via clicks, button presses, menu selections, and touch gestures. In the move-file example, drag-and-drop has a direct analog in the real world, so this implementation for the move action has the right signifiers and can be easily learned and remembered.</p> <p>In contrast, the command-line interface requires users to recall not only the command name (“mv”) but also the names of the objects involved (files and paths to the source and destination folders). Thus, unlike DM interfaces, command-line interfaces are based on <a href="https://www.nngroup.com/articles/recognition-and-recall/">recall instead of recognition</a> and violate an important usability heuristic.</p> <h3><strong>Continuous Feedback and Reversible, Incremental Actions</strong></h3> <p>Because of the visibility of the system state, it’s easy to check whether each action produced the right result. Thus, when users <a href="https://www.nngroup.com/articles/slips/">make mistakes</a>, they can see right away the cause of the mistake and they should be able to easily undo it.</p> <p> In contrast, with command-line interfaces, one single user command may have multiple components that can cause the error. For instance, in the example below, the name of the destination folder contains a typo <em>Measuring Usablty</em> instead of <em>Measuring Usability</em>. The system simply assumed that the file name should be changed to <em>Measuring Usablty</em>. If users check the destination folder, they will discover that there was a problem but will have no way of knowing what caused it: did they use the wrong command, the wrong source filename, or the wrong destination?</p> <figure class="caption"><img alt='A typo is shown in the command line: the word "Usability" is missing an i.' border="0" height="119" loading="lazy" src="https://media.nngroup.com/media/editor/2016/08/19/2016-08-18_wrong-command.png" width="700"/> <figcaption><em>The command contains a typo in the destination name. Users have no way of identifying this error and must do detective work to understand what went wrong.</em></figcaption> </figure> <p>This type of problem is familiar to everyone who has written a computer program. Finding a bug when there are a variety of potential causes often takes more time than actually producing the code.</p> <h3><strong>Rapid Learning</strong> </h3> <p>Because the objects of interest and the potential actions in the system are visually represented, users can use recognition instead of recall to see what they could do and select an operation most likely to fulfill their goal. They don’t have to learn and remember complex syntax. Thus, although direct-manipulation interfaces may require some initial adjustment, the learning required is likely to be less substantial.</p> <h2 id="toc-direct-manipulation-vs-skeuomorphism-3">Direct Manipulation vs. Skeuomorphism</h2> <p>When direct manipulation first appeared, it was based on the office-desk metaphor — the computer screen was an office desk, and different documents (or files) were placed in folders, moved around, or thrown in the trash. This underlying metaphor indicates the skeuomorphic origin of the concept. The DM systems described originally by Shneiderman are also <strong><a href="https://www.nngroup.com/articles/skeuomorphism/">skeuomorphic — that is, they are based on resemblance with a physical object in the real world</a></strong>. Thus, he talks about software interfaces that copy Rolodexes and physical checkbooks to support tasks done (at the time) with these tools.</p> <p>As we all know, skeuomorphism saw a huge revival in the early iPhone days and has now come out of fashion.</p> <figure class="caption"><img alt="A screenshot of the piano interface that mimics the look of real piano keyboards " border="0" loading="lazy" src="https://media.nngroup.com/media/editor/2024/10/12/img_6e344302760a-1.jpg" width="692"/> <figcaption><em>GarageBand: A skeuomorphic direct-manipulation interface for “playing” the piano on a phone.t-manipulation interface for “playing” the piano on a phone</em></figcaption> </figure> <p>While skeuomorphic interfaces are indeed based on direct manipulation, not all direct-manipulation interfaces need to be skeuomorphic. In fact, <a href="https://www.nngroup.com/articles/flat-design/">flat interfaces</a> are a reaction to skeuomorphism and depart from real-world metaphors, yet they still rely on direct manipulation.</p> <h2 id="toc-disadvantages-of-direct-manipulation-4">Disadvantages of Direct Manipulation</h2> <p>Almost each DM characteristic has a directly corresponding disadvantage:</p> <ul> <li><em>Continuous representation of the objects?</em> It means that you can<strong> act only on the small number of objects that can be seen at any given time</strong>. Objects that are out of sight but not out of mind can be dealt with only after the user has laboriously navigated to the place that holds those objects so that they can be made visible.</li> <li><em>Physical actions? </em>They can lead to <strong>RSI (repetitive strain injury)</strong>. It’s a <a href="https://www.nngroup.com/articles/interaction-cost-definition/">lot of work</a> to move all those icons and <a href="https://www.nngroup.com/articles/gui-slider-controls/">sliders</a> around the screen. Another potential issue is, <strong>accidental activation </strong>(hitting the wrong target), which is particularly common on touchscreens but can also happen on mouse-driven systems.</li> <li><em>Continuous feedback?</em> <strong>Only if you attempt an operation that the system feels like letting you do.</strong> If you want to do something that’s not available, you can push and drag buttons and icons as much as you want with no effect whatsoever. No feedback, only frustration. (A good UI will show <a href="https://www.nngroup.com/articles/onboarding-tutorials/">in-context help</a> to explain why the desired action isn’t available and how to enable it. Sadly, UIs this good are not very common.)</li> <li><em>Rapid learning? </em>Yes, if the design is good, but in practice, <strong><a href="https://www.nngroup.com/articles/measure-learnability/">learnability</a> depends on how well-designed the interface is</strong>. We’ve all seen <a href="https://www.nngroup.com/articles/category-names-suck/">menus with poorly chosen labels</a>, buttons that did not look clickable, or <a href="https://www.nngroup.com/articles/drop-down-menus/">dropdown boxes</a> with more options than the length of the screen.</li> </ul> <p>And there are even more disadvantages:</p> <h3>DM Is Slow</h3> <p>If the user needs to perform many actions on many objects, using direct manipulation takes a lot longer than a command-line UI. Have you encountered any software engineers who use DM to write their code? Sure, they might use DM elements in their software-development interfaces, but most of the code will be typed in.</p> <h3>Repetitive Tasks Are Not Well Supported</h3> <p>DM interfaces are great for novices because they are easy to learn, but because they are slow, experts who perform the same set of tasks with high-frequency usually rely on keyboard shortcuts, macros, and other command-language interactions to speed up the process. For example, when you need to send an email attachment to one recipient, it is easy to drag the desired file and drop it into the attachment section. However, if you need to do this for 50 different recipients with customized subject lines, a macro or script will be faster and less tedious.</p> <figure class="caption"><img alt="A screenshot of Figma keyboard shortcuts." loading="lazy" src="https://media.nngroup.com/media/editor/2024/10/12/screenshot-2024-09-14-at-35435-pm.jpg" width="1384"/> <figcaption><em>Figma: Keyboard shortcuts allowed users to speed up their workflow by quickly accessing frequently used tools.</em></figcaption> </figure> <h3>Some Gestures Can Be More Error-Prone or Take More Effort than Typing</h3> <p>In theory, because of the continuous feedback, <a href="https://www.nngroup.com/articles/direct-manipulation-analysis/">DM minimizes the chance of certain errors</a>; in practice, there are situations when a gesture is harder to perform than typing equivalent information. For example, good luck trying to move the 50th column of a spreadsheet into the 2nd position using drag and drop.</p> <p>For this exact reason, YouTube offered two interaction techniques for reordering videos in a playlist: dragging the video to the desired position (easy for short moves), and a one-button shortcut for moving into the first or last position. However, with 113 videos in this playlist, the design would have been more efficient if it had included a <em>Move to...</em> option, allowing users to specify the exact position number.</p> <figure class="caption"><img alt="A screenshot of a YouTube Playlist with a selection menu that allows users to move each video to the top or bottom of the list" loading="lazy" src="https://media.nngroup.com/media/editor/2024/10/12/screenshot-2024-09-14-at-44258-pm.jpg" width="1384"/> <figcaption><em>YouTube: Users could rearrange the playlist by dragging a video to the desired position or clicking a button to move a video to the top or bottom of the list.</em></figcaption> </figure> <figure class="caption"><img alt="A screenshot of Bumble's Edit Profile page with a modal dialog for adjusting height using a slider control" loading="lazy" src="https://media.nngroup.com/media/editor/2024/10/12/bumble-web-166.jpg" width="1384"/> <figcaption><em>Bumble: Users had to use a slider to input their precise height, which required high interaction cost. This interaction would have been better if users could simply type in their height.</em></figcaption> </figure> <h3>Accessibility May Suffer</h3> <p>DM UIs may fail visually impaired users or users with motor skill impairments, especially if they are heavily based on physical actions, as opposed to button presses and menu selections. (Workarounds exist, but it can be difficult to implement them.)</p> <h2 id="toc-conclusion-5">Conclusion</h2> <p>It’s hard to imagine modern interfaces without direct manipulation. Almost any interface that is aimed at a broad audience and has a graphical component is based on DM. With the explosion of touchscreen devices, we’ve seen DM UIs depart from the original office metaphors and innovate in a variety of domains. And <a href="https://www.nngroup.com/articles/augmented-reality-ux/">augmented-reality</a> and virtual-reality systems will push DM to even newer limits.</p> <p>Despite the many downsides, we still recommend a heavy dose of direct manipulation for most UIs. Direct manipulation often enhances users’ sense of empowerment over the computer by <a href="https://www.nngroup.com/articles/user-control-and-freedom/">letting them feel that they are in control</a> and are the ones making things happen. The upsides of DM usually enhance usability more than the downsides degrade it. Any interaction style has its minuses and can be ruined by a lack of attention to the details: there is no magic bullet for UX, but there are definitely design ideas that can advance usability if employed correctly, and direct manipulation has proven to be one of these good ideas for more than 30 years.</p> <h2 id="toc-references-6">References</h2> <p>Shneiderman, B. 1983. <em>Direct Manipulation: A Step Beyond Programming Languages</em>. Computer 16<strong> </strong>(8), pp. 57–69. (<a href="http://dl.acm.org/citation.cfm?id=1320072">Access-controlled archival copy</a> available in ACM Digital Library.)</p> </div> </div> <div class="article-sidebar"> <div class="sidebar-wrapper"> <div class="sidebar-item related-courses"> <h2 class="article-heading-small">Related Courses</h2> <ul> <li> <a class="tile ga-article-related-course" data-course-title="Application Design for Web and Desktop" href="/courses/application-ux/?lm=direct-manipulation&pt=article"> <h4 class="title heading-small">Application Design for Web and Desktop</h4> <p id="application-design-for-web-and-desktop" class="description body-small"> Components, design patterns, workflows, and ways of interacting with complex data </p> <div class="ux-specialties"> <p class="ux-specialty interaction-design">Interaction</p> </div> </a> </li> </ul> </div> <span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">direct manipulation,graphical user interfaces,Human Computer Interaction,Application Design</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">Human Computer Interaction</span> <a class="ga-article-related-topic" href="/topic/human-computer-interaction/">Human Computer Interaction</a> </li> <li> <a class="ga-article-related-topic" href="/topic/applications/">Application 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="CASTLE: Measure UX in Workplace Software" href="/videos/castle-framework/?lm=direct-manipulation&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Use_CASTLE_for_Measuring_UX_in_Workplace_Software_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Use_CASTLE_for_Measuring_UX_in_Workplace_Software_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Use_CASTLE_for_Measuring_UX_in_Workplace_Software_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"> CASTLE: Measure UX in Workplace Software </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Page Laubheimer</span> · <span class="related-content-duration body-small">5 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="How to Increase the Visibility of Error Messages" href="/videos/error-message-visibility/?lm=direct-manipulation&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/How_to_Increase_the_Visibility_of_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/How_to_Increase_the_Visibility_of_Error_Messages_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/How_to_Increase_the_Visibility_of_Error_Messages_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt=""> <div class="overlay"> <span class="color icon fab fa-youtube"></span> </div> </div> <div class="content"> <p class="related-content-title"> How to Increase the Visibility of Error Messages </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Tim Neusesser</span> · <span class="related-content-duration body-small">5 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="Power Law of Learning: How to Launch New Designs Successfully" href="/videos/power-law-of-learning/?lm=direct-manipulation&pt=article" tabindex="-1" aria-hidden="true"> <div class="thumbnail-image"> <img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Power_Law_of_Learning_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Power_Law_of_Learning_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Power_Law_of_Learning_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"> Power Law of Learning: How to Launch New Designs Successfully </p> <p class="related-content-details"> <span class="related-content-authors body-small"> Raluca Budiu</span> · <span class="related-content-duration body-small">4 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="A Layered Interaction Analysis of Direct Manipulation" href="/articles/direct-manipulation-analysis/?lm=direct-manipulation&pt=article"> <p class="related-content-title">A Layered Interaction Analysis of Direct Manipulation</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Jakob Nielsen</span> · <span class="related-content-duration body-small">26 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Slider Design: Rules of Thumb" href="/articles/gui-slider-controls/?lm=direct-manipulation&pt=article"> <p class="related-content-title">Slider Design: Rules of Thumb</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Aurora Harley</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="Memory Recognition and Recall in User Interfaces" href="/articles/recognition-and-recall/?lm=direct-manipulation&pt=article"> <p class="related-content-title">Memory Recognition and Recall in User Interfaces</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="The Anti-Mac Interface" href="/articles/anti-mac-interface/?lm=direct-manipulation&pt=article"> <p class="related-content-title">The Anti-Mac Interface</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Jakob Nielsen</span> · <span class="related-content-duration body-small">34 min</span> </p> </a> </li> <li> <a class="tile ga-article-related-article" data-article-title="Macintosh: 25 Years" href="/articles/macintosh-25-years/?lm=direct-manipulation&pt=article"> <p class="related-content-title">Macintosh: 25 Years</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Jakob Nielsen</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="Closeness of Actions and Objects in GUI Design" href="/articles/closeness-of-actions-and-objects-gui/?lm=direct-manipulation&pt=article"> <p class="related-content-title">Closeness of Actions and Objects in GUI Design</p> <p class="related-content-details"> <span class="related-content-authors body-small"> Jakob Nielsen</span> · <span class="related-content-duration body-small">3 min</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 class="label-medium">Email</label> <input class="body-small" id="newsletter-subscribe-email" placeholder="norman@gmail.com" name="EMAIL" type="email" value=""> </div> <div class="error-local"></div> </div> <input class="button-fill button-small" name="subscribe" type="submit" value="Subscribe"> </form> </div> <div class="follow"> <h2 class="title-large">Follow Us</h2> <ul> <li class="label-large"> <a href="https://www.linkedin.com/company/nielsen-norman-group"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-linkedin.svg" alt=""> LinkedIn </a> </li> <li class="label-large"> <a href="https://www.instagram.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-instagram.svg" alt=""> Instagram </a> </li> <li class="label-large"> <a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-youtube.svg" alt=""> Youtube </a> </li> <li class="label-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup "> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-podcast.svg" alt=""> Podcast </a> </li> <li class="label-large"> <a href="https://twitter.com/nngroup"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-x.svg" alt=""> X (Twitter) </a> </li> <li class="label-large"> <a href="https://www.facebook.com/nngux"> <img width="32" loading="lazy" src="https://media.nngroup.com/static/img/icons/icon-social-facebook.svg" alt=""> Facebook </a> </li> </ul> </div> </div> <section class="navigation"> <div class="wrapper"> <ul> <li><span class="title-small">Certification</span> <ul> <li class="body-large"> <a href="/ux-certification/">What is UX Certification?</a> </li> <li class="body-large"> <a href="/ux-certification/specialties/">Specialties</a> </li> <li class="body-large"> <a href="/ux-certification/exams/">Exams</a> </li> <li class="body-large"> <a href="/ux-certification/people/">UX Certified People</a> </li> </ul> </li> <li> <span class="title-small">UX Training</span> <ul> <li class="body-large"> <a href="/courses/">All Courses</a> </li> <li class="body-large"> <a href="/training/live-courses/">Live Online Courses</a> </li> <li class="body-large"> <a href="/team-training/">Private Team Training</a> </li> <li class="body-large"> <a href="/course-calendar/">Course Calendar</a> </li> </ul> </li> <li> <span class="title-small">Consulting</span> <ul> <li class="body-large"> <a href="/consulting/expert-review/">Expert Review</a> </li> <li class="body-large"> <a href="/consulting/user-testing/">User Testing</a> </li> <li class="body-large"> <a href="/consulting/user-research/">Customized Research</a> </li> <li class="body-large"> <a href="/consulting/applied-workshops/">Applied Workshops</a> </li> <li class="body-large"> <a href="/consulting/keynote-speaking/">Keynote Speaking</a> </li> </ul> </li> <li> <span class="title-small">Free Guidance</span> <ul> <li class="body-large"> <a href="/articles/">Articles & Videos</a> </li> <li class="body-large"> <a href="https://podcasters.spotify.com/pod/show/nngroup">The NN/g UX Podcast</a> </li> </ul> </li> <li> <span class="title-small">About</span> <ul> <li class="body-large" > <a href="/about/why-nng/">Why NN/g</a> </li> <li class="body-large" > <a href="/about/">About Us</a> </li> <li class="body-large" > <a href="/people/">People</a> </li> <li class="body-large" > <a href="/about/about-client-list/">Clients</a> </li> <li class="body-large" > <a href="/about/contact/">Contact</a> </li> <li class="body-large" > <a href="/return-policy/">Return Policy</a> </li> </ul> </li> </ul> </div> </section> <div class="copyright"> <div class="wrapper"> <p><a href="/copyright-and-reprint-info/">Copyright</a> © 1998-2024 Nielsen Norman Group, All Rights Reserved. </p> <ul> <li id ="cookie-preferences"><a href="javascript:Cookiebot.show();">Cookie Preferences</a></li> <li><a href="/cookie-declaration/">Cookie Declaration</a></li> <li><a href="/privacy-policy/">Privacy Policy</a></li> </ul> </div> </div> </footer> <button class="back-to-top" title="Back to top"><span class="text"><span class="fas fa-caret-up arrow" aria-hidden="true"></span><br>Top</span></button> <script src="https://media.nngroup.com/static/js/output.dac7ffbca904.js" defer></script> <script src="https://media.nngroup.com/static/js/article-detail.7e820ce13132.js"></script> <script> function pushCookieConsent() { Cookiebot.consent.preferences&&window.dataLayer.push({event:"cookieconsent_preferences"}); Cookiebot.consent.statistics&&window.dataLayer.push({event:"cookieconsent_statistics"}); Cookiebot.consent.marketing&&window.dataLayer.push({event:"cookieconsent_marketing"}); }; window.addEventListener('CookiebotOnAccept', function (e) { pushCookieConsent(); if (Cookiebot.consent.statistics) { // Tell Convert A/B testing that consent has been given window._conv_q = window._conv_q || []; window._conv_q.push(['consentGiven']); } }); window.addEventListener('CookiebotOnDecline', function (e) {}); </script> </body> </html>

CINXE.COM

Direct Manipulation: Definition