paint-brush
Let the Action Buttons in the Dialog Box Scream its Outcomeby@dineshbob10
14,172 reads
14,172 reads

Let the Action Buttons in the Dialog Box Scream its Outcome

by BobJanuary 7th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

We use Dialog boxes in our apps to inform the user about a situation and require acknowledgment. The naive action button pairs to use in the dialogs would be <strong>OK/Cancel</strong> and <strong>Yes/No</strong>. But can we do it better?

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Let the Action Buttons in the Dialog Box Scream its Outcome
Bob HackerNoon profile picture

Image Source: https://material.io/guidelines/components/dialogs.html#dialogs-alerts

We use Dialog boxes in our apps to inform the user about a situation and require acknowledgment. The naive action button pairs to use in the dialogs would be OK/Cancel and Yes/No. But can we do it better?

Let the Action Buttons in the Dialog Box scream its outcome

It will be a better user experience if the action buttons clearly indicate the outcome than using the generic labels (like OK/ Yes).

From the Material Design Guidelines,

The affirmative action text “Discard” clearly indicates the outcome of the decision.

The dismissive action text “No” answers the question, but does not suggest what will happen afterwards. A better action pair would be an explicit “Cancel” and “Delete.”

From an UX Planet article by the famous Nick Babich

A good dialog box isn’t just about asking users which action they want to perform. It’s also about making each option as clear as possible.

It’s often better to name a button to explain what it does than to use a generic label (like “OK”).

Use a verb whenever possible instead of ‘Yes’ or ‘OK’ because your buttons will make sense out of context with the explanatory text or title.

Never use ‘Yes’ or ‘OK’ when you could use a verb instead!

Let’s look at the ‘verb’ labels used in the Dialog boxes of some famous apps,

Screenshot from Google Photos Android app

Screenshot from Facebook Messenger Android app

Screenshot from Twitter Android app

Screenshot from Medium Android app

Screenshot from Gallery Android app

Screenshot from Google Keep Android app

Screenshot from Hangouts Android app

Screenshot from Google Fit Android app

Looks like the ‘verb’ labels are used in the Dialog boxes of almost all the apps, except a few ( *cough* Telegram *cough* Amazon ). Let’s implement this Dialog Box UX pattern and make our apps better for our users.

If you find this post useful, click the 💚 below, and don’t forget to share your thoughts in the comments.

To reach us in Twitter: Me | Hacker Noon