Forms are boring final nux2 web upload

6,064 views
5,937 views

Published on

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.

Published in: Technology, Health & Medicine

Forms are boring final nux2 web upload

  1. 1. http://www.flickr.com/photos/stovak/2378145902/sizes/z/in/photostream/ forms are boring @mrjoe Joe Leech NUX2 October 2013 1
  2. 2. Hello, I’m @mrjoe, but you can call me Joe @mrjoe
  3. 3. http://www.fivesimplesteps.com/products/psychology-for-designers Just buy it! Only £2. @mrjoe
  4. 4. 4
  5. 5. 5
  6. 6. There’s a special bit of the brain just for forms u 5
  7. 7. I want to punch this website in the face 6
  8. 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. 9. 1. Security isn’t that important Here’s some form advice. 8
  10. 10. 86% of online shoppers feel more confident about entering personal information on sites using security indicators These guys would say that. 9
  11. 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. 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. 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. 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. 15. 2. Don’t do stupid sh*t with HTML5 11
  16. 16. @mrjoe
  17. 17. Just because you can doesn’t mean you should @mrjoe
  18. 18. why? http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#6 14
  19. 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. 20. 0 D T = a + blog 2 ( 1 + ) W this is Fitt’s Law a very complicated way of saying... 16
  21. 21. 0 D T = a + blog 2 ( 1 + ) W ... small stuff is hard to click. 17
  22. 22. They are so fiddly for entering exact values. Sadly they are very ‘fashionable’ right now. Think before you use. 18
  23. 23. autoplay=”autoplay” There are uses for this, and no, one them isn’t a MIDI sound track for you site. 19
  24. 24. * How did you hear about us? How old are you? * Ever seen these before? 20
  25. 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. 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. 27. How did you hear about us? optional required=”required” Doesn’t cut it I’m afraid. 23
  28. 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. 29. Opera is better. But the error message is a bit geeky. Plus it behaves differently to Chrome. 25
  30. 30. Firefox is better, but still, what is a field? Most people think a field is a place where a cow lives. 26
  31. 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. 32. We tested this drag and drop insurance interface 4 years back. Problem was nobody got it. Why?...
  33. 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. 34. Your policy Roadside assistance Roadside assistance [drag me] Roadside assistance Roadside assistance We tested loads of design options. 30
  35. 35. Look what won! A button that once clicked animated the movement across.
  36. 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. 37. We are inherently lazy. We will look for the easy option. Why [drag] when you can click and it goes over automatically?
  38. 38. Buttons need to look like buttons. http://alistapart.com/article/flat-ui-and-forms 34
  39. 39. 3. Encourage honesty 35
  40. 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. 41. http://www.fieldexperiments.com/uploads/ biology%20letters.pdf 37
  42. 42. http://www.fieldexperiments.com/uploads/ biology%20letters.pdf 37
  43. 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. 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. 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. 46. http://psychologyfordesigners.com/ @mrjoe @mrjoe

×