Applications often have workflows that require users to focus on specific tasks or content. In these cases, it can be helpful to display controls and actions that are relevant to the user's current context, while hiding or minimizing controls that are not immediately necessary.
Conditionally or contextually revealing additional controls can be less overwhelming than displaying many possible behaviors at once — leading to greater focus and efficiency in task completion.
Functionality considerations
In this sample, a primary Action Bar contains a set of core Actions. When the user clicks on one of these Actions, a secondary Action Bar appears with additional controls related to the selected Action. This allows users to access more advanced functionality without cluttering the interface with too many options at once.
Component functionality
In this sample application, there are three Action Bar components. The first Action Bar contains primary actions that are always visible to the user. Adjacent to this is a second Action Bar providing tools or controls to a user. When a user interacts with Actions in the second Action Bar, the application hides the current Action Bar, and reveals a third, where tool- or workflow-specific controls are displayed.
When switching Action Bars, it is important to maintain context for a user. Providing the user with a display of the current tool or workflow can help anchor the more detailed controls.
Let users explore capabilities. By focusing on a "close" or "back" Action when contextual Action Bars are revealed, users can quickly navigate to the prior set of controls regardless of input method.
If you use a "close" or "back" Action, communicate to a user if there is a state change that will occur when they interact with the Action. For example, if there are unsaved changes or if the user will lose progress, the application might change the "close" or "back" Action to have "discard" affordance — perhaps along with an informational Tooltip or other messaging.
Implementation details
It is important to ensure the behaviors you introduce are accessible and usable for all. This can include adding appropriate properties and ensuring focus is correctly managed as controls are hidden and revealed.
In this sample, when the third Action Bar is revealed, focus is moved to the first Action to ensure keyboard users can easily access the new controls. When the third Action Bar is dismissed, focus is returned to the Action that invoked it. Explore how to continue to build and design your apps with accessibility in mind.