[{"data":1,"prerenderedAt":484},["ShallowReactive",2],{"learn-concept-/learn/progressive-disclosure":3},{"id":4,"title":5,"body":6,"cardImage":432,"cardImageAlt":433,"date":434,"description":435,"domain":436,"domainKey":437,"extension":438,"featured":439,"fullName":5,"interaction":12,"maturity":440,"mentalModel":335,"meta":441,"navigation":442,"neighbors":443,"ogImage":468,"path":469,"published":442,"robots":468,"seo":470,"shortName":5,"sitemap":471,"socialImage":468,"socialImageAlt":468,"sources":472,"stem":478,"tags":479,"translationKey":12,"updated":434,"__hash__":483},"learnEn/learn/progressive-disclosure.md","Progressive Disclosure",{"type":7,"value":8,"toc":418},"minimal",[9,13,17,24,27,32,35,38,41,47,51,54,65,68,71,84,87,91,94,146,149,153,156,159,171,174,177,183,187,190,197,201,218,222,242,245,281,285,327,331,351,355,375,379],[10,11,5],"h1",{"id":12},"progressive-disclosure",[14,15,16],"p",{},"Feature-rich products tend to put every capability in front of everyone at once. Each setting may be reasonable, yet the collection makes the most common task harder to begin.",[14,18,19,20],{},"Progressive Disclosure offers a different way to arrange complexity: ",[21,22,23],"strong",{},"show the smallest complete interface required for the current goal, then reveal secondary or advanced options as intent and context deepen.",[14,25,26],{},"It does not remove complexity. It decides when complexity earns its place.",[28,29,31],"h2",{"id":30},"auto-and-pro-camera-modes","Auto and Pro camera modes",[14,33,34],{},"Most people who pick up a camera need to frame a scene and press the shutter. Auto mode handles exposure, focus, and white balance so the first photograph can happen immediately.",[14,36,37],{},"Someone who needs to control motion blur can reveal shutter speed. Someone who needs precise control can enter Pro mode and manage aperture, shutter speed, and sensitivity together.",[14,39,40],{},"The professional capability remains available. It simply does not charge every person for its complexity before the first photograph.",[14,42,43,44],{},"But “this will permanently delete the photograph” must not be hidden in an advanced layer. ",[21,45,46],{},"Low frequency does not mean low importance; risk and consequence belong in the layering decision.",[28,48,50],{"id":49},"the-first-layer-must-be-small-and-complete","The first layer must be small and complete",[14,52,53],{},"Suppose someone only wants to export a report. The first layer might contain:",[55,56,62],"pre",{"className":57,"code":59,"language":60,"meta":61},[58],"language-text","File name     quarterly-report\nFormat        PDF (Portable Document Format)\nSave to       Downloads\n              [ Advanced options ] [ Export ]\n","text","",[63,64,59],"code",{"__ignoreMap":61},[14,66,67],{},"The common task can be completed without opening anything, and the outcome is predictable. A second layer can expose page range, image quality, and metadata. A third can expose color profiles, font embedding, and compression algorithms.",[14,69,70],{},"The layers answer different questions:",[72,73,74,78,81],"ol",{},[75,76,77],"li",{},"What am I trying to complete?",[75,79,80],{},"How should the result be adjusted?",[75,82,83],{},"How should the underlying implementation be controlled?",[14,85,86],{},"If the first layer is only a vague button while consequential defaults remain hidden, the interface is concealing decisions rather than managing complexity.",[28,88,90],{"id":89},"how-to-choose-what-appears-first","How to choose what appears first",[14,92,93],{},"Do not begin by asking which controls can collapse. Evaluate every piece of information along four dimensions:",[95,96,97,110],"table",{},[98,99,100],"thead",{},[101,102,103,107],"tr",{},[104,105,106],"th",{},"Dimension",[104,108,109],{},"Question",[111,112,113,122,130,138],"tbody",{},[101,114,115,119],{},[116,117,118],"td",{},"Necessity",[116,120,121],{},"Can the current task succeed without it?",[101,123,124,127],{},[116,125,126],{},"Frequency",[116,128,129],{},"How many people and task instances need it?",[101,131,132,135],{},[116,133,134],{},"Risk",[116,136,137],{},"Could hiding it change cost, permission, safety, or an irreversible outcome?",[101,139,140,143],{},[116,141,142],{},"Dependency",[116,144,145],{},"Does it matter only after another choice is made?",[14,147,148],{},"Frequent, necessary, or high-consequence information usually belongs in the first layer. Low-frequency, low-risk, conditional information is a better candidate for later disclosure.",[28,150,152],{"id":151},"an-artificial-intelligence-ai-agent-example","An Artificial Intelligence (AI) agent example",[14,154,155],{},"AI agent configuration can quickly accumulate model, tool, context, budget, memory, runtime, and approval settings.",[14,157,158],{},"A useful starting arrangement might be:",[160,161,162,165,168],"ul",{},[75,163,164],{},"Layer one: goal, input, and expected output;",[75,166,167],{},"Layer two: audience, tone, length, and allowed sources;",[75,169,170],{},"Layer three: model, retry, budget, and tool configuration.",[14,172,173],{},"But tool permissions, external writes, cost ceilings, and destructive actions carry high consequences. Even if they are infrequent, they should be visible or explicitly confirmed before execution. “Advanced” is not permission to conceal risk.",[14,175,176],{},"The real layering model is therefore not merely novice versus expert:",[55,178,181],{"className":179,"code":180,"language":60,"meta":61},[58],"disclosure layer = task relevance × frequency × dependency × consequence\n",[63,182,180],{"__ignoreMap":61},[28,184,186],{"id":185},"the-trigger-is-part-of-the-design","The trigger is part of the design",[14,188,189],{},"“Show formatting settings” creates a better expectation than an isolated plus sign or ellipsis. A disclosure trigger should sit near the content it controls and describe what will appear.",[14,191,192,193,196],{},"On the web, a Disclosure widget normally combines a button with the content it controls. The Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Authoring Practices Guide recommends a real button, ",[63,194,195],{},"aria-expanded"," for state, Enter and Space support, and an experience that does not depend on hover.",[28,198,200],{"id":199},"when-it-works-well","When it works well",[160,202,203,206,209,212,215],{},[75,204,205],{},"The product has many capabilities, but common tasks use a stable subset.",[75,207,208],{},"Options have natural dependencies, such as revealing compression level only after custom compression is selected.",[75,210,211],{},"New users need a quick start while experts still need complete control.",[75,213,214],{},"Space is limited in mobile screens, sidebars, and property panels.",[75,216,217],{},"Detail is valuable but not necessary for every person on every visit.",[28,219,221],{"id":220},"when-it-degrades","When it degrades",[160,223,224,227,230,233,236,239],{},[75,225,226],{},"People need to compare prices, permissions, or plans simultaneously.",[75,228,229],{},"Total cost, renewal, deletion consequences, or visibility are hidden.",[75,231,232],{},"Two lines of explanation are collapsed merely to make the page shorter.",[75,234,235],{},"Experts must reopen the same layer during every task.",[75,237,238],{},"Hidden content becomes difficult to scan, find, print, or understand as a whole.",[75,240,241],{},"The trigger is so vague that people never discover the capability.",[14,243,244],{},"Common failure shapes include:",[160,246,247,257,263,269,275],{},[75,248,249,252,253,256],{},[21,250,251],{},"Click tunnel:"," a common control lives under ",[63,254,255],{},"More → Advanced → Customize → Details",".",[75,258,259,262],{},[21,260,261],{},"Mystery trigger:"," an icon gives no clue that it expands or what it contains.",[75,264,265,268],{},[21,266,267],{},"Hidden risk:"," visual simplicity conceals cost, permission, or irreversible consequences.",[75,270,271,274],{},[21,272,273],{},"State amnesia:"," the interface forgets an expert's expanded state or clears values on collapse.",[75,276,277,280],{},[21,278,279],{},"Hidden dependency:"," a visible decision depends on an undisclosed default with no summary.",[28,282,284],{"id":283},"know-the-neighboring-concepts","Know the neighboring concepts",[160,286,287,297,303,309,315,321],{},[75,288,289,292,293,296],{},[21,290,291],{},"A Disclosure Widget is an implementation mechanism."," Buttons, triangles, ",[63,294,295],{},"details/summary",", and accordions show and hide; progressive disclosure is the strategy that decides what, when, and why.",[75,298,299,302],{},[21,300,301],{},"Contextual Disclosure is a triggered variant."," Selecting “Schedule” reveals a date and time zone because they have become relevant.",[75,304,305,308],{},[21,306,307],{},"Staged Disclosure is a flow variant."," It distributes content across a sequence or wizard and emphasizes task order.",[75,310,311,314],{},[21,312,313],{},"Information Architecture is the structural foundation."," It handles classification, naming, and connection. A collapsing animation cannot repair a bad taxonomy.",[75,316,317,320],{},[21,318,319],{},"Defaults are decision shortcuts."," They make the first layer immediately useful, but invisible defaults can also create surprises.",[75,322,323,326],{},[21,324,325],{},"Feature Gating is an access policy."," It decides whether a capability can be used; progressive disclosure normally changes only when it is visible.",[28,328,330],{"id":329},"remember-these-six-things","Remember these six things",[72,332,333,336,339,342,345,348],{},[75,334,335],{},"Do not delete complexity; let users pay for it in installments as their intent deepens.",[75,337,338],{},"The first layer must be small but complete: the task works and the outcome is visible.",[75,340,341],{},"Layering considers necessity, frequency, dependency, and consequence together.",[75,343,344],{},"Low-frequency risks must not be hidden for visual simplicity.",[75,346,347],{},"A disclosure control is a mechanism; progressive disclosure is a strategy.",[75,349,350],{},"If people are always searching, reopening, or being surprised by hidden defaults, the layers are wrong.",[28,352,354],{"id":353},"self-test","Self-test",[72,356,357,360,363,366,369,372],{},[75,358,359],{},"Can someone complete and predict the common task without expanding anything?",[75,361,362],{},"Which low-frequency facts must remain visible because they affect cost, permission, or irreversibility?",[75,364,365],{},"Does the trigger explain what it will reveal?",[75,367,368],{},"Does each deeper layer add new decision value?",[75,370,371],{},"Can keyboard and assistive-technology users perceive and change the state?",[75,373,374],{},"Are experts repeatedly reopening the same layer?",[28,376,378],{"id":377},"further-reading","Further reading",[160,380,381,390,397,404,411],{},[75,382,383],{},[384,385,389],"a",{"href":386,"rel":387},"https://developer.apple.com/design/human-interface-guidelines/disclosure-controls",[388],"nofollow","Apple Human Interface Guidelines · Disclosure controls",[75,391,392],{},[384,393,396],{"href":394,"rel":395},"https://www.ibm.com/docs/en/technical-content?topic=practices-progressive-disclosure",[388],"IBM Documentation · Progressive Disclosure",[75,398,399],{},[384,400,403],{"href":401,"rel":402},"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",[388],"W3C WAI-ARIA Authoring Practices Guide · Disclosure Pattern",[75,405,406],{},[384,407,410],{"href":408,"rel":409},"https://carbondesignsystem.com/components/accordion/usage/",[388],"Carbon Design System · Accordion usage",[75,412,413],{},[384,414,417],{"href":415,"rel":416},"https://doi.org/10.1177/001872088402600402",[388],"Carroll & Carrithers (1984) · Blocking learner error states in a training-wheels system",{"title":61,"searchDepth":419,"depth":419,"links":420},2,[421,422,423,424,425,426,427,428,429,430,431],{"id":30,"depth":419,"text":31},{"id":49,"depth":419,"text":50},{"id":89,"depth":419,"text":90},{"id":151,"depth":419,"text":152},{"id":185,"depth":419,"text":186},{"id":199,"depth":419,"text":200},{"id":220,"depth":419,"text":221},{"id":283,"depth":419,"text":284},{"id":329,"depth":419,"text":330},{"id":353,"depth":419,"text":354},{"id":377,"depth":419,"text":378},"/learn-img/progressive-disclosure/card-4x5.jpg","Three tactile paper interfaces labeled Essential, Context, and Expert sit in layered trays, illustrating options revealed as user intent deepens.","2026-07-17","Show the smallest complete interface for the current goal, then reveal complexity as intent and context deepen.","Interaction design","interaction-design","md",false,"growing",{},true,[444,448,452,456,460,464],{"name":445,"fullName":445,"category":446,"summary":447},"Disclosure Widget","implementation mechanism","Shows and hides content; progressive disclosure decides what should appear, when, and why.",{"name":449,"fullName":449,"category":450,"summary":451},"Contextual Disclosure","triggered variant","Reveals content in place when a choice or environmental state makes it relevant.",{"name":453,"fullName":453,"category":454,"summary":455},"Staged Disclosure","flow variant","Distributes information across sequential steps or pages, emphasizing order and transitions.",{"name":457,"fullName":457,"category":458,"summary":459},"Information Architecture","structural foundation","Classifies and connects information; disclosure decides which layer appears first in an interaction.",{"name":461,"fullName":461,"category":462,"summary":463},"Defaults","decision shortcut","Preselect common answers so the first layer works, though hidden defaults can also create surprises.",{"name":465,"fullName":465,"category":466,"summary":467},"Feature Gating","access policy","Decides whether someone may use a feature; disclosure usually changes only when it is visible.",null,"/learn/progressive-disclosure",{"title":5,"description":435},{"loc":469},[473,474,475,476,477],{"title":389,"url":386},{"title":396,"url":394},{"title":403,"url":401},{"title":410,"url":408},{"title":417,"url":415},"learn/progressive-disclosure",[436,480,481,482],"Complexity","Information architecture","Discoverability","NQxjpbsDvoX9-E3vALpXqRFDd_HlTVxUyyI_2qBobEQ",1785418434186]