Download - Twg's guide to onboarding
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
MaRS Experiment 1: Improve User Onboarding
Remember the good old days?
#formfail
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?
01Always set expectations
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.
Setting Expectations
Use motivating language
“Nice Job” You’re almost done. Use language that encourages users to continue filling out the form.
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.
02Avoid future errors
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.
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.
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
03Use language to guide the user
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.
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
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
04Organizing Information
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.
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
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
05Finally, find fun from forms!
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.
Speed, speed, speed
Offer autocomplete where possible, options like chrome autofill, placing the label above the input field allows for faster scanning.
Fun Forms
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
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!!!!!
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/
Ping me and let’s geek out on web forms.
Shiera Aryev@saryev