Tap to Dismiss

Designing accessible escape hatches for modals

Linzi Berry
Tap to Dismiss

--

Let’s talk great escapes. Not magical like Houdini’s handcuffs or Thor’s bifrost, instead very commonplace — an interactive icon to remove pesky pop-ups away from your desired content. If modals, dialogs, pop-ups… whatever you want to call them are a necessary evil for transient content, we need to build accessible escape hatches.

Visual Design

The common ux pattern for e-x-iting is quite simple, y’all see what I did there? The history of the [x] goes back to 1970s computer design. It’s first appearance was likely the Atari TOS menu — a list of actions tied to keyboard letters and symbols. [x] was the command for Exit. It was then used by NeXT, which inspired Windows, and became the standard symbol for close with the mass adoption of Windows worldwide in 1995. All of this is to say, there is no need to re-invent the wheel here, use the symbol everyone across the world is expecting.

Accessible Design

We’ll start with the basics — the [x] should always be provided, even if the user can tap the background, swipe, or use the native back button to dismiss the modal as well.

Icon vs Letterform

Design an icon, rather than using a typographic letterform, that is consistent with the rest of your iconography set. It should be clearly understood as an [x] with all four appendages clearly separated. I personally prefer the 90° angle design and adjust the weight to match the set.

High contrast vs Low

It’s color should be neutral and meet the a11y recommended 4:1 contrast ratio. Sure, pop-ups perform astronomically better when the [x] is barely off-white gray, but that, my friends, is what we call a dark pattern. By making the [x] barely viewable, we’re tricking the user into doing the main action by making it seem mandatory to escape. This leads to a frustrated user base and false positives for the business.

Contained vs Standalone

The icon should be contained to indicate the relative size of the tap target and delineate interactive icons from static ones, especially in close proximity.

  • If the icon and container are under the minimum tap target size (48x48dp/pt), build the tap target to be larger than the visuals of the button and don’t overlap it with other interactive elements.
  • If this icon lives inside a interactive bar, like header navigation, then the bar is already creating this tappable space for you — hooray!

Placement

Pop-up content is optional, it shouldn’t feel blocking, and the way to escape should be easily recognized as an action related to the pop-up. Although starting consistently in the upper right for most Windows software, today both Apple’s HIG & Google’s Material Design place iconic navigation on the upper left. Neither systems give clear direction when it comes to modality.

Audit Highlights

Modal Placement

Most modal content is optional, with the exception of Alerts, so they shouldn’t feel blocking. Although a traditional modal that appears in the center of the screen, there is a newer trend to make modals appear less blocking by placing them at the bottom of the screen. Depending on the content most likely to be under the modal, you can inset it from the sides… or not.

Bottom vs Center

[x] Placement

Inside vs Overlap vs Outside

Inside appears inside of the modal. This most clearly connects the [x] to modal and works well with a flat design aesthetic, however it adds complexity to the inner layout of the title within the modal.

Overlap overlaps the modal. The break in the continuous line calls the most attention to the [x], but comes with a distinct visual design style which adds visual complexity and feels less refined.

Outside appears outside of the modal. This cleans up the design of the modal, however the [x] could be confused with UI underneath.

Right vs Left. Icons by Meg Robichaud

End (Right) Placing the [x] on the right side is better for right handed thumb tappability and doesn’t run into alignment with static iconography.

Start (Left) Placing the [x] on the left side follows the current navigation paradigm, however it increases the vertical height of the modal because of it’s proximity to left aligned iconography and it’s a further tap target on large phones.

This is for LTR languages. “Start” being where the user starts reading content and “end” where they stop. In RTL languages, you should flip it to the left.

Optimal Arrangement

Putting everything together now — our current optimal arrangement is a bottom aligned modal with a contained, iconographic [x] on the inner, upper right side.

Just Text, Image, and Icon

Last thoughts

I want to acknowledge that you can also use two buttons horizontally stacked where one is “dismiss.” This is a great alternative and strongly recommended by Material Design, but in the case where you don’t want the dismiss to be as prominent, accidental taps, or you’re having issues with localization translations, the [x] button is a great universal solve.

I’m Linzi Berry, currently design systems manager at Lyft. I sweat the details so you don’t have to. My hope in documenting system design thinking and process is to contribute and learn from the design community at large. Please subscribe!

--

--