1

Currently working on a design which will prompt a dialogue box with confirmation message. Just some background on the design, when user attempt to add or delete data from a grid, a dialogue box will appear warning the users that if they were to add or delete now, all changes made will get refreshed not unless if they save it first.

I am now looking for examples on how should I word my dialogue box. I've search for some examples from Microsoft but I doesn't seems to be quite fit. Is there anywhere I can search for better example and what should I need to focus on when designing the warning/confirmation dialogue box?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • You might consider avoiding confirmations, using "undo" instead. Clicking confirmation popups can get irritating, and people tend to click to dismiss the dialog without reading. – Ken Mohnkern Oct 17 '16 at 13:24
3

For an alert, the main elements and particularities are:

  • urgent character;
  • requiring user's attention;
  • inform about an event / a situation.

Design elements:

  • simple design;
  • an overlay can help the user focus on the question;

Material design example:

alert-material-design

Personal approach:

enter image description here

0

Taking a look at the Material Design - Dialogs might prove useful.

Some key points to pull out from that documentation:

  • Your buttons should be labeled with the action the user is performing by clicking the button.
  • The progressive action (typically the add/delete labeled button) is on the right, while the action to remain in the current state (typically a cancel button) is to the left of that. (I'm basing this off the documentation linked above, I don't want to start a holy war.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.