Forms are boring

@mrjoe
forms
http://www.ﬂickr.com/photos/stovak/2378145902/sizes/z/in/photostream/
boring
MakingWeb,Oslo
Sept,2015
@mrjoe
Joe Leech
are

@mrjoe
Hi, I’m @mrjoe
but you can call
me Joe

@mrjoe
⅓ ⅓⅓Research DesignDigital
Strategy
This is what I do, I’ve done over 500 user research sessions in 32
countries in the last 12 years.
I specialise in complex interactions, like hotel booking, Insurance,
banking, trains and plane booking.
Let me share some insights on forms.

@mrjoe
£5.3
billiongoes through the forms I designed every year.
(scary).

@mrjoe
Buy the book
http://www.ﬁvesimplesteps.com/products/psychology-for-designers

@mrjoe
Phrenology
The detailed study of the shape and size of the cranium as a supposed
indication of character and mental abilities.

@mrjoe
u
Look! We have a part of the brain for forms.

@mrjoe
I want to
punch this website
in the face
As I said, I’ve completed around 500 user research sessions in my career.
And I hear frustration. Lots of frustration.

@mrjoe http://www.cxpartners.co.uk/cxblog/
veriﬁed_by_visa_and_mastercard_securecode_are_broken_and_need_to_be_ﬁx
And when there is junk like this out there like this, you can see why.

@mrjoe
1. Security is
important

@mrjoe
https
Security is good right. Well it depends on how you talk about it.

@mrjoe
There’s loads of this junk out there.

@mrjoe
And they worked well for these guys right?

@mrjoe
[it] has also observed through ﬁeld-testing
that in part because of the SSL solution,
the site has experienced a 26% higher
conversion rate
http://www.verisign.com/ssl/ssl-information-center/ssl-case-studies/credit-karma/index.html
86% of online shoppers feel more conﬁdent
about entering personal information on
sites using security indicators
http://www.thawte.com/resources/ssl-information-center/inspire-trust-online/index.html
But there are companies that want you to trust in the security messages. It’s their business. But
it’s misguided.

@mrjoe
http://baymard.com/blog/site-seal-trust
Which badge is the best sense of trust?
Can psychology help us understand
this?

@mrjoe
60%
Have you ever copied a classmate’s homework?
http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482
60% of people say they have

@mrjoe
Your information is
private & secure.
But what happens when we add this
message?

@mrjoe
60%
38%
People are less honest! Hold that
thought more on honesty later.

@mrjoe
Reassuring people
about privacy
makes them more,
not less, concerned.
“

@mrjoe
Which badge is the best sense of trust?
What’s wrong here? The question.

@mrjoe
No badge
is best!

@mrjoe
2. Don’t do stupid sh*t
with HTML5

@mrjoe
There is a lot of HTML5 junk out there.

@mrjoe http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6

@mrjoe http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6
why?

@mrjoe
0How old are you?
min="0" max="99"
What I’ve seen in user research. What I’ve seen.
People are drawn to the up/down arrows
Text boxes with stuﬀ in, like select boxes we are taught to click. I’ve watched
users spend 5 minutes clicking the up arrow, again and again.

@mrjoe
0How old are you?
min="0" max="99"
Small stuﬀ is hard to click.

@mrjoe
0How old are you?
min="0" max="99"
T = a + blog
2 (1 +
D
W) This is Fitts Law a very complicated way
of saying...
Small stuﬀ is hard to click.

@mrjoe
I watched some spend ages trying to get
their exact salary, sliders are crappy for
exact numbers. Think before using them.

@mrjoe
<video autoplay>
Really?

@mrjoe
<video autotune>
The W3C are working on this folks…

@mrjoe
Phone Number *
Age *
This blew my mind ﬁrst time I heard it. I keep
hearing it. why?
it’s a fake construct. a tech solution to a non tech
problem.
WIth paper forms, how do people complete
them.
From top til bottom until you stop them.

