Web Forms Usability Workshop

Slide 1

Slide 1 text

Jay Stakelon VP Product Design @Fullscreen WEB FORMS USABILITY WORKSHOP

Slide 2

Slide 2 text

WEB FORMS USABILITY WORKSHOP 2 DESIGN PRINCIPLES

Slide 3

Slide 3 text

WEB FORMS USABILITY WORKSHOP DESIGN PRINCIPLES 3 Why forms matter

Slide 4

Slide 4 text

FORMS ARE THE STANDARD INTERFACE THAT PEOPLE USE TO SHARE INFORMATION

Slide 5

Slide 5 text

WITH BUSINESSES http://signup.netﬂix.com/getstarted

Slide 6

Slide 6 text

WITH SYSTEMS http://www.paypal.com

Slide 7

Slide 7 text

WITH EACH OTHER http://facebook.com

Slide 8

Slide 8 text

A COMMON LANGUAGE FOR INFORMATION EXCHANGE ON THE WEB

Slide 9

Slide 9 text

Luke Wroblewski, Web Form Design: Filling in the Blanks 10%-40% ⬆ INCREASED COMPLETION RATES REDESIGNING A BAD FORM CAN GET YOU

Slide 10

Slide 10 text

WEB FORMS USABILITY WORKSHOP DESIGN PRINCIPLES 10 Principles Form design is behavioral design Design from the outside-in for the user’s mental model Go for the Minimum Viable Ask Everything is measurable

Slide 11

Slide 11 text

VISCERAL BEHAVIORAL REFLECTIVE Donald Norman, Emotional Design

Slide 12

Slide 12 text

Indi Young, Mental Models DATABASE SCHEMA ORG CHART MENTAL MODEL ☻

Slide 13

Slide 13 text

MVP MVA Minimum Viable Ask Minimum Viable Product

Slide 14

Slide 14 text

IT’S ALL MEASURABLE 

Slide 15

Slide 15 text

WEB FORMS USABILITY WORKSHOP 15 FORM COMPONENTS

Slide 16

Slide 16 text

WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 16 Labels The unsung heroes of form usability Top-aligned vs. right-aligned vs. left-aligned Inline labels and placeholder text Indicate what’s optional (or just remove it)

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

NAME EMAIL (optional) COMMENT

Slide 19

Slide 19 text

TOP VS. RIGHT VS. LEFT ALIGNMENT http://css-tricks.com/label-placement-on-forms/

Slide 20

Slide 20 text

HOW USERS SCAN FORMS

Slide 21

Slide 21 text

␡ ✓ ✓ Doesn’t reinforce relationship between label and input 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

Slide 22

Slide 22 text

INLINE LABELS AND PLACEHOLDERS

Slide 23

Slide 23 text

LABELS SHOULDN’T DISAPPEAR http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/ ␡ Generally: use inline placeholder text to reinforce input formatting or provide hints The HTML5 placeholder attribute generally doesn’t disappear on focus See https://edit.yahoo.com/registration for a good inline label interaction design ✓

Slide 24

Slide 24 text

INDICATE WHAT’S OPTIONAL Try to keep it simple and minimize optional fields The most intuitive way to mark something as optional is with the word “optional”

Slide 25

Slide 25 text

WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 25 Inputs Text boxes Single selectors Multiple selectors Other inputs

Slide 26

Slide 26 text

TEXT BOXES Can be one single line or multiple lines Accepts free text input from the user

Slide 27

Slide 27 text

http://www.tinymce.com/ http://basecamp.com https://developer.apple.com/library/ios/documentation http://developer.android.com/guide/topics/ui/controls.html

Slide 28

Slide 28 text

SINGLE SELECTORS Allow a user to choose one mutually exclusive value from a set of existing options Or allow a user to toggle a single value

Slide 29

Slide 29 text

https://developer.apple.com/library/ios/documentation http://developer.android.com/guide/topics/ui/controls.html http://harvesthq.github.io/chosen/

Slide 30

Slide 30 text

MULTIPLE SELECTORS Allow a user to choose multiple values from a set of options Consider using autocomplete or a tag-style input instead of a standard HTML multiselect

Slide 31

Slide 31 text

http://aehlke.github.io/tag-it/ http://harvesthq.github.io/chosen/ http://developer.android.com/guide/topics/ui/controls.html

Slide 32

Slide 32 text

