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.

enter image description here

Do you think this is a suitable solution?

  • 1
    To be honest, I don't feel like I have enough context around the flow or rest of the application. As a general notification, I would have to agree with JohnGB. However, there may be other factors to consider if you share more of the process flow and layout - it's understandable if choose not to.
    – Ben
    Commented Jan 24, 2013 at 17:14

8 Answers 8


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:
enter image description here
enter image description here

  • Funnily enough, I use these elsewhere in the same project. I just didn't think they would be suitable here, since I need the message to stay visible on the screen, not close after a few seconds. I could leave these notification messages visible, but then they would obscure part of the screen.
    – Urbycoz
    Commented Jan 25, 2013 at 10:21
  • @Urbycoz, you can let them float at the top and push down screen content if obscuring is a problem. You also don't have to close them automatically. If the warning still applies, you could leave it up until the warning is no longer necessary.
    – JohnGB
    Commented Jan 25, 2013 at 12:14

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.

  • I really like the idea of greying out the rest of the screen until the user has selected an application- I hadn't thought of that. The trouble I have is that I don't want to stop the user doing other things on the screen at this stage....maybe I should...
    – Urbycoz
    Commented Jan 25, 2013 at 10:43

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.


  • That's an interesting bit of information, I never would have thought that things at the edge of the screen would be so noticeable.
    – Tim
    Commented Jan 25, 2013 at 15:35
  • Human has high resolution on middle of eyes because there are a lot of cone cells on Fovea. Thus, human has low resolution on the edge, because there is fews cone cells. Low resolution can maximize a picture to be easy to be noticed. You will see that many applications display notification on the edge of a screen. (I have a reference from a book, but I did not post it because of its copyright.)
    – Lookchin
    Commented Jan 29, 2013 at 2:28

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)

  • +1 for suggesting removing "Please". Now I think of it I don't know why I even put it there.
    – Urbycoz
    Commented Jan 25, 2013 at 10:54

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

  • 6
    I've never seen anything like that done to try and emphasize a message; but my immediate reaction from the demo and your suggestion to use it for this is that it's a <Blink> or <Marquee> tag for the 21st century. Commented Jan 24, 2013 at 17:50
  • i was trying to suggest a practice like this: youtube.com/watch?v=X3xNzTzpYRs similar example is used by buffer app to make people install their chrome extension. Commented Jan 24, 2013 at 20:16
  • 1
    That looks as annoying as I was afraid it would. Commented Jan 24, 2013 at 20:58

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


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)

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?  

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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