Is this a good way of attracting a user's attention to a message?

Question

I need to draw my users' attention to a warning message, alerting them to a problem and giving guidance of what they need to do next. The message does not appear on a popup box, since that would mean an extra click (and besides, everyone hates popups.). It just sits at the top of the page in red font.

The trouble is, users are not noticing it, since their eyes are looking lower down the page.

My solution has been to show the message in much large font in the middle of the screen, and then shrink it down to its regular size and position.

Do you think this is a suitable solution?

Answer 1

I would suggest using a standardised notification at the top of every page. That way you can show any notification you like, or nothing (most of the time). It has become widely used, and you can design it to be very noticeable if you wish.

Some examples:

Answer 2

Often if you need to need a big error message because the user can't see what to do then there is a problem with the interface its self.

If the user needs to select an application then the applications need to look like they can be selected. Avoid a visual representation that looks like a standard table and has some form of select-ability - if it's multiple items then checkboxes are a boring but good solution.

Grey out any next step buttons until the user has selected something.

Otherwise explore alternative presentations - ask here again for good suggestions.

Answer 3

No, you should move an animation alert to the edge of a screen.

Humans' eyes can detect moving object on the edge of eyesight, because the resolution of edge of eyes is low. Therefore, your solution will be good, if you move an alert to the edge of a screen.

I like Noty which is similar to a notification in Mac OS.

http://needim.github.com/noty/

Answer 4

I would suggest: * A toaster popup with standardized, learnable icons if you don't want to do a non-modal dialog. * Having the message close to the point of issue helps too. For example, if it's related to an editable field, then make it appear close to that. If it's on a table row, then an icon on the table row, etc. * Make the message appear on the result of an action performed by users. * I would also remove the word Please. Just tell them what to do (though that doesn't help with noticeability).

As an important aside, it could be an opportunity to examine why users need a message too (e.g., can selecting a vehicle be a required choice somewhere in the flow*.

(See 1 and 2: http://www.slideshare.net/uobroin/oracle-adf-uxeffectivemessages)

Answer 5

Instead of using huge fancy warning text, you may use vibration effect on this. It is much more effective in terms of usability and human nature. Also using such big fonts may distract people.

jQuery UI has this effect in its library so you may consider to use this. http://docs.jquery.com/UI/Effects/Shake

Answer 6

I would recommend a soft fade in that happens a few milliseconds after the complete page load (ex: 200ms).

Answer 7

One big problem is that the animation disrupts the process it's asking users to do and there's no intuitive way of stopping it.

It's eerily similar to scene from a movie I haven't fully written yet, so we pick it up from the middle-end of scene 3, where we view a user doing various important tasks...

..

user:  Hey, there's an application just waiting to be selected!  I think I'll select it!

    (user goes to select the application, but supermessage flies in front of him and 
        blocks his path)

supermessage:  PLEASE SELECT AN APPLICATION!
man 1:  It's a bird!
man 2:  It's a plane!
litte girl:  No, it's SUPERMESSAGE!  (takes a lick of her ice-cream cone)

    (a few seconds of awkward silence pass while user stares at supermessage)

user:  Um...supermessage, can you please move, I'm trying to select an application here?  
  kthxbye

supermessage:  (fading into the distance...)
        ...please select an application!
                               ...please select an application!
                                                         ...please select an application!

    (user selects an application.  Meanwhile, audience applauds, laughs, and cries)

..

The moral of this scene is that I'd rather have a standardized notification than this, either as a modal for "AHA!" messages, or in the message bar for "meh" messages.

P.S. I'd actually really like your idea if you could find a good way to prevent it from blocking user interactions! If you do that, I also suggest removing the static message and just have the super-message stick once the animation is done.

Answer 8

The way of attracting a user's attention to a message can be achieved by the type of message with its respective icon. Whatever the message is, but the message should get displayed with the relevant icon, which makes the user more attentive to it. The font color of the message definitely also gives the same impact, but less than the relevant icon. Here the icon means the action image type of the message.

The second point I want to share is that the position of the message that user wants to see is the top of the page with absolute position. Hence, for any attentive message in large content page, the top absolute position should be fixed so that user doesn't scroll the page up / down to see the attentive message.