An example of poor visual feedback could be my previous laptop or current MP3 player; both have an initial plain black start-up screen. I hit the "on" button and nothing appears to happen, so I hit it a few more times, - probably doing more harm than good,- until at last something changes on the screen.
...and there it is, the key to visual feedback; the fact that something has happened or is in the middle of doing something has to be obvious. If I don't notice that something has changed, I won't know or believe it has.
Seems obvious, right? But so many times the difference is so subtle or so slight that the fact that something has changed goes unnoticed.
We, as users, need the system to tell us its state. A start-up screen of any colour other than black would let me know my hitting the "on" button had turned on the machine and that I should hang on for a second or two (rather than repeatedly hitting the same key harder and harder more and more impatiently!).
Effective visual feedback can be achieved by a change in the layout of the elements on screen, or a change in their colour, tone, size or shape, or a combination of the above, (colour alone is not recommended for accessibility reasons).
Online forms and sign-up processes are common examples of where visual feedback is required in the online world, whether or not it is actually provided. Let's take a look at some good examples:
Línea Directa Insurance 1
Línea Directa Insurance 2The difference between the first and second screen is immediately apparent on account of the colours and shading. The instructions also indicate the fields which require attention; the user would notice such a change and not expect to see the confirmation screen until she had made the relevant changes.
Facebook, wrong password
Given the site's blue and white colour scheme, a big pink box attracts the user's eye. Helpful hints are also provided to help the user on his way.
My Family sign in page. Another classic use of colour and shading.The message that appears at the top of the screen makes the rest of the form shift down the page; a movement which attracts the user's attention.
Also notice that the actions buttons don't activate until all the information has been gathered.
Photo Bucket's error message goes one step further: not only does it include the standard error icon (an important visual clue) and some alternative user names, it actually points out the field in question so there can be no mistake as to where the error lies. A change in the colours used and shading can also be seen.
And finally, a step away from error messages, Nextel's character counter let's you know how many characters you have typed (instead of just telling you the maximum allowed). A great help for all of us who do not see communicating an idea in terms of numbers of characters!Also see:
Jakob Nielsen's Alertbox: Top 10 application design mistakes (mistake no. 4)
Signal vs Noise: Web Interface Design Tip: The Yellow Fade Technique
