The Pinnacle

Stories and ideas from Big Blue Digital.

What are the benefits and drawbacks of modal popups?


Modal popups.

Love them or hate them, they are incredibly useful.

Unfortunately, we've all had a bad pop-up experience. And those 'don't leave us!' pop-ups? No thank you.

When used correctly modal pop-ups can,

  • improve the overall usability of a website

  • reduce load times and,

  • simplify the overall design.


First a quick introduction.

Modal pop-ups are windows within a website page that appear on top of the page content. They usually have an opaque background blurring out the items behind them. They are NOT the annoying pop-up ads that open new browser tabs.
 

Uses

Modals stay out of sight until they are triggered and are normally used to focus the user on a single call to action or to highlight information like an alert or notification.

Some examples where modal popups should be considered include,

  • Enquiry/contact forms

  • Lead generation/signup forms

  • Login/registration forms

  • Search forms

  • Alerts/notifications

  • Help/tips

  • Displaying full screen images & videos
     


Example: ALPMA's modal login form allows members to easily login from any page of the site.
 

Example: Warbah's modal entry screen allows or a task to be created within a project without having to leave the page.
 

Benefits

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 (i.e. how to not be annoying)

But it's not all good news.

Used incorrectly, modal popups can be 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 pop-up is being used for a signup form is that the pop-up 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 to detect 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)

Some systems make it easy for site owners to create pop-ups, while others require specialist development skills.

Ideally, the use of pop-ups should be guided by,

People often make an error of seeing something cool on one site, and jumping in and implementing it on their own without thinking about the how or why.

This is where a strong plan and digital strategy come into play. We've got stacks of resources here on The Pinnacle to help you on your way. Good luck.

Digital strategy consulting


 

« Go Back