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?

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

#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.
  

#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

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.

#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

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.

#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

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

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.

#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!