Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile forms - 10 DOs and DONTs

14,263 views

Published on

10 tips for creating mobile forms.

Mobile forms - 10 DOs and DONTs

  1. 10 Mobile Forms DOs and Don’ts Tomer Rosenthal Web & Mobile product manager 888.com
  2. "There is NO MOBILE WEB people. That is a f#$%ing bunch of hype. It is merely the Web." Molly E. Holzschlag 2
  3. 1. Labeling 3
  4. 4
  5. 5
  6. INLINE LABELS ARE ALSO A VALID MOBILE OPTION. (KEEP IN MIND TO HAVE THE INLINE TEXT REMAIN IN THE FIELD UNTIL FIRST KEYSTROKE) 6
  7. 2. Combining 7
  8. 8
  9. 9
  10. 3. Divide 10
  11. 11
  12. 12
  13. DIVIDE FORMS INTO CHUNKS 13
  14. 4. Right Controls 14
  15. RADIO BUTTONS ARE IMPOSSIBLE TO PRESS 15
  16. 16
  17. SMALL BUTTONS ARE IMPOSSIBLE FOR “FAT FINGER SYNDROME” 17
  18. BUT WHY NOT USE THE BUILT-IN DATE FUNCTIONALITY OF HTML 5? 18
  19. BUTTONS LOOK DIFFERENT IN DIFFERENT MOBILE DEVICES. DON’T JUST STRETCH THEM TO 100% 19
  20. 20
  21. 5. Error Handling 21
  22. CONNECT ERROR TO ERRORENOUS FIELD 22
  23. 23
  24. REMEMBER THE KEYBOARD LOCATION & SIZE 24
  25. ANOTHER GREAT EXAMPLE OF “REMEMBERING THE KEYBOARD” 25
  26. 26
  27. 7. Wizarding 27
  28. INDICATE WHERE WE ARE IN THE WIZARD TRAIL 28
  29. USUALLY CIRCLES MARK THE SPOT 29
  30. CAREFUL! CIRCLES ALSO INDICATE FLICK AFFORDANCE 30
  31. 8. Drag 31
  32. DRAG AFFORDANCE IS INDICATED BY 3 HORIZONTAL LINES 32
  33. 9. Loading… 33
  34. THE RETURN OF THE SPLASH SCREEN 34
  35. 35
  36. DON’T GET STUCK, ALWAYS SHOW PROGRESS 36
  37. 10.Don’ts 37
  38. USELESS POPUPS AND CONFIRMATIONS 38
  39. 39
  40. 40
  41. DUPLICATE NAVIGATIONS / BUTTONS 41
  42. WRONG CONTROLS 42
  43. THE MANY FACES OF LINKEDIN 43
  44. 44
  45. “FAT FINGER SYNDROME” 45
  46. I’M BLIND!!! 46
  47. 47
  48. Appendix: Registration & Cashier Patterns “Mobile Design Pattern Gallery / Theresa Neil” (www.theresaneil.com) 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53

×