What are modals, popups and lightboxes?
When interacting with a website you generally want to make the experience as seamless and simple as possible. Often, a simple reload of the page can break that seamless flow and other time you simply have information that doesn’t need to be visible at all times but is still associated with a page.
This is where popups, alerts, modals and lightboxes come in. First, these terms do have roots in specific types of “popup” window situation but they are often used interchangeably in general web conversation. With that in mind, let’s discuss what they are.
There multiple varieties of popup that are generally built into website. These enhance the user experience. The term popup is a catchall term for anything that appears on your screen over a website.
This is where variety in the terminology often gets blurry. Popup, modal and alert are often used interchangeably. Popups generally cover all of the following types of content overlay.
Alerts have been around for a long time in relation to websites. An alert is a little window that appears and will generally prevent you from doing anything on a page until you’ve dismissed it. They don’t need to be dismissed by interacting directly with the mouse and can instead be dismissed by using other keys like esc or enter.
Often used to warn you before submitting something that could make you lose your work.
In terms of web design a modal is a box that will disrupt a page by overlaying on top of it and prevent interaction – just like an alert. The difference is that modals need direct interaction in order to be dismissed. They will often display a dialog box with a button that can be clicked to dismiss the box.
Dialogues are boxes that appear over the content of the page. Dialogues are used to show information and require a response. For example, you could have a dialogue containing a contact form or some text to confirm an action.
Dialogues can be included in a modal. This would mean that the modal prevents interaction with the page while the dialogue provides a means to dismiss the dialogue and modal once interacted with.
Generally they can be dismissed with a cross button or by clicking anywhere in the darkened part of the page.
Tooltips & Popovers
Tooltips are small pieces of information that provide additional information when you hover or click on an item. They are small, don’t disrupt the page and generally disappear as soon as you move the cursor away from the trigger.
A classic example of a tooltip is when you hover over a link and the after a short delay a small piece of text appears with enhanced information.
A variation on the tooltip is the popover. These are an element introduced in a lot of modern websites that are a specific kind of tooltip. The major difference is that popovers can be styled to look like the web page they are on and appear when you interact with specific elements of a website. A very common use of these is when you click inside a form field and the popover appears to give advice regarding what you could fill in the field. They are a very handy way of displaying information that isn’t useful to anyone who isn’t intending to interact with a specific element of your site.
How these can be used in modern websites
In modern websites there are any number of ways that the different types of popup could be used. A few examples include:
- Displaying adverts
- Cookie notification banners
- Membership login windows
- Confirmation before submitting a form
- Marketing popups when you are browsing a site for a period of time
- Newsletter signups
- Chat boxes
These are just a few examples of the many ways that popups can be used on a website.
When can these be used incorrectly
When used correctly, they are a powerful tool that can drastically improve the user experience for your website. On the other hand, abusing popups can be infuriating and has become a joke that often refers to virus-ridden computers or websites that contain unsafe content.
On any website, one of the main areas to avoid is the overuse of popups. There is nothing more frustrating than a popup that appears in the middle of an article and breaks your attention away from the reason you were there in the first place and then doesn’t make it easy to dismiss.
A common mistake is to have a popup of this kind that has no easily clickable button to dismiss or a way of dismissing without clicking a button. Often this occurs when a popup is created and designed on a desktop computer with a mouse and not tested for proper functionality on a mobile device where the button ends up too small to interact with.