{"id":41489,"date":"2023-03-13T09:18:04","date_gmt":"2023-03-13T16:18:04","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=41489"},"modified":"2023-03-14T03:12:38","modified_gmt":"2023-03-14T10:12:38","slug":"what-is-progressive-disclosure","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/","title":{"rendered":"What is Progressive Disclosure? Show &#038; Hide the Right Information"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure-1024x512.png\" alt=\"progressive disclosure\" class=\"wp-image-41490\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Progressive disclosure is one of the ways of reducing UI complexity and it may come in handy whenever designers want to make products less overwhelming for the end-user.<\/p>\n\n\n\n<p>This article explores progressive disclosure, when to use it, helpful UI components, real-world examples, and a step-by-step process for implementing this design technique.<\/p>\n\n\n\n<p>Design user experiences your customers love with the world&#8217;s most advanced design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to create your first interactive prototype with UXPin.\u00a0<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-progressive-disclosure\">What is Progressive Disclosure?<\/h2>\n\n\n\n<p>Progressive disclosure is a technique <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/product-designer-vs-ux-designer-a-comparative-analysis\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX designers<\/a> use to reduce <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/should-user-experience-designers-be-aware-of-psychology\/\" target=\"_blank\" rel=\"noreferrer noopener\">cognitive load<\/a> by gradually revealing more complex information or features as the user progresses through a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-user-interface\/\">user interface<\/a> of a digital product.<\/p>\n\n\n\n<p>Jakob Nielsen, co-founder of the famous <a href=\"https:\/\/www.nngroup.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Nielsen Norman Group<\/a>, introduced progressive disclosure in 1995 as an interaction design pattern to reduce user errors for complex applications.<\/p>\n\n\n\n<p>Designers achieve this by breaking complex tasks into smaller, more manageable steps and presenting these to users one at a time. This step-by-step approach allows users to complete large tasks without being overwhelmed by too much information and instructions at once.<\/p>\n\n\n\n<p>The most common example of progressive disclosure is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/form-input-design-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">multi-step form<\/a>, typically used for eCommerce checkouts. An example may look like the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Step one: name and delivery address<\/li>\n\n\n\n<li>Step two: shipping options<\/li>\n\n\n\n<li>Step three: order confirmation and payment details<\/li>\n\n\n\n<li>Step four: success\/thank you page<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-are-the-three-categories-of-progressive-disclosure\">What are the three categories of progressive disclosure?<\/h3>\n\n\n\n<p>There are three categories for progressive disclosure:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Step-by-step<\/strong>: breaking complex tasks into manageable steps<\/li>\n\n\n\n<li><strong>Conditional<\/strong>: hiding certain elements and features until the user requests them<\/li>\n\n\n\n<li><strong>Contextual<\/strong>: offering additional information and options to provide context based on the user&#8217;s current situation<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-progressive-enabling\">What is progressive enabling?<\/h3>\n\n\n\n<p>Progressive enabling is a similar design technique that gives users incremental access to features and functionality as they become more familiar with a product. This technique is especially effective for complex products, allowing users to fully comprehend each feature before moving to the next.<\/p>\n\n\n\n<p>The levels in video games are an excellent example of progressive enabling. Players start with basic features and difficulty, which grow in complexity with each level.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-when-to-implement-progressive-disclosure\">When to Implement Progressive Disclosure<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process.png\" alt=\"process\" class=\"wp-image-32361\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/process-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Here are four instances where designers might consider progressive disclosure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-complex-tasks\">Complex tasks<\/h3>\n\n\n\n<p>Breaking complex tasks into manageable chunks makes it easier for users to understand and complete. If you save each step, users don&#8217;t have to complete everything at once and can return later.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-contextual-help\">Contextual help<\/h3>\n\n\n\n<p>Designers often use contextual help through tooltips, popups, hotspots, and other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI elements<\/a> to direct users through tasks. For example, a designer can highlight the form field a user must complete next so they know where to focus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-onboarding\">Onboarding<\/h3>\n\n\n\n<p>Progressive disclosure is highly effective for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-onboarding-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">onboarding<\/a>, where designers provide in-app tutorials and walkthroughs to explain steps in a specific process, including using contextual help.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-design\">Content design<\/h3>\n\n\n\n<p>Content, especially in product documentation, can be overwhelming to read and digest. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-content-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Content designers<\/a> can use progressive disclosure to present users with the most important information first, with the option to explore more content for those who need it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ui-patterns-for-progressive-disclosure\">UI Patterns for Progressive Disclosure<\/h2>\n\n\n\n<p>Here are some examples of how designers use UI design patterns for progressive disclosure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accordions\">Accordions<\/h3>\n\n\n\n<p>Accordions give users control over when and if they need content. These design patterns are particularly helpful when designers have to present a lot of content, like FAQs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tabs\">Tabs<\/h3>\n\n\n\n<p>Tabs allow designers to organize content into categories so users can choose when they need it. These tabs also reduce scrolling, which is particularly helpful on mobile apps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dropdown-menus\">Dropdown menus<\/h3>\n\n\n\n<p>Dropdown menus help keep UIs uncluttered by hiding long lists. Hiding this content allows users to focus on the current task without being distracted by irrelevant content. For example, imagine trying to complete a form with all the countries, states\/provinces, and cities visible. It would be a nightmare to navigate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-scrolling\">Scrolling<\/h3>\n\n\n\n<p>Presenting users with the most important content high on the page above the fold can help them find answers or complete tasks without scrolling. Designers can provide supplementary content and features when users scroll. Sales landing pages often use this type of progressive disclosure to make a decision immediately or scroll for more information.<\/p>\n\n\n\n<p><em>Explore: <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/4-types-creative-website-scrolling-patterns\/\">4 types of scrolling patterns<\/a>.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dialog-boxes-popups\">Dialog boxes &amp; popups<\/h3>\n\n\n\n<p>Dialog boxes, popups, and tooltips provide users with additional information when they <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">hover or click on a UI element<\/a>. This progressive disclosure technique lets users find answers without leaving the task while <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-design-simplicity\/\" target=\"_blank\" rel=\"noreferrer noopener\">keeping interfaces uncluttered<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-examples-of-progressive-disclosure\">Examples of Progressive Disclosure<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gov-uk-bank-holiday-page\">GOV.UK bank holiday page<\/h3>\n\n\n\n<p>The most famous progressive disclosure case study for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-content-strategy\/\" target=\"_blank\" rel=\"noreferrer noopener\">content design<\/a> is the UK government&#8217;s <a href=\"https:\/\/www.gov.uk\/bank-holidays\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GOV.UK bank holiday page<\/a> redesign. The initial web design was busy and overwhelming.<\/p>\n\n\n\n<p>Through <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-practical-beginners-guide-to-user-research\/\" target=\"_blank\" rel=\"noreferrer noopener\">user research<\/a>, the team learned that most people wanted to know the date of the next bank holiday. The redesign presents users with the upcoming bank holiday at the top of the screen using a clear visual hierarchy, with the following days in smaller text below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/gov-uk-example-min-1024x579.jpg\" alt=\"gov uk example min\" class=\"wp-image-41492\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/gov-uk-example-min-1024x579.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/gov-uk-example-min-530x300.jpg 530w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/gov-uk-example-min-768x434.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/gov-uk-example-min-1536x869.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/gov-uk-example-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-google-s-advanced-search\">Google&#8217;s Advanced Search<\/h3>\n\n\n\n<p>Google&#8217;s primary search is simple: one input field with a few options, including an image search and two buttons. Most users will only use this basic search feature.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-basic-example-min-1024x480.jpg\" alt=\"google basic example min\" class=\"wp-image-41496\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-basic-example-min-1024x480.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-basic-example-min-640x300.jpg 640w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-basic-example-min-768x360.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-basic-example-min-1536x720.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-basic-example-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.google.com\/advanced_search\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google&#8217;s Advanced Search<\/a> is more complex, with multiple fields and options for users to get more granular, including settings for language, region, exact phrase, last updated, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-advanced-search-min-1024x578.jpg\" alt=\"google advanced search min\" class=\"wp-image-41494\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-advanced-search-min-1024x578.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-advanced-search-min-531x300.jpg 531w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-advanced-search-min-768x434.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-advanced-search-min-1536x867.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/google-advanced-search-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dropbox-s-file-sharing-options\">Dropbox&#8217;s File-Sharing Options<\/h3>\n\n\n\n<p>When you <a href=\"https:\/\/help.dropbox.com\/share\/share-with-others\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">share a file in Dropbox<\/a>, the file-sharing options are initially hidden, with only the email field and &#8220;Share file&#8221; button visible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-example-min-1024x241.jpg\" alt=\"dropbox example min\" class=\"wp-image-41498\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-example-min-1024x241.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-example-min-700x165.jpg 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-example-min-768x180.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-example-min.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Users must click &#8220;Settings&#8221; to access more advanced settings like &#8220;File settings&#8221; and &#8220;Link for viewing&#8221; options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-advanced-example-min-1024x278.jpg\" alt=\"dropbox advanced example min\" class=\"wp-image-41502\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-advanced-example-min-1024x278.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-advanced-example-min-700x190.jpg 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-advanced-example-min-768x209.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/dropbox-advanced-example-min.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ecommerce-product-pages\">eCommerce product pages<\/h3>\n\n\n\n<p>Designers use progressive disclosure on product pages, so they don&#8217;t overwhelm customers. A standard technique is to use accordions or tabs to hide details so shoppers can choose if and when they want to see them.<\/p>\n\n\n\n<p>For example, only the quantity stepper and &#8220;Add to Cart&#8221; button are visible on this <a href=\"https:\/\/themes.shopify.com\/themes\/showcase\/styles\/native\/preview\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">product page from Shopify Themes<\/a>. The product&#8217;s description, shipping and returns, and reviews are hidden behind accordions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/ecommerce-example-min-1024x531.jpg\" alt=\"ecommerce example min\" class=\"wp-image-41500\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/ecommerce-example-min-1024x531.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/ecommerce-example-min-578x300.jpg 578w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/ecommerce-example-min-768x398.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/ecommerce-example-min-1536x797.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/ecommerce-example-min.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-progressive-disclosure-design-process\">Progressive Disclosure Design Process<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-identify-user-needs\">Identify user needs<\/h3>\n\n\n\n<p>As we saw in the GOV.UK example above, understanding what content and information your users need is vital for progressive disclosure. Designers can use fundamental UX research techniques like user interviews and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototypes-improve-usability-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\">usability testing<\/a> to determine these needs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-prioritize-information\">Prioritize information<\/h3>\n\n\n\n<p>Next, designers use card sorting and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/affinity-diagram\/\" target=\"_blank\" rel=\"noreferrer noopener\">affinity mapping<\/a> to prioritize information and features to help users accomplish their goals efficiently. For example, designers may hide the lowest priority items or use the hierarchy to create an efficient <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-progress-trackers\/\" target=\"_blank\" rel=\"noreferrer noopener\">multi-step process<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-determine-the-correct-level-of-detail\">Determine the correct level of detail<\/h3>\n\n\n\n<p>Once they have prioritized the information, designers must determine the level of detail for each one. What information must designers present immediately, and what must follow?<\/p>\n\n\n\n<p>For example, with GOV.UK, the most important information what the next bank holiday. The level of detail users required was the date and name of the holiday\u2013for example, December 25, Christmas Day. The other holidays followed sequentially with the same level of detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-for-simplicity\">Design for simplicity<\/h3>\n\n\n\n<p>Keeping user interfaces simple and easy to use is crucial. Designers must only provide the content and features required to complete a single task or decision\u2013which is why the first three steps above are essential for progressive disclosure.<\/p>\n\n\n\n<p>John Maeda&#8217;s 10 Laws provide an excellent framework for achieving <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-design-simplicity\/\" target=\"_blank\" rel=\"noreferrer noopener\">design simplicity<\/a>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Reduce: <\/strong>remove what isn&#8217;t needed<\/li>\n\n\n\n<li><strong>Organize: <\/strong>makes complex systems easier<\/li>\n\n\n\n<li><strong>Time: <\/strong>saving time feels like simplicity<\/li>\n\n\n\n<li><strong>Learn: <\/strong>knowledge makes things simple<\/li>\n\n\n\n<li><strong>Differences: <\/strong>balancing simplicity and complexity<\/li>\n\n\n\n<li><strong>Context: <\/strong><em>&#8220;What lies in the periphery of simplicity is not peripheral&#8221;<\/em><\/li>\n\n\n\n<li><strong>Emotion:<\/strong> more emotion is better than less<\/li>\n\n\n\n<li><strong>Trust: <\/strong>simplicity = trust<\/li>\n\n\n\n<li><strong>Failure: <\/strong>some things aren&#8217;t meant to be simple<\/li>\n\n\n\n<li><strong>The one: <\/strong>subtract the obvious and add the meaningful<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-prototype-and-test\">Prototype and test<\/h3>\n\n\n\n<p>The last step is to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">prototype<\/a> and test your solution. Designers must also consider usability and ensure the design doesn&#8217;t introduce problems. For example, hiding features so users can&#8217;t find them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-create-better-prototypes-with-uxpin\">Create Better Prototypes With UXPin<\/h2>\n\n\n\n<p>UXPin&#8217;s advanced features allow designers to create immersive prototypes indistinguishable from the final product. With fully functional forms and code-like interactivity, design teams can test ideas to find a solution that best solves user needs while providing maximum business value.<\/p>\n\n\n\n<p>These four UXPin features enable designers to build advanced prototypes:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-figma-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>States<\/strong><\/a><strong>:<\/strong> create multiple states for a single component and build complex UI patterns like <a href=\"https:\/\/www.uxpin.com\/examples\/multilevel-dropdown-navigation\" target=\"_blank\" rel=\"noreferrer noopener\">dropdown menus<\/a>, <a href=\"https:\/\/www.uxpin.com\/examples\/stepper\" target=\"_blank\" rel=\"noreferrer noopener\">steppers<\/a>, <a href=\"https:\/\/www.uxpin.com\/examples\/carousel\" target=\"_blank\" rel=\"noreferrer noopener\">carousels<\/a>, and <a href=\"https:\/\/www.uxpin.com\/examples\/accordion\" target=\"_blank\" rel=\"noreferrer noopener\">accordions<\/a>\u2013<em>essential for progressive disclosure user testing<\/em>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Interactions<\/strong><\/a><strong>:<\/strong> use <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions#triggers\" target=\"_blank\" rel=\"noreferrer noopener\">Triggers<\/a>, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions#actions\" target=\"_blank\" rel=\"noreferrer noopener\">Actions<\/a>, and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions#animations\" target=\"_blank\" rel=\"noreferrer noopener\">Animations<\/a> to design immersive prototype experiences. With <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a>, designers can create dynamic interactivity according to user actions.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Variables<\/strong><\/a><strong>:<\/strong> collect data from user inputs and use it elsewhere in the application. Designers can use these variables to personalize the prototype experience to feel like the final product.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Expressions<\/strong><\/a><strong>:<\/strong> design form validation, computational components, dynamic error messages, and more. When combined with States, Interactions, and Variables, Expressions enable designers to create Javascript-like functionality.<\/li>\n<\/ul>\n\n\n\n<p>Build prototypes that allow your team to get meaningful, actionable results from testing. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to create your first UXPin prototype today.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Progressive disclosure is one of the ways of reducing UI complexity and it may come in handy whenever designers want to make products less overwhelming for the end-user. This article explores progressive disclosure, when to use it, helpful UI components, real-world examples, and a step-by-step process for implementing this design technique. Design user experiences your<\/p>\n","protected":false},"author":3,"featured_media":41490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[],"class_list":["post-41489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ux-design"],"yoast_title":"","yoast_metadesc":"When is the right time to disclose information? How much of it should you disclose? Let's explore progressive disclosure, a UX technique.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is Progressive Disclosure? Show &amp; Hide the Right Information | UXPin<\/title>\n<meta name=\"description\" content=\"When is the right time to disclose information? How much of it should you disclose? Let&#039;s explore progressive disclosure, a UX technique.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Progressive Disclosure? Show &amp; Hide the Right Information\" \/>\n<meta property=\"og:description\" content=\"When is the right time to disclose information? How much of it should you disclose? Let&#039;s explore progressive disclosure, a UX technique.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-13T16:18:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-14T10:12:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"What is Progressive Disclosure? Show &#038; Hide the Right Information\",\"datePublished\":\"2023-03-13T16:18:04+00:00\",\"dateModified\":\"2023-03-14T10:12:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/\"},\"wordCount\":1513,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/progressive-disclosure.png\",\"articleSection\":[\"Blog\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/\",\"name\":\"What is Progressive Disclosure? Show & Hide the Right Information | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/progressive-disclosure.png\",\"datePublished\":\"2023-03-13T16:18:04+00:00\",\"dateModified\":\"2023-03-14T10:12:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"When is the right time to disclose information? How much of it should you disclose? Let's explore progressive disclosure, a UX technique.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/progressive-disclosure.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/progressive-disclosure.png\",\"width\":1200,\"height\":600,\"caption\":\"progressive disclosure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-is-progressive-disclosure\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is Progressive Disclosure? Show &#038; Hide the Right Information\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is Progressive Disclosure? Show & Hide the Right Information | UXPin","description":"When is the right time to disclose information? How much of it should you disclose? Let's explore progressive disclosure, a UX technique.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/","og_locale":"en_US","og_type":"article","og_title":"What is Progressive Disclosure? Show & Hide the Right Information","og_description":"When is the right time to disclose information? How much of it should you disclose? Let's explore progressive disclosure, a UX technique.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/","og_site_name":"Studio by UXPin","article_published_time":"2023-03-13T16:18:04+00:00","article_modified_time":"2023-03-14T10:12:38+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"What is Progressive Disclosure? Show &#038; Hide the Right Information","datePublished":"2023-03-13T16:18:04+00:00","dateModified":"2023-03-14T10:12:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/"},"wordCount":1513,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png","articleSection":["Blog","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/","name":"What is Progressive Disclosure? Show & Hide the Right Information | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png","datePublished":"2023-03-13T16:18:04+00:00","dateModified":"2023-03-14T10:12:38+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"When is the right time to disclose information? How much of it should you disclose? Let's explore progressive disclosure, a UX technique.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/progressive-disclosure.png","width":1200,"height":600,"caption":"progressive disclosure"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-is-progressive-disclosure\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What is Progressive Disclosure? Show &#038; Hide the Right Information"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/41489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=41489"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/41489\/revisions"}],"predecessor-version":[{"id":41505,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/41489\/revisions\/41505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/41490"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=41489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=41489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=41489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}