Written by Noah Britton on 07/05/2020

Fun fact: the pop-up windows you encounter on websites have an actual name. They’re called modal windows, and all reputable web designers know there is a right way and a wrong way to use them.

Everything you need to know about modal windows.

What are Modal Windows

What are modal windows?

The term “modal window” refers to any box that pops up and interrupts an action you are attempting to complete.

When you’re browsing your favorite news or entertainment site, the window that pops up to invite you to subscribe to the newsletter is a modal window. When you go to leave an e-commerce site with items still in your cart, the window that lets you know you’re leaving without checking out is a modal window. When you go to exit a service website, the window that pops up to remind you to call or email the business is a modal window.

Modal windows are also the windows that pop out of browsers when you click on a video or image to help you see it better. They are the windows that pop up when you try to exit programs without saving your work. They are the windows that pop up in your tax filing program asking you if any information has changed or if they can populate your address and demographic info from last year’s tax submission.

Modal windows can be used in many different situations and in many different ways to enhance user experience.

The wrong way to use modal windows.

the wrong way to use modal windows

As useful as modal windows can be to business owners and website designers, it’s important to remember a few things about them.

1. They can frustrate users.

Too many modal windows, or modal windows that are placed non-intuitively, can frustrate your website visitors. Many people are preprogrammed to hit cancel or close the window without reading the information, especially if they have encountered them on your website before and think they know what they say.

2. They can cause users to forget what they were doing before the window appeared.

This is another reason you should use modal windows sparingly. Research shows that the disruption caused by the pop-up can overload users’ cognitive load, meaning they forget why they were on that page in the first place.

3. They can confuse users.

If your modal window isn’t in line with your website’s branding and it looks like it doesn’t belong with the rest of your page, users may be inclined to think it’s spam or a virus, prompting them to close the modal window and your website, while losing trust in your business.

Related: What Is A Lightbox?

The right way to use modal windows.

the right way to use modal windows

Modal windows can also be incredibly useful to you AND your website visitors if they are used in ways designed to enhance the user experience. For instance:

1. Getting your user’s attention.

Bringing attention to the fact that the user has requested to do an action that doesn’t make sense is a great way to use modal windows. Who hasn’t accidentally closed a browser with a sale item we REALLY wanted or closed a program that had hours worth of unsaved work in it? Modal windows can be used to draw attention to actions that seem illogical based on the user’s actions.

Bonus: How JavaScript is used in web design

2. Getting input from your users.

Modal windows to collect user information are great, as are modal windows used to collect login information. They can save valuable webpage space and are more convenient for users.

However, this isn’t true for mobile websites where a separate login page is probably the way to go as modal windows can be difficult to navigate on a mobile device.

3. Making the user’s experience easier.

Modal windows can help you collect information from your users that can help them shortcut what could be a long process. For example, you could use a modal window to present a short survey that will direct your users to exactly the product or service offering they need. Or you could use a modal window to ask if they want to use the information they have saved in your system previously when filling out a form.

Keep Reading: What Is Padding In Web Design?

Final word.

Like everything in web design, modal windows can be useful tools that enhance your user’s experience if used well. If used poorly, they can frustrate your users and drive them to your competition. Make sure you are following best practices when incorporating modal windows into your design and you won’t be sorry.

Thrive Design is a customer-centric web design agency and marketing agency from Seattle. Contact us to find out how we can elevate your business online! Find us on Clutch, UpCityLinkedInFacebookTwitterInstagram, and Pinterest.

Noah Britton

Noah Britton is the founder of Thrive with 18 years of experience in the web industry and 10 years with WordPress.

If you'd like to position your company as authority (online), generate more leads, and close more sales take a look at our Authority & Amplify Strategy.