The document presents strategies for effective form design by emphasizing that forms should function like conversations, facilitating user engagement and clarity. Key principles include good layout, logical grouping of information, usability testing, and error prevention strategies to enhance user experience. Visual design elements, such as contrast and spacing, are essential for readability and usability, ensuring that users can complete forms efficiently.

1. Killer Form DesignBy: Lauren Martin@lorielue #SOFLUX

2. The ConversationWell, 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 nameThe city that you live inBefore we get started…

4. The ConversationWhat’s your name?HelloBobHiWhat is your address … Bob?What is your address … Bob?Um ..Don’t follow meWhy?

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 GentlemanA 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 demonstrationon 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. SurgeryStand back, I’m going in!

14. A Prototype to Play With:

15. OkayOkayEmail should be plentyPassword reset sent to emailOkay, but later…Most likely required for test, not training materialsBoat info optional, kill it.Boat info optional, kill it.Boat info optional, kill it.Optional, Kill itOkay

16. Round 1: The Conversation

17. But… What about…Layout, colons, required field indicators and the kitchen sink..

18. LayoutLeft AlignedRight AlignedTop Aligned

19. Wait.. We’re forgetting something.

20. Where do people look?Quick GlanceGlanceLonger GlanceLooked longestLeft AlignedRight AlignedTop 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!

24. LayoutLeft AlignedRight AlignedTop AlignedEasy scanning.

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

33. Watch out for groupings.Required Indicator, and Colon Position Don’t really MatterBest practice is: Required Indicator Left or Right of label, or Left of input.

34. Yep, Labels have ColonsLooks MatterFact: Pretty things are perceived as being easier to use.

35. Clowns and Models Both Wear MakeupVs.

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 VerifyGorilla Usability TestingMetrics and AnalyticsCustomer Support Call LogsAnalyze Response Data

43. Vs.

44. What about ErrorsPlease try again.