Ellie Mae Design system modals

Product needed a generalized component for the modals which can be utilized all across the Ellie Mae product lines.

UX designer / Visual Designer

January 2019 - March 2019

Problem

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.

Design philosophy

  1. Intuitive - Efficient - Delightful
  2. Efficient workflows (clicks and screens)
  3. Minimalist visual design
  4. Progressive disclosure strategy (Controls when you need them, where you need them)
  5. Innovative
  6. Compelling, engaging and enjoyable to use (Motion Design)
  7. Internally consistent, useful, usable, simple
  8. Appropriate visual hierarchy that maps to the underlying object (screen elements) taxonomy.

Design rules for modals

What

Modals show only one page, with no other navigation options until the user finishes the immediate task.

When

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.

Why

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.

How

Modals have the following elements built into the panel

  1. Close or X button for escaping the modal
  2. The lightbox effect shows how to display a modal. The background screen will dimmed thus highlighting the bright modal panel.

Types of modals

  1. Information
  2. Confirmation
  3. Selection List
  4. Small Forms
  5. Wizard Modals

Accessibility

Expected markup

  1. Modal has role="dialog"
  2. 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 whethernot the modal is open.
  3. Modal contains an HTML heading
  4. Modal has an aria-labelled by attribute whose value is the id of the modal’s heading

Expected keyboard interactions

  1. Esc key closes the modal and moves focus to whatever triggered the modal to open
  2. Tab key at bottom of modal cycles focus back to first focusable element at top of modal
  3. Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal
  4. Enter key submits modal form data, if applicable

User testing

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

Impact

The modals are now being extensively being used across the different product lines

Learnings

Design based on intuition

It was tough designing as the requirements from the product were vague and we had to research across different product lines to create a generalized component

Inclusive design

All interactions needed to be ADA compliant and this ensured that we needed to incorporate accessibility guidelines into our design system