Wednesday 16 January 2013

9 resources to create better HTML forms


From www.position-absolute.com

HTML forms
Forms are a pretty boring piece of the Internet, it’s not fun to create and it’s not fun to interact with. Yet this is mostly our only way to communicate. We should strive to make better forms and make them as painless as possible to complete. Here are some resources worth looking to make better forms in every way possible.

Keep it simple

Look at the Twitter registration, it does not ask for the password twice and there is only 6 fields. If you must have more fields then please let them register and ask for it in their profile. Less fields there are, more potential subscribers you get (avoid long form and duplicate if you can). Also please keep them focus on finishing you form, no distraction should interrupt the process.
The New Registration and Login Grammars
“Provide your name, email and password; verify the email; login to the site with username and password until you’re timed out. You know the drill. But a wave of new web apps and protocols is challenging the status quo”
Signing Up to Websites, 1999-2009. A Montage
“Following up The New Registration and Login Grammars, I thought it would be interesting to look at how signup forms have changed over the years.”
Why are we typing passwords twice?
“We are typing passwords twice because of legacy design patterns we forgot to abandon. There is no reason for why everybody should suffer just because a few can’t type their password correctly. I jump confirmation ship!”
Smashing magazine web design pattern
Smashing magazine web design pattern part2
“If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site.”

Help your users

Get tools to help your users complete your form faster with no frustration. Use a good client side validation, code completion and etc.
A list apart article on inline validation
“Web forms aren’t great conversationalists. They ask a bunch of questions, then wait until you answer them all before they respond. So when you register for that cool social network or use an e-commerce site, it’s pretty much a monologue.”
Position Absolute form validation plugin
This validation plugin can validate your fields on the fly, it can even send a inline request to see if a user is available in a DB for example.
Masked Input Plugin
“It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome.”
Stop masking password and the Password Unmasking Plugin
“Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.”
Autocomplete plugin
“Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.”

No comments:

Post a Comment