Killer form design
•
6 recomendaciones•3,645 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (15)
Destacado
Destacado (20)
Similar a Killer form design
Similar a Killer form design (20)
Último
Último (20)
Killer form design
- 1. Killer Form Design By: Lauren Martin @lorielue #SOFLUX
- 2. The Conversation Well, hi there.
- 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…
- 7. Ladies and Gentleman A demonstration please…
- 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
- 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
- 13. Surgery Stand back, I’m going in!
- 14. A Prototype to Play With:
- 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
- 16. Round 1: The Conversation
- 17. But… What about… Layout, colons, required field indicators and the kitchen sink..
- 18. Layout Left Aligned Right Aligned Top Aligned
- 19. Wait.. We’re forgetting something.
- 20. Where do people look? Quick Glance Glance Longer Glance Looked longest Left Aligned Right Aligned Top Aligned
- 21. Quicker is better, right? According to a study by Penzo
- 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!
- 25. Make sure inputs are close enough
- 26. Good for unfamiliar information
- 27. Harder scanning.
- 28. Watch out for long and wrapping labels.
- 29. Good for repetitive or familiar information
- 30. Hard scanning.
- 31. Great for short forms
- 32. Good for familiar information
- 35. Clowns and Models Both Wear Makeup Vs.
- 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
- 37. Round 2: Visual Design
- 38. Before and After
- 39. Did it help?? How do you know if your changes are making a difference?
- 40. Trust but Verify Gorilla Usability Testing Metrics and Analytics Customer Support Call Logs Analyze Response Data
- 43. Vs.
- 44. What about Errors Please try again.
- 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.
- 49. Pop QUIZ! So did you learn anything today?
- 50. What does this need?
- 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
Notas del editor
- 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.
- Looking for Speakers…