This full-width modal is the right fit when customers need to create, view, or edit a transaction.
- Use a trowser when the user needs to fill out a complex form.
- The trowser can display a single-step flow or a multi-step, multi-screen task flow (as in an activation flow).
- As in most cases, the title of the trowser will appear in sentence case (Sentence case).
- The title remains the same throughout the entire flow. Examples: Get ready for payroll, Payroll tax setup, etc.
Appearance and behavior
- The trowser includes a header and a sticky footer.
- There is no left navigation.
An example of a trowser used to create a transaction.
The trowser’s sticky title or header remains secondary to the global header, even though it might lead to some of the same places (such as help and settings). The X in the corner enables users to close the trowser and return to where they started.
The grey in the hover state in this proposal uses a #393A3D instead of #8D9096
You can use the trowser to let users see transactions they opened previously in the current session. Because the user can navigate between multiple transactions, autosave is a must and needs to be clearly displayed in the header.
The Stage displays title info or the Flow Navigation. In transactions, it is used to display important information: customer, payment details, and totals.
The main content area of the Trowser scrolls behind the sticky header and footer. The Form specs differ between transaction forms and other forms, so make sure you take a look at those.
A Drawer can slide over the main content as a way to add items (examples: add a note to a transaction).
Navigation and the Sticky Footer
The Trowser may use a stacked model to navigate deeper into a context, with each new Trowser layering on top of the current Trowser using animation. For example, while in the “Receive Payment” trowser a user may click to view a related Invoice which would open that trowser on top. Trowsers can also navigate between sibling Trowsers (such as navigating between invoices).
The sticky footer is permanently anchored to the bottom of the screen and is home to the primary and secondary call-to-actions, as well as tertiary actions (text links) like print and export. The primary call-to-action is always on the right. When completing a transaction or flow, the primary action is save. During a flow navigation, Next becomes primary and Back is the secondary action placed to its left. When the various steps have completed, the primary call to action changes to “Save” or “Done”. No buttons appear on the left side of the trowser footer.
When there are many actions, links may be centered in the sticky footer. When there isn’t sufficient space, a “more” popover may be used.
Sticky footer with “more” popover.
Shailesh and I think that we should keep the cancel button because even though the “X” always closes the current Trowser, returning the user back to the layer they opened it from. Providing a “Cancel” right next to the primary action provides a clear action for the user. Whether “Cancel” or the “X” is clicked, if data has been entered without saving and autosave functionality doesn’t exist for the flow, a Critical Alert warns the user that they might lose data.
Each trowser slides down from the top. When it hits the bottom there is a small bounce to help indicate that it is layering on top of something.
The trowser has a maximum width of 1440px. In the case where it appears on a very large screen, the trowser gets centered with a black 40% opacity mask behind it. If a 565px drawer is ever opened within the trowser, it needs to be positioned appropriately. When there is space for the drawer and trowser to sit completely or partially side by side, the drawer panel will push the trowser left to recenter the total width of the drawer and trowser. If there is not enough space, the drawer will overlap the trowser as it does in smaller windows. When the save and X to close the trowser are not overlapped by the drawer, they use a dissolve transition to hide temporarily.
Examples of trowsers and trowsers + drawers on really large screens
Responsive Trowser on Mobile
The main changes are that on devices other than desktop, we show fewer options in the header and footer:
- Fixed header required.
- Fixed footer required.
- X in top right corner, required.
- Two CTA buttons in footer right (which can launch a mobile friendly menu button).
- Overflow icon for all other actions (which uses the mobile friendly menu button).
- No help icon in header.
- No trowser history icon in header.
- No settings icon in header.
Overflow icon at the top header would open a full screen takeover with a list of actions.
Primary action button with multiple options will open an action sheet.
Starting 560px wide on all devices, the navigation action items and also the tertiary action items in the footer will collapse into the overflow icon. The reason for this is because if all icons were to be displayed, we will not have enough room to reveal the Trowser Header title. If all tertiary options were displayed in the footer, the main content will not run out of real estate. It’ll also be very distracting for the user to have multiple actions as buttons at the bottom of screen.