Don't Be A #f00! Get the Red Out!
One element of a website that involves direct user to website interaction is web forms. Web forms can be extremely helpful in getting customer information or retrieving customer feedback. The problem is that users can forget to provide a value in a text field or choose a radio button option, thus submitting an incomplete form.
It's extremely important to provide meaningful feedback to the user when they've forgotten to provide required values or provide invalid information. Quite often that becomes red text or icons and involves telling the user "There's an error with your information..." Don't you think red is a bit harsh though?
In my opinion, there are too many websites that display information to users in a crude fashion. That got me to thinking of better ways to display negative feedback. I've created the following guidelines for myself:
- Avoid red at all costs
- Avoid using the term "error"; instead use "warning"
- Use graphics/icons to make the feedback "softer"
Header Warning Message
The XHTML
<div class="message-box">
Ooops! You've forgotten to provide your first name.</div>
The CSS
.message-box { border:2px solid #fc0; padding:5px 5px 5px 30px; background:url(/graphics/warning-big.png) 3px 3px no-repeat #fffea1; }
Input Field
The XHTML
<tr> <td><span class="message-label">First Name</span></td> <td><input name="first_name" size="30" maxlength="30" class="message-input" type="text" /></td> <td><img src="/graphics/warning-small.png" alt="Please provide your first name." /></td> </tr>
The CSS
.message-label { padding:0 0 2px 0; border-bottom:1px dashed #fc0; font-weight:bold; }
.message-input { border:1px solid #fc0; background:#fffea1; }
I know that Google uses similar colors on form fields that the toolbar believes it knows the values to -- that's why I've placed the smaller warning icon outside the field instead of as a background image.
Do you have any ideas for my code? How do you provide error messages back to users?
- Login or register to post comments
- 1971 reads
- Flag as offensive
- Email this Story
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
Matthew Schmidt replied on Sat, 2008/01/26 - 10:46pm
Brian Rock replied on Sun, 2008/01/27 - 4:57pm
I've always hated those cold, red warning messages myself... yet I do the same thing. I think I'll make a point of using some "warmer" warnings from now on.
On the nit-picking side of things, it looks like you forgot a few things in the example xhtml/css for the warning box.
In the xhtml, the line of text needs to be wrapped in a div or something with class .message-box. I think you also need a padding or margin on something so that the text is indented past the warning image... otherwise the text should go right over it since it's just a background.
All in all, great idea.
David Walsh replied on Sun, 2008/01/27 - 5:54pm
David Walsh
Web Developer & Zone Leader
http://davidwalsh.name/
Carl Hubbers replied on Mon, 2008/01/28 - 5:51am
David Walsh replied on Mon, 2008/01/28 - 6:13pm
I agree red has its uses, but also know that it's seen as very negative.
Red says "you're wrong, stop!" as opposed to "you forgot something, here's what I need you to do.
David Walsh
Web Developer & Zone Leader
http://davidwalsh.name/
Eric Wendelin replied on Thu, 2008/01/31 - 12:52am
I would add that you might want to avoid the word "you" in these forms because it seems to blame the user (even though it may be their fault). Just one more thing to consider here.
-Eric
Paul Morgan replied on Thu, 2008/01/31 - 1:42am
I agree with dubness.
Isn't the user being mildly insulted with the wording of your message? You're making your user the subject (You've) instead of the First Name field. Even if it's not in red it's negative towards the user and will cause some anxiety when they read that message.
Also, are you making an assumption about the users intent (forgotten) which isn't justified? Maybe they didn't forget but were just trying to avoid providing a first name.
The message could be reworded as:
First Name is required
or
First Name was not found
which makes First Name the subject of the error message which is where the user should focus. You could put either of those error messages up in red and it won't be negative.
David Walsh replied on Thu, 2008/01/31 - 9:59am
Thank you for your suggestions Paul and Dubness. I guess I don't see "you" as bad. I used "you" to personalize it. I used "Ooops" to start of on a "casual" foot, so to speak.
In my opinion, echo'ing "First Name was not found" is too primitive. Found where? Where were you looking for it? What sounds better to you:
1. "Order Received!"
2. "We've received your order Paul. Thank you!"
These are simply my opinions. Great discussion.
David Walsh
Web Developer & Zone Leader
http://davidwalsh.name/
Eric Wendelin replied on Thu, 2008/01/31 - 1:38pm
What about saying something like: "We need your first name, please". I think that is polite and explains that it is required without any blame or "MISTAKE!" kind of text.
And as for your question #2 is obviously better when we can target a message to that user. Saying "thanks Paul" is much friendlier than "thanks" in any circumstance.
-Eric Wendelin
Philippe Lhoste replied on Wed, 2008/02/13 - 6:52am
Well, at least in a programmer's vocabulary, a warning is something that can be ignored (and the user just go on to next task) while an error requires to stop and correct it.
So mandatory missing fields in forms are more errors than warnings... :D Of course, other wordings can be used, like "Problems to solve", "Please fill in the mandatory fields" or something.
That said, the general idea of your article is sound. One can think of other ways not to hurt the user's feeling...
It can be something like: "You need to fill in the following fields to proceed:"
I have nothing against the "you", I was more skeptical about the use of spoken language contraction here. Something more formal might be more appropriate.
Note: you give two background properties in .message-box class, the second one supersedes the first one. At least in Firefox.
Alvin Konda replied on Sat, 2008/02/16 - 5:39pm
Times passed, in fact have been years and i havent seen a kind of form.
The XHTML <b>must</b> be:
<code>
<label for="name">First Name</label>
<input type="text" name="first_name" class="message-input" id="name">
<span class="tip">Please provide your first name</span>
</code>