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.
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.
As useful as modal windows can be to business owners and website designers, it’s important to remember a few things about them.
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.
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.
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?
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:
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
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.
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?
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 and marketing agency from Seattle. Contact us today to find out how we can elevate your business online! Find us on Clutch, UpCity, LinkedIn, Facebook, and Twitter.
Category: Web design seattle
