Learn the basics of killer web forms. Does your form scare away your visitors? Does it confuse them? Does it intimidate them? Do you know what your form conversion rates are and how to make them better? Could your signup rate be improved?
This presentation will discuss the basic elements of good form design. From the questions you ask, to the way you ask them, from layout to error handling and validation.
3. Please take out a piece of your own paper, and write the following information: Your full name (with middle name) Your mothers maiden name The city that you live in Before we get started…
4. The Conversation What’s your name? Hello Bob Hi What is your address … Bob? What is your address … Bob? Um .. Don’t follow me Why?
5. “ / ” A form is a sort of conversation […] without those opportunities to for clarification -Caroline Jarrett
6. …If you actually wrote something down, please put it somewhere safe and destroy it later…
9. Pop QUIZ! … with prize!!! What popular flash cards did Stephen Anderson recently create? Shout Out to Stephen Anderson for letting me borrow his browser demonstration on twitter @stephenanderson
10.
11.
12. Ask expected questions before unexpected ones. Don’t ask question’s beyond your relationship unless you have to, then provide a reason why your asking it. You can always get extra information later. Group the conversation into natural breaks. Is there somewhere else you can get the information? Consider the context, and the relationship. People care about what you ask them. Your form is a conversation
15. Okay Okay Email should be plenty Password reset sent to email Okay, but later… Most likely required for test, not training materials Boat info optional, kill it. Boat info optional, kill it. Boat info optional, kill it. Optional, Kill it Okay
22. Is it a short form? Is the information really easy to fill in? Do you have to gather answers? Do you want to fill in the form? Is the information requested, what you expected? Is the information sensitive? Have you filled out this form before? Speed Racer, slow down!
36. Use the grid system, line things up. Use consistent spacing. Keep advertising and distractions away from the form. Support scanning and visual hierarchy. Groupings should be clearly separated. Primary action should be visually prioritized. Good contrast, font family, and size for readability. It’s The Little Things You Do
45. Slide not found. Error ID234JHDU78CAS. Please try again after jumping up and down on one foot and calling customer support. Ok Cancel Back
46. Error Prevention & Error Detection Try to help the user prevent errors. Generally, wait until the user tries to submit the form before presenting errors. Explain why the error occurred, where, and how to fix it. Be polite, and avoid jargon. Don’t make color your only cue. Avoid pop-ups.
51. Forms that Work: Designing Web Forms for Usability By: Caroline Jarrett www.formsthatwork.com/ Recommended Reading
52. Thanks! Please submit all questions via the form. Questions? Twitter: @lorielue #SOFLUX Slides: www.slideshare.net/lorielue
Hinweis der Redaktion
Tweet about meeting today #SOFLUX
A form is a conversation without opportunity for clarification Just like real conversations w\\certain social norms
We look at the labels and the left side of fieldsWe totally ignore the right side, and look under the field onlyafter filling it in…Unless we are confused, then we start reading and looking around.