Dialogs are instrumental in interactions with the interface. When you design and place them right, it enhances user experience on-site. It makes interactions faster and easier. On the flip side, wrongly done dialogs can frustrate users. Knowing the do's and don'ts of dialog design is the key to address user experience issues. Before getting in on UX principles of dialog design, let's look at what exactly is a dialog.
A dialog is an overlay that elicits a response from the users. It prompts users to interact with the interface. Ideally, it should inform users of critical information. Users need to make decisions involving multiple tasks. Usage of the dialogs is on the rise in both web and mobile platforms. It comes handy in directing users' attention to a specific task, without moving them away from the current screen.
UX rules for dialog design
- Keep it simple:
The key UX principle is to keep it simple. The user interaction has to be quick and easy throughout. You should strive for minimalism, especially in dialog design. However, minimalism doesn't mean limited in any way. You just have to ensure every bit of information is relevant and valuable.
Keep the number of elements and options to a bare minimum. An important rule is that your dialog shouldn't appear partially on screen. The need to scroll on dialog content ruins the user experience. Use simple and smart dialogs that get all the essential information from the user.
- Be consistent with overall design:
Consistency is the key to the proper usage of dialogs. When a dialog is opened, the background should be slightly darkened to draw attention to the dialog area. Use the right amount of tinting for people to notice the page is inactive while keeping it clear. In addition, present a clear 'close' option on dialogs. Similarly, avoid dialogs that launch additional dialogs.
- Use dialogs sparingly:
Be honest; dialogs are interruptive. They forcibly stop users from what they are doing and make them focus on dialog content. Users are no longer able to access the page without dealing with the dialog. When there is a need to confirm an important action, dialogs serve you right. Use dialogs only in situations where the cost of error is too high or where the process needs acknowledgment. In addition, opening a dialog without any suitable action from the user is a big no-no. There are sites that bombard visitors with subscribe boxes. Eventually, users avoid them like the plague.
- Select the right dialog type:
Dialogs are mainly of two types- modal and non-modal dialogs. Modal dialog is apt for situations, where discrete, blocking process is required. The surrounding text is not relevant to the action to be taken. It requires a clear-cut 'accept' or 'cancel' before closing it.
One cannot leave it in an unfinished state. Use it only for very important interactions such as account deletion or agreeing to terms and conditions. Moreover, mobile dialogs are always modal, which should hence contain the title, content, and actions in it.
Dialogs, on the other hand, can be easily dismissed. A click or tap outside the dialog area can close it. Use non-modal dialogs when you want to allow for reversibility of actions. Using them smartly can boost user experience on-site.
- Speak the user's language:
Give clearer questions and options to the user. Avoid ambiguities like 'Are you sure', 'Warning', etc. Dialogs should be clear questions like 'Delete these files permanently?', 'Cancel your subscription?' etc. Simply put, dialog should be more of a statement than apologies or suggestions.
When presenting options, use actionable words. A simple 'Yes' or 'No' adds to the confusion. For a question like 'Discard draft?, use options like 'cancel' and 'discard'. A simple 'Yes' or 'No' asks for more mental processing from the user. Pay attention to every tiny detail if you want to ace the UX game.