Dialog - contextual

The contextual dialog is a practical tool for giving additional information when requested and needed, resulting in a clutter-free experience. It provides relevant details and important notifications, ensuring a streamlined user experience.

Interactive demo

This demo lets you preview the contextual dialog component and its variations.

Usage

Contextual dialogs offer helpful tips and extra information in a simple and non-intrusive way, helping users better understand and navigate the interface with a clutter free experience.

Principles

Contextual

Contextual dialogs are always connected to something else.

Valuable

Contextual dialogs should always provide users with more value to maintain a clutter-free design.

Helpful

Contextual dialogs should appear in response to a user task or an action, with relevant or contextual information.

Is the information necessary for a user to complete a task?

1. Yes - Keep it visible.
2. No - Put it in a Contextual dialog.

Content

Do

Hide less important information for a clutter free user experience.

Don't

Avoid hiding critical information in a Contextual dialog. Use interrupt dialogs instead.

When to use what

There are two different types of Contextual dialogs – Advanced and Simple.

Advanced (desktop)

The Advanced variant includes a supporting icon, label, text, and a call to action, providing comprehensive information and actionable options to users.

Advanced (mobile)

The mobile variant is optimized to fit better within the smaller viewport.

Simple (desktop)

The Simple variant offers essential and supported text in a clean and straightforward presentation, ensuring a seamless and uncluttered user experience.

Simple (mobile)

The mobile variant is optimized to fit better within the smaller viewport.

Closing the contextual dialog

Closing a contextual dialog efficiently is important for user experience. Here are two approaches based on the simplicity or advanced nature of the contextual dialog.

Tap/click outside to close

Easily close the contextual dialog by clicking outside. Ideal for basic information or simple interactions.

Click on call-to-action to close

Close the contextual dialog with a prominent call-to-action button. Suitable for complex interactions or important context.

Formatting

Anatomy

The Contextual dialog consist of essential components like the container, content, and optional elements for presenting information or capturing input.

Anatomy

A – Container
B – Icon
C – Titel
D – Message
E – Button
F – Arrow

Dialog and context

A – The dialog
B – The context (example an ‘Icon Button’.)

Important to maintain 6 px space between context and dialog for clarity.

Placement

Based on user position

The placement of the Contextual dialog can vary based on its relation to the context. It can appear either above or below the content, depending on the position of the user within the page.

Elevation

Contextual dialogs are displayed at 24dp elevation and display a shadow. They appear above other content.

Behaviour

Scaling and adaption

When scaling layouts for larger screens, a contextual dialog’s visual presentation is adjusted.

The width of the contextual dialog should not exceed 560 px. Contextual dialogs should always maintain a distance of 24 px to each side of the screen (top, bottom, left and right).

If the content of a contextual dialog exceeds available space, consider using another component more suited to fulfill the user's needs

Max width (desktop)

Contextual dialogs can reach a maximum width of 560 px on large screens.

Min width (desktop)

Contextual dialogs maintain a minimum distance of 24 px on each side of the screen in desktop views and 12 px in mobile views.

Mobile

Contextual dialogs have a fixed width of 296 px on smaller screens.

Margins

Contextual dialogs maintain a minimum distance of 24 px on each side of the screen in desktop views and 12 px in mobile views.

Example of proper usage

In the example below, we have the contextual dialog used with an Icons menu to provide additional information about Joker. This approach avoids overwhelming the user with excessive visible content and allows the more important actions to remain prominent and easily accessible

Hiding details for simplicity