I was at CANUX 2008 on Monday. Some quick highlights: Luke Wroblewski talked about how to design effective web forms. He gave us his top 10 things to do: 1. Path to Completion: Assume the user has a clear goal when visiting your site. They want to get something done, like buy a book, and what stands in their way? A form. So, take an outside > in approach and make the user's end goal your Key Performance Indicator. Design everything around that goal. Duh.
2. Label Alignment: What we're talking about here is where the label appears relative to the input fields. A left side, top label approach has been proven most effective and quickest (using eyeball tracking studies). Wha? Here's a picture:
How long did it take you to scan the one on the left compared to the one on the right...learn more
3. Contextual Help: Another obvious one, but provide help relevant to the user's action. If you need to put tons of help on a page, you've probably got a bigger problem with the form itself.
4. Inline Validation: Help the user complete the task by feeding them tips. For instance, if the user is trying to create a username, wouldn't it be nice if the system told them that the one they're thinking about is already taken or isn't long enough...
5. Actions in Progress: This is what I call status and visibility. Basically, if the system is chewing the user's inputs, tell them!
6. Avoid Secondary Actions: Ever hit the Cancel button instead of the Submit button? Ask the question, do I need a Cancel button. If you absolutely do, then at least make it another colour. Here's an article:
7. Error handling: Make sure there error handling is appropriate. For instance, if I'm filling in a form field and I've just typed in one letter, don't throw me an error...at least wait until I've finished filling out the field. And, double visual cues for error handling - make it another colour and put a box around it...
8. Remove unnecessary inputs: Do you really need to know the person's postal code? Do they really need to create an account? See # 1. Example. If you're asking a user to input their credit card number, do you really need them to select the type of card. Nope. It's part of the card number's meta-data....so just shade out their card in the interface when they are done...it's the little things.
9. Form Organization and Natural Language: This one is really important. Ever filled out a form with both required and optional fields? Ever look at the length of the form and leave? How about you make the first page only the required fields. Then, once the user has accomplished the task, you can ask them the optional questions. Guess what happens? Your completion rate increases and paradoxically, more people fill out the optional questions because they're in a good mood. The quote he used was: "one raindrop never thinks it's responsible for the flood". What does this mean. A simple 3 field form gets passed to sales, marketing, IT, and Legal. Now you've got a 20 field form. But the user only wants to fill out 3 fields to complete the task...oops.
To natural language, what does "mm" "dd" "yyyy" mean to you? This is inside (database speak) > out thinking. How about "month, day year". And try things like "don't worry, we won't spam you", next to an email input field.
10. Gradual Engagement: Don't slap the user upside the head with a form off the bat. Luke showed us a terrfic example of how to gradually engage the user: geni.com. And he used a video game analogy > you want to accomplish something in the first 5 seconds of the experience in order to get immersed.
Bottom line, every field on a form requires the user to parse the information, Formulate a response, and then input their answer. So, the less fields, the easier it is.
OK, I'm spent I need a break. More to come....
No comments:
Post a Comment