Usability Design for Online Web Forms

By / Jan 12, 2012 / Tips
shares

Designers aren’t just creating pleasing graphics for the Internet anymore. As a web designer you need to consider other properties of user interaction and coding. UX design is possibly the most important topic to cover, and this is especially true designing web forms. All webmasters should understand this message.

featured image - Tokyo subway station

Your goal is to offer the simplest path for your users to move from filling out input forms to hitting the submit button. There isn’t a lot of special effects required, although jQuery form plugins have always been a popular topic. In this article I’d like to focus on the user interaction and how each visitor is experiencing your forms. There are techniques you can use to streamline the process which converts to less frustration in your audience.

Keep a Small Focus

I’ve heard dozens of users complaining about signup forms which require too much info. If you’re looking to increase user registrations then you want the form to be as simple to complete as possible. The same goes for newsletter signups and other similar types of input data.

The minimum number of fields will vary depending on your objectives. Registration forms may ask for a username, e-mail address, and 2 password fields. This is certainly reasonable and users looking to signup will be expecting about this length. But consider other signup forms such as the default WordPress style.

Default WordPress signup registration form

Here your visitors are only required a single username and e-mail address. The system then generates a password and sends an e-mail to the given address. This works to reduce original form size and keep spammers at bay. You don’t need to verify your e-mail through a link, but you do need access to your inbox to acquire your new login password!

Perform Actions as Expected

The one thing most users hate is unexpected page activity. You will absolutely want to keep your form behaving in a natural manner, and reduce any JavaScript extras to a minimum – popup guides and Ajax validation are key components. Usable forms shouldn’t be split into multiple columns and spanned across the page. This is just one example of poor technique.

Macbook Keyboard - web and digital keys

Another mistake I run into often is misuse of the tabindex HTML property. This attribute is wonderful from a usability standpoint since your visitors can fill out forms even without a mouse. But if you have these numbered out of order, or only fill out a few input fields then the whole system is thrown off. This is certainly true with signup forms but even more-so with other types of input – especially online shopping carts.

Security is Priority #1

Whether you’re dealing with customer credit card numbers or simple e-mail addresses you should always put website security first. Visitors are trusting your website and backend code to process each form properly and store user data in a secure database.

If possible I recommend using an SSL certificate on your entire domain. This way users won’t just be protected during signup, but their entire viewing session will be protected via https. It can be a bit of work, but some web hosts like Fat Cow will actually aide you in the setup process. It’s certainly not a requirement for every site but it doesn’t hurt to go that extra mile for security. Your users will feel much safer, and it builds a level of trust going forward.

Security Control Room Photo

Additionally don’t fall for some of the more obvious ploys to detect data. Always use a POST data type in your forms unless the information isn’t exactly “private”. GET requests should only be used if the URL structure can benefit from the data(ex. search pages like search.php?q=my+search+terms).

Tokyo Night Traffic

Both of these methods will pass backend data in a similar fashion. But GET data is processed openly in the URL and is susceptible to hijacking. POST data is much more secure, especially behind an HTTPS connection. This fantastic guide by Think Vitamin explains the differences in an easy-to-digest format.

Large, Spacious Inputs

I have listened to a lot of arguments surrounding the sizes of web forms. Standard CMS brands including vBulletin, Joomla!, and Drupal use fairly smaller text sizes for input fields. These are generally default 10px-12px fonts with very little padding.

Diigo signup registration form

The signup form on Diigo has a very spacious layout! You need to alleviate room between the many different input elements. Also bold text lets you know which fields have been entered and which are still untouched. As you highlight each field the form responds with a faint blue tint – just a marker to let you know where your cursor stands.

The classic Digg registration form was designed and built in a very similar way. Twitter’s registration form is also oversized so you can’t miss a beat. They are not afraid to use extra white space which gives prominence to the input fields. Their system of labels is also very unique by setting placeholder text when the field is empty. By dropping the color to a light grey you can easily distinguish between user-added text and the field presets.

Conclusion

There are a whole library of new trends emerging in web design. The newer CSS3 specs are still growing in popularity and we can see these properties in various layouts. Web forms are no different and deserve just as much attention from designers.

I hope these guiding principles behind user experience can invigorate you towards building better web forms. The process of handling backend data can be tricky even with simpler languages like PHP. But with just 1-2 weeks of practice you can likely figure out a system that works for you. Web developers both frontend and backend would do well to learn and understand these paradigms. If you’d like to share ideas on building accessible web forms please let us know your thoughts in the post discussion area.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

14 Comments

  1. Web Design Wolverhampton
    January 12, 2012

    Very useful, thanks. Always remember the old adage: “Keep it simple, stupid” – especially true for forms.

    Reply
  2. Justin Mifsud
    January 12, 2012

    Great article Jake. There is always so much to say about forms! I did cover web form usability last month in my blog too: http://usabilitygeek.com/an-extensive-guide-to-web-form-usability/

    Keep up the good work!
    Justin

    Reply
  3. Joy
    January 12, 2012

    Thanks for this useful article… waiting for more
    Thanks

    Reply
  4. jim
    January 12, 2012

    All great points and in my opinion Usability Testing of forms (among other things) is critical. I use a live User Testing Service (such as http://www.usertesting.com) to see what real website users really think while they use my websites. I am always amazed at what I learn.

    Reply
  5. puya
    January 12, 2012

    Also make sure the forms are jquery enabled to recognized an incorrect field with a design that is clear and easy to fix.

    Reply
  6. Website Design Malaysia
    January 13, 2012

    Forms? Who needs forms when we have facebook connect :)

    Reply
  7. Caroline Jarrett
    January 13, 2012

    Great to see a focus on web forms, especially an article that talks about things that really matter to users such as asking the minimum number of questions, being really careful about security, and avoiding silly tricks.

    Well done.

    Reply
  8. Rajib Hasan
    January 14, 2012

    more essential for all kinds of online web Form Designers.
    it’s my seems.
    yours?

    Reply
  9. Morgan & Me Creative
    January 15, 2012

    Well written, I agree with jake that keeping the form simple to fill is paramount. No one likes to waste unnecessary time keying in fields of rubbish.

    Reply
  10. Cristian Balau
    January 16, 2012

    I agree on the simplicity if you want people to register and stay around. Especially if the website is new and unpopular you need to keep as many users as you can, do not drive them away with complicated register forms.

    Reply
  11. Katie
    January 19, 2012

    Validation is huge when it comes to forms. If certain elements are required and there is a user error, the error should post relative to the field and be obvious. It’s happened so many times where I actually have to search the page for what I did incorrectly on a form. Thanks for the article.

    Reply
  12. ashvindx
    February 3, 2012

    Well said about taxindexes, once we used to value them a lot in the 1990′s Windows development. They’re still important for sites and web apps that require filling long forms.

    One thing of debate is the length of drop down lists. Some preach that they should be same as the previous textbox, while Facebook’s sign up page seems to have them of varying length.

    Also use radio rather than combos when you have 3 options or less to choose from.

    Reply
  13. Brett Johnson
    October 7, 2013

    Great article Jake.

    Really interesting reading, really liked seeing the different techniques that can be applied to user focused designs.

    Very useful indeed.

    Reply
  14. Andreas
    December 16, 2013

    Considering the conditional logic, what online form builder would you recommend? Which one has the most powerful tools for creating multi conditions and dependencies? I found so many applications that I have no idea which one to start with…

    Reply

Leave a Reply