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