0

I want to design an easy-to-use set of dialogs for my users to get notified of anything & possibly interact with my app via those dialog boxes.

A "Dialog box" is also known as "Popup", "Confirmation box", "Alert", "Prompt", "Notification" & more.

As for this other question on login forms, I have been looking for mockups as a first phase, but I have found more fully designed & live examples. It's great but I'd like to have mockups in order to abstract away any complexity or distraction.

I expected to find more resources on mockups of dialogs since it's such a recurrent component: it's on almost every website/web-app. So let's try to help solve this, that'd be great if you can share your creations here or link to relevant web page(s).

closed as primarily opinion-based by Andrew Martin, Mayo, JohnGB May 4 '16 at 11:24

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

1

Common requirements:

I have identified common requirements/patterns for the "dialog" concepts I came across.

  1. OK and Cancel buttons
  2. Close icon in top-right corner (same action as "cancel"?)
  3. Hitting "escape" closes the prompt (same action as "cancel"?)
  4. User can move popup around using drag n drop
  5. Confirmation dialog must be enforced
    • by ticking a checkbox
    • by typing text
    • by captcha-like process
    • etc..

Mockups

I have "translated" to mockups some of those fully designed & live examples mentioned in the question & added some of the concepts from the "common requirements" mentioned above.

Feel free to add your contribution in an additional answer. Thanks.

Mockups of basic dialogs

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Mockups of dialogs with "checkbox enforced confirmations"

Enforced confirmation means that the user do an additional action - tick a checkbox in this case - to reach the next step.

mockup

download bmml source

Mockups of dialogs with "text-box enforced confirmations"

Enforced confirmation means that the user do an additional action - by entering text in a text-box in this case - to reach the next step.

mockup

download bmml source

Mockup of "complex dialog"

mockup

download bmml source


Related

https://github.com/hubspot/vex

http://codepen.io/cupofjoakim/pen/wEkag

http://codepen.io/matthewbeta/pen/rwhyo

http://codepen.io/adventuresinmissions/pen/nrhHF

http://codepen.io/nodws/pen/vELwJz

http://codepen.io/kushalpandya/pen/qhzwA

http://tympanus.net/Development/DialogEffects/

http://tympanus.net/Development/ModalWindowEffects/

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