Modal’s get a bad press and that’s largely down to the way in which designers use them, but they are in fact a useful and effective UI component, not forgetting what impact a well-designed modal can have on conversion – however not used correctly they can infuriate users, we’ve all been subjected to that modal you just can’t seem to exit.
As a UX designer, this type of dark pattern simply annoys me, as does hearing the words “just stick it in a modal” so by writing this article I hope to make you aware of their purpose when you should use them and provide you with some useful design considerations, not just because it’s a quick fix or it means fewer amends to your page layout. Instead, I want you to consider its purpose and ask yourself; does it make sense in the user journey? Does it improve the user experience? Is the purpose of the modal a self-contained action?
What is a modal?
So, let’s start by clearing up what a modal is? A modal is a UI element that displays in front of and deactivates all other (parent) page content. The user must engage with the modal to get back to the page, typically by performing a specific action such as filling out a form, acknowledging a message, clicking the close icon, etc.
Simply put, a modal requires the user to focus on one self-contained task before continuing.
What a modal isn’t…
Elements that don’t disable the parent window such as a sidebar, a dropdown menu, or a notification, often referred to as a nonmodal window, these still allow users to interact with the parent elements on the page and are less obtrusive, the user can ignore and engage with these at their leisure, so these are considered less invasive.
Now the tricky bit, where should I use a modal?
Many moons ago as a junior designer, I was certainly guilty of ‘sticking things in a modal’ without really understanding what impact that would have on the overall flow and user experience of a product, thankfully these days I’m much better educated so I tend to make more informed design decisions based on the users’ requirements.
There are many reasons for using a modal, naturally, this depends on what it is we are asking of the user. For example, are we alerting the user to a problem that requires their urgent attention? Are we onboarding a new user? Are we presenting the user with a lightbox interface for viewing and navigating videos and images in a media gallery? Are we asking the user to confirm their recent action? It’s generally the designer’s responsibility to decide whether a modal should be used or not, is it a self-contained action or is it part of the user journey and general exploration of the product?
Within the Hark Platform, we have specific actions that lend themselves to using a modal, in our Energy module we surface energy data and the primary user journey and user interface is tailored towards navigating to and exploring that data but along that journey we allow users to perform actions such as ‘upload’, this is a self-contained task with a clear start and end which requires concentration and accurate data input so a modal is a suitable way of allowing the user to perform this action without distraction.
Ensuring that modals don’t interrupt the user’s workflow will significantly increase the way in which the user feels about your product, timing is everything. Interrupting a user’s workflow with something out of context, means the user must interpret the information presented requiring more cognitive effort which can often be frustrating unless they are relevant or helpful to the current task.
Modals are often used to break down complicated processes by displaying the different steps in a series of modal windows. This allows the user to focus on one task at a time rather than overwhelming them with one large process upfront. However, care needs to be taken to ensure this doesn’t become exhaustive, and, if possible, auto-complete information you already have and clearly indicate progress.
Best practices when it comes to designing modals?
- Ensure the modal can be exited, simple elements such as a cancel button, close button or by clicking the background allow the user control.
- Ensure the title and content of the modal is descriptive of the intended action so the user is clear on what is expected of them to proceed.
- Allow users to easily identify a modal, on desktop this is easier as you can display a background overlay but on mobile interfaces these are likely to be full-screen.
- Ensure modals are user-initiated so they don’t surprise users unless it’s an important alert or notice e.g. Updated terms and conditions, completion of an asynchronous action/request.
- Consider the size of the modal, too much content within a modal makes you question whether it should in fact be a in a modal, would a page be better?
In general, modals which are used appropriately are helpful and have a positive effect on the user experience of your product, despite the criticism they receive we recommend using them when you need the user to focus on a specific action, they streamline their workflow allowing them to focus on a single task. They are disruptive by nature but used sparingly or at least when they are user initiated, they can elevate your product.
