Components – legacy
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?
- Yes - Keep it visible.
- No - Put it in a Contextual dialog.
Content
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
