We use dialogs to provide useful information (FYI, some people call these “modals”). For example, dialogs can:
- Give a more detailed explanation or definition
- Guide the user through a series of steps
- Ask the user to make a choice
- Confirm that an action took place
In short, dialogs allow us to show different levels of information. If a design feels too complex, you can simplify the initial view and provide more detail inside a dialog.
How to use dialogs
- Keep the text brief and factual. People tend to dismiss dialogs quickly, so get to the point.
- Provide clear actions. Buttons work best.
- Don’t annoy people. Dialogs are triggered by a user’s actions, so don’t show them arbitrarily.
- Don’t hide important info in a dialog.
<div class="dialog"> <div class="dialog-wrapper"> <div class="dialog-head"> <div class="dialog-heading">Example Heading</div> <a class="dialog-close"> <img alt="Close" class="icon iconic iconic-sm" data-src="opattern-icons/svg/smart/x-thin.svg" /> </a> </div> <div class="dialog-content"> <div class="dialog-body"> <p class="heading-display-small">Hello!</p> <p> This is an example dialog modal. Normally, it would never appear within the main flow of a page. But, you know, this is an example. </p> <p>What do you think?</p> </div> <div class="dialog-actions"> <div class="button-set"> <div class="button-wrapper"> <button class="primary button">Love It</button> </div> <div class="button-wrapper"> <button class="secondary button">Cancel</button> </div> </div> </div> </div> </div> </div>
Dialogs are designed to look like they’re floating above the main window. When opening the dialog, the user metaphorically takes a step backward in space. From their perspective, the main layer recedes and the dialog comes into focus. It’s important to keep the main layer in view so the user knows they can easily go back to what they were doing.
Make sure to use a consistent structure for dialogs, as shown here.
- Dialog heading
- Short, simple, and descriptive.
- Main message
- Keep it brief. If the text feels wordy or confusing, people are more likely to dismiss it right away.
- Prompt the user for a response, and provide a way to dismiss the dialog.
Explanation or definition
Ways to save
Your email was sent.Close
You’re doing great!
Help your friends and family become savers too.
It looks like you’re being more energy efficient.
Share this page to help others save money and energy.
Depending on what we need to communicate, we sometimes use a different dialog layout. Here are a few variations:
||Aligns the text in the dialog to the left, instead of the default centered.|
||Sets the dialog width to 30% of the viewport, or a minimum of
||Sets the dialog width to 80% of the viewport, or a maximum of
||Expands the dialog to fill the entire viewport.|
||The background of the header uses the success color.|
||The background of the header uses the alert color.|