Are popups evil? Use them the right way!

Are popups evil? Use them the right way!

Day after day I keep hearing things like this: "A popup? No way, that annoys the user" and "People always close them. We have to kill popups on our site." But popups (or what we will call them later) play an important role in User Experience.

But why is this negative discretion against popups? History lesson!

The dark side

Well, they have a bad reputation. Like really bad.

Remember this?

Tons of ads appearing as popus
No wonder why popups have bad reputations...

This way of using popups really made people hate them. Furthermore, they were associated with pornsites, shitty sites flooded with ads. All in all, not so trustworthy sites to be honest.

Why are these popups annoying?

  • They open in a new "pop up" window and saturates your screen
  • They often play sounds or have other kinds of annoying behaviour
  • But mostly: they're not good for anything

The light side

The single most important thing:

POPUPS SHOULD NEVER EVER REALLY "POP-UP"

That means, never open a new "popup window". It was never a good idea but now it would make horrible associations in those how lived in that eras.

So, instead of opening a new window, they just appear in the same browser tab. Typically they consist of <div>s so that's why sometimes they are referred as "layer popups" to indicate the different behaviour.

Disclaimer: Despite the fact that popups no longer pop-up I'll refer to them as popups.

4 Types of popups based on their behaviour

  1. Alert popup
  2. Modal
  3. Tooltip
  4. Flash notice
  5. Lightbox
Alert popup design
designed by: Matthias Martin

#1 Alert popups

This is for showing important information, error and alert messages. The "alert" refers to the behaviour: you cannot dismiss this popup by clicking outside of it. That's because you need the user to read the message and acknowledge it by clicking on a button.

Best-practices:

  • Display them with high-contrast so that they really stand-out (eg. put a 90% opacity black background behind the popup)
  • Make sure, it's centred in the browser and fits inside any screen so the user doesn't have to scroll
  • Use a consistent design. Every alert message should look the same so the user can instantly see it's a warning/alert/important message again.
Alert popup example
Good example of an alert popup. Clear call to action supported by the red colour.

#2 Modals

Modals play an important role in UX. A modal wants the user to take real action (like subscribe, complete a form, upload photos etc.).

When should you use a modal?

Put it simply: when you want to focus the user. Modals have several good qualities:

  • They focus the user by saying: "Stop! Look at this. Now you have to concentrate on this task."
  • They simplify navigation. If you click on a subscribe button, it will open a modal with a form in it in front of a dark background. But it feels comfortable because you know where are you, what's happening - it creates continuity.

Types and examples

  • Subscribe modal
  • Message/Dialogue box
  • Basic popup
  • Terms & Conditions in the checkout process
  • Order form
  • Additional - secondary - information
Payment design from Stripe
Payment modal - Stripe. Great design. Easy to follow, clear call to action.
InVision uses a lot of modals
InVision uses a lot of modals. They always focus you on one task.

Best-practices

  • Again, high-contrast works well
  • Allow the user to dismiss the modal when clicking outside it
  • Always have a close button at the top-right corner
  • Have visible, clear CTA-s (call-to-actions) - confirm, cancel etc.
  • Don't use them on mobiles or in responsive versions. Open them in full-screen on mobile devices.
  • Avoid multi-step modal sequences. They deserve their own separate page.
Invision tooltip design
InVision again. These tooltips are used to guide you through the different views in InVision. You can choose to follow the steps or leave this presentation.

Subscribe

Like the content?
We let you know when we have something fresh!

#3 Tooltip

Tooltips essentially show additional information. Often, a website has to serve new users and returning visitors - who are familiar with your site or application. In this case, tooltips come in handy. You can educate your new visitors, give them extra help without making your site completely unusable for your returning customers.

When should you use tooltips?

  • Providing help for complex inputs. Let's say during your checkout process you have this input: "Flight number". Now, this is obvious if you've flown before. But for most people this is not clear. What this is? Where can I find this information? In this case, a tooltip explaining these would make great service.
  • Tooltips are great for indicating and explaining changes on the interface. They say: "Hey! Now we are in full screen. You can go back to regular mode by clicking here ->".
  • Minimal tooltips also work well. Check out Google Drive. On mouse hover, it explains the icons in the upper menu.
  • Tooltips could be great for micro-interactions. Sometimes you don't want to open a separate new popup for an interaction - for example, entering just a URL.
  • Hovercards, are also go into this group. This is when you hover over a profile picture and it displays a mini-profile. Checkout Facebook, or LinkedIn
Google Drive popup design example
Google Drive instruments tooltips for micro interactions. It would be unnecessary to bring up full popup.
Google Drive minimalistic tooltip example
Google Drive is using minimalistic tooltips to add extra informations for icons. It would be annoying to have all this information when you are power user because you know your way around. But at the first time? Could come in really handy to check out what that icon does.

