Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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?
share|improve this question
    
Just to clarify. Are you talking about Adobe Flash or are you referring to 'flash messages' as pointed out by Kit Grose? –  Daniel May 28 '12 at 2:25
    
@phpdev Would it be fair to just call these "falsh" messages simply "notifications"? –  GotDibbs May 28 '12 at 4:36
    
I guess its possible to just call them notifications, but there are also other types of notifications (for example "growl" notifications and so on), so I guess Flash Message is just more specific. –  F21 May 28 '12 at 4:52
    
When the flash "messages" aren't user closable (which is more often than not the case), I use browser extensions to close them and sometimes even to prevent them from ever reopening in future visits. –  Danny Varod Jun 29 '12 at 21:50
add comment

7 Answers

up vote 21 down vote accepted

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.

share|improve this answer
    
An important consideration with a fading message is to force the space in which the message appears, otherwise you will end up with users who are just about to interact with another part of the page when it all shifts to fill the space left by the fading message! –  ColinSharpe Nov 21 '13 at 10:42
add comment

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.

share|improve this answer
add comment

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/

share|improve this answer
    
Unless I'm mistaken, phpdev wasn't referring to Adobe Flash when he mentions "flash messages"; it's a term for those temporary messages letting you know that your action was successful or not. If you're also referring to those messages, do you have a link to explain why that's not a good option for mobile users? –  Kit Grose May 28 '12 at 1:31
    
Sorry for any misperception. Anyway, just to be sure I will add a comment to @phpdev clarify that for us. news.bbc.co.uk/2/hi/programmes/click_online/9636753.stm and mashable.com/2011/11/09/… –  Daniel May 28 '12 at 2:19
    
Ah, you are referring to Adobe Flash. I believe he's referring to these sorts of flash messages. Hopefully @phpdev can clarify. –  Kit Grose May 28 '12 at 2:43
    
I am not talking about adobe flash but "flash messages" as @KitGrose said :) –  F21 May 28 '12 at 2:57
add comment

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.

A screenshot of how StackExchange flash messages appear

share|improve this answer
add comment

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?

share|improve this answer
add comment

I think the appropriate solution involves more than one method for dismissing notifications. In Windows XP, notifications fade after a few seconds but also provide a close button should the user chose to dismiss the message immediately.

If the message is very important, focus on making the notification more visible rather than harder to get rid of. Some users feel distracted by notifications, so providing close functionality is important. At the same time, other users don't want to be bothered with having to close every notification, so fading is also important. By providing both of these functionalities you will accommodate the majority if not all users.

share|improve this answer
add comment

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

share|improve this answer
    
I don't see the correlation between 'grab the users attention' and 'using a close button'. Why would a close button be a good choice here? Do you have any reasoning for this? –  JonW May 28 '12 at 7:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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