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).

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.