IAD 5 - les 5 - Designing Mobile Forms

717 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
717
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IAD 5 - les 5 - Designing Mobile Forms

  1. 1. Interaction Design 201 Vragen of feedback? @ferrydendopper Designing Mobile Forms
  2. 2. Interaction Design 201 Vragen of feedback? @ferrydendopper Niemand houdt van formulieren invullen
  3. 3. Interaction Design 201 Vragen of feedback? @ferrydendopper Eerste regel van formulieren op mobiel Beperk zoveel mogelijk de interactie met formulieren
  4. 4. Interaction Design 201 Vragen of feedback? @ferrydendopper Of niet? 500.000.000 mobiele tweets per dag
  5. 5. Interaction Design 201 Vragen of feedback? @ferrydendopper  Als je kijkt naar de hoeveelheid tekst die elke dag op mobieltjes wordt geproduceerd (cijfers uit VS 2010*): • 4,1 miljard smsjes per dag • 1 op 3 tieners verzendt meer dan 100 smsjes per dag, zo’n 3000 smsjes per maand • Zo’n 72% volwassenen verstuurt regelmatig een sms • 54% tieners smst dagelijks • 61% van de smartphone gebruikers stuurt en/of ontvangt dagelijks smsjes  Hoe moeilijk kan de invoer van tekst op mobiel dan zijn???  * http://www.lukew.com/ff/entry.asp?1187/
  6. 6. Interaction Design 201 Vragen of feedback? @ferrydendopper Doel van dit college Hoe maak je mobiele input… • Sneller • Gemakkelijker • Minder foutgevoelig
  7. 7. Interaction Design 201 Vragen of feedback? @ferrydendopper Desktop vs mobiel Adviezen uit 2010
  8. 8. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  9. 9. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  10. 10. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  11. 11. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  12. 12. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  13. 13. Interaction Design 201 Vragen of feedback? @ferrydendopper Hoe kijken jullie hier nu tegenaan?
  14. 14. Interaction Design 201 Vragen of feedback? @ferrydendopper Formulier lay-out Wat zie je nog als je inzoomt?
  15. 15. Interaction Design 201 Vragen of feedback? @ferrydendopper Field Zoom op iPhone Web Form Innovations on Mobile Devices, Luke Wroblewski
  16. 16. Interaction Design 201 Vragen of feedback? @ferrydendopper Field Zoom op iPhone Web Form Innovations on Mobile Devices, Luke Wroblewski
  17. 17. Interaction Design 201 Vragen of feedback? @ferrydendopper Links-uitgelijnde labels op Android Modern Web Form Design, Luke Wroblewski
  18. 18. Interaction Design 201 Vragen of feedback? @ferrydendopper Boven-uitgelijnde labels Advantage: Better format for mobile screen Modern Web Form Design, Luke Wroblewski
  19. 19. Interaction Design 201 Vragen of feedback? @ferrydendopper User Controls Welke bouwstenen kies je?
  20. 20. Interaction Design 201 Vragen of feedback? @ferrydendopper HTML Input Types  Text Field  Password Field  Dropdown List  Checkbox  Radio Button  File Picker  Submit Button Modern Web Form Design, Luke Wroblewski
  21. 21. Interaction Design 201 Vragen of feedback? @ferrydendopper New in HTML 5  Number Field  Range Field  Date Field Modern Web Form Design, Luke Wroblewski
  22. 22. Interaction Design 201 Vragen of feedback? @ferrydendopper HTML 5 & Mobile Number E-mail URL Web Form Innovations on Mobile Devices, Luke Wroblewski Modern Web Form Design, Luke Wroblewski
  23. 23. Interaction Design 201 Vragen of feedback? @ferrydendopper Wachtwoorden invoeren
  24. 24. Interaction Design 201 Vragen of feedback? @ferrydendopper Password Masks & Mobile Web Form Innovations on Mobile Devices, Luke Wroblewski
  25. 25. Interaction Design 201 Vragen of feedback? @ferrydendopper Passwords Masks & Mobile a User types
  26. 26. Interaction Design 201 Vragen of feedback? @ferrydendopper Dropdown hell Web Form Innovations on Mobile Devices, Luke Wroblewski
  27. 27. Interaction Design 201 Vragen of feedback? @ferrydendopper Compound Menu Controls Web Form Innovations on Mobile Devices, Luke Wroblewski
  28. 28. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  29. 29. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  30. 30. Interaction Design 201 Vragen of feedback? @ferrydendopper Oefening
  31. 31. Interaction Design 201 Vragen of feedback? @ferrydendopper Verschillen per platform Android vs iOS
  32. 32. Interaction Design 201 Vragen of feedback? @ferrydendopper Form layout
  33. 33. Interaction Design 201 Vragen of feedback? @ferrydendopper Repetitive field sets
  34. 34. Interaction Design 201 Vragen of feedback? @ferrydendopper Search a value
  35. 35. Interaction Design 201 Vragen of feedback? @ferrydendopper Alternatieve controls Wat kan je telefoon allemaal?
  36. 36. Interaction Design 201 Vragen of feedback? @ferrydendopper Voice Input
  37. 37. Interaction Design 201 Vragen of feedback? @ferrydendopper Siri on iPhone
  38. 38. Interaction Design 201 Vragen of feedback? @ferrydendopper Audio Input
  39. 39. Interaction Design 201 Vragen of feedback? @ferrydendopper Camera Input
  40. 40. Interaction Design 201 Vragen of feedback? @ferrydendopper Camera Input Google Goggles
  41. 41. Interaction Design 201 Vragen of feedback? @ferrydendopper Camera Input Google Goggles
  42. 42. Interaction Design 201 Vragen of feedback? @ferrydendopper GPS / Location Input
  43. 43. Interaction Design 201 Vragen of feedback? @ferrydendopper 2x een hotel boeken Expedia vs Kayak
  44. 44. Interaction Design 201 Vragen of feedback? @ferrydendopper
  45. 45. Interaction Design 201 Vragen of feedback? @ferrydendopper
  46. 46. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.lukew.com/ff/entry.asp?1014
  47. 47. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.lukew.com/ff/entry.asp?1014
  48. 48. Interaction Design 201 Vragen of feedback? @ferrydendopper Oefening
  49. 49. Interaction Design 201 Vragen of feedback? @ferrydendopper
  50. 50. Interaction Design 201 Vragen of feedback? @ferrydendopper Lezen  Web and Mobile Forms Design – Chui Chui Tan: http://www.uxbooth.com/blog/mobile-form-design- strategies/  Forms on Mobile Devices: Modern Solutions – Luke Wroblewski: http://www.smashingmagazine.com/2010/03/11/form s-on-mobile-devices-modern-solutions/  Better Mobile Form Design – Luke Wroblewski: http://www.lukew.com/ff/entry.asp?1014
  51. 51. Interaction Design 201 Vragen of feedback? @ferrydendopper Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper

×