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.