Synonyms: dialog box
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.
Each dialog has the same construction:
The purpose of the title is to characterize the type of the message briefly and clearly.
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.
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.
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.
Just show information without disabling the interface and can be escaped.
Although we already discussed construction and specific states of dialogs, you can also use some hacks to upgrade this element in the interface:
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!