Don’t ask me to marry you on the first date
- + human ??????????
What is a form?
mobile first
morning evening wake up work social commute relax fun bed
touch first
source
source
2 +-stepper slider 0 toggle cheesetappable checkbox peppers
user first
user first
human first
Why bother?
a volunteer
Why bother?
human
brand
retention
1.WHY BOTHER 2.FORM STORY 3.TAKEAWAY
F O R M STORY
I’m leaving!
Easy in, hard out… Photo credit: Simon’s Cat
manipulation
roadblocker
could be better
3 months earlier…
first impression
sign here
Come test us… but first leave us your card details …just in case…
gradual engagement no explicit registration
the biggest lie of the web
agree vs. read
single sign-on
user
WTF?!
easy still an option informative
This is what you’ll get. This is why we need your data.
Don’t worry, we may read it for you or call you later :) You can help digitize books with us.
honeypot field
honeypot field
Let me introduce you…
design for empty states
trust
What did you say?
people don’t read
inputs are grouped informative intro
labels are always visible + no misleading vanishing placeholders
benefits are shown + no more explanation needed
35-95 CTA
Sign In FM Email Password Remember me Sign Up Show HOME TERMS HELP Reset Password
Sign In FM Email Password Remember me Sign Up Show easy to check be just a tap away don’t log me out HOME TERMS HELP make ...
labels vs. icons
the world changes
ambiguity in meaning and action
when icons work
So what does hate look like?
make forms painless
What do you want me to do? Where am I?
about half a screen occupied by virtual keyboard input type triggers keyboard type
email <input type=“email” name=“email”/> number <input type=“number” name=“quantity” min=“1” max=“5” step=“1” value=“1”/> ...
pre-populate title ***********
Nobody is perfect
don’t shout at me clear list don’t look like an answer provided data kept
nod your head
reduce error risk
Telephone number Phone Phone Number +34
Telephone number Phone Phone Number +34
N.I.E. Number N.I.E. Number - - N.I.E. Number - - X-1276972-P N.I.E. Number 1111111X X It’s a number like X-1234567-Z
don’t look like an answer give hints N.I.E. Number N.I.E. Number - - N.I.E. Number - - X-1276972-P N.I.E. Number 1111111X ...
Oh... didn’t I tell you I’m color-blind…?
⌘F5 Voice Over
I can’t live without you
140
140
140comment
140 follower comment
140 follower reply comment
140 follower reply comment
140 follower reply comment
bug
search bug
search solutionbug
search solutionbug comment
search solutionbug comment
search solutionbug comment
search solutionbug comment reputation
search solutionbug comment reputation question
form habits
I’m uncertain I’m lost I’m bored
1.WHY BOTHER 2.FORM STORY 3.TAKEAWAY
empathy
POLAR POLLS GOOGLE FORMS WUFOOSURVEY MONKEY
30% discount for Frontend Malaga
build forms relationships
@thedoerdoes thedoerdoes@gmail.com https://linkedin.com/in/ewathedoer Medium Frontend Malaga: https://medium.com/frontend-...
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Human forms. Don't ask me to marry you on the first date.
Upcoming SlideShare
Loading in …5
×

Human forms. Don't ask me to marry you on the first date.

362 views

Published on

Forms are like a private coffee with your users. They deserve loads of designer’s attention because they are relationship building blocks. Those that are built with empathy build customers’ trust and make users love the product. Clarity, benefits and empathy, these are the keywords in this love or hate game.
Read more: https://medium.com/frontend-malaga/human-form-design-f285728d3d97#.kuyfiv4hh