@mrjoe
Phone Number *
Age *I didn’t see them [the
asterisks]. There’s nothing
that explains what they
mean.
And I’ve heard this, many times, too many to
ignore

@mrjoe
<input type=“text” required>
Phone Number
Optional

@mrjoe https://twitter.com/whitingx/status/646250523201417216/photo/1
Thanks Rob / WhitingX

@mrjoe
What’s a ﬁeld, isn’t
that where cows
live?

@mrjoe
http://stackoverﬂow.com/questions/13798313/set-
custom-html5-required-ﬁeld-validation-message

@mrjoe
Phone Number
Optional
Here’s what to do

@mrjoe
:optional { }
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aoptional
Phone Number
Optional
Use CSS optional pseudo class

@mrjoe
Just because it’s in the
HTML5 speciﬁcation
doesn’t mean it has a good
user experience.

@mrjoe
I want to talk about an old project, back from
2009. A drag and drop interface for an insurance
company.

@mrjoe
http://www.nature.com/neuro/journal/v14/n10/ﬁg_tab/nn.2932_F1.htm
AFFORDANCE!
How something looks tells you how it works.

@mrjoe
Your policy
Roadside
assistance
Roadside
assistance
Roadside
assistance
[drag me]
Roadside
assistance
We tested a number of UI ideas for drag and
drop.

@mrjoe
And what was best? Add buttons!

@mrjoe
Along came the iPad. Thank you!
Drag and drop became more common place
people tried diﬀerent ideas
But we won’t go back, not because of aﬀordance
but because...

@mrjoe
Why [drag] when you
can click and it goes
over automatically?
People are lazy! They will always choose the easy
option. Hitting a button is easier than dragging,
it’s less eﬀort.

@mrjoe
http://alistapart.com/article/flat-ui-and-forms
http://alistapart.com/article/flat-ui-and-forms
While we are talking affordance, take
care with flat design and forms. It
really doesn’t help make things easier.
Avoid!

@mrjoe
In the last 24 months
have you used any
tobacco products?
Such as cigarettes, pipe tobacco, cigars  
or nicotine replacement products
Yes
No
How would you answer this question?

@mrjoe
have you used any
tobacco products?
Yes
No
Life Insurance
Corp.
What about now? Would you answer the same
way? Most people wouldn’t because they know
the consequences. My premium will be higher. But
what if you are an insurance company? You need
people to be honest…

@mrjoe
Help yourself to milk and
leave a contribution.
http://www.ﬁeldexperiments.com/uploads/biology%20letters.pdf
Back to psychology. An experiment in a university
kitchen. Shared milk for coﬀee and tea. Take milk
and leave a contribution to help buy some more.

@mrjoe
Help yourself to milk and
leave a contribution.
What images might improve the amount of money
left?

@mrjoe
£ paid per litre of milk consumed
People paid nearly three times
as much for their drinks when
eyes were displayed rather than a
control image.
This ﬁnding provides the ﬁrst
evidence from a naturalistic
setting of the importance of cues
of being watched, and hence
reputational concerns, on human
cooperative behaviour.

@mrjoe
have you used any
tobacco products?
Yes
No
So what did we do in out project?

@mrjoe
have you used any
tobacco products?
Yes
No
We added a face, in this case it was someone from the TV adverts, a stern looking June Whitﬁeld.. What
happened? People were more honest, we had more yes answers. Premiums might go down for all.

@mrjoe
Title Text
61
A designer
who doesn't
understand
psychology
is going to be no
more successful
than an architect
who doesn't
understand physics
Image: http://victorenrich.com/archives/155
@mrjoe

@mrjoe
mrjoe.uk/forms-are-boring
@mrjoe
www.smashingmagazine.com/
2011/10/free-download-cheat-
sheet-for-designing-web-forms/
Thank you!

Forms are boring

Recommended

Recommended

More Related Content

Similar to Forms are boring

Similar to Forms are boring (20)

Recently uploaded

Recently uploaded (20)

Forms are boring