The age of enmodalment
Back when computers were coal-powered, showing additional, contextual information to users meant shuffling them off to a new page, interrupting their flow. We were sad. Users were sad.
In time, the modal window was introduced, and those of us who built websites considered it our savior: the modal permitted the presentation of relevant, contextual content or transactions in the same screen. We were happy. Users were happy.
And then things went wrong. So wrong.
We began to abuse our savior: we stuffed entire pages of content or multi-step forms into that poor little floating box. If people were kind enough to visit our site, we smacked them in the face with an ad modal before they could do anything else: Sign up for our newsletter! We ignored accessibility. We didn’t make our modals mobile-friendly. Etc.
All this misuse and abuse of the humble modal has left many—especially developers—calling for its demise.
But the modal still serves its original, invaluable purpose of presenting snippets of content or simple transactions in a focused area without forcing a context shift. On TED, we employ modals to let users do things like saving talks, commenting, or selecting subtitles with minimal friction.
Some of TED’s modals
Many TED Talks have subtitles in dozens of languages. If you don’t see your language in the top five results, a modal lets you make a selection from the other available options without navigating to a separate language page, or having to wade through an overly long dropdown menu.
Find all the subtitle languages for a talk without leaving the video screen.
Saving or commenting on TED requires authentication. Our login modal means you can keep watching while logging in.
Yup, the video is still playing under that modal.
Long live the modal!
In other words, the modal is still useful. So instead of killing it, let’s be smart about its application:
- Use a modal when a trip to a new screen might be overly disruptive, but the content doesn’t need to be exposed by default
- Include no more than a few lines of content or a very abbreviated form
- Avoid spawning a new modal from an existing modal (I’d say never do this, but I’ve seen a few exceptions that work)
- Allow users to close the modal multiple ways, e.g, close button, escape key, clicking outside the modal—that tiny x in the corner isn’t for everyone
- Fix the modal’s position so it doesn’t scroll off-screen
- Make sure it works well on mobile, or create an alternate path
- Make sure it’s accessible, particularly for screen readers
- Never spawn a modal automatically…unless you’d like a midnight visit from an angry Jakob Nielsen (shudder)
If a modal isn’t right, but shifting screens is less than ideal, there are alternatives like slides, accordions, expanding panes, or enhanced tooltips. These are all great ways to add content while minimizing friction, but none is a universal replacement for the humble modal.
Originally published at www.mmcwatters.com.
