Product needed a generalized component for the modals which can be utilized all across the general product lines.
For starting this process, since we had no use cases available. I researched other design systems and came up with different principles for rules and usage and keyboard interactions.
- Intuitive - Efficient - Delightful
- Efficient workflows (clicks and screens)
- Minimalist visual design
- Progressive disclosure strategy (Controls when you need them, where you need them)
- Compelling, engaging and enjoyable to use (Motion Design)
- Internally consistent, useful, usable, simple
- Appropriate visual hierarchy that maps to the underlying object (screen elements) taxonomy.
Design rules for modals
Modals show only one page, with no other navigation options until the user finishes the immediate task.
Modals are generally used when the app had gotten to a state which it shouldn’t or can’t proceed without any input from the user.
Modals cut off all the other navigation options from the user. They cannot ignore it and go somewhere else in the app or site. They must deal with it now and once done, they can go back where they started.
Modals have the following elements built into the panel
- Close or X button for escaping the modal
- The lightbox effect shows how to display a modal. The background screen will dimmed thus highlighting the bright modal panel.
Types of modals
- Selection List
- Small Forms
- Wizard Modals
- Modal has role="dialog"
- When the modal is open, everything behind it has HTML attribute aria-hidden="true", so assistive technology won't read out the underlying page.
best way to do this is to give the modal and the page separate wrapper elements and toggle aria-hidden="true"/aria-hidden="false" on the main page's wrapper depending on whether not the modal is open.
- Modal contains an HTML heading
- Modal has an aria-labelled by attribute whose value is the id of the modal’s heading
Expected keyboard interactions
- Esc key closes the modal and moves focus to whatever triggered the modal to open
- Tab key at bottom of modal cycles focus back to first focusable element at top of modal
- Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal
- Enter key submits modal form data, if applicable
I user tested all the interactions in the different types of modals with users inside the office, the feedback was positive and here are the final iterations