What are some guidelines for designing a good pop up message for your webapp?

Question

I’m trying to build a guideline to refer to when creating alert/pop up messages

Are there any recommended "rules" as to:

1. The inner layout - Centering vs aligning the content of the message to the left/right?
2. Should my main action (button) be on the right or the left?
3. Is using an image/GIF encouraged, or forbidden? What should it contain? Just something to encourage me (a'lla Mailchimp) or only if it's relevant to the contents of the message
4. The amount of words it should contain, and the amount of words per line.

Anything else you could think of.

A great tip I heard is when writing the contents of your message, always try to start with the conclusion.

I really hope I wrote this question properly as I seemed to have really screwed up my first question in this amazing forum.

Answer 1

1) For this you need to consider the path of completion. Essentially you want the path of completion to be as straight-forward as possible, without the user having to look for what you want to do. Some examples from Luke Wroblewski:

Path to Completion - Before:

Path to Completion - After:

---

2) As with a lot of other examples (just as the examples above), have a look at Luke Wroblewski's great form examples for this. Essentially you want to ensure that the path to completion is clear and that the primary and secondary actions are clearly distinguished from each other, and that more focus is put on the primary action. As for button placement, follow the conventions of the device platform.

Example of Visual Distinction:

---

3) I wouldn't say it's forbidden to use an image or similar, but at the same time it shouldn't draw focus away from what you're trying to get the user to do. I guess it also depends on what you want the brand to convey (color schemes / mood / icons / graphics used... as in the case of e.g. MailChimp).

---

4) I'd say that the instructions should be as brief as possible, but at the same time not rude. Never blame the user. Provide clear instructions. Also, avoid Yes/No, OK/Cancel-buttons, but rather provide direct verbs instead. Always assume the users won't read the dialog text unless they have to.

Dialog Box - Before:

Dialog Box - After:

Answer 2

Assuming that you're talking about a modal dialog:

1. This is more personal preference. If you have a single line message, then centering can work. If it's multiple lines of text, then it's better to align things to the left to make readability easier. I don't think that there's a hard and fast answer other than it should be readable and pleasing to the eye.
2. A lot of people will tell you that you should put the more commonly used action to the left, followed by the less common options. Whatever order you choose to put them in, try to keep placement consistent between all of your dialogs so that a user who is accustomed to having a submit button on the left doesn't accidentally click cancel because you decided to arbitrarily mix things up.
3. This is context based. Why do you want to use an image? Does it help to communicate your message? Does it help the user to understand the dialog? Does it help to reinforce your brand and make the user smile? Mailchimp is very intentional about their use of imagery along with messaging, and is also very intentional about not using imagery when the user should be focused on a task.
4. Generally speaking, you should try to keep the messaging of an alert as clear and concise as possible, and be sure to use language appropriate for your audience. Deliver your message effectively and avoid long rambling text that no one will read.