Types and examples

  • Explaining inputs
  • Providing extra information
  • Micro-interactions
  • Hovercards

Best-practices

  • Always have a clear purpose with tooltips. Don't use them just to create "onboarding" on your site. This serves no purpose and this is NOT onboarding, trust me.
  • Don't overuse them. If you apply tooltips for inputs, only explain the necessary. You don't have to explain obvious stuff, you will just annoy the user.
  • Make sure they stand out. Use shadow, apply high contrast.
  • Keep it short and punchy.
Flash notices at booking.com
Flash notices at booking.com. They grab your attention and disappear after a few seconds.

#4 Flash notices

Flash notices are notifications which will disappear after a certain time. This is what happens when you save a form or complete a task. They are to say: "Success! You've made it!" or "Something went wrong... try again!"

Types

  • Flash notice bar - usually appears in the upper area of a page.
  • Flash card - if it's a notification, it can appear in the bottom-left corner saying: "Saved!", or as Booking.com applies them at the right side of the page: "2 people are booking right now!"

When to use it:

  • If a user completes an action (saves a form, subscribes etc.)
  • When you want to display an error message (payment failure, cannot save something etc.)
  • Provide bits of information. Again, check out Booking. They use it to put pressure on the users. "Only 1 room left", "2 people are booking right now", "best price now" etc. And they disappear... Great growth hacks - just make sure you don't overuse them.

Be careful!

Since flash notices can be used to provide feedback on your interactions, always make sure the users will see it. They must not be out of sight.

BAD EXAMPLE

Bad example
Bad example: using flash notices instead of displaying them inline. In this case, you focus on the inputs - to the center of the screen and the error flash notice is just out of scope

In this picture, you've entered your email and your password - but a wrong password. Flash notice appeared on the bottom-left corner of the page - too far from where the actual interaction took place.

GOOD EXAMPLE

Good example for handling errors
Good example for handling errors. In this case, the error message is shown together with the inputs. You just cannot miss it.

Same screen. You've entered the bad password, and instead of the flash notice, you see an inline error message. It's there. The very place you are staring at.

Best-practices

  • Flash notices are great for providing feedback - just make sure the users will see them
  • Use them for showing bits of information and notifications. "Hey, this happened!"
  • Don't disturb the user - allow him to do whatever he wants (don't force him to deal with the flash notice)
  • Limit them in time and amount. If you apply one flash notice - it will be punchy. If you apply 10 in 2 minutes the user will leave the page.
Example for a lightbox

#5 Lightbox

Also called "Theatres". The website darkens, the popup appears, and you can see beautiful pictures or watch videos.

When to use it

  • To start a photo gallery
  • To display images full screen
  • Use it to watch videos full screen

Best-practices

  • Always have clear navigation
  • Allow the user to navigate with arrow keys and ESC
  • Don't use them on mobile devices. They just don't work. Apply touch-friendly (swipeable) gallery.

Conclusion

Popups are essential for great UX. Just always make sure, you use them correctly and have clear goals with them.

Thanks for reading, hope it helped! I would love to hear your thoughts, drop me a line!

Got a burning question?
Or are you ready for the next step?

Schedule a quick 30 min call with us,
we would love to help you!

Schedule a call with our expert
Seven Step UX

SEVEN STEP UX: The Cookbook for Creating Great Products

Our co-founder and UX expert, Csaba, wrote a hands-on, down-to-earth approach to UX design that provides a complete overview of the Seven Step UX product design process that we use every day at Webabstract. This book is a practical, step-by-step guide that will take you through all of the steps and teach you all of the methods you need to know for UX work from planning an app or website to wireframing, research, and design. It is a must-read for understanding user experience design.

What can we do for you?

  • Product UX/UI design
  • Mobile applications
  • Consulting
  • UX research

Let's talk

Daniel Knaust

Daniel Knaust

Co-founder, CEO
danielknaust@webabstract.io +36 30 626 29 66
David Dorosz

David Dorosz

Co-founder, COO
daviddorosz@webabstract.io +1 314 919 6461
Let's talk
Thank you for contacting us! We will get back to you as soon as possible.
Copyright by Webabstract 2017
Thanks for subscribing!
Want a Free UX Consultation?

We can review your product, get expert feedback or discuss UX and design issues.

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog

Schedule a friendly call with our expert

Enter your email address and we will contact you to schedule the call:

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog
Free eBook

Improve your product’s UX with these 10 simple steps [FREE EBOOK]

Sounds interesting? Enter your email and download the ebook for free!

No, thank you

Like the content?

We let you know when we have something fresh!

No, thank you