There’s nothing worse than a form design project. The thought of laying out page after page of white boxes and labels can send the average designer to sleep. It doesn’t have to be this way.

1. http://www.flickr.com/photos/stovak/2378145902/sizes/z/in/photostream/
forms are boring
@mrjoe
Joe Leech NUX2 October 2013
1

2. Hello, I’m @mrjoe, but
you can call me Joe
@mrjoe

3. http://www.fivesimplesteps.com/products/psychology-for-designers
Just buy it! Only £2.
@mrjoe

4. 4

5. 5

6. There’s a special bit of
the brain just for forms
u
5

7. I want to
punch this website
in the face
6

8. So many mistakes in one
form & yet business
critical.
http://www.cxpartners.co.uk/cxblog/
verified_by_visa_and_mastercard_securecode_are_broken_and_need_to_be_fixed/
7

9. 1. Security isn’t that
important
Here’s some form advice.
8

10. 86% of online shoppers feel more confident
about entering personal information on sites
using security indicators
These guys would say
that.
9

11. 86% of online shoppers feel more confident
about entering personal information on sites
using security indicators
[it] has also observed through field-testing
that in part because of the SSL solution, the
site has experienced a 26% higher conversion
rate
These guys would say
that.
9

12. 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
[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
These guys would say
that.
9

13. http://papers.ssrn.com/sol3/papers.cfm?
abstract_id=1430482
From a study. Maybe we
shouldn’t talk about
security too much?
10

14. http://papers.ssrn.com/sol3/papers.cfm?
abstract_id=1430482
“ Reassuring people about
privacy makes them more,
not less, concerned.
From a study. Maybe we
shouldn’t talk about
security too much?
10

15. 2. Don’t do stupid sh*t
with HTML5
11

16. @mrjoe

17. Just because you
can doesn’t mean
you should
@mrjoe

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

19. 0
min="0"
max="99"
What I’ve seen in
research is
people are drawn to the
up/down arrows
Text boxes with stuff in,
like select boxes we are
taught to click to
change.
15

20. 0
D
T = a + blog 2 ( 1 + )
W
this is Fitt’s Law a very complicated
way of saying...
16

21. 0
D
T = a + blog 2 ( 1 + )
W
... small stuff is hard to click.
17

22. They are so fiddly for entering exact
values.
Sadly they are very ‘fashionable’
right now. Think before you use.
18

23. autoplay=”autoplay”
There are uses for this, and no, one them isn’t a
MIDI sound track for you site.
19

24. *
How did you hear about us?
How old are you?
*
Ever seen these before?
20

25. *
How did you hear about us?
How old are you?
*
I didn’t see them [the asterisks].
There’s nothing that explains
what they mean.
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.
Think paper forms, how do people complete them.
From top to bottom until you tell them to stop.
21

26. How did you hear about us?
optional
Here’s what to do.
Technically it’s a little harder
Don’t enter labels in the text field because as
soon as you type they are gone. How do you
check you responses when reviewing a
completed form?
22

27. How did you hear about us?
optional
required=”required”
Doesn’t cut it I’m afraid.
23

28. Blink and it disappears.
Click submit, go and make
a cup of tea, return and
you don’t know what you
did wrong.
24

29. Opera is better. But the
error message is a bit
geeky. Plus it behaves
differently to Chrome.
25

30. Firefox is better, but still, what is a
field? Most people think a field is a
place where a cow lives.
26

31. There are so many
inconsistencies
across browsers.
Browser guys: you
need to agree on an
implementation
standard.
As @Aral says, w3C
you need to set a
standard.
@mrjoe

32. We tested this drag and drop
insurance interface 4 years back.
Problem was nobody got it. Why?...

33. ...no affordance. That is no clue from
the design what you should do. Like
a push/pull door.
http://www.nature.com/neuro/journal/v14/n10/fig_tab/nn.2932_F1.html
29

34. Your policy
Roadside assistance
Roadside assistance
[drag me]
Roadside
assistance
Roadside assistance
We tested loads of design options.
30

35. Look what won! A button that once
clicked animated the movement
across.

36. Then along came the iPad. Thank you!
Drag and drop became more common place
Users tried stuff but we won’t go back and
remove that button, not because of affordance
but because...

37. We are inherently lazy. We will look for the
easy option.
Why [drag] when you can click
and it goes over automatically?

38. Buttons need to look like
buttons.
http://alistapart.com/article/flat-ui-and-forms
34

39. 3. Encourage
honesty
35

40. In the last 24 months have you used
any tobacco products?
Yes
No
Such as cigarettes, pipe tobacco, cigars
or nicotine replacement products
This is from a life
insurance website. The
problem; people lie.
36

41. http://www.fieldexperiments.com/uploads/
biology%20letters.pdf
37

42. http://www.fieldexperiments.com/uploads/
biology%20letters.pdf
37

43. “
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
37

44. In the last 24 months have you used
any tobacco products?
Yes
No
Such as cigarettes, pipe tobacco, cigars
or nicotine replacement products
Adding a face led to
more people being
honest.
38

45. In the last 24 months have you used
any tobacco products?
Yes
No
Such as cigarettes, pipe tobacco, cigars
or nicotine replacement products
Adding a face led to
more people being
honest.
38

46. http://psychologyfordesigners.com/
@mrjoe
@mrjoe