Let the Dialog box buttons indicate their action

When creating a dialog box for our users to interact with. It is easy to just slap the default ok/cancel, yes/no action button as the default solution for an app or game that needs to obtain the correct necessary action from the user.

Dialogs should be used sparingly as they cause an interruption to the user experience, when presenting a dialog box it helps to use a verb which describes the action that will happen as a result of the user pressing the button.

Image courtesy of google chrome

green checkThe above image shows a dialog box with what I think is the best example of this technique. This dialog box appeared after trying to close a tab in the chrome web browser. Even if you did not read the message you know with just a glance what this dialog box is asking for.

 

This dialog fails to describe the result of its confirm action in the action buttons text, and requires us to read the dialog message description.
Image Courtesy of google material guidelines

green checkThis dialog box shows a clearly defined verb which describes the action about to occur.

 

image courtesy of google material guide

Providing a third option that takes us away from the question being asked creates an ambiguous situation. What happens when we click Learn More? How will we get back? Has the dialog box been programmed correctly so it will remain there until we return, or will the user need to restart their app?

 

 

More Info on this topic is available from the google material guidelines.

Comments are closed.