BT.com Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Modals


A modal is a content box that is displayed on top of the main content, disabling the main content until an action has been taken. It is used to focus the user’s attention towards a sub-task without taking them away from the current screen. They can contain important information, require decisions and involve multiple tasks.

Modals are purposefully interruptive, so they should be used sparingly.




 

Use it when...

Conveying important warnings 


Modals can be used to warn the user and prevent or correct critical errors – for example, if there is a chance that their work may be lost, or that an action may have destructive or irreversible consequences.







 

Critical information is needed

When a user performs a task in which further steps are required before continuing, a modal can prompt the user for the required information. Examples include the BT service checker, as well as sign up or log in screens.







 

Simplifying complex workflows

A modal can help break up information or tasks into simpler, more digestible chunks. This helps to avoid overwhelming users with lots of information. Wizards are common instances of such a use of modal dialogs.

It’s important to use the smallest number of steps necessary and to give users a sense of their progress. This will avoid prolonging the time away from the main task, and protect against abandonment.






 


 

Requesting information that could significantly lessen user effort

Informs users when an action they’ve taken was successful. It’s intended to be immediate feedback and shouldn’t stay on screen.





Conveying additional information in context

Use a modal when you want to show additional information without losing the context of the parent page. Examples include showing more detailed information, images or videos.







 

Using the right modal for the task

There are two main types of modals:

The first is for seeking the user's attention to act on critical information, for example to delete an account. The user is not able to dismiss the modal, either by clicking/tapping on the scrim or using a ‘close’ button.

The second type is a non-modal dialog, which allows users to click/tap on the scrim or use the ‘close’ button to dismiss.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

How it behaves

Trigger


A user initiated call to action (CTA) triggers the modal.

Avoid opening modals unexpectedly, without user interaction. This can create a distracting and unpleasant experience for users. This can also result in critical information being quickly dismissed, as users have a tendency to dismiss modals as soon as they appear.

Instead, allow users to trigger the modal through clicking/tapping on the relevant CTA. This gives the user more control of the information at the time they need it.



 

Actions

Use a maximum of two CTAs per modal.

Affirmative actions should always be placed to the right of dismissive actions. This creates a logical flow, continuing progress towards the user’s goal.

Dismissive actions should return the user to the previous state.

If the modal requires the user to make a selection, disable affirmative actions until a choice is made.

Dismissive actions should never be disabled.


 

Close/dismiss/escape

Always provide a way for users to dismiss the modal. This can be:

  1. ‘Close’ or ‘X’ button (top right).
  2. ‘Cancel’ or ‘Close’ button at the end of the modal (optional).
  3. Click/tap outside of the modal window (scrim).
  4. ‘Escape’ key on the keyboard.



 

Browser ‘back’ button

When a modal is open and the user clicks on the browser back button, consider closing the modal instead of taking the user back to the previous page.

If used, make sure that when the modal is dismissed, it does not reappear when clicking/tapping on the back button again to go back to the previous page.



 

Browser scrollbar

If the content in the modal flows beyond the modal container, disable the browser scrollbar to prevent users from mistakenly scrolling the background page instead of the modal content.

Try to keep content short to avoid needing a scrollbar in the first place, including on mobile experiences.



 



 

Modal scrollbar

Enable a modal conditional scrollbar if content flows beyond the modal container.

Allow users to scroll the relevant content within the modal window height. Ensure that the user can always dismiss the modal with the sticky close button.

Scrolling behaviour should be consistent and work responsively across all devices.


Interruptions


Aim to minimise interruptions when users are deeply immersed.

Only present modals/overlays during times when users are less likely to be immersed
in a task – for example, after launching an app on the introduction page, or when they
are about to leave the site.

 

Helpful functionality

Help users to quickly recover their data if they accidentally close the modal by saving their data when reactivating the modal (for example, with form related content).

When using a modal to confirm a user action, consider offering users a ‘Don’t ask me this again’ option if it is an action they need to repeat many times.

Layout

Placement

The modal should appear directly in the user’s line of sight, centred in the middle of the viewport according to the browser height and width. As the page is resized, the modal will adjust responsively to remain in the centre. It’s also good practice to ensure that underlying content is still visible.

 

Scrim (dark background)

Use a scrim (dark background) when a modal is displayed to shift the user’s attention on to the modal. It also indicates to the user that they cannot interact with page content. The scrim is a 70% opacity black background layer.




Sizing

Modal content area


Padding from the edge of the modal window is as follows.

320bp: Padding T40px R10px L10px B20px

600bp and above: Padding T40px R20px L20px B20px

Modal widths

Modals are fluid responsively, but can be set to one of three maximum widths to
suit appropriate content. 

  1. Max width 400px
  2. Max width 800px
  3. Max width 1200px

 

Responsive modal behaviour


Modal heights


Content dictates the height of the modal. However, the modal window is always centred vertically and horizontally within the viewport.

 

Modal outside margins

Modals are never full screen. There is always a margin around the outside to show page content and give context.

320bp: Minimum margin 10px

600+bp: Minimum margin 20px




Modal corners


The modal window has a corner radius of 5px.



Close icon

The close icon is 15 x 15px, with a margin of 10px all round, giving it a hit area of 35 x 35px for touch screens. The hover/hit states are the same as the values for the BT Purple hyperlinks (see buttons and links).


 

Content and Copy

Titles

Always provide the user with a title, which should be a clear question or statement.

This allows the user to know where they are or what they are doing as they haven’t left the original page.

This should also relate to a clearly labelled CTA

 


 

Main content

Only use the necessary amount of content needed for your task. Keep content short, simple and focused to avoid users losing sight of the task.

Always include important information that might be useful for the user, such as prices, dates or lists.

If you find yourself putting too much content in the modal, then consider using an individual page instead.

 

 

 


 

CTA labelling

Only use the necessary amount of content needed for your task. Keep content short, simple and focused to avoid users losing sight of the task.

Always include important information that might be useful for the user, such as prices, dates or lists.

If you find yourself putting too much content in the modal, then consider using an individual page instead.




Accessibility

Ensure the focus is on and trapped within the modal when it's displayed for keyboard readiness.


‘Tab’ key

The ‘tab’ key should move the focus to different elements within the modal only.

Up/down arrow keys

The arrow keys should scroll the content if it flows over the modal container (scrollbar enabled).

‘Escape’ key

The escape key should close the modal.

Mobile

Ensure modals are optimised for mobile by thinking carefully about the modal’s size and legibility.























 

Other considerations

Google ranking guidelines


Bear Google’s guidance in mind when designing modals for mobile experiences. Google guidelines recommend:

1. Interstitials that appear to be in response to a legal obligation, such as for cookie usage or for age verification.

2. Login dialogs on sites where content is not publicly indexable. For example, this would include private content such as email or unindexable content that is behind a paywall.

3. Banners that use a reasonable amount of screen space and are easily dismissible. For example, the app install banners provided by Safari and Chrome are examples of banners that use a reasonable amount of screen space.

(Reference: https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html)



 

 

Changelog


1.0.1



1.0.0