January 10, 2012

Form Usabilty

Great advice on how to make forms more usable. My favorite is the first one:
Use top aligned labels
There’s a good reason for this, and you don’t need to perform your own eye tracking study to understand it.


In the example on the left demonstrating top aligned labels, there are four visual fixations and only one visual direction (down). In the other example demonstrating left aligned labels, the number of visual fixations and directions is doubled (8, and left – right, left – right, left – right, left – right), making it more difficult to visually consume and comprehend.
I dearly wish more sites used these recommendations. It would save me, and probably a lot of other users, time and exasperation.

Improving forms should also increase conversation rates. For the obvious reason, of course, that it reduces friction. Also, though, if what is being sold is a web app, people are likely to take a poorly designed sign up form as indicative of a poorly designed web app. Hardly encouraging. (The same applies for the site marketing the web app.)

No comments:

Post a Comment