OTHER INPUTS  ⏲

Slide 33

Slide 33 text

http://basecamp.com http://dropbox.com UPLOADING FILES Drag-and-drop is a best practice for browser-based file upload fields Ideally, forms should support both traditional file selection and drag-and-drop functionality

Slide 34

Slide 34 text

https://github.com/dangrossman/bootstrap-daterangepicker https://developer.apple.com/library/ios/documentation http://developer.android.com/guide/topics/ui/controls.html DATES & TIMES Dates can be entered using free text, dropdowns or datepickers Free text is error-prone and puts the onus on the user Dropdowns are a good choice for birthdays Datepickers work for single dates as well as date ranges

Slide 35

Slide 35 text

WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 35 Actions Primary actions: buttons Secondary actions: buttons or links Strive for visual and textual clarity Placement matters with multiple actions

Slide 36

Slide 36 text

PRIMARY ACTIONS Primary actions either complete a task or move to the next step in a multi-step process Don’t settle for “Submit”: use descriptive, action-oriented copy The primary action should always be distinctly styled as a button or actionable element ␡

Slide 37

Slide 37 text

SECONDARY ACTIONS Necessary actions that don’t move the user forward in a process or complete the task Actions like “Cancel”, “Back”, “Close” are all secondary They can be buttons or links http://www.forrst.com http://www.tadalist.com http://www.delicious.com

Slide 38

Slide 38 text

VISUAL & TEXTUAL CLARITY ␡ Always make a clear visual distinction between primary and secondary actions Use pointed and unmistakably clear call-to-action copy

Slide 39

Slide 39 text

PLACEMENT ⬅❓➡

Slide 40

Slide 40 text

Luke Wroblewski, Primary & Secondary Actions in Web Forms http://www.lukew.com/ff/entry.asp?571

Slide 41

Slide 41 text

✓ ␡ ✓ ␡ ␡ ␡

Slide 42

Slide 42 text

MULTI-STEP PROCESSES http://www.campaignmonitor.com When designing a multi-step form, it’s intuitive for the primary action (“Next”) to be on the right and secondary left

Slide 43

Slide 43 text

WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 43 Help & messaging Inline help and user-activated help Provide suggestions and coach the user Use groupings and legends for context Be communicative about the system’s state

Slide 44

Slide 44 text

HELP TEXT: INLINE & USER-ACTIVATED http://twitter.com http://casacertiﬁcada.pt Inline help: good for formatting hints, recommendations or brief explanations User-activated help: good for more complex asks or frequently-accessed forms

Slide 45

Slide 45 text

COACHING

Slide 46

Slide 46 text

Use placeholder/inline text to suggest formatting or give examples http://getsatisfaction.com PROVIDE SUGGESTIONS

Slide 47

Slide 47 text

Make sure that your users know your good intentions Use help text to reassure users about their privacy and safety concerns http://wufoo.com http://teamtreehouse.com http://facebook.com TALK YOUR USERS THROUGH TOUGH SPOTS

Slide 48

Slide 48 text

GROUP RELATED FIELDS

Slide 49

Slide 49 text

GROUPINGS MAKE FORMS EASIER TO SCAN http://public-supply.com http://www.yahoo.com Using a legend or heading on a grouping allows the user to scan quickly Both visually obvious and subtle groupings of related fields are effective

Slide 50

Slide 50 text

BE COMMUNICATIVE http://monolo.co Give feedback on the state of the system and your user’s submission status If you’re waiting for a response from the server, disable actions to prevent repeat submissions When things go well, celebrate!

Slide 51

Slide 51 text

WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 51 Validation Inline validation vs. validating on submission The 3 C’s of error messaging: contextualized, clear and concise Don’t allow users to submit incomplete forms Give feedback and make suggestions

Slide 52

Slide 52 text

INLINE VALIDATION IS A BEST PRACTICE ⚠

Slide 53

Slide 53 text

Validate formatting inline: email addresses, phone numbers, credit card numbers 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

Slide 54

Slide 54 text

CONTEXTUALIZED CLEAR CONCISE   

Slide 55

Slide 55 text

CLEAR & CONCISE http://www.foxycart.com/admin.php http://beatsmusic.com Good error messaging speaks to the user in plain language Give the user a clue how to correct the error ✓ ␡

Slide 56

Slide 56 text

CONTEXTUALIZED http://somewherehq.com/auth/identity/register Use visual emphasis to show where something went awry Connect the error message with the form field By default, popular frameworks like Rails don’t contextualize their error messages ✓ ␡

Slide 57

Slide 57 text

DON’T ALLOW INCOMPLETE SUBMISSIONS Disabling submission until a form is complete saves time and prevents frustration ⬇

Slide 58

Slide 58 text

IMMEDIATE FEEDBACK & SUGGESTIONS Give unobtrusive inline feedback during completion Helps improve quality of user- generated inputs (ex: password strength) Helps users understand their status (characters left) http://developer.nokia.com/Community/Wiki/Mobile_Web_Design http://www.twitter.com

Slide 59

Slide 59 text

WEB FORMS USABILITY WORKSHOP FORM COMPONENTS 59 Exercise: FORM DISSECTION 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.

Slide 60

Slide 60 text

WEB FORMS USABILITY WORKSHOP 60 USE CASES

Slide 61

Slide 61 text

WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 61 User registration Keep it brief Consider common oAuth providers Allow users to progressively build out their profiles

Slide 62

Slide 62 text

KEEP IT BRIEF http://new.myspace.com http://squareup.com/register Don’t ask for anything more than the basics up front Consider common oAuth providers (Facebook, Twitter, Google, etc.) to reduce friction even further

Slide 63

Slide 63 text

USERS CAN PROGRESSIVELY ENGAGE Aim for minimal time-to-value for a new user Tie requests for information to the actions that require information Users can progressively build their profile and identity http://somewherehq.com/auth/identity/register

Slide 64

Slide 64 text

WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 64 Lead generation The submit button is your call-to-action Coach and educate your users Shorter isn’t always better

Slide 65

Slide 65 text

CALLS-TO-ACTION Don’t be generic Action-oriented: “Download”, “Sign up”, “Create”, “Read” Create incentives: “Free”, “Unlimited”, “Now” ␡

Slide 66

Slide 66 text

ALWAYS BE COACHING Reinforce the benefits as your user completes the form

Slide 67

Slide 67 text

SHORTER ISN’T ALWAYS BETTER http://oﬀers.hubspot.com/free-icons Longer forms help qualify leads 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)

Slide 68

Slide 68 text

WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 68 Purchase flows Remove distractions Use progress meters to tell the user where they stand Prefill and persist data Allow your users to checkout as a guest

Slide 69

Slide 69 text

REMOVE DISTRACTIONS http://amazon.com Strive to reduce the number of exit points from the checkout flow The less choices available, the more likely the user will follow your purchase funnel

Slide 70

Slide 70 text

USE PROGRESS METERS http://amazon.com http://fab.com http://moo.com Progress bars show a clear path to completion and communicate the user’s position Don’t use numbered steps if one step can have multiple parts

Slide 71

Slide 71 text

PREFILL & PERSIST http://store.apple.com http://public-supply.com ✓ ␡ Prefill potentially duplicative 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

Slide 72

Slide 72 text

ALLOW GUEST CHECKOUT http://blog.rejoiner.com/2012/09/checkout-usability-crate-and-barrel/ Forcing customers to create an account in order to check out creates unnecessary friction BUT: repeat customers will appreciate the convenience

Slide 73

Slide 73 text

WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 73 “Dark Patterns” Interfaces designed to mislead users Defaulting into unintended consequences Tricky language and messaging Optimized for short-term conversion vs. long-term gains

Slide 74

Slide 74 text

http://darkpatterns.org TRICK QUESTIONS HIDDEN COSTS SNEAK INTO BASKET BAIT & SWITCH

Slide 75

Slide 75 text

http://darkpatterns.org/library/hidden_costs/ DEFAULTING INTO PURCHASES

Slide 76

Slide 76 text

http://darkpatterns.org/library/trick_questions/ TRICKY LANGUAGE

Slide 77

Slide 77 text

“Dark patterns tend to perform very well in A/B and 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

Slide 78

Slide 78 text

http://techcrunch.com/2013/09/27/not-so-vip http://techcrunch.com/2013/05/04/path-blocked

Slide 79

Slide 79 text

WEB FORMS USABILITY WORKSHOP FORM ELEMENTS 79 Mobile web Don’t rely on inline labels Top-align labels Vertically align input fields in a single column Tab order is important Use HTML5 input types CAPTCHAs: just don’t, please

Slide 80

Slide 80 text

http://baymard.com/blog/mobile-forms-avoid-inline-labels STEER CLEAR OF INLINE LABELS ✓ ␡ ✓ ␡ Only use inline labels for extremely intuitive form inputs: username/password, for example

Slide 81

Slide 81 text

ONE COLUMN WITH TOP-ALIGNED LABELS ✓ ␡ ␡

Slide 82

Slide 82 text

http://yelp.com Mobile keyboards with previous/next buttons rely on the tabindex attribute VERIFY INPUTS’ TAB ORDER

Slide 83

Slide 83 text

and 10 more... HTML5 INPUT TYPES http://sixrevisions.com/html5/new-html5-form-input-types/ HTML5 input types signal the mobile OS to use a specialized keyboard

Slide 84

Slide 84 text

NO CAPTCHAs (PLEASE) http://cheezburger.com/6394194432 https://twitter.com/joelmmathis/status/86602335031267328

Slide 85

Slide 85 text

http://www.josscrowcroﬅ.com/demos/motioncaptcha/ http://groups.ischool.berkeley.edu/mobilecaptcha/tickets.html

Slide 86

Slide 86 text

WEB FORMS USABILITY WORKSHOP USE CASES 86 Exercise: HOT OR 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.

Slide 87

Slide 87 text

WEB FORMS USABILITY WORKSHOP 87 DESIGNING FORMS

Slide 88

Slide 88 text

WEB FORMS USABILITY WORKSHOP DESIGNING FORMS 88 Ask as little 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

Slide 89

Slide 89 text

ASK AS LITTLE AS POSSIBLE OF YOUR USER

Slide 90

Slide 90 text

http://me.com http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/ ␡ ✓

Slide 91

Slide 91 text

“Forms are a conversation, not an interrogation.” Nathan Barry, Forms are a Conversation http://uxmag.com/articles/forms-are-a-conversation

Slide 92

Slide 92 text

http://www.dartmouthsportsplex.com/ http://www.constantcontact.com ␡ ✓

Slide 93

Slide 93 text

http://www.dartmouthsportsplex.com/ http://www.constantcontact.com

Slide 94

Slide 94 text

COACH! REMIND! REASSURE! 

Slide 95

Slide 95 text

http://www.basecamp.com

Slide 96

Slide 96 text

PROVIDE A CLEAR PATH TO COMPLETION

Slide 97

Slide 97 text

http://www.perfume.com http://amazon.com ✓ ␡

Slide 98

Slide 98 text

http://assets.baymard.com/blog/multi-column-reading-paths.png

Slide 99

Slide 99 text

DON’T FORGET THE TAB ORDER In HTML5, you can set tabindex for any element tab

Slide 100

Slide 100 text

ORIENT THE USER 

Slide 101

Slide 101 text

http://platform.fullscreen.net

Slide 102

Slide 102 text

http://www.wufoo.com

Slide 103

Slide 103 text

GROUP ELEMENTS USING MENTAL MODELS

Slide 104

Slide 104 text

Via http://www.badforms.com http://www.yahoo.com ✓ ␡

Slide 105

Slide 105 text

http://aiaiai.dk http://public-supply.com ✓ ␡

Slide 106

Slide 106 text

THE DEVIL IS IN THE DEFAULTS

Slide 107

Slide 107 text

✓ ␡ ❓ ❓ ❓ http://campaignmonitor.com http://ﬂowersdirect.com

Slide 108

Slide 108 text

✓ ␡ http://platform.fullscreen.net

Slide 109

Slide 109 text

GIVE YOUR USERS A NEXT STEP

Slide 110

Slide 110 text

http://apply.fullscreen.net http://www.vox.com/register

Slide 111

Slide 111 text

 MEASURE & ITERATE

Slide 112

Slide 112 text

http://visualwebsiteoptimizer.com http://kissmetrics.com

Slide 113

Slide 113 text

WEB FORMS USABILITY WORKSHOP DESIGNING FORMS 113 Exercise: REDESIGN A 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!

Slide 114

Slide 114 text

WEB FORMS USABILITY WORKSHOP 114 RESOURCES

Slide 115

Slide 115 text

BOOKS, ARTICLES & BLOGS Luke Wroblewski, Web Form Design: Filling 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/

Slide 116

Slide 116 text

WEB FORMS USABILITY WORKSHOP 116 Q&A