User Input & Form Usability: Ten Commandments
Forms are a key component that made web pages interactive. We’ve come a long way visually from the basic input styles – but inputting data seems to be staying as hard as it used to be. That’s why I’m sharing my tips on how to simplify user input.
1. Allow users to do mass-actions
If you have lots of on/off selections to be made, be sure to provide a “change all” functionality.
2. Create pre-filled forms
Find out what users do most often and provide them a the pre-filled form. Pre-filled forms can be used also like they did on Freelancer.com – see the button “post a project like this”. Great idea!
3. Organization & Flow
- Last name
- First name
- First name… Last name
- Address… City
- Phone… Email
4. Inline tips
User’s don’t have customer service personnel when they’re using your web site. Instead, you should provide helpful tips in context. Use the title attribute & inline tooltips for forms.
5. First focus & Tabindex
EDIT: HTML5 introduces an autofocus=”autofocus” attribute.
6. Amount of steps doesnt matter
Using more than three steps in wizards is okay, as long as you have a clear and meaningful order for the steps.
7. Server-side & Client-side validation
Validate user input as soon as you can, instantly or after a short delay on client-side and on server-side too for black/gray hat hackers.
EDIT: HTML5 offers lots of validation stuff. Google for it.
Consider typing in Information Technology vs. Typing “Inf..” [at this point the interface provides you a result]… Whoaa, easy, you think. And it’s still not too often you come up with sites like this!
EDIT: HTML5 introduces autocomplete=”on” attribute. It can be only used efficiently with fields that are for email or phone since it gets data from user agent. Turning it off is a better solution – provide it some other way.
EDIT #2: HTML5 introduces list=”somestuff” attribute.
9. Primary vs. secondary action
Primary action should be distinctly separated from the secondary action. (actually I learned this today!)
Primary actions are links and buttons in a form that perform essential “final” functionality, such as “Save” and “Submit.” Secondary actions, such as “Back” and “Cancel,” enable users to retract data that they have entered. If clicked by mistake, secondary actions typically have undesired consequences, so use only primary actions where possible. If you must include secondary actions, give them less visual weight than primary actions.
10. Naming conventions
Especially old people are scared of clicking an action unless they’re certain of it. If your form creates an account, the button label should say “Create an account”… if your form sends a car sales ad to the moderators, the button label should say “Send ad to be moderated”. (first learned from Vellu a year ago)
This was just the tip of the ice berg.