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.
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 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.
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.
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
Terms & Conditions in the checkout process
Additional - secondary - information
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.
Like the content?
We let you know when we have something fresh!
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
Providing extra information
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!"
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.
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.
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.
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.
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.
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
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.
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!
My life has been organized around the marriage between strategical thinking and visuality. That's what makes me a UX Architect. As just with real architects, both the function and the aesthetics are my domains. If you are curious, check out my articles on our blog, or meet me at varios lectures and presentations I deliver.
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.