Modal popups, people either love them or hate them, when used correctly they can not only improve the overall usability of a website but also reduce load times and simplify the overall design.
First a quick introduction, modal popups are windows within a website page which display on top of the page content commonly with an opaque background blurring out the items behind it (they aren’t the annoying popup ads that open new browser tabs).
Modals stay out of sight until they are triggered and are normally used to focus on a single action or piece of information. Some examples where modal popups should be considered include:
- Enquiry/contact forms
- Lead generation/signup forms
- Login/registration forms
- Search forms
- Displaying full screen images & videos
When used correctly, modal popups can provide a number of benefits including:
Minimizing the overall site design by removing large elements until they are needed
- Reduce the overall number of pages required within a site
- Reduce the need to click between multiple pages by utilizing AJAX
- Simplifying the function/workflow of a site/application
- Allows more focus to be placed on content within a modal
- Increased turnover on lead generation/signup forms due to ease of use
CAVEATS (AND HOW TO AVOID THEM)
If used incorrectly, modal popups can be extremely detrimental to user experience and cause headaches for viewers of a site. Some care needs to be taken in the following situations when implementing modal popups:
Not providing an easily identifiable close function: always ensure that modal popups include at least a close button (or x icon) at the top of the window, some other methods could include closing the popup when a user clicks outside the modal or when the escape button is pressed.
Showing a signup modal everytime a page is loaded: one of the worst things that can happen when a modal popup is being used for a signup form is that the popup is shown to a user each and every time a page is loaded regardless whether they have previously signed up or closed the form (what a nightmare!). To prevent this from happening functionality should be put in place when implementing the popup which detects whether a user has previously performed an action on the signup form (submitted or closed) and prevent the popup from appearing (normally for a set amount of time – 48 hours, 7 days etc.).
Preventing access to all other page content: when used for things such as notifications, alerts or help it is not advisable for modal popups to fade out the page content and prevent access to it as the content within the modal will generally relate to the page itself. In these situations a few techniques should be considered:
- Not using an opaque backdrop
- Setting the modal to automatically fade out after a set amount of time
- Only triggering the modal when the user hovers over a specified element and fading out when moving away (“?” help icon for example)