Examples of dialog UX concepts? [closed]

Question

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

Answer 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

^{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.

^{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.

^{download bmml source}

Mockup of "complex dialog"

^{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/