field 10x as long to scan the form as top-aligned labels Best completion rates 2x faster comprehension than right-aligned labels Accommodates different length labels Makes longer forms appear shorter If vertical space is at a premium http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php WHEN TO USE
Validate availability inline: usernames, domains Wait for the user to submit to check for required inputs (or even better, don’t allow submission without them) Generally, wait for the user to submit if data needs server-side verification: logins, purchases WHEN TO USE INLINE VALIDATION
TIME 3 minutes RESOURCES http://patterntap.com/pattern/ post-good GOAL Partner up and select one form of decent heft from the examples that both of you brought to the workshop. If you didn’t bring any, feel bad for a moment, then use the example to the right. Go through the form field-by-field and component-by-component, and identify each element, input and component by type.
Depending on your business goals, a smaller quantity of qualified or well-segmented leads might be preferable More copy can actually increase quantity and quality of leads (http://www.quicksprout.com/2012/12/20)
input fields: billing/shipping address is commonly the same Generally, default to options that let your users work less Always make sure to persist users’ data between steps or if a form doesn’t validate
multivariate tests simply because a design that tricks users into doing something is likely to achieve more conversions than one that allows users to make an informed decision.” Harry Brignull, Dark Patterns: Deception vs. Honesty in UI Design http://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design
NOT, THE WEB FORMS EDITION TIME 5 minutes RESOURCES http://patterntap.com http://www.wufoo.com/gallery http://www.formstack.com/ examples GOAL With a partner, review the form examples that you both brought with you to the workshop today. Using the best practices we’ve discussed for different use cases, pick one that you agree is “hot” and another that’s “not.” Make a list of why you think they work or don’t work for their use case. Suggest improvements! Be ready to share your thoughts with the rest of the group.
as possible of your user Conversation, not interrogation Coach, remind and reassure Provide a clear path to completion Orient the user Group tasks based on the user’s mental model The devil is in the defaults Give users something to do next Measure, then iterate
FORM! TIME 20 minutes RESOURCES http://patterntap.com http://www.wufoo.com/gallery http://www.formstack.com/examples GOAL Start with one of your example forms or find an form that needs improvement from anywhere on the internet or from Patterntap, Wufoo’s gallery or Formstack’s examples. With your partner, use what you’ve learned and redesign it in a whiteboard session!
In The Blanks http://rosenfeldmedia.com/books/web-form-design/ Steve Krug, Don’t Make Me Think http://www.sensible.com/dmmt.html http://baymard.com/blog http://alistapart.com/article/sensibleforms http://www.usertesting.com/blog/2013/04/04/42-form-usability-resources/ http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/ http://www.nngroup.com/articles/ten-usability-heuristics/