How to save money by fixing forms, WebExpo2023

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

How to save money by fixing forms
Caroline Jarrett
@cjforms
#WebExpo2023

Caroline Jarrett @cjforms (CC) BY SA-4.0
2
Let’s have a look at a form
Czech railways

Caroline Jarrett @cjforms (CC) BY SA-4.0
3
Is this
a form?

Caroline Jarrett @cjforms (CC) BY SA-4.0
4
We know a form when we see it
Looks like a form and
works like a form
Asks ques...

Caroline Jarrett @cjforms (CC) BY SA-4.0
5
A good form needs a lot of design
Interaction design:
Looks like a form and
wor...

Caroline Jarrett @cjforms (CC) BY SA-4.0
6
A good form works well across the layers
Interaction design Content design Serv...

Caroline Jarrett @cjforms (CC) BY SA-4.0
7
The outside world sees you through your forms
Thought for the day by Tim Paul: ...

Caroline Jarrett @cjforms (CC) BY SA-4.0
8
A good form starts with user and business needs
User
needs
Business
needs
Answe...

Caroline Jarrett @cjforms (CC) BY SA-4.0
9
Failures get expensive
Drops out of the form Gives a wrong answer
Calls helplin...

Caroline Jarrett @cjforms (CC) BY SA-4.0
10
Takeaway A good form is easy to:
• read and use
• understand and answer
• get ...

Caroline Jarrett @cjforms (CC) BY SA-4.0
11
Have you ever abandoned a form?
“I don’t want to
click the arrow
27 times to g...

Caroline Jarrett @cjforms (CC) BY SA-4.0
12
Maybe 70% of shopping carts get abandoned
https://baymard.com/lists/cart-aband...

Caroline Jarrett @cjforms (CC) BY SA-4.0
13
Baymard researched why people abandon carts
0% 10% 20% 30% 40% 50%
The credit ...

Caroline Jarrett @cjforms (CC) BY SA-4.0
14
Many people abandon because of forms problems
0% 10% 20% 30% 40% 50%
The credi...

Caroline Jarrett @cjforms (CC) BY SA-4.0
15
Save money by
improving service design

Caroline Jarrett @cjforms (CC) BY SA-4.0
16
Let’s think about “too long / complicated”
0% 10% 20% 30% 40% 50%
The credit c...

Caroline Jarrett @cjforms (CC) BY SA-4.0
17
Government forms can also be far too long
“By doing user research, and diving ...

Caroline Jarrett @cjforms (CC) BY SA-4.0
18
When you ask a question, know why
Create a question protocol to make sure that...

Caroline Jarrett @cjforms (CC) BY SA-4.0
19
Privacy is important
Read “Understanding
Privacy” by Heather Burns
Do what she...

Caroline Jarrett @cjforms (CC) BY SA-4.0
20
Every extra question costs you money
• A longer form to implement and maintain...

Caroline Jarrett @cjforms (CC) BY SA-4.0
21
Prune: remove questions you don’t need
Image credit: https://portal.ct.gov/-
/...

Caroline Jarrett @cjforms (CC) BY SA-4.0
22
Keep it realistic. Extremely short fails, too.
“I removed all the fields that
...

Caroline Jarrett @cjforms (CC) BY SA-4.0
23
Do usability testing on your form
Get someone to fill in your form
while you w...

Caroline Jarrett @cjforms (CC) BY SA-4.0
24
Takeaway Every question that you ask
costs you money.
Be thoughtful and carefu...

Caroline Jarrett @cjforms (CC) BY SA-4.0
25
Save money with better content

Caroline Jarrett @cjforms (CC) BY SA-4.0
26
Please tell me your
answers for this form

Caroline Jarrett @cjforms (CC) BY SA-4.0
27
Let’s start with the
button
Also known as
“Call To Action”
(CTA)

Caroline Jarrett @cjforms (CC) BY SA-4.0
28
I’m often confused by ‘OK’ and ‘Cancel’

Caroline Jarrett @cjforms (CC) BY SA-4.0
29
Label the button with what it does*
*I think this is what these buttons do

Caroline Jarrett @cjforms (CC) BY SA-4.0
30
The best CTAs are strong verbs
• Sign up
• Start
• Download
• Apply

Caroline Jarrett @cjforms (CC) BY SA-4.0
31
You can add some extra encouragement
• Sign up now
• Start your site
• Downloa...

