Designing a popup

MasaKudamatsu
Masa’s Design Reviews
3 min readAug 12, 2018

One recent trend in web design is to show a popup, rather than a different webpage, when the user clicks a link. And this popup spreads over the entire browser window.

For example, Spotted By Locals, a travel guide website/app for various cities in Europe and North America, has this list of contributors to its Stockholm edition (called “Spotters”):

When you click, say, Susanna, a popup page spreads across the entire window:

Now how would you go back to the previous page?

I’m so used to clicking the desktop browser’s back button on top-left, to visit the previous page. However, if I do this on this particular case, I leave a page for Stockholm and I get lost. After several attempts, I realize that this is a popup page and I should click the X button on top-right to go back to the previous page.

There are possibly two solutions to avoid this bad user experience.

First, replace the black background with a opaque version of the previous webpage. The current design of this pop-up page doesn’t clearly tell the user that it is a popup. If I had seen a opaque version of the previous webpage behind the popup page, I would have unconsciously recognized that it is a pop-up page. So I would have looked for the X button to close it to go back to the previous page.

The other solution would be to locate the X button on top-left, not on top-right. Before clicking the browser’s back button, I would then have noticed this and clicked the X button.

Actually, the mobile version of this website takes this second approach: the X button asserts its presence at the top middle.

I’m not sure about the central position of the X button, though. It makes me feel like this lady Susanna is marked as something to ditch…

Maybe very few people use laptops and desktops to visit websites these days. Mobile first development is a norm now. But that doesn’t mean that desktop version can ignore user experience.

Perhaps the designer for this website is from the mobile generation, ignorant of the old habit of aged users like me (I’m 40 years old) who click the top-left corner to go back to the previous page…

--

--

MasaKudamatsu
Masa’s Design Reviews

Self-taught web developer (currently in search of a job) whose portfolio is available at masakudamatsu.dev