The Stage is used to provide a high-level overview for the page and is always locked at the top of the page. It can include a heading, an Insight, and a minimal set of primary actions or controls.
When to Use
- When there is a useful Insight Chart to display.
- In the Trowser to highlight important transaction information.
- On each main-level screen (Customers, Vendors, Reports etc.) to maximize cohesiveness and understanding.
Appearance & Behavior
Stages are used on many pages, but are not required for every screen type. See the layouts framework for complete details on when to use a stage.
Stages with a larger amount of content may be expanded and collapsed. This interaction is accompanied by a slide transition. Collapsing a Stage allows the user to view more of the content beneath it. Place primary action buttons in the stage.
Stages with Insights
Stages with Insights are interactive, which can allow the user to…
- Perform a primary action that might indirectly affect the contents on the page (Example: adding a new To Do from the To Dos stage)
- Interact with an Insight in a way that does not affect the contents on the page.
- Directly affect the page contents below (Example: the Money Bar Insight can be used to filter the List directly below it).
- Interact with the page contents to affect the Stage contents (Example: filtering the Customer List on Tablet may also update the numerical Insight shown in the Stage).
As part of the In-Product Discovery framework, Insights within the Stage can be disabled until the user activates the feature. The Stage should not be collapsable until the feature is activated.
When the feature is activated, Stages with no data should reflect the no data status in the chart.
Then, when the user begins to use the application, Insight data will be reflected in the stage.
The user should always be able to collapse the non-disabled Stage with Insights.
Toggling between Insights
Provide a toggle to switch between Insights when there is a need to see multiple Insights. Do not show more than one Insight at a time.
When a Back Link is helpful on a page with a Stage, it should be located above the Stage heading.
Stages within a Trowser:
- The Stage for a Transaction Form typically displays a static total and invoice status.