mobile input design

PAOLO MONTEVECCHI

Mobile Input DesignMobile Input Design

ARCHITECTA ASSOCIAZIONE ITALIANA ARCHITETTI DELL’INFORMAZIONE

PAOLO MONTEVECCHI

UX Designer

http://uxcomics.comhttp://etnograph.com

@giesus

UX Designer

http://uxcomics.comhttp://etnograph.com

@giesus

Paolo Montevecchi 5 Mobile Input Design

input (īn’pōōt’)

Something put into a system or expended in its operation to achieve output or a result [...]

http://www.thefreedictionary.com/input

http://lostpedia.wikia.com/wiki/Pushing_the_button

“Each new input method led to not just a disruption but new platforms and new business models.”

http://www.asymco.com/2011/11/03/revolutionary-user-interfaces/

THE INPUT (re)EVOLUTION

ITU, Mark Lipacis Morgan Stanley Research

Perchè mobile?

1990 2000 2010 2020

Mobile Internet

(10 B+)

Desktop Internet

(1 B+)

(100 M)

http://www.flickr.com/photos/ari/

in qualsiasi momento ci si senta ispirati

http://www.flickr.com/photos/jmilles/

2,7 h/g (media) Social Network doppio delle ore che dedicano per i pasti

⅓ del tempo passato a dormire

http://www.flickr.com/photos/olivieroberson/

59% chatta regolarmente45% spedisce email31% parla al telefono

http://www.flickr.com/photos/dominiksyka-photography/

65.000.000 sms per day

MOBILE CONSTRAINTSMOBILE CONSTRAINTS

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

Big screen

Network

Power supply

Keyboard

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

Small screen

Finger

Sensor

Battery

Mobile Network

INPUT CONTROLS & PATTERNS

HTML input type

Checkbox <input type=”checkbox”>

Radio Button <input type=”radio”>

Password field <input type=”password”>

DropDown List <select><option>...

Input File <input type=”file”>

Submit Button <input type=”submit”>

Casella di testo <input type=”text”>

HTML5 input typeTime Picker <input type=”time”>

Data Picker <input type=”date”>

Email <input type=”email”>

Date/Time Picker <input type=”date-time”>

Month Picker <input type=”month”>

Number <input type=”number”>

Slider <input type=”range”>

Search Form <input type=”search”>

Phone Number <input type=”tel”>

Url <input type=”url”>

Paolo Montevecchi 19

tel on iPhone

Focus sul tipo

tel on Android

Tasti grandi

date on iPhone

Controllo dedicato

date on Android

