5 Essential UX Rules For Dialog Design

26/10/2023, 18:21 5 Essential UX Rules for Dialog Design | by Nick Babich | UX Planet
Design: Cesar Zeppini
5 Essential UX Rules for Dialog Design

by Nick Babich
Nick Babich · Follow

Published in UX Planet
7 min read · Mar 18, 2016
Listen Share More
Dialogs are effective user interface element when you design and use them right.
They can help your users complete reach their goals faster and easier. But dialogs
can frustrate users when they’re done wrong. Knowing how to design dialogs will
allow you to use them in a way that doesn’t annoy your users.
What is Dialog?
A dialog is an overlay that requires the user to interact with it and designed to elicit a
response from the user. Dialogs inform users about critical information, require
users to make decisions, or involve multiple tasks. Within apps, on the web and even
on mobile dialogs are increasingly used to direct the user’s attention to a specific
task, without taking them away from the context of the current screen.
https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116 1/22
Session expiration dialog.
Now let’s overview dialog design best practices and use cases for them.
1. Reduce Interruption
Use dialogs sparingly because they are interruptive. Their sudden appearance forces
users to stop their current task and focus on the dialog content. For modal dialogs,
users have to deal with a in-dialog action before continuing and are no longer able
to access the page below. Sometimes this is a good thing, such as when users must
confirm an important action (such as “Do you want to delete your account?”), but for
many tasks it’s unnecessary and quite often it’s very annoying.
Requiring Acknowledgement
It makes most sense to use a dialog in situations where you need the user to interact
before continuing, or when the cost of an error could be very high.
Requiring acknowledgement, that inform the user about a situation.
Don’t Suddenly Open Dialogs

Suddenly opening a dialog without the user having done anything is a very bad idea.
Unfortunately, many websites bombard visitors with subscribe boxes like example
below.
Such dialogs create countless issues for users without keyboards.
A dialog should always open upon the user doing (or did) something on a page. That
something might be clicking a button, following a link or selecting an option.
Takeaways
Not everything warrants interruption.
Alternatives to dialogs are inline expansion, that help maintain the current context.
Don’t just pop dialogs up. Make dialog appearance predictable for the user.
2. Match Between Dialog and The Real World

Dialog should speak the users’ language (use words, phrases and concepts familiar
to the user), rather than special system terms.
Clear Question and Options

You should write questions using clear language. For example, when you ask users
to delete her files, instead of saying “Free your storage?” ask “Do you want to delete
your files?” In general, you should avoid apologies, ambiguity, or questions, such as
“Warning!” or “Are you sure?” because they introduce extra visual clutter.
Left dialog poses an ambiguous question and its scope of impact is unclear. Right dialog poses a specific
question, describes impact for the user and provides clear actions.
Avoid presenting users with ambiguous or unclear options. You should use only clear
options. In most cases users should be able to understand the choices based on the
title and button text alone.
Bad example: In this example, dismissive action text “No” answers the question, but
does not suggest what will happen afterwards.
System dialog in Android. Source: Material Design.
Good example: The affirmative action text “Discard” clearly indicates the outcome
of the decision.
System dialog in Android. Source: Material Design.
Provide Important Information

It’s important that a dialog doesn’t obscure information that might be useful for users.
For example, a dialog asking users to confirm the deletion of some items should list
the items being deleted.
This dialog concisely elaborates on its impact.
Also avoid using a “Learn more” action to access help documentation; in-line
expansion within the dialog should be used instead. If more extensive information
is needed, provide it prior to entering the dialog.
Offer Informative Feedback
When a process is finished, remember to display a notification message (or visual
feedback). Let the user know that she has done all that’s needed.
Example of Success after making an action.
Takeaways
Use a clear question and options in dialog.
Design dialog to yield closure.
Notify the user after the action.
3. Strive For Minimalism

You shouldn’t try to cram too much into a dialog. Keep it clean and simple (follow the
KISS principle). But minimalist doesn’t mean limited. All information should be
valuable and relevant.
Number of Elements and Option

Dialogs should never appear partially on screen. You should’t use a dialog which
contains scrolling content.
Bad Example: Barclays Bank payment processing dialog has a lot of options and
elements, part of that options is available only using scrolling (especially for mobile
devices which usually have relatively small screen-estate).
Source: Barclays
Good Example: Stripe uses a simple and smart dialog with only essential information
which looks good both on a desktop and on a mobile screen.
Number of Action
Dialogs should not include more than two actions. A third action, such as “Learn more”
which typically used to navigate users away from the dialog, increase the risk of
leaving the task unfinished.
Open in app
Search
The “Learn more” action navigates away from this dialog, leaving it in an indeterminate state.
Don’t Include Multiple Steps in Dialog

