IAD 5 - les 5 - Designing Mobile Forms

  • Published on
    14-Jul-2015

  • View
    547

  • Download
    1

Embed Size (px)

Transcript

User Centered Design

Designing Mobile FormsInteraction Design 201Vragen of feedback? @ferrydendopper

Niemand houdt van formulieren invullenInteraction Design 201Vragen of feedback? @ferrydendopper

Eerste regel van formulieren op mobielBeperk zoveel mogelijk de interactie met formulierenInteraction Design 201Vragen of feedback? @ferrydendopperOf niet?

500.000.000 mobiele tweets per dag

Interaction Design 201Vragen of feedback? @ferrydendopperAls je kijkt naar de hoeveelheid tekst die elke dag op mobieltjes wordt geproduceerd (cijfers uit VS 2010*):4,1 miljard smsjes per dag1 op 3 tieners verzendt meer dan 100 smsjes per dag, zon 3000 smsjes per maandZon 72% volwassenen verstuurt regelmatig een sms54% tieners smst dagelijks61% van de smartphone gebruikers stuurt en/of ontvangt dagelijks smsjesHoe moeilijk kan de invoer van tekst op mobiel dan zijn???

* http://www.lukew.com/ff/entry.asp?1187/ Interaction Design 201Vragen of feedback? @ferrydendopperDoel van dit collegeHoe maak je mobiele inputSnellerGemakkelijkerMinder foutgevoeligInteraction Design 201Vragen of feedback? @ferrydendopperDesktop vs mobielAdviezen uit 2010Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopperHoe kijken jullie hier nu tegenaan?Interaction Design 201Vragen of feedback? @ferrydendopperFormulier lay-outWat zie je nog als je inzoomt?Interaction Design 201Vragen of feedback? @ferrydendopperField Zoom op iPhone

Web Form Innovations on Mobile Devices, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopper

Field Zoom op iPhoneWeb Form Innovations on Mobile Devices, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopper

Links-uitgelijnde labels op AndroidModern Web Form Design, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperBoven-uitgelijnde labels

Advantage:Better format for mobile screenModern Web Form Design, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperUser ControlsWelke bouwstenen kies je?Interaction Design 201Vragen of feedback? @ferrydendopperHTML Input TypesText FieldPassword FieldDropdown ListCheckboxRadio ButtonFile PickerSubmit Button

Modern Web Form Design, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperNew in HTML 5Number FieldRange FieldDate Field

Modern Web Form Design, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperHTML 5 & MobileNumberE-mailURL

Web Form Innovations on Mobile Devices, Luke WroblewskiModern Web Form Design, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperWachtwoorden invoeren

Interaction Design 201Vragen of feedback? @ferrydendopperPassword Masks & Mobile

Web Form Innovations on Mobile Devices, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperPasswords Masks & Mobile

a

User types

Interaction Design 201Vragen of feedback? @ferrydendopperDropdown hell

Web Form Innovations on Mobile Devices, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopperCompound Menu Controls

Web Form Innovations on Mobile Devices, Luke WroblewskiInteraction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop Interaction Design 201Vragen of feedback? @ferrydendopperOefening

Interaction Design 201Vragen of feedback? @ferrydendopperVerschillen per platformAndroid vs iOSInteraction Design 201Vragen of feedback? @ferrydendopperForm layout

Interaction Design 201Vragen of feedback? @ferrydendopperRepetitive field sets

Interaction Design 201Vragen of feedback? @ferrydendopperSearch a value

Interaction Design 201Vragen of feedback? @ferrydendopperAlternatieve controlsWat kan je telefoon allemaal?Interaction Design 201Vragen of feedback? @ferrydendopperVoice Input

Interaction Design 201Vragen of feedback? @ferrydendopperSiri on iPhone

Interaction Design 201Vragen of feedback? @ferrydendopperAudio Input

Interaction Design 201Vragen of feedback? @ferrydendopperCamera Input

Interaction Design 201Vragen of feedback? @ferrydendopper

Camera InputGoogle GogglesInteraction Design 201Vragen of feedback? @ferrydendopperCamera Input

Google GogglesInteraction Design 201Vragen of feedback? @ferrydendopperGPS / Location Input

Interaction Design 201Vragen of feedback? @ferrydendopper2x een hotel boekenExpedia vs KayakInteraction Design 201Vragen of feedback? @ferrydendopper

Interaction Design 201Vragen of feedback? @ferrydendopper

Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.lukew.com/ff/entry.asp?1014 Interaction Design 201Vragen of feedback? @ferrydendopper

http://www.lukew.com/ff/entry.asp?1014 Interaction Design 201Vragen of feedback? @ferrydendopperOefeningInteraction Design 201Vragen of feedback? @ferrydendopper

Interaction Design 201Vragen of feedback? @ferrydendopperLezenWeb 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/forms-on-mobile-devices-modern-solutions/ Better Mobile Form Design Luke Wroblewski:http://www.lukew.com/ff/entry.asp?1014

Interaction Design 201Vragen of feedback? @ferrydendopperVragen? Feedback?f.den.dopper@hr.nl

@ferrydendopper

Interaction Design 201Vragen of feedback? @ferrydendopper51