Dialogs

Each day users perform thousands of actions. Dialogs as an UX tool can whether simplify the user’s life or get it complicated – and that is when a qualified designer should step up.

We all know dialogs as overlays that require user response. It is a conversation between the system and the user which informs the user and forces to take action, brings attention to critical information and requires to make decisions without taking the user away from the context of the current screen.

‍

Structure

Each dialog has the same construction:

‍

Title

The purpose of the title is to characterize the type of the message briefly and clearly. 

‍

Content

Content consists of a message that describes the issue in a human language that the user will understand, probably without any specific system terms. Keep it short and user-friendly. The main goal here is to deliver the information and to get an action from the user. 

‍

Action Buttons

This leads us to action buttons. It is recommended to have only two possible action buttons in the dialog and one of them should always be “x”, “close” or “cancel”. Third action as “learn more” can navigate the user away from the dialog and leave the action not accomplished. Avoid using “yes/no” buttons as actions – that doesn’t have a clear message and it is always better to apply the action names instead.

Types of Dialogs

Modal Dialogs

Disable the current page content and oblige users to make an interaction to continue. They can be used only for very important issues (delete an account or document, agree to terms and conditions) and cannot be closed without making an action. 

‍

Non-modal Dialogs

Just show information without disabling the interface and can be escaped.

Hacks & Tips

Although we already discussed construction and specific states of dialogs, you can also use some hacks to upgrade this element in the interface:

1. Limit the number of dialogs unless it is absolutely necessary, use them sparingly – too many interruptions are bad. Sometimes it’s better to work with an inline expansion instead of a dialog.
2. Don’t forget about confirmation messages and visual feedback to indicate when the user action has been processed and complete.
3. Avoid multiple forms within one dialog. Sometimes it is better to create another page for this flow.
4. Don’t make your dialog too long and avoid using scrollbar. Keep it short and simple.
5. Background overlay is important. It brings attention to the dialog, allows the user to understand that he or she can go back to the screen afterwards. Be careful with tinting though, don’t make it too dark or too light. 
6. A dialog should always be predictable and be opened after the user did something on a page, not spontaneously.
7. If you need to insert “Learn more” information it is better to show it as an expansion inside the dialog, not as a link to the FAQ page, so the user’s attention won’t be distracted with another tab in the browser.

You’ve just read a lot about dialogs, but the main thing to remember is that the user experience is about humans, not about technology. You have an opportunity to improve your product so go ahead and use these tips to create another user-friendly interface!