iad 5 - les 5 - designing mobile forms
TRANSCRIPT
Interaction Design 201 Vragen of feedback? @ferrydendopper
Eerste regel van formulieren op mobiel
Beperk zoveelmogelijk de interactie met formulieren
Interaction Design 201 Vragen of feedback? @ferrydendopper
Of niet?
500.000.000 mobiele tweets per dag
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/
Interaction Design 201 Vragen of feedback? @ferrydendopper
Doel van dit college
Hoe maak je mobiele input…
• Sneller
• Gemakkelijker
• Minder foutgevoelig
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
Formulier lay-out
Wat zie je nog als je inzoomt?
Interaction Design 201 Vragen of feedback? @ferrydendopper
Field Zoom op iPhone
Web Form Innovations on Mobile Devices, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
Field Zoom op iPhone
Web Form Innovations on Mobile Devices, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
Links-uitgelijnde labels op Android
Modern Web Form Design, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
Boven-uitgelijnde labels
Advantage:Better format for mobile screen
Modern Web Form Design, Luke Wroblewski
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
New in HTML 5
Number Field
Range Field
Date Field
Modern Web Form Design, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
HTML 5 & Mobile
Number E-mail URL
Web Form Innovations on Mobile Devices, Luke WroblewskiModern Web Form Design, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
Password Masks & Mobile
Web Form Innovations on Mobile Devices, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
Dropdown hell
Web Form Innovations on Mobile Devices, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
Compound Menu Controls
Web Form Innovations on Mobile Devices, Luke Wroblewski
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
Alternatieve controls
Wat kan je telefoon allemaal?
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.lukew.com/ff/entry.asp?1014
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.lukew.com/ff/entry.asp?1014
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper