Forms are boring
•
3 likes•2,142 views
This document is a series of tweets by @mrjoe about designing web forms. Some of the key points made include: 1) @mrjoe has conducted over 500 user research sessions and sees a lot of frustration with forms. Common problems include unclear field labels, required fields not marked, and difficulty interacting with form elements. 2) Psychological cues can encourage more honest responses from users, like adding an image of eyes to imply watching. Simplicity is best, like replacing drag and drop with clearly labeled buttons. 3) Many HTML5 form elements are problematic for users and go against principles of good design, such as small click targets, unnecessary JavaScript interactions, and fields that don't clearly communicate their purpose or constraints.
Recommended
More Related Content
Similar to Forms are boring
Similar to Forms are boring (20)
Recently uploaded
Recently uploaded (20)
Forms are boring
- 2. @mrjoe Hi, I’m @mrjoe but you can call me Joe
- 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. @mrjoe £5.3 billiongoes through the forms I designed every year. (scary).
- 6. @mrjoe Phrenology The detailed study of the shape and size of the cranium as a supposed indication of character and mental abilities.
- 7. @mrjoe u Look! We have a part of the brain for forms.
- 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. @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.
- 11. @mrjoe https Security is good right. Well it depends on how you talk about it.
- 12. @mrjoe There’s loads of this junk out there.
- 13. @mrjoe And they worked well for these guys right?
- 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. @mrjoe http://baymard.com/blog/site-seal-trust Which badge is the best sense of trust? Can psychology help us understand this?
- 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. @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. @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. @mrjoe Reassuring people about privacy makes them more, not less, concerned. http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1430482 “
- 20. @mrjoe http://baymard.com/blog/site-seal-trust Which badge is the best sense of trust? What’s wrong here? The question.
- 22. @mrjoe 2. Don’t do stupid sh*t with HTML5
- 23. @mrjoe There is a lot of HTML5 junk out there.
- 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. @mrjoe 0How old are you? min="0" max="99" Small stuff is hard to click.
- 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. @mrjoe I watched some spend ages trying to get their exact salary, sliders are crappy for exact numbers. Think before using them.
- 31. @mrjoe <video autotune> The W3C are working on this folks…
- 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. @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. @mrjoe <input type=“text” required> Phone Number Optional
- 35. @mrjoe
- 36. @mrjoe
- 37. @mrjoe
- 39. @mrjoe What’s a field, isn’t that where cows live?
- 40. @mrjoe http://stackoverflow.com/questions/13798313/set- custom-html5-required-field-validation-message
- 41. @mrjoe
- 42. @mrjoe Phone Number Optional Here’s what to do
- 43. @mrjoe :optional { } https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aoptional Phone Number Optional Use CSS optional pseudo class
- 44. @mrjoe Just because it’s in the HTML5 specification doesn’t mean it has a good user experience.
- 45. @mrjoe I want to talk about an old project, back from 2009. A drag and drop interface for an insurance company.
- 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. @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. @mrjoe And what was best?
- 49. @mrjoe And what was best? Add buttons!
- 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. @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. @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!
- 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. @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. @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. @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. @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. @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. @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. @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