Pop-up windows

When a pop-up is the right choice

Some questions absolutely do need an answer before anything else can go ahead. Someone closes a document without having saved it and you’re left having to ask whether to keep the changes. Someone wants to rename a file (takes 5 seconds and one box). Someone is in the middle of a payment and needs to sign in first. In those situations a small window over the page is the right thing to have, as opening up a whole new page would break their flow and could well result in them losing what they were doing.

For long forms, use a normal page instead. On a page people can scroll, go back and save a bookmark. If people want to compare the information with what is underneath, use a panel at the side or open the details right in the page.

And please don’t greet visitors with a pop-up they didn’t ask for. It covers the very thing they came to read. On phones, Google also counts these as a bad sign for a page.

The built-in dialog does the hard work

Browsers now have a ready-made pop-up called dialog. When developers open it with showModal(), the browser takes care of the tricky parts. The page behind it can’t be clicked or reached with the keyboard while it is open. The Escape key closes it. The keyboard moves into the window by itself. The page behind gets dimmed, and screen readers tell blind users that a window has opened.

There is also a setting called closedby that decides whether a click outside the window closes it. That is handy for small windows. For a window where someone is typing, it is safer to leave it off, so a stray click doesn’t throw away their work.

Where the keyboard goes

When the window opens, the keyboard should land somewhere useful, like the first box to fill in or, for a “Delete?” question, the safer button. When the window closes, the keyboard should go back to the button that opened it. Otherwise keyboard users find themselves at the top of the page and have to work their way down again. The built-in dialog handles the first part. Test the second part yourself.

Clear words in the window

The title should be the question itself, not “Warning” or “Are you sure?”. “Delete this project?” tells people straight away what is at stake.

Below it, say what will happen: “The project and its 14 files will be removed. This can’t be undone.” Then name the buttons after what they do, “Delete project” and “Cancel”, rather than “Yes” and “No”. Someone who reads only the buttons should still choose correctly.

On a phone

On a computer, keep the window fairly narrow so the lines of text are comfortable to read. On a phone, let it fill the width of the screen or slide up from the bottom. When the keyboard opens, it can cover half the screen, so check that people can still scroll inside the window and reach its buttons.

Gentler options

Quite often you can do without the window altogether. If a deleted item can come back, delete it and show an “Undo” strip instead of asking first. If someone wants to change a single value, like the quantity in a basket, let them type it right there in the list. And once a task needs more than four or five boxes, give it a proper page of its own, where people can scroll and go back.