Register
Quick and easy! Create patterns and join discussions on draft patterns! Go here to RegisterLogin
Already a member? Go here to Login now.Browse Patterns
Top Rated Patterns
Contact Us
Responsive Disclosure
Design Problem
There are two aspects to this pattern:
- Cascading prompts. The options needed in a form are contingent on user input.
- Cognitive overload. A form has many choices that may confuse users. (This is the purer form of the pattern and is not used in Sakai as of July 2007.)
Solution
- Reveal items affected by user input. Without going to another screen, show form fields (either create them or reveal them) as required by user inputs to earlier prompts.
- Minimize overload. Begin with a minimal interface, revealing additional fields in sequence without going to a new screen. (This is not done in Sakai as of July 2007, and is dissimilar to the behavior of other tools – if you use this approach, make sure you avoid disorienting your users.)
Show only the first choice in a cascading sequence. When users submit this information, display the next choice or set of choices. Leave the history of choices active on the screen, so users can go back and change a step and can see all the steps of the task as it develops.
In the Sakai example above, users specify how many sections to add; the number submitted determines the next set of choices.
Use When
Prompts cascade. Use this pattern when users provide information dictating the range of choices that are needed next.
". . . the choices the user makes at one step alters the rest of the task (i.e., the task is branched, not linear)"
-- Jennifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design
Avoiding disorientation. Use this pattern when resulting changes in the screen will not be too disorienting to users. In the example shown, the information at the top of the screen remains visible and provides a strong sense of orientation.
Simplifying complex tasks. Use this pattern when you want to present a complex UI task step-by-step (without using a wizard). You want to give users a picture of the whole task as it unfolds, and an easy way to back up to earlier choices (which a wizard does not provide as well).
How
Todo.
Rationale
Tidwell: "since the UI is kept together on one page, the user can easily go back and change his mind about earlier choices. As each step is redone, he immediately sees the effect on subsequent steps. This is better than jumping from one content-starved [wizard] screen to another.
"For occasional tasks, this device can work better than presenting a complex and interlinked set of controls all at once, because it's always obvious what the first step is – and the next, and the next. The user never has to think too hard."
Accessibility Considerations
Responsive Disclosure can be a challenge to users using assistive technology because of portions of the page being updated or focus changing between reloads. The following tips should be considered when using this pattern:
- When a selection is made to disclose an option, focus should remain on the original disclosure selector – to help users keep their orientation after the page has been updated.
- When updating the page to include the requested item, page content prior to the disclosure selector should remain unchanged, and the changed / revealed content should appear after the selector.
- The revealed sections should follow accessibility considerations.
- When available, ARIA mark-up should be used to describe the interactions on the page.
Post new comment