Increasing conversion and loyalty by enhancing and improving sign-up forms by combining best practices and ideas from the work of Marcin Treder, Luke Wroblewski, Caroline Jarrett, Dr. BJ Fogg, and Aarron Walter.
19. 783 million people lack access to clean water.
Learn more about global fresh water issues —
and find out what you can do.
Engage
site: Conservation International
20. EMPOWER
You May
VS.
You Must!
Giving the user
the power to choose
reduces negative reactions.
28. RECOMMENDATIONS
Step 2 Form
• Motivate – Encourage participation.
• Assurance – Declare secure info use.
• Explain – Clear instructions & helpful interactions…
• Keep it simple – Use a minimal form.
• Engage – Use emotional language.
• Empower – You May vs. You Must!
29. RECOMMENDATIONS
Step 3 Thank you.
• Motivate – Recommend participation.
• Engage – Use emotional language.
Opportunity
Provide motivation, means, and a trigger.
30. Bibliography
Web Form Design: Filling in the Blanks – Luke Wroblewski
Forms that work – Caroline Jarrett & Gerry Gaffney
BJ Fogg's Behavior Model – Dr. BJ Fogg
The Ultimate UX Design of: the Sign-Up Form – Marcin Treder
Designing for Emotion – Aarron Walter
Editor's Notes
SIGN-UP
Building trust = improve conversion
and loyalty = increase retention
AGENDA
Why?
How? Best Practices
What? Newsletter Sign-up
Recommendations
WHY?
The potential payoff for optimizing your web forms is huge. In Web Form Design: Filling in the Blanks, noted interface designer Luke Wroblewski reported that
A solid redesign of a bad form could increase completion rates by 10-40%
- Luke Wroblewski
How many UI/UX tweaks have that kind of impact?
HOW?
Best Practices
Motivate
Assure
Explain
Keep It Simple
Engage
Empower
Note: Not all apply at every step.
WHAT?
Sign-Up form workflow.
Homepage Sign up form Confirm & Thank You!
Simple but so important in creating a 1st impression.
MOTIVATE
Capture Heart & Mind
Tell a story to encourage participation.
Participation. Being part of important meaningful work, is a basic and powerful motivator.
Participation is one of 10 of our fundamental human needs. – Maslow’s hierarchy of needs. http://en.wikipedia.org/wiki/Maslow%27s_hierarchy_of_needs
Social Need: provides us a sense of belonging and self esteem
The mechanics of Motivation are covered in the example section.
MOTIVATE
Tell a story to encourage participation.
TOMS
We’re in business to help improve lives.
With every product you purchase, TOMS will help a person in need. One for One.®
ASSURE
Communicate Safety
The message “It is safe to sign up”, inspires trust.
Reduce perceived exposure.
Dispel doubts, instill confidence, and build trust.
ASSURE
Few organizations declare this with the exception of financial companies. E.g. Mint
ASSURE
Wufoo is one of the few.
Don’t worry. This info is sacred to us. We won’t ever sell or abuse it.
EXPLAIN
Reduce Friction
Use clear instructions and helpful interactions…
through out the steps on the form.
smart defaults, inline validation, forgiving inputs
EXPLAIN
MailChimp has a great form.
Explain form fields clearly
KEEP IT SIMPLE
Create a Clear Path.
Use a minimal form to
make it easy for users
to achieve their goals
Reduce complexity
Make the next step obvious
Avoid too much information
Fewest fields possible
KEEP IT SIMPLE
Create a Clear Path.
Amnesty International
Make the next step obvious
KEEP IT SIMPLE
Amnesty International
Avoid too much information
Fewest fields possible
ENGAGE
Use Emotional Language
Create an emotional Identification to build intimacy, trust, and loyalty.
“You give hope and help”
ENGAGE
Use Emotional Language
Conservation International
THE ESSENCE OF LIFE
783 million people lack access to clean water. Learn more about global fresh water issues — and find out what you can do.
ENGAGE
Use Emotional Language
Conservation International
THE ESSENCE OF LIFE
783 million people lack access to clean water. Learn more about global fresh water issues — and find out what you can do.
EMPOWER
You May vs. You Must
Requiring information creates resistance.
Giving the user the power to choose when to provide more information reduces negative reactions.
Encouraging the user with the benefits of completing their profile increases loyalty.
EMPOWER
“You May vs. You Must”
Translates into practical terms in a form by not requiring information.
EMPOWER
Feel free to provide us with as much information as you wish,
but, to start, all we need is your email and your name.
Translates into practical terms in a form by not requiring information.
WHAT?
Newsletter Sign-Up form workflow
Homepage Sign up form Confirm & Thank You!
Step 1 Homepage
Behavior Model
OXFAM America
1. Motivation (Reason) to do something
2. Ability to do it
3. Trigger, a well-placed trigger that offers them the moment of converting potential into [kinetic] [inter]action.
What Causes Behavior Change?
My (B.J. Fogg –Stanford professor) Behavior Model shows that three elements must converge at the same moment for a behavior to occur:
Motivation
Ability, and
Trigger.
When a behavior does not occur, at least one of those three elements is missing.
Step 2 Form
Keep it simple
MailChimp has a great form.
Fewest fields possible
Explain form fields clearly
Step 3 Thank you
World Wildlife Fund continues to motivate and engage with on their thank you/confirmation page.
RECOMMENDATIONS
Step 1
Motivate – Enhance the language.
Engage – Use emotional language.
Keep it simple – Clear path.
RECOMMENDATIONS
Step 2 Form
Motivate – Encourage participation.
Assurance – Declare secure info use.
Explain – Clear instructions & helpful interactions…
Keep it simple – Use a minimal form.
Engage – Use emotional language.
Empower – You May vs. You Must!
RECOMMENDATIONS
Step 3
Motivate – Recommend participation.
Engage – Use emotional language.
Opportunity
Provide motivation, means, and a trigger.