Wise Design - Modal

Modal

A modal is an overlay that interrupts the user’s task to show an important message, disabling the rest of the screen.

When to use

Use a modal:

when the user needs to continue a secondary part of a flow or task, where it’s important for the them not to lose context
if you need to show important content that the user needs to interact with before they can continue

Don't use a modal:

for actions or tasks that need to be perfomed quickly (as they risrupt the main journey and disable the rest of the screen until the user acts)
if you can display the content in a less intrusive way within a screen as part of the main flow (a bottom sheet could be a good alternative for short amounts of content on mobile)

Best practice

Make the relationship between the modal and the previous screen clear.
Keep the content of the modal succinct — you have limited space overall, and the information in a modal should be aiming to achieve a goal.

Don't display a modal on top of another modal (either add the extra information to the existing modal content, or direct users to a new screen).

Placement

A modal is a type of overlay that appears on top of the main content on the screen. It’s centred on the screen and sits above a dimmer.

The dimmer is used to focus the user's attention on the modal content, so that the user needs to interact with it before they can progress.

Width and height

Modals have a fixed width of 540px on desktop. The height of a modal automatically adjusts to its contents, until it reaches a maximum height of 800px.

Safe zone

There’s a 80 pixel safe zone at the top and bottom of the screen if the modal occupies a big space. This is to reassure users that they are still within the original context, and gives them another way to dismiss.

Interaction

The height of the modal automatically adjusts to the content inside it. But if the content is longer than the maximum height that the modal can expand to, it will overflow and become scrollable.

Accessibility

Users can dismiss the modal modal in 3 different ways:

using the close button
clicking on the dimmed background
using the escape key

Despite this, never remove the close button on the top. Users will need to find a clear and visible way to dismiss the modal, and get back to their original context.

Avoid using modals too much. They block the screen, have limited space, and demand more attention and focus from the user.

Content

You can use modals for many different purposes, so the content within them may vary. But there are some general guidelines you should follow.

Title

Title copy should:

be just a few words
put the most important words first
summarise or introduce the content it relates to (imagine the user only reads the title)
be a statement rather than a question (unless the content is asking the user something)
be in sentence case (only capitalise the first letter of the first word)
have no full stop

A modal with a short and succinct title.

If the modal is asking the user to confirm an action, then the title may make more sense as a question.

But the same rule applies to questions — be concise and front-load the most important words.

A modal with a long question as the title.

Main content

Warnings

With modals that are warning the user — where the action is destructive or irreversible — include vital information in the title and action, and not just in the main content. This is because users might skip the main content and only read the title and the action.

Actions

If you're using a button for the modal action, the button copy should:

summarise the purpose of the modal — if the user skips the title and the main content, the button should be enough for them to understand what they are about to do
describe the action in as few words as possible — ideally one or two
start with a strong, imperative verb, like 'Pay', 'Send' or 'Log in'
connect to the rest of the copy in the modal — for example, with a primary button it can be good to use the same verb that's in the title
avoid using first person pronouns like 'me', 'my' and 'I'
be in sentence case — only capitalise the first letter of the first word
have no full stop

If you have two buttons on a modal, be careful that the copy doesn't confuse the user. It should be competely clear what each button does. A user shouldn't have to second guess what the result of their actions will be.

An example would be if the modal is asking the user to confirm a cancellation.

A modal where the action makes it clear what will happen next.

Here, the primary button uses the same language as the title, and makes it clear what will happen if the user selects that button. And the secondary button (which closes the modal) uses different language to the title and the main action.

A modal with two buttons, where it's not clear what each action will do.

Here, the secondary button (which closes the modal) uses the same language as the title and main action of the modal. This is confusing, as it's not clear whether the secondary button confirms the action and cancels the Direct Debit, or cancels the action and closes the modal.

Availability

Platform	Available	Developer documentation
Web		Web documentation