Progressive disclosure guiding principle: maintain context for users
When designing interfaces that incorporate progressive disclosure, refrain from creating interactions that drastically disorient the user's initial point of focus.
progressive-disclosure
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Progressive disclosure vs navigation distinction
Progressive disclosure and navigation patterns share common elements but serve different purposes. Progressive disclosure hides and shows information within a single context, while navigation moves between different pages or sections. They should not be confused when deciding which pattern to implement.
Progressive disclosure: pair icons with text when possible
Progressive disclosure icons should be paired with descriptive text to provide context whenever possible.
Progressive disclosure: implement only as necessary
Progressive disclosure should be used sparingly, only when it is necessary to truncate information for the general layout and design.
Chevron icon usage in progressive disclosure
The chevron icon is used when elements of content are collapsed and can be toggled open. Typically this icon is positioned vertically and alternates between the up state when expanded and the down state when collapsed. The chevron icon is flexible and can stand alone or be paired with text. The chevron should not be used as a call-to-action for dropdown menus, for pagination, or to indicate directional actions.
Fold/Unfold icon usage in progressive disclosure
The Fold/Unfold icon is used to signify that there is content that can be toggled open and closed. It is typically surrounded by text content above and below it. There are versions of this icon that expand context in a singular direction, used only in GitHub's code review editor. This icon should generally be used to signify the expansion of text content and generally is not displayed with accompanying text. Avoid pairing this icon with lengthy text.
Ellipsis icon usage in progressive disclosure
The ellipsis icon is used for toggling truncated inline text content. Its primary purpose is to curtail bodies of text and sometimes other types of information. The ellipsis icon generally stands alone within inline bodies of text. While visually similar to the kebab icon, the ellipsis icon is different and should not be confused with the kebab icon, which is used for dropdown menus or general call-to-actions.
Kebab icon: for toggling inline dropdowns and menus
The Kebab icon is used for toggling inline dropdowns and menus. It should not be used in place of the ellipsis icon for truncated inline text content.
Caret icon not recommended for progressive disclosure
The Caret icon should be refrained from being used as a progressive disclosure solution.
Text-only toggles discouraged in progressive disclosure
Usage of text-only toggles as a progressive disclosure solution is discouraged, as generally icons or icon and text pairings provide better accessibility and more information.