IAD 5 - les 5 - Designing Mobile Forms

Interaction Design 201 Vragen of feedback? @ferrydendopper

Designing Mobile Forms


Niemand houdtvan formuliereninvullen


Eerste regel van formulieren op mobiel

Beperk zoveelmogelijk de interactie met formulieren


Of niet?

500.000.000 mobiele tweets per dag


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/

http://www.lukew.com/ff/entry.asp?1187/


Doel van dit college

Hoe maak je mobiele input…

• Sneller

• Gemakkelijker

• Minder foutgevoelig


Desktop vs mobiel

Adviezen uit 2010


http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop



Hoe kijken jullie hiernu tegenaan?


Formulier lay-out

Wat zie je nog als je inzoomt?


Field Zoom op iPhone

Web Form Innovations on Mobile Devices, Luke Wroblewski

http://www.lukew.com/ff/entry.asp?1000


Links-uitgelijnde labels op Android

Modern Web Form Design, Luke Wroblewski

http://live.visitmix.com/MIX10/Sessions/EX03


Boven-uitgelijnde labels

Advantage:Better format for mobile screen




User Controls

Welke bouwstenen kies je?


HTML Input Types

Text Field

Password Field

Dropdown List

Checkbox

Radio Button

File Picker

Submit Button




New in HTML 5

Number Field

Range Field

Date Field




HTML 5 & Mobile

Number E-mail URL

Web Form Innovations on Mobile Devices, Luke WroblewskiModern Web Form Design, Luke Wroblewski




Wachtwoorden invoeren


Password Masks & Mobile




Passwords Masks & Mobile

a

User types


Dropdown hell




Compound Menu Controls




Oefening


Verschillen per platform

Android vs iOS


Form layout


Repetitive field sets


Search a value


Alternatieve controls

Wat kan je telefoon allemaal?


Voice Input


Siri on iPhone


Audio Input


Camera Input


Camera Input

Google Goggles


GPS / Location Input


2x een hotel boeken

Expedia vs Kayak


Oefening


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.uxbooth.com/blog/mobile-form-design-strategies/

http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/



Vragen? Feedback?

[email protected]

@ferrydendopper

IAD 5 - les 5 - Designing Mobile Forms

Design

Transcript of IAD 5 - les 5 - Designing Mobile Forms