Forms are an unsexy reality of our lives: this goes for both users and designers. Whether it’s purchasing a registry gift from Amazon, submitting patient e-forms before a doctor’s visit, or placing a to-go order online, no one enjoys filling out forms but it’s often a necessary step to get from point A to B in our digital lives. As we continue efforts in redesigning Limelight Control, our goal for users is to curtail complexity and make workflows as seamless and simple as possible.
Luke Wrobleski’s “Best Practices for Web Forms” design principles are still relevant today, even if solution enhancements have shifted within the 8 years since the document was published:
- Maximize ease of use
example: avoid overly strict input validation, such as a US phone number area code requiring parentheses
- Illuminate a path to completion
example: for long forms, show progress and allow users to save
- Consider the context
example: size input fields according to the expected input length
- Ensure consistent communication
example: provide clear error validation; don’t make the user guess what they did wrong
I recommend this classic resource in conjunction with these contemporary write-ups regarding forms and inputs:
Which Inputs When? by Morgan Carter
The 10 Commandments of Good Form Design on the Web by Johan Ronsse
7 Common Web Form Design Mistakes to Avoid from Form Assembly
Image credit: Alberto G.