Is it a good practice to have more than two actions in a dialog box? Please find the image attached. Thanks
Add a comment
|
3 Answers
From the Material HIG:
Dialogs should not include more than two actions. A third action, such as “Learn more,” navigates away from the dialog, potentially leaving the task unfinished.
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.
Note that the word "actions" here only refers to the final actions at the bottom of the dialog. The area above is referred to as content and may contain relevant actions (like choosing a date) as long as they don't navigate away.
As for what kinds of actions you should present at the bottom, it goes into that too:
Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.
- Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove.”
- Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process
Those are your "Assign" and "Cancel" buttons.
"Clear" belongs higher up, in the content area.
-
1"A third action, such as “Learn more,” navigates away from the dialog, potentially leaving the task unfinished." If the rule "only 2 actions" is based to that line only, it's simply wrong, it's easy to have 3 actions none of which navigates away from the dialog. Clear clears the list and stays in dialog, cancel and assign complete the task, for example.– BoatCommented Mar 13, 2018 at 7:52
-
That's true. Still, the Material HIG states "Dialogs should not include more than two actions." in general, so that's the rule to stick to if following MD. The advantage of sticking to just 2 actions max that I can see is that the bottom area ends up reserved only for actions that close the dialog. All other actions must be in the "content" area, thereby making it clear and consistent which buttons complete the dialog's action and which don't.– Tin ManCommented Mar 25, 2021 at 18:23
-
What about the typical "Yes/No/Cancel" dialogs? For example when I edit something and close the form without saving, I often get asked if I want to "Save", "Discard changes" or "Abort" (i.e. don't close the editor). All 3 actions are final actions for the dialog and none of them navigates away.– Robert PCommented Oct 9 at 9:36
-
@RobertP We're talking about standard modal dialogs here, not editors. The primary actions associated all navigate away from the dialog. An "Abort" action that doesn't close the dialog would not be a primary action in this case, and therefore shouldn't be in the bottom action area according to material guidelines.– Tin ManCommented Oct 10 at 14:39
-
1@RobertP It might seem like saving a click, but combining questions like this also makes the user think longer about the different options. That said, if you want to do it this way, there's nothing stopping you. The Material HIG is a list of guidelines, not requirements. And Google itself sometimes goes against its guidelines. (Not to mention the various Android OEMs, who often ignore the Material Guidelines in their apps entirely.)– Tin ManCommented Oct 16 at 10:05
A dialog may have more than two actions, there is no restriction/ guideline for just two. However, you must make sure that the user doesn't accidentally press an action. Generally, what you have to think is whether it is really important to have those three actions. Is it going to confuse users? Are they really going to find it useful and make use of it? If the user is able to un- tick the name by clicking it again, maybe it is not so necessary to include the "CLEAR" action...
its more how it's styled, it looks like clear, cancel and assign are all equal but I sense clear is a child action and should not be part of this interaction
