Comments on: Design Pattern 7: Required fields http://www.pathf.com/blogs/2008/05/design-pattern/ Running commentary about agile development, user experience design and Ajax. Thu, 08 Jan 2009 16:41:01 +0000 http://wordpress.org/?v=2.5.1 By: Blair Miller http://www.pathf.com/blogs/2008/05/design-pattern/#comment-776 Blair Miller Fri, 09 May 2008 13:14:00 +0000 http://www.pathf.com/blogs/2008/05/design-pattern/#comment-776 <p>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.</p> <p>Oh, and that CSS could easily be reduced to two lines. :)</p> 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. :)

]]> By: Darin http://www.pathf.com/blogs/2008/05/design-pattern/#comment-775 Darin Thu, 08 May 2008 18:59:46 +0000 http://www.pathf.com/blogs/2008/05/design-pattern/#comment-775 <p>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.</p> <p>Take a look for yourself...</p> <p>Deuteranope simulation:<br /> <a href="http://vischeck.homeip.net/uploads/12102720288613/" rel="nofollow">http://vischeck.homeip.net/uploads/12102720288613/</a></p> <p>Protanope simulation:<br /> <a href="http://vischeck.homeip.net/uploads/12102722899341/" rel="nofollow">http://vischeck.homeip.net/uploads/12102722899341/</a></p> <p>Let us also not forget the fundamental design principle that color should never be the only visual indicator when conveying information.</p> <p>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.</p> <p>- Darin</p> 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

]]>