@mrjoe
forms
http://www.flickr.com/photos/stovak/2378145902/sizes/z/in/photostream/
boring
MakingWeb,Oslo
Sept,2015
@mrjoe
...
@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...
@mrjoe
£5.3
billiongoes through the forms I designed every year.
(scary).
@mrjoe
Buy the book
http://www.fivesimplesteps.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...
@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.
...
@mrjoe http://www.cxpartners.co.uk/cxblog/
verified_by_visa_and_mastercard_securecode_are_broken_and_need_to_be_fix
And when...
@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 field-testing
that in part because of the SSL solution,
the site has experienced a 26...
@mrjoe
http://baymard.com/blog/site-seal-trust
Which badge is the best sense of trust?
Can psychology help us understand
t...
@mrjoe
60%
Have you ever copied a classmate’s homework?
http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482
60% of ...
@mrjoe
Have you ever copied a classmate’s homework?
http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482
Your inform...
@mrjoe
60%
Have you ever copied a classmate’s homework?
http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482
38%
Peo...
@mrjoe
Reassuring people
about privacy
makes them more,
not less, concerned.
http://papers.ssrn.com/sol3/papers.cfm?abstra...
@mrjoe
http://baymard.com/blog/site-seal-trust
Which badge is the best sense of trust?
What’s wrong here? The question.
@mrjoe
http://baymard.com/blog/site-seal-trust
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...
@mrjoe
0How old are you?
min="0" max="99"
Small stuff 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...
S...
@mrjoe
I watched some spend ages trying to get
their exact salary, sliders are crappy for
exact numbers. Think before usin...
@mrjoe
<video autoplay>
Really?
@mrjoe
<video autotune>
The W3C are working on this folks…
@mrjoe
Phone Number *
Age *
This blew my mind first time I heard it. I keep
hearing it. why?
it’s a fake construct. a tech ...
@mrjoe
Phone Number *
Age *I didn’t see them [the
asterisks]. There’s nothing
that explains what they
mean.
And I’ve heard...
@mrjoe
<input type=“text” required>
Phone Number
Optional
@mrjoe
@mrjoe
@mrjoe
@mrjoe https://twitter.com/whitingx/status/646250523201417216/photo/1
Thanks Rob / WhitingX
@mrjoe
What’s a field, isn’t
that where cows
live?
@mrjoe
http://stackoverflow.com/questions/13798313/set-
custom-html5-required-field-validation-message
@mrjoe
@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 p...
@mrjoe
Just because it’s in the
HTML5 specification
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/fig_tab/nn.2932_F1.htm
AFFORDANCE!
How something looks tells you how it ...
@mrjoe
Your policy
Roadside
assistance
Roadside
assistance
Roadside
assistance
[drag me]
Roadside
assistance
We tested a n...
@mrjoe
And what was best?
@mrjoe
And what was best? Add buttons!
@mrjoe
Along came the iPad. Thank you!
Drag and drop became more common place
people tried different ideas
But we won’t go ...
@mrjoe
Why [drag] when you
can click and it goes
over automatically?
People are lazy! They will always choose the easy
opt...
@mrjoe
http://alistapart.com/article/flat-ui-and-forms
http://alistapart.com/article/flat-ui-and-forms
While we are talking ...
@mrjoe
3. Encourage honesty
@mrjoe
In the last 24 months
have you used any
tobacco products?
Such as cigarettes, pipe tobacco, cigars 

or nicotine re...
@mrjoe
In the last 24 months
have you used any
tobacco products?
Such as cigarettes, pipe tobacco, cigars 

or nicotine re...
@mrjoe
Help yourself to milk and
leave a contribution.
http://www.fieldexperiments.com/uploads/biology%20letters.pdf
Back t...
@mrjoe
Help yourself to milk and
leave a contribution.
http://www.fieldexperiments.com/uploads/biology%20letters.pdf
What i...
@mrjoe
£ paid per litre of milk consumed
People paid nearly three times
as much for their drinks when
eyes were displayed ...
@mrjoe
In the last 24 months
have you used any
tobacco products?
Such as cigarettes, pipe tobacco, cigars 

or nicotine re...
@mrjoe
In the last 24 months
have you used any
tobacco products?
Such as cigarettes, pipe tobacco, cigars 

or nicotine re...
@mrjoe
Title Text
61
A designer
who doesn't
understand
psychology
is going to be no
more successful
than an architect
who ...
@mrjoe
mrjoe.uk/forms-are-boring
@mrjoe
www.smashingmagazine.com/
2011/10/free-download-cheat-
sheet-for-designing-web-for...
Upcoming SlideShare
Loading in …5
×

Forms are boring

2,079 views

Published on

