Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Don't Be A #f00! Get the Red Out!

DZone's Guide to

Don't Be A #f00! Get the Red Out!

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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"
The following is the system I use for "warning" form feedback.

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?

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}