This document provides guidance on improving the usability of web forms through proper labeling, field placement, error messaging, and more. It discusses grouping related fields, using clear headings and labels, placing labels above fields, highlighting required fields, and providing specific error messages. It also lists many additional resources on form usability best practices.
4. Label Positioning / Alignment http://www.uxmatters.com/MT/archives/000107.php Left Aligned Right Aligned Left Aligned Above Fields Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
5.
6. Group Information People understand and perceive information more easily when it is grouped together.
7.
8. Required Fields Have a consistent format for required fields. If you use an asterisk on one form field, us that on every required field on all forms on your site.
17. Testing 5 Ways to Get Cheap Usability Testing 14 free tools that reveal why people abandon your website A/B Split & Multivariate Test Form Placement
18.
19. Form Usability Resources – 1/3 10 Tips To A Better Form - Chris Campbell 5 Ways To Make Sure That Users Abandon Your Forms - Eric G. Myers 8 Design Mistakes to Avoid with Account Sign-in - Jared M. Spool 8 More Design Mistakes with Account Sign-in - Jared Spool Better Web Forms By D. Keith Robinson Better Web Forms: Redesigning eBay's Registration - Garrett Dimon. Button Placement on Forms and Popup Windows - Meryl Evans Calling in the Big Guns - Will Evans Clearly label those buttons - Garrett Dimon Check User ID Button - Jared Spool Checkboxes, Radio Buttons, and Drop Downs - Garrett Dimon Checkboxes vs. Radio Buttons - Jakob Nielsen Closed Question Response Categories - Jessica Enders Colons at the End of Labels? - Ann Light Colons at the End of Labels - Caroline Jarrett Defeated By a Dialog Box - Jakob Nielsen Design Stories: Character Counters - Robert Hoekman Designing Intersection Flows - Henrik Olsen Developing an Online Form Dialog Boxes - Making Simple Things Simple... - Leisa Reichelt Does User Annoyance Matter? - Jakob Nielsen Enhancing Form Usability With Instructions And Validation - Michael Meadhra Error Message Design Showcase - Christian Watson Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach - Matteo Penzo Eyetracking of Forms: should we accept the Conclusions? - Caroline Jarrett Forms Accesibility Form Follows Function and Achieving Thereof - Govert Adriaan Kolbach Forms: The importance of getting it right - Lift Forms, usability, and the W3C DOM - Peter-Paul Koch
20. Form Usability Resources – 2/3 Forms vs. Applications - Jakob Nielsen Four Ideas For Better Forms - Caroline Jarrett International Address Fields in Web Forms - Luke Wroblewski Long Pages Rule, Except When They Don't - Heidi Adkisson How to Indicate Required or Optional Form Fields - Thomas Watson Steen Implementing Online Forms - James Robertson Initial Focus to a Text Field - Good or Bad? - Robert Nyman It's Not About Size, It's About Context - Radio Buttons Or Drop-Downs - Donna Maurer Judging Forms - Jessica Enders Labeling Buttons - Garrett Dimon Label Placement in Forms - Matteo Penzo Long Forms: Scroll or Tab? - Caroline Jarrett Marking Required vs. Optional Form Fields - Erin Walsh Multi-Select Lists vs. Checkboxes - Garrett Dimon Previous and Next Actions in Web Forms - Luke Wroblewski. Never Use a Warning When you Mean Undo - Aza Raskin OK-Cancel or Cancel-OK? - Jakob Nielsen Primary and Secondary Actions in Web Forms - Luke Wroblewski Proper Usage of Check Boxes and Radio Buttons - Michael Meadhra Registration Forms - What To Do If You Can't Avoid Them - Caroline Jarrett Reset and Cancel Buttons - Jakob Nielsen Rules for Labeling Buttons - Caroline Jarrett Selection-Dependent Inputs - Luke Wroblewski Sentence or Title Case for Labels? - Caroline Jarrett Sensible Forms: A Form Usability Checklist - Brian Crescimanno Simple Tricks for More Usable Forms - Simon Willison Simplified Form Errors - Adam Kalsey Sign Up Forms Must Die - Luke Wroblewski Smart Defaults in Registration Forms - Luke Wroblewski The 4 Layers of a Form - Jessica Enders
21. Form Usability Resources – 3/3 Two-Column Forms are Best Avoided - Caroline Jarrett The Information Architecture Behind Good Web Forms - Luke Wroblewski The Piece of HTML created just for Me: Reset - Caroline Jarrett Usability Tip: Use Verbs as Labels on Buttons - Dmitry Fadeyev Web Application Form Layout - Luke Wroblewski Web Form Design in the Wild, Part I - Luke Wroblewski Web Form Design in the Wild, Part II - Luke Wroblewski Web Form Design: Labels Within Inputs - Luke Wroblewski Web Form Design Patterns: Sign-Up Forms - Vitaly Friedman and Sven Lennartz Web Form Design: ZIP Codes and Locations - Luke Wroblewski Web Forms: Death By a Thousand Textboxes - Jeff Atwood What Makes a Good Form? - Formulate What Makes a Good Form? - Jessica Enders What's the Right Order? - Tom Tullis Where the Heck is My Focus? - Jeff Atwood Why Does the OK Button Say OK? - Gerry McGovern Why People Persist with Using Paper Forms - Caroline Jarrett Zebra Striping: Does it Really Help? - Jessica Enders