User Input & Form Usability: Ten Commandments

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

  • Address
  • Phone
  • Last name
  • Email
  • City
  • First name
How long did it take from you to know what this was about? Maybe a more familiar organization would work. You could also group similar items next to each other. For example…
  • 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

Go to http://google.com – as you can see, the search field is in focus. Use jQuery for this. For changing the focus with tab, use the tabindex attribute.

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.

8. Auto-complete

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.

Further reading

An Extensive Guide To Web Form Usability | Smashing UX Design
Six Revisions – 10 Tips for Optimizing Web Form Submission Usability
That Web Guy – 15 steps towards better form usability