Caroline Jarrett @cjforms (CC) BY SA-4.0
32
But look across all the buttons
• I was applying for a credit card

Caroline Jarrett @cjforms (CC) BY SA-4.0
33
Takeaway Label the button with
what it does
Extra tip:
When you have a meeting...

Caroline Jarrett @cjforms (CC) BY SA-4.0
34
Yes/no questions are
problematic
They can be hard to answer
If none of the opt...

Caroline Jarrett @cjforms (CC) BY SA-4.0
35
Problem 1: The answer isn’t YES or NO

Caroline Jarrett @cjforms (CC) BY SA-4.0
36
Idea 1: Re-design the conversation
How old are you?
Validation:
If 16 to 65, c...

Caroline Jarrett @cjforms (CC) BY SA-4.0
37
Problem 2: The answer is “I’m confused”
“I didn’t know I was adding anything.
...

Caroline Jarrett @cjforms (CC) BY SA-4.0
38
Idea 2a: Explain the options in the text
“I didn’t know I was adding anything....

Caroline Jarrett @cjforms (CC) BY SA-4.0
39
Idea 2b: Sometimes you can scrap the Yes and No
“I didn’t know I was adding an...

Caroline Jarrett @cjforms (CC) BY SA-4.0
40
Problem 3: Real life is analogue, not binary
• “There is a lodger / paying gue...

Caroline Jarrett @cjforms (CC) BY SA-4.0
41
Idea 3: Add extra response options
• “There is a lodger / paying guest but we
...

Caroline Jarrett @cjforms (CC) BY SA-4.0
42
Takeaway No ‘yes/no’ questions
Real life is analogue
There are nearly always o...

Caroline Jarrett @cjforms (CC) BY SA-4.0
43
Do usability testing on your form
Get someone to fill in your form
while you w...

Caroline Jarrett @cjforms (CC) BY SA-4.0
44
Save money with better interaction

Caroline Jarrett @cjforms (CC) BY SA-4.0
45
Can you read this?
Most people filling in your form
have small screens
Many ha...

Caroline Jarrett @cjforms (CC) BY SA-4.0
46
Check that your colours work all the time

Caroline Jarrett @cjforms (CC) BY SA-4.0
47
The basic interactions
are easiest to use
• Radio buttons
• Checkboxes
• Text ...

Caroline Jarrett @cjforms (CC) BY SA-4.0
48
Don’t be fancy for no good reason
For example, here are some examples of askin...

Caroline Jarrett @cjforms (CC) BY SA-4.0
49
Excess minimalism can also be too fancy

Caroline Jarrett @cjforms (CC) BY SA-4.0
50
Somebody at the website noticed and fixed it - yay

Caroline Jarrett @cjforms (CC) BY SA-4.0
51
Don’t “save space” by putting labels inside boxes

Caroline Jarrett @cjforms (CC) BY SA-4.0
52
Also, don’t use float labels
https://adamsilver.io/blog/float-labels-are-probl...

Caroline Jarrett @cjforms (CC) BY SA-4.0
53
Smashing Magazine
used to have float labels

Caroline Jarrett @cjforms (CC) BY SA-4.0
54
Put the question outside the box
Leave the box empty for the answer
Question h...

Caroline Jarrett @cjforms (CC) BY SA-4.0
55
Do usability testing on your form
Get someone to fill in your form
while you w...

Caroline Jarrett @cjforms (CC) BY SA-4.0
56
Takeaway No-one wants to be delighted by
your form. Make it easy, so they
can ...

Caroline Jarrett @cjforms (CC) BY SA-4.0
57
A good form works well across the layers
Interaction design
Appearance
Content...

Caroline Jarrett @cjforms (CC) BY SA-4.0
58
Caroline Jarrett
twitter @cjforms
caroline.jarrett@effortmark.co.uk
www.effort...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1033581 views
Storytelling For The Web: Integrate... by Chiara Aliotta 945137 views
Artificial Intelligence, Data and C... by OECD Directorate ... 865593 views
How to Leverage AI to Boost Employe... by SocialHRCamp 363144 views
2024 State of Marketing Report – by... by Marius Sescu 206375 views
Everything You Need To Know About C... by Expeed Software 226977 views

View on Slideshare

1 of 58 Ad

View on Slideshare

1 of 58 Ad