Published in: Design
0 Comments
0 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
362
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Human forms. Don't ask me to marry you on the first date.

  1. 1. Don’t ask me to marry you on the first date
  2. 2. - + human ??????????
  3. 3. What is a form?
  4. 4. mobile first
  5. 5. morning evening wake up work social commute relax fun bed
  6. 6. touch first
  7. 7. source
  8. 8. source
  9. 9. 2 +-stepper slider 0 toggle cheesetappable checkbox peppers
  10. 10. user first
  11. 11. user first
  12. 12. human first
  13. 13. Why bother?
  14. 14. a volunteer
  15. 15. Why bother?
  16. 16. human
  17. 17. brand
  18. 18. retention
  19. 19. 1.WHY BOTHER 2.FORM STORY 3.TAKEAWAY
  20. 20. F O R M STORY
  21. 21. I’m leaving!
  22. 22. Easy in, hard out… Photo credit: Simon’s Cat
  23. 23. manipulation
  24. 24. roadblocker
  25. 25. could be better
  26. 26. 3 months earlier…
  27. 27. first impression
  28. 28. sign here
  29. 29. Come test us… but first leave us your card details …just in case…
  30. 30. gradual engagement no explicit registration
  31. 31. the biggest lie of the web
  32. 32. agree vs. read
  33. 33. single sign-on
  34. 34. user
  35. 35. WTF?!
  36. 36. easy still an option informative
  37. 37. This is what you’ll get. This is why we need your data.
  38. 38. Don’t worry, we may read it for you or call you later :) You can help digitize books with us.
  39. 39. honeypot field
  40. 40. honeypot field
  41. 41. Let me introduce you…
  42. 42. design for empty states
  43. 43. trust
  44. 44. What did you say?
  45. 45. people don’t read
  46. 46. inputs are grouped informative intro
  47. 47. labels are always visible + no misleading vanishing placeholders
  48. 48. benefits are shown + no more explanation needed
  49. 49. 35-95 CTA
  50. 50. Sign In FM Email Password Remember me Sign Up Show HOME TERMS HELP Reset Password
  51. 51. Sign In FM Email Password Remember me Sign Up Show easy to check be just a tap away don’t log me out HOME TERMS HELP make homepage available new user? consider a way out Reset Password keep the labels
  52. 52. labels vs. icons
  53. 53. the world changes
  54. 54. ambiguity in meaning and action
  55. 55. when icons work
  56. 56. So what does hate look like?
  57. 57. make forms painless
  58. 58. What do you want me to do? Where am I?
  59. 59. about half a screen occupied by virtual keyboard input type triggers keyboard type
  60. 60. email <input type=“email” name=“email”/> number <input type=“number” name=“quantity” min=“1” max=“5” step=“1” value=“1”/> url <input type=“url” name=“homepage”/> tel <input type=“tel” name=“phone”/> date <input type=“date” name=“bday”/>
  61. 61. pre-populate title ***********
  62. 62. Nobody is perfect
  63. 63. don’t shout at me clear list don’t look like an answer provided data kept
  64. 64. nod your head
  65. 65. reduce error risk
  66. 66. Telephone number Phone Phone Number +34
  67. 67. Telephone number Phone Phone Number +34
  68. 68. N.I.E. Number N.I.E. Number - - N.I.E. Number - - X-1276972-P N.I.E. Number 1111111X X It’s a number like X-1234567-Z
  69. 69. don’t look like an answer give hints N.I.E. Number N.I.E. Number - - N.I.E. Number - - X-1276972-P N.I.E. Number 1111111X X It’s a number like X-1234567-Z
  70. 70. Oh... didn’t I tell you I’m color-blind…?
  71. 71. ⌘F5 Voice Over
  72. 72. I can’t live without you
  73. 73. 140
  74. 74. 140
  75. 75. 140comment
  76. 76. 140 follower comment
  77. 77. 140 follower reply comment
  78. 78. 140 follower reply comment
  79. 79. 140 follower reply comment
  80. 80. bug
  81. 81. search bug
  82. 82. search solutionbug
  83. 83. search solutionbug comment
  84. 84. search solutionbug comment
  85. 85. search solutionbug comment
  86. 86. search solutionbug comment reputation
  87. 87. search solutionbug comment reputation question
  88. 88. form habits
  89. 89. I’m uncertain I’m lost I’m bored
  90. 90. 1.WHY BOTHER 2.FORM STORY 3.TAKEAWAY
  91. 91. empathy
  92. 92. POLAR POLLS GOOGLE FORMS WUFOOSURVEY MONKEY
  93. 93. 30% discount for Frontend Malaga
  94. 94. build forms relationships
  95. 95. @thedoerdoes thedoerdoes@gmail.com https://linkedin.com/in/ewathedoer Medium Frontend Malaga: https://medium.com/frontend-malaga

×