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