Comments on: Design Pattern 7: Required fields http://pathfindersoftware.com/2008/05/design-pattern/ The Fastest Way to Launch Successful Software Thu, 19 Jan 2012 16:36:03 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Blair Miller http://pathfindersoftware.com/2008/05/design-pattern/#comment-8059 Blair Miller Fri, 09 May 2008 13:14:00 +0000 http://www.pathf.com/blogs/2008/05/design-pattern/#comment-8059 <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://pathfindersoftware.com/2008/05/design-pattern/#comment-8058 Darin Thu, 08 May 2008 18:59:46 +0000 http://www.pathf.com/blogs/2008/05/design-pattern/#comment-8058 <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

]]>