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.

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?

share|improve this question
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 Jan 24 '13 at 17:14
add comment

8 Answers

up vote 14 down vote accepted

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

share|improve this answer
    
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 Jan 25 '13 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 Jan 25 '13 at 12:14
add comment

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

share|improve this answer
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. –  Dan Neely Jan 24 '13 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. –  Onur Şentüre Jan 24 '13 at 20:16
1  
That looks as annoying as I was afraid it would. –  Dan Neely Jan 24 '13 at 20:58
add comment

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/

share|improve this answer
1  
+1 Now I also like Noty. –  Urbycoz Jan 25 '13 at 10:45
    
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 Jan 25 '13 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 Jan 29 '13 at 2:28
add comment

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.

share|improve this answer
    
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 Jan 25 '13 at 10:43
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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)

share|improve this answer
    
+1 for suggesting removing "Please". Now I think of it I don't know why I even put it there. –  Urbycoz Jan 25 '13 at 10:54
add comment

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.

share|improve this answer
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.