Design Pattern 7: Required fields

Michael Dain, Thursday, May 8, 2008 @ 11:20 am

It is one of the first problems of HTML markup that had no standard way to communicate to the user what they should do, I'm talkin' about the required form field. Personally, I have used some sort of asterisk in the past, coloration can work as well, but anything eye catching can distract from an error state (hey, you didn't notice we required that field, try again). So it caught my eye that the good people at reqall have an interesting pattern. In this case, make required fields have a bottom that is different from the non-required fields. This is fairly subtle, it took me a moment to figure out what it meant, but I give them kudos for trying something new. This is a long neglected design pattern of how to handle this in a consistent way, and this is a good a place to start. Its also a way to give a shout out to this service which mashes up text-to-speech, reminder lists, task distribution and has a nifty iphone interface as well, check it out!

How to do it

Here's a capture from their stylesheet, an interesting element here is I didn't know that you could restyle the drawn box of an input, so there is room for much variation. I also like the way they specified 'solid' to get rid of the horrid default 'picture frame' style of merging borders when they don't match, which always makes me flashback to 1998 web design.

 
input.essential {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #016098;
border-right-color: #016098;
border-bottom-color: #990000;
border-left-color: #016098;
}
 

user experience design

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Too bad people with Deuteranope or Protanope (forms of red/green color deficit) color blindness won’t even see the red underline. There’s no textual mention of the underline and its function either meaning that there’s a good chance that it gets missed altogether. Oh, they’ll see the thick bottom borders but it will look simply like a visual artifact rather than an intent to communicate something important. Don’t like it at all.

   Take a look for yourself…

   Deuteranope simulation:
   http://vischeck.homeip.net/uploads/12102720288613/

   Protanope simulation:
   http://vischeck.homeip.net/uploads/12102722899341/

   Let us also not forget the fundamental design principle that color should never be the only visual indicator when conveying information.

   Plus, a little CSS shorthand would clean up that example rule quite a bit…no reason to specify each property/value when much of it can be combined, reducing the amount of code and making it a lot easier to read and maintain.

   - Darin

   Comment by Darin, Thursday, May 8, 2008 @ 1:59 pm

2. 

   I’d have to agree with Darin—even though the weight of the bottom border provides visual differentiation for those with certain types of color blindness, the method doesn’t really stand on its own. I’d say an asterisk or a light grey “Required” next to required fields would be a better—and more common—pattern, either of which could be bolded/highlighted/colored in the event the user makes an error by not filling one in.

   Oh, and that CSS could easily be reduced to two lines.

   Comment by Blair Miller, Friday, May 9, 2008 @ 8:14 am

Leave a comment