The science of form design. Security, honesty & stupid mistakes not to make.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,079
On SlideShare
0
From Embeds
0
Number of Embeds
589
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Forms are boring

  1. 1. @mrjoe forms http://www.flickr.com/photos/stovak/2378145902/sizes/z/in/photostream/ boring MakingWeb,Oslo Sept,2015 @mrjoe Joe Leech are
  2. 2. @mrjoe Hi, I’m @mrjoe but you can call me Joe
  3. 3. @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.
  4. 4. @mrjoe £5.3 billiongoes through the forms I designed every year. (scary).
  5. 5. @mrjoe Buy the book http://www.fivesimplesteps.com/products/psychology-for-designers
  6. 6. @mrjoe Phrenology The detailed study of the shape and size of the cranium as a supposed indication of character and mental abilities.
  7. 7. @mrjoe u Look! We have a part of the brain for forms.
  8. 8. @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.
  9. 9. @mrjoe http://www.cxpartners.co.uk/cxblog/ verified_by_visa_and_mastercard_securecode_are_broken_and_need_to_be_fix And when there is junk like this out there like this, you can see why.
  10. 10. @mrjoe 1. Security is important
  11. 11. @mrjoe https Security is good right. Well it depends on how you talk about it.
  12. 12. @mrjoe There’s loads of this junk out there.
  13. 13. @mrjoe And they worked well for these guys right?
  14. 14. @mrjoe [it] has also observed through field-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 confident 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.
  15. 15. @mrjoe http://baymard.com/blog/site-seal-trust Which badge is the best sense of trust? Can psychology help us understand this?
  16. 16. @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
  17. 17. @mrjoe Have you ever copied a classmate’s homework? http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482 Your information is private & secure. But what happens when we add this message?
  18. 18. @mrjoe 60% Have you ever copied a classmate’s homework? http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482 38% People are less honest! Hold that thought more on honesty later.
  19. 19. @mrjoe Reassuring people about privacy makes them more, not less, concerned. http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482 “
  20. 20. @mrjoe http://baymard.com/blog/site-seal-trust Which badge is the best sense of trust? What’s wrong here? The question.
  21. 21. @mrjoe http://baymard.com/blog/site-seal-trust No badge is best!
  22. 22. @mrjoe 2. Don’t do stupid sh*t with HTML5
  23. 23. @mrjoe There is a lot of HTML5 junk out there.
  24. 24. @mrjoe http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6
  25. 25. @mrjoe http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 why?
  26. 26. @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 stuff in, like select boxes we are taught to click. I’ve watched users spend 5 minutes clicking the up arrow, again and again.
  27. 27. @mrjoe 0How old are you? min="0" max="99" Small stuff is hard to click.
  28. 28. @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 stuff is hard to click.
  29. 29. @mrjoe I watched some spend ages trying to get their exact salary, sliders are crappy for exact numbers. Think before using them.
  30. 30. @mrjoe <video autoplay> Really?
  31. 31. @mrjoe <video autotune> The W3C are working on this folks…
  32. 32. @mrjoe Phone Number * Age * This blew my mind first 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.
  33. 33. @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
  34. 34. @mrjoe <input type=“text” required> Phone Number Optional
  35. 35. @mrjoe
  36. 36. @mrjoe
  37. 37. @mrjoe
  38. 38. @mrjoe https://twitter.com/whitingx/status/646250523201417216/photo/1 Thanks Rob / WhitingX
  39. 39. @mrjoe What’s a field, isn’t that where cows live?
  40. 40. @mrjoe http://stackoverflow.com/questions/13798313/set- custom-html5-required-field-validation-message
  41. 41. @mrjoe
  42. 42. @mrjoe Phone Number Optional Here’s what to do
  43. 43. @mrjoe :optional { } https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aoptional Phone Number Optional Use CSS optional pseudo class
  44. 44. @mrjoe Just because it’s in the HTML5 specification doesn’t mean it has a good user experience.
  45. 45. @mrjoe I want to talk about an old project, back from 2009. A drag and drop interface for an insurance company.
  46. 46. @mrjoe http://www.nature.com/neuro/journal/v14/n10/fig_tab/nn.2932_F1.htm AFFORDANCE! How something looks tells you how it works.
  47. 47. @mrjoe Your policy Roadside assistance Roadside assistance Roadside assistance [drag me] Roadside assistance We tested a number of UI ideas for drag and drop.
  48. 48. @mrjoe And what was best?
  49. 49. @mrjoe And what was best? Add buttons!
  50. 50. @mrjoe Along came the iPad. Thank you! Drag and drop became more common place people tried different ideas But we won’t go back, not because of affordance but because...
  51. 51. @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 effort.
  52. 52. @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!
  53. 53. @mrjoe 3. Encourage honesty
  54. 54. @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?
  55. 55. @mrjoe In the last 24 months have you used any tobacco products? Such as cigarettes, pipe tobacco, cigars 
 or nicotine replacement 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…
  56. 56. @mrjoe Help yourself to milk and leave a contribution. http://www.fieldexperiments.com/uploads/biology%20letters.pdf Back to psychology. An experiment in a university kitchen. Shared milk for coffee and tea. Take milk and leave a contribution to help buy some more.
  57. 57. @mrjoe Help yourself to milk and leave a contribution. http://www.fieldexperiments.com/uploads/biology%20letters.pdf What images might improve the amount of money left?
  58. 58. @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 finding provides the first evidence from a naturalistic setting of the importance of cues of being watched, and hence reputational concerns, on human cooperative behaviour. http://www.fieldexperiments.com/uploads/biology%20letters.pdf
  59. 59. @mrjoe In the last 24 months have you used any tobacco products? Such as cigarettes, pipe tobacco, cigars 
 or nicotine replacement products Yes No So what did we do in out project?
  60. 60. @mrjoe In the last 24 months have you used any tobacco products? Such as cigarettes, pipe tobacco, cigars 
 or nicotine replacement products Yes No We added a face, in this case it was someone from the TV adverts, a stern looking June Whitfield.. What happened? People were more honest, we had more yes answers. Premiums might go down for all.
  61. 61. @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
  62. 62. @mrjoe mrjoe.uk/forms-are-boring @mrjoe www.smashingmagazine.com/ 2011/10/free-download-cheat- sheet-for-designing-web-forms/ Thank you!

×