Breaking a complex task into multiple steps is a great idea, but it’s also generally a
sign that something is too complex to ask users to complete within the confines of a
dialog.
If an interaction is complex enough to require multiple steps (like in example

below), then it’s complex enough to warrant its own page.
Dialog windows with multiple steps. Source: Dribbble.
Takeaways
Simplify dialogs by removing unnecessary elements or content that does not

support user tasks.
Try to avoid dialogs with multiple steps.
4. Select Proper Dialog Type

Dialogs come in two main types. First type are attention seeking modal dialogs which
force a user to interact with them before continuing. Modal dialog usually used for
discrete, blocking processes where:
The surrounding context is not needed in order to decide what actions to take.
Requires explicit ‘accept’ or ‘cancel’ action in order to close it. It does not close
when the area outside of it is clicked.
It is not acceptable for the user’s progress to be left in a partially finished state.
Second type is non-modal dialog which allow users to click or tap outside of them to
dismiss them.
You should use modal dialogs (the first type) only for very important interactions
(e.g. delete account, agree to the terms and conditions).
Modal dialog: User must confirm a delete action by actually typing delete.
Also mobile system (native) dialogs are modal and usually have following basic
elements — content, actions, and title.
Android modal dialog window.
5. Visual Consistency
Background Behind the Dialog
When opening an dialog it’s important that the page behind is slightly darkened.
This does two jobs. Firstly it draws attention to the overlay with a dialog and secondly
it lets the user know that the page isn’t currently active.
Android modal dialog.
But be careful with tinting. If you make it too dark users will no longer be able to see
page in background. If you make it too light users might think that the page is still
active and might not even notice the dialog in the first place.
Clear Close Option

There should be a close option for a dialog in the top right hand corner. Many of
dialogs have an ‘x’ button in the corner of the window that users use to exit the
window. However, this ‘x’ button is not an easy enough escape route for the average
user. It usually takes more time and effort to click the ‘x’ because it’s smaller in size
and the user has to spot and click (tap) it.
It’s a good idea to allow users to exit the non-modal window when they click the
background area outside of it.
Twitter uses both ‘x’ close option and click the background to exit.
Avoid Dialogs Launching Dialogs

Dialogs should avoid launching additional dialogs, as they add visual complexity.
Bad Example: Dialog within a dialog.
Takeaways
Allow users to click (or tap) away to close the dialog in most cases (except modal
dialogs).
Dialogs should avoid launching additional simple dialogs.
Conclusion
I hope these best practices were interesting and will be useful during prototyping.
Remember, User Experience is about humans, not about technology. It’s easy enough to
find out what’s best for your users and their tasks: mock up the leading dialogs, and
test them with a handful of users.
Thank you!
Follow UX Planet: Twitter | Facebook
References
10 guidelines to consider when using overlays / modals
Material Design Dialogs
Originally published at babich.biz
UX Design User Experience
Follow

5 Essential UX Rules For Dialog Design - by Nick Babich - UX Planet

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

5 Essential UX Rules For Dialog Design - by Nick Babich - UX Planet

Uploaded by

Copyright:

Available Formats

26/10/2023, 18:21 5 Essential UX Rules for Dialog Design | by Nick Babich | UX Planet

Design: Cesar Zeppini

Nick Babich · Follow

Listen Share More

Session expiration dialog.

Requiring acknowledgement, that inform the user about a situation.

Don’t Suddenly Open Dialogs

Such dialogs create countless issues for users without keyboards.

2. Match Between Dialog and The Real World

Clear Question and Options

System dialog in Android. Source: Material Design.

System dialog in Android. Source: Material Design.

Provide Important Information

This dialog concisely elaborates on its impact.

Example of Success after making an action.

Design dialog to yield closure.

Notify the user after the action.

3. Strive For Minimalism

Number of Elements and Option

Don’t Include Multiple Steps in Dialog

If an interaction is complex enough to require multiple steps (like in example

Dialog windows with multiple steps. Source: Dribbble.

Simplify dialogs by removing unnecessary elements or content that does not

Try to avoid dialogs with multiple steps.

4. Select Proper Dialog Type

Android modal dialog window.

Android modal dialog.

Clear Close Option

Avoid Dialogs Launching Dialogs

Bad Example: Dialog within a dialog.

Dialogs should avoid launching additional simple dialogs.

Follow UX Planet: Twitter | Facebook

Material Design Dialogs

Originally published at babich.biz

UX Design User Experience

You might also like