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
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