Fail :(

frammentazione Android

2.3.3 -2.3.7

4.0.3 -4.0.4

4.1.X - 4.2.X

Data collected during a 7-day period ending on September 4, 2013. Any versions with less than 0.1% distribution are not shown.

http://developer.android.com/about/dashboards/index.html

casella di testo

È il componente specifico per

l'inserimento libero di testo, ma può

essere utilizzato anche per dati che

richiedono precise formattazioni, come

per esempio l’indirizzo Email.

casella di testo

Tastiera email

casella di testo

Tastiera email

troppo corta

casella di testo

Auto focus

● Form Autofocus: Evita passaggi inutili.

casella di testoPlaceHolder

● L’utilizzo dei placeholder, al posto delle label, permette di sfruttare tutta la larghezza della view per l’area di input;

● Nascondere il Form Assitant aumenta la visibilità della form in modalità edit;

casella di testoPlaceHolder

● Usare i placeholder al posto delle label non è sempre corretto.

● Allineare la label al di sopra dei campi di testo.

code reference

Android iOS Windows Phone

EditText(single/multi line)

IUTextField(single line)

UITextView(multi line)

TextBlock(single line)

EditBox(multi line)

(single line)

<textarea ..>(multi line)

Input Text

auto-capitalize• Switch to off per: email, password, URL e altri input case sensitive.

auto-correct• Turn off on email, password, URL, and other non-alpha inputs

drop-down list

È il controllo che permette agli utenti di

scegliere una singola opzione da una lista finita di

elementi

Quando è inattivo visualizza solo un valore:

quello di default o l’attuale valore del controllo.

tendina a “schermo parziale”

tendina a “tutto schermo”

drop-down lists

Disclosure indicator

drop-down lists

● Ridurre la distanza tra utenti le informazioni: aggiorna instantaneamente il campo in funzione del valore del picker.

drop-down lists● Form assistnat: evita passaggi

inutili;● Evidenziare il campo al quale ci

stiamo riferendo.

Previous & Next

drop-down lists

Fail! :(

● Scrolling: rendere sempre visibile il campo al quale ci stiamo riferendo.

drop-down lists

● Evidenziare in maniera inequivocabile il campo sul quale stiamo operando una modifica.

E’ questo!

drop-down lists

● tendine a tutto schermo: in iOS vengono implementate con il controllo UITableView

FailFail! :(

Disclosure indicator

Disclosure indicator?

drop-down lists

Distrazione!

● titoli: deve informare l’utente anche in caso di scarsa attenzione;

● evitare distrazioni: il menù in basso non è utile alla scelta che si sta eseguendo;

● ridurre la distanza tra utenti e l’informazione: il tasto conferma può essere evitato.

drop-down lists

● titoli: deve informare l’utente anche in caso di scarsa attenzione.

Natural UI

code referenceAndroid iOS Windows

PhoneHtml5

Spinner dropdown

(tendina schermo

parziale)

Spinnerdialog

(tendina schermo intero)

UIPickerView

(tendina schermo parziale)

UITableView

ListPicker<= a 5 voci

ListPicker> di 5 voci

<select><option>...

slider

Lo slider permette agli utenti di

scegliere facilmente un valore tra i

possibili di un insieme ordinato e

delimitato da un massimo ed un

minimo.

slider

● mancano gli indicatori del minimo e massimo;

● con la manopola all’estrema sinistra il campo risulta impostato a qualsiasi;

● larghezza stranamente ridotta.

slider

Et voilà!

slider

● lo slider non ha un comportamento prevedibile ed è contrario gli standard di iOS;

● non è aderente all'esperienza nel mondo reale;

● può causare dei potenziali errori nell'input del dato.

PhoneHtml5

SeekBar

UISlider Slider <input type=”range”>

stepper

È il componente che viene

utilizzato quando è necessario

scegliere un valore contenuto in un

insieme di pochi elementi, ordinati

in maniera crescente.

es. il numero di ospiti per una

prenotazione alberghiera.

stepper

● Baby step: Con semplice gesto

permette l’aumento o la

riduzione di un parametro

numerico attraverso step di

quantità costanti.

stepper

● Smart Deafult: il maggior

numero di prenotazioni

riguardano una sola persona;

4 amici, 2 camere per una fantastica vacanza a New York

http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/

Paolo Montevecchi

stepper

Paolo Montevecchi

stepper

Paolo Montevecchi

stepper

3 taps + 1 tap = 4 taps

http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/

Paolo Montevecchi

stepper

Paolo Montevecchi

All’incremento delle camere aumentano

anche gli ospiti.

stepper

Paolo Montevecchi

stepper

Paolo Montevecchi

stepper

1 tap + 2 taps = 3 taps

Paolo Montevecchi

stepper

Avoid disattention error

Avoid frustrating error message

http://www.businessinsider.com/the-google-investor-jan-12-2012-1

stepper

● Agoda Smarter Hotel Booking

Prenotazioni alberghiere

intelligenti ancora più

intelligenti

stepper

Meno di 0 bambini?

stepper

2 tap + 3 taps + 1 tap = 6 taps

1 Error message

stepper

Usability issues

stepper

Usability issues

stepper

Usability issues

stepper

● UIStepper iOS

Lo standard non prevede che i

pulsanti siano raggruppati con il

contatore.

stepper

PhoneHtml5

Custom

UIStepper Custom <input type=”number”>

multi picker

E’ il controllo che viene utilizzato

per effettuare input di un dato

composto da più parti.

Per esempio: data, ora e minuti di

un appuntamento.

multi picker

Conceptual model?

multi picker

Modifica condizionale dell’input

associato a ciascuna ghiera.

multi picker

Modificando l’unità di misura del

controllo si aggiorna confermandomi la

coerenza del modello concettuale.

multi picker

Conceptual model?

multi picker

Conceptual model?

Call to action?

● Considerare i controlli come

componenti di un processo di input.

● Modelli concettuali coerenti.

FORMFORM

login statistics

#5 passwords used daily

82% forgotten a password used on a WebSite

61% retrieve password from website

20% retrieve password customer support

http://passwordresearch.com/stats/study48.html

Paolo Montevecchi Mobile Input Design

retrieve username

Show password

retrieve username

Show password

retrieve username

Show password

the same functionality!

Forgot password?

Not resizable!

Sow password

Show password

login form

● don’t remove features

● use input types & attributes

● show passwords (by default?)

● input masks, if needed

● save session

● social login

Grazie! :)

@giesus

mobile input design

Design

input techniques for mobile

bis310: week 8 bis310: structured analysis and design...

input design and ouput design diagrams

design problem study-chinese input method using in mobile...

design effective input

mobile gaze input system for pervasive interaction

chapter 2: input devices and mobile computing

e-me mobile: accessible authentication for mobile...

ifs310: module 11 input/output design - physical design of...

mobile friendly web design - webinar - mobile responsive...

"saral" devanagari text input system for mobile phones

transliterated mobile keyboard input via weighted finite

input/output design user interface design

airwriting: hands-free mobile text input by...

input design and prototyping

1 mobile and ubiquitous user interfaces · 1 mobile and...

tilting text input for mobile phones

sa11...

mobile computing & mobile ui design

design of input