Should flash messages fade out or contain a close button or stay forever?

Question

Note: By flash message, I do not mean Adobe Flash, but messages that should be displayed on completion of an action.

I am designing a web application and messages will be displayed after a certain action.

There are 2 scenarios where this will happen:

• User performs an action such as delete or create new user. After the action is performed, they get redirected to the main view (which in this case would be a list of all users) and a flash message is shown.

• User performs an action such as saving a blog post. After the action is performed, no redirection happens. The user remains on the same page, but a flash message is displayed.

The flash message is just a simple stylized div:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Problem: What should with the flash message?

• Should the message have a close button to be closed by the user manually?
• Should the message fade out automatically?
• Should the message just remain there permanently and be uncloseable?

Answer 1

Anything the user will take for granted should fade away.

For example:

• Message has been sent after clicking "send"
• Item has been deleted after clicking "delete"
• Contact has been added after clicking "add"

Items that should remain visible are mission only critical things like:

• Incoming call (someone is waiting for you on the other end and needs your response!)
• Message failed to send after clicking "send"
• Your entire hard drive is being erased in t-60 seconds, 59, 58, 57...

If the user assumes the task has been completed, fade it out. Only show it briefly to reassure them.

Answer 2

It's pretty conventional to have the flash message fade away, but I'm generally in favour of having it be user-dismissable (provided it also goes away after the next page load).

The reason is simple; timed events are only visible to people who are looking for them during the time their being shown. It also makes copy/pasting the flash message much harder (or even impossible).

If the message can be dismissed easily (as StackExchange does), the user can choose to ignore it, copy it, or close it. It's important that this shouldn't mean users need to close the message(s) for fear that they eventually stack up three hundred pixels high.

Answer 3

Another consideration is whether or not the message contains any information that the user must make note of. For example, if the message contains a confirmation number, you don't want the message to automatically disappear. You want the user to remove the message as an acknowledgement that s/he has seen (and possibly recorded) whatever information was presented.

Answer 4

As answered on Message Fade Timing, you have to consider the importance of the message. Is it something that the user can skip or is it important information?

Just a word about Flash. If you have any interest in reaching mobile users, Flash may not be the best choice. I would go with AJAX and depending my message importance, modal window can do the job. In that the case, this article may help you http://uxmovement.com/forms/modal-and-modeless-windows-best-practices/

Answer 5

Designing a fade-out or and auto-close of a message -- a form of "anticipating" behaviour -- is a greater challenge for your design and designers.

I would

1. start with just making it easy to dismiss, and not auto-close it
2. try get a feel for if it is needed make it auto-close, by letting users use it over time,
3. then, if needed, make it fade away

It all depends on the situation, and on how your users will end up using your system. You would decrease the risk of failure -- for example users finding it hard that things are "blinking" too fast or not grasping exactly what happened -- by choosing not to auto-close it.

Related question: Is it bad design to hide a form's success message after a short time?

Answer 6

After any action, if you think the notification message must grab the user's attention, then using a close button would be a good choice.

we could show an background highlighted for the newly added user's row in the users list page (if you are redirecting from the user registration form to users listing page).