How NOT to DESIGN a web form
The design of web forms are a large part of making any web site work well. Making it simple for customers or users access your information, sign up for your service or buy your products is key to conversion and usability.
Many designers have researched and tested the forms on the sites they design. They stive to make them look good and function well. I became more interested in the subject of good form design after having to build quite a few forms for clients that I thought could use more consideration on how they were structured and more importantly, how much focus we put on them.
After attending An Event Apart in Washington, DC. I viewed a presentation by Luke Wroblewski on designing web forms. This truly opened my eyes to the importance on creating web forms using practices that were proven. A good post on his site titled “Web Application Form Design” is a great starting point for any designer that is tasked with creating any type of form.
Recently I came across a form that as soon as began to use, seemed to be very easy to use, little did I know I was one tab away from a very confusing and ultimately frustrating experience.
You can walk through this with me and try and sign up for a new account on Verizon Home Services.
1. You can register with a phone number or an account number- if you have a hotspot device that shows no phone number on the device, you will have to get your paper bill and examine that form, in which the account number or phone number is actually hard to find.
2. Once you find the phone number you will find a 2 column form that hold only 6 fields and 2 check boxes.
3. When you choose a username, you get a nice instant conformation that the user name you choose is or is not available, which is nice.
4. When you tab to the next field, it jumps to the field on the right column, if you can tell – there is no onFocus style set. I have to look to see where I was, which actually took me a minute since it did not follow the standard flow of forms.