Twg's guide to onboarding
-
Upload
shiera-aryev -
Category
Design
-
view
170 -
download
0
Transcript of Twg's guide to onboarding
![Page 1: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/1.jpg)
TWG’s Guide to Designing
Form ExperiencesThis guide cover the basics of long format form
design and best practices to consider to help you
build the best guided form experience.
Shiera Aryev@saryev
![Page 2: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/2.jpg)
MaRS Experiment 1: Improve User Onboarding
![Page 3: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/3.jpg)
Remember the good old days?
![Page 4: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/4.jpg)
![Page 5: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/5.jpg)
#formfail
![Page 6: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/6.jpg)
Purchases
• User wants to purchase
something
• Better the form design, the
more conversions
• Note that the user has a really
strong motivation to complete
the form in this scenario
Communication
• Users fill out application forms
to communicate certain
information to companies
• The better the form design,
the more likely the business
can increase their customer
base
Engagement
• Forms can enable
information entry, which
gathers content and data for
the company
Why Forms?
![Page 7: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/7.jpg)
![Page 8: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/8.jpg)
01Always set expectations
![Page 9: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/9.jpg)
![Page 10: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/10.jpg)
Setting Expectations
Use a progress indicator to highlight a path to completion
Letting the user know what step they are on and how far they have to go motivates them to finish filling out the form.
![Page 11: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/11.jpg)
Setting Expectations
Use motivating language
“Nice Job” You’re almost done. Use language that encourages users to continue filling out the form.
![Page 12: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/12.jpg)
Setting Expectations
Remind them of the main benefitAdding benefit statements re-insures the user of the value they are going to get once they’ve signed up and completed the form.
![Page 13: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/13.jpg)
02Avoid future errors
![Page 14: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/14.jpg)
![Page 15: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/15.jpg)
Avoiding Errors
Pay extra close attention when designing input fields
Ensure you include smart defaults, inline validation and forgiving inputs as well as indicating which fields are required to avoid future errors.
![Page 16: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/16.jpg)
Avoiding Errors
Auto save so that the user doesn’t lose information they are saving
There is nothing worst then having your browser crash on you after you invested time into filling out information.
![Page 17: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/17.jpg)
Use max length, placeholder copy, helpful hints and avoid input masks where possible
Avoid errors by letting the user know how much information to enter. Save them time by giving them examples on how to get started and avoid masks on things like passwords so that they know what password they entered.
Avoiding Errors
![Page 18: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/18.jpg)
03Use language to guide the user
![Page 19: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/19.jpg)
![Page 20: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/20.jpg)
Guiding Language
Educate the user on why you need certain information
There’s nothing worst then feeling like your information is insecure, or not knowing what will happen with the data you enter. Wherever possible, be transparent.
![Page 21: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/21.jpg)
Ensure button copy describes the action such as “Describe your company next”
“Nice Job” You’re almost done. Use language that encourages users to continue filling out the form.
Guiding Language
![Page 22: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/22.jpg)
Don’t forget to welcome the user and thank them for their time
Thank the user for investing their time and giving you their information. Its one more way to make a very long, tedious experience feel that much better.
Guiding Language
![Page 23: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/23.jpg)
04Organizing Information
![Page 24: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/24.jpg)
![Page 25: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/25.jpg)
Organizing Information
Group information logically by type or category and break the form into smaller chunks.
Avoid creating moments of hesitation for users that are completing a form by making things extremely clear and logical.
![Page 26: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/26.jpg)
Save the most challenging or tedious bits for last.
Users are much more likely to fill out information now that they’ve already invested in filling out the prior info.
Organizing Information
![Page 27: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/27.jpg)
The “Guided Miracle”
Improve the layout of your online forms by placing form labels near the associated text field and by grouping similar fields.
Organizing Information
![Page 28: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/28.jpg)
05Finally, find fun from forms!
![Page 29: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/29.jpg)
![Page 30: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/30.jpg)
Fun Forms
Make it smart
Prefilling content where possible and giving the user the right keyboard on the phone for the type of information they are filling out.
![Page 31: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/31.jpg)
Speed, speed, speed
Offer autocomplete where possible, options like chrome autofill, placing the label above the input field allows for faster scanning.
Fun Forms
![Page 32: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/32.jpg)
Find moments to excite and delight
We all know forms can be really long and boring - but what if there were some little interactions that could make the experience more pleasing. Copy that would make it more inviting?
Fun Forms
![Page 33: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/33.jpg)
Closing Thoughts
Provide the user with value for devoting their precious time
Turn something that’s normally tedious into something memorable
Multi-step web forms can be designed to be great experiences
Now go design your form!!!!!
![Page 34: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/34.jpg)
01. Best Practices for Form Designhttp://static.lukew.com/webforms_lukew.pdf
Appendix
02. Form Design Quick Fix: Group form Elements Effectively Using White Spacehttp://www.nngroup.com/articles/form-design-white-space/
04. 7 Common Web Form Design Mistakes to Avoidhttp://www.formassembly.com/blog/web-form-design/
05. User Onboardhttp://www.useronboard.com/
03. Bad Formshttp://badforms.com/size-matters-for-form-fields-that-is/
![Page 35: Twg's guide to onboarding](https://reader038.fdocuments.us/reader038/viewer/2022103021/55d0a8f1bb61ebbe218b468b/html5/thumbnails/35.jpg)
Ping me and let’s geek out on web forms.
Shiera Aryev@saryev