Your SlideShare is downloading. ×
0
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
IAD 5 - les 5 - Designing Mobile Forms
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

IAD 5 - les 5 - Designing Mobile Forms

542

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
542
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Interaction Design 201 Vragen of feedback? @ferrydendopper Designing Mobile Forms
  • 2. Interaction Design 201 Vragen of feedback? @ferrydendopper Niemand houdt van formulieren invullen
  • 3. Interaction Design 201 Vragen of feedback? @ferrydendopper Eerste regel van formulieren op mobiel Beperk zoveel mogelijk de interactie met formulieren
  • 4. Interaction Design 201 Vragen of feedback? @ferrydendopper Of niet? 500.000.000 mobiele tweets per dag
  • 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. Interaction Design 201 Vragen of feedback? @ferrydendopper Doel van dit college Hoe maak je mobiele input… • Sneller • Gemakkelijker • Minder foutgevoelig
  • 7. Interaction Design 201 Vragen of feedback? @ferrydendopper Desktop vs mobiel Adviezen uit 2010
  • 8. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 9. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 10. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 11. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 12. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 13. Interaction Design 201 Vragen of feedback? @ferrydendopper Hoe kijken jullie hier nu tegenaan?
  • 14. Interaction Design 201 Vragen of feedback? @ferrydendopper Formulier lay-out Wat zie je nog als je inzoomt?
  • 15. Interaction Design 201 Vragen of feedback? @ferrydendopper Field Zoom op iPhone Web Form Innovations on Mobile Devices, Luke Wroblewski
  • 16. Interaction Design 201 Vragen of feedback? @ferrydendopper Field Zoom op iPhone Web Form Innovations on Mobile Devices, Luke Wroblewski
  • 17. Interaction Design 201 Vragen of feedback? @ferrydendopper Links-uitgelijnde labels op Android Modern Web Form Design, Luke Wroblewski
  • 18. Interaction Design 201 Vragen of feedback? @ferrydendopper Boven-uitgelijnde labels Advantage: Better format for mobile screen Modern Web Form Design, Luke Wroblewski
  • 19. Interaction Design 201 Vragen of feedback? @ferrydendopper User Controls Welke bouwstenen kies je?
  • 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. Interaction Design 201 Vragen of feedback? @ferrydendopper New in HTML 5  Number Field  Range Field  Date Field Modern Web Form Design, Luke Wroblewski
  • 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. Interaction Design 201 Vragen of feedback? @ferrydendopper Wachtwoorden invoeren
  • 24. Interaction Design 201 Vragen of feedback? @ferrydendopper Password Masks & Mobile Web Form Innovations on Mobile Devices, Luke Wroblewski
  • 25. Interaction Design 201 Vragen of feedback? @ferrydendopper Passwords Masks & Mobile a User types
  • 26. Interaction Design 201 Vragen of feedback? @ferrydendopper Dropdown hell Web Form Innovations on Mobile Devices, Luke Wroblewski
  • 27. Interaction Design 201 Vragen of feedback? @ferrydendopper Compound Menu Controls Web Form Innovations on Mobile Devices, Luke Wroblewski
  • 28. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 29. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
  • 30. Interaction Design 201 Vragen of feedback? @ferrydendopper Oefening
  • 31. Interaction Design 201 Vragen of feedback? @ferrydendopper Verschillen per platform Android vs iOS
  • 32. Interaction Design 201 Vragen of feedback? @ferrydendopper Form layout
  • 33. Interaction Design 201 Vragen of feedback? @ferrydendopper Repetitive field sets
  • 34. Interaction Design 201 Vragen of feedback? @ferrydendopper Search a value
  • 35. Interaction Design 201 Vragen of feedback? @ferrydendopper Alternatieve controls Wat kan je telefoon allemaal?
  • 36. Interaction Design 201 Vragen of feedback? @ferrydendopper Voice Input
  • 37. Interaction Design 201 Vragen of feedback? @ferrydendopper Siri on iPhone
  • 38. Interaction Design 201 Vragen of feedback? @ferrydendopper Audio Input
  • 39. Interaction Design 201 Vragen of feedback? @ferrydendopper Camera Input
  • 40. Interaction Design 201 Vragen of feedback? @ferrydendopper Camera Input Google Goggles
  • 41. Interaction Design 201 Vragen of feedback? @ferrydendopper Camera Input Google Goggles
  • 42. Interaction Design 201 Vragen of feedback? @ferrydendopper GPS / Location Input
  • 43. Interaction Design 201 Vragen of feedback? @ferrydendopper 2x een hotel boeken Expedia vs Kayak
  • 44. Interaction Design 201 Vragen of feedback? @ferrydendopper
  • 45. Interaction Design 201 Vragen of feedback? @ferrydendopper
  • 46. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.lukew.com/ff/entry.asp?1014
  • 47. Interaction Design 201 Vragen of feedback? @ferrydendopper http://www.lukew.com/ff/entry.asp?1014
  • 48. Interaction Design 201 Vragen of feedback? @ferrydendopper Oefening
  • 49. Interaction Design 201 Vragen of feedback? @ferrydendopper
  • 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. Interaction Design 201 Vragen of feedback? @ferrydendopper Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper

×