Mobile UX: dall'idea al design fino alla reazione di un' interfaccia mobile
Mobile input design
123
PAOLO MONTEVECCHI Mobile Input Design Mobile Input Design ARCHITECTA ASSOCIAZIONE ITALIANA ARCHITETTI DELL’INFORMAZIONE PAOLO MONTEVECCHI
-
Upload
paolo-montevecchi -
Category
Design
-
view
607 -
download
0
description
Entrare in un negozio di abbigliamento e rispondere alle domande della commessa è come compilare un form online per l’acquisto di una maglietta: se la commessa sa come e quali domande porti l’esperienza d’acquisto può risultare ottima, altrimenti si rischia di sentirsi sotto interrogatorio.
Transcript of 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
Paolo Montevecchi 6 Mobile Input Design
http://lostpedia.wikia.com/wiki/Pushing_the_button
Paolo Montevecchi 7 Mobile Input Design
“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
Paolo Montevecchi 8 Mobile Input Design
ITU, Mark Lipacis Morgan Stanley Research
Perchè mobile?
1990 2000 2010 2020
Mobile Internet
1013
(10 B+)
Desktop Internet
1012
(1 B+)
Pc
1010
(100 M)
Paolo Montevecchi 9 Mobile Input Design
http://www.flickr.com/photos/ari/
in qualsiasi momento ci si senta ispirati
Paolo Montevecchi 10 Mobile Input Design
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
Paolo Montevecchi 11 Mobile Input Design
http://www.flickr.com/photos/olivieroberson/
59% chatta regolarmente45% spedisce email31% parla al telefono
Paolo Montevecchi 12 Mobile Input Design
http://www.flickr.com/photos/dominiksyka-photography/
65.000.000 sms per day
MOBILE CONSTRAINTSMOBILE CONSTRAINTS
Paolo Montevecchi 14 Mobile Input Design
http://www.lukew.com/ff/entry.asp?1281
Big screen
Network
Power supply
Keyboard
Mouse
Desk
Paolo Montevecchi 15 Mobile Input Design
http://www.lukew.com/ff/entry.asp?1281
Small screen
Finger
Sensor
Battery
Mobile Network
INPUT CONTROLS & PATTERNS
INPUT CONTROLS & PATTERNS
Paolo Montevecchi 17 Mobile Input Design
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
Paolo Montevecchi 20
tel on Android
Tasti grandi
Paolo Montevecchi 21
date on iPhone
Controllo dedicato
Paolo Montevecchi 22
date on Android
Fail :(
Paolo Montevecchi 23 Mobile Input Design
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
Paolo Montevecchi 24 Mobile Input Design
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.
Paolo Montevecchi 25
casella di testo
Paolo Montevecchi 26
casella di testo
Tastiera email
Paolo Montevecchi 27
casella di testo
Tastiera email
troppo corta
Paolo Montevecchi 28
casella di testo
Auto focus
● Form Autofocus: Evita passaggi inutili.
Paolo Montevecchi 29
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;
Paolo Montevecchi 30
casella di testoPlaceHolder
● Usare i placeholder al posto delle label non è sempre corretto.
● Allineare la label al di sopra dei campi di testo.
Label
Paolo Montevecchi 31 Mobile Input Design
code reference
Android iOS Windows Phone
Html5
EditText(single/multi line)
IUTextField(single line)
UITextView(multi line)
TextBlock(single line)
EditBox(multi line)
<input type="text"..>
(single line)
<textarea ..>(multi line)
Paolo Montevecchi 32 Mobile Input Design
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
Paolo Montevecchi 33 Mobile Input Design
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.
Paolo Montevecchi 34 Mobile Input Design
tendina a “schermo parziale”
Paolo Montevecchi 35 Mobile Input Design
tendina a “tutto schermo”
Paolo Montevecchi 36
drop-down lists
Disclosure indicator
Paolo Montevecchi 37
drop-down lists
● Ridurre la distanza tra utenti le informazioni: aggiorna instantaneamente il campo in funzione del valore del picker.
Paolo Montevecchi 38
drop-down lists● Form assistnat: evita passaggi
inutili;● Evidenziare il campo al quale ci
stiamo riferendo.
Previous & Next
Paolo Montevecchi 39
drop-down lists
Paolo Montevecchi 40
drop-down lists
Paolo Montevecchi 41
drop-down lists
Paolo Montevecchi 42
drop-down lists
Paolo Montevecchi 43
drop-down lists
Fail! :(
● Scrolling: rendere sempre visibile il campo al quale ci stiamo riferendo.
Paolo Montevecchi 44
drop-down lists
● Evidenziare in maniera inequivocabile il campo sul quale stiamo operando una modifica.
E’ questo!
Paolo Montevecchi 45
drop-down lists
Paolo Montevecchi 46
drop-down lists
● tendine a tutto schermo: in iOS vengono implementate con il controllo UITableView
FailFail! :(
Disclosure indicator
Disclosure indicator?
Paolo Montevecchi 47
drop-down lists
Paolo Montevecchi 48
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.
Paolo Montevecchi 49
drop-down lists
Paolo Montevecchi 50
drop-down lists
Paolo Montevecchi 51
drop-down lists
● titoli: deve informare l’utente anche in caso di scarsa attenzione.
Natural UI
Paolo Montevecchi 52 Mobile Input Design
code referenceAndroid iOS Windows
PhoneHtml5
Spinner dropdown
(tendina schermo
parziale)
Spinnerdialog
(tendina schermo intero)
UIPickerView
(tendina schermo parziale)
UITableView
(tendina schermo intero)
ListPicker<= a 5 voci
(tendina schermo parziale)
ListPicker> di 5 voci
(tendina schermo intero)
<select><option>...
(tendina schermo parziale)
Paolo Montevecchi 53 Mobile Input Design
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.
Paolo Montevecchi 54
slider
Paolo Montevecchi 55
slider
● mancano gli indicatori del minimo e massimo;
● con la manopola all’estrema sinistra il campo risulta impostato a qualsiasi;
● larghezza stranamente ridotta.
Paolo Montevecchi 56
slider
Paolo Montevecchi 57
slider
Et voilà!
Paolo Montevecchi 58
slider
Ops!
Paolo Montevecchi 59
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.
Paolo Montevecchi 60 Mobile Input Design
code referenceAndroid iOS Windows
PhoneHtml5
SeekBar
UISlider Slider <input type=”range”>
Paolo Montevecchi 61 Mobile Input Design
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.
Paolo Montevecchi 62
stepper
● Baby step: Con semplice gesto
permette l’aumento o la
riduzione di un parametro
numerico attraverso step di
quantità costanti.
Paolo Montevecchi 63
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
3x
Paolo Montevecchi
stepper
1x
Paolo Montevecchi
stepper
3 taps + 1 tap = 4 taps
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
1x
Paolo Montevecchi
All’incremento delle camere aumentano
anche gli ospiti.
stepper
Paolo Montevecchi
stepper
2x
Paolo Montevecchi
stepper
1 tap + 2 taps = 3 taps
Paolo Montevecchi
stepper
Avoid disattention error
Avoid frustrating error message
4 amici, 2 camere per una fantastica vacanza a New York
http://www.businessinsider.com/the-google-investor-jan-12-2012-1
Paolo Montevecchi 75
stepper
● Agoda Smarter Hotel Booking
Prenotazioni alberghiere
intelligenti ancora più
intelligenti
Paolo Montevecchi 76
stepper
Meno di 0 bambini?
Paolo Montevecchi 77
stepper
Paolo Montevecchi 78
stepper
Why?
Paolo Montevecchi 79
stepper
1x
stepper
Paolo Montevecchi 80
Arg!
Paolo Montevecchi 81
stepper
3x
stepper
Paolo Montevecchi 82
1x
stepper
Paolo Montevecchi 83
2 tap + 3 taps + 1 tap = 6 taps
1 Error message
stepper
Paolo Montevecchi 84
Usability issues
stepper
Paolo Montevecchi 85
Usability issues
stepper
Paolo Montevecchi 86
Usability issues
Paolo Montevecchi 87
stepper
● UIStepper iOS
Lo standard non prevede che i
pulsanti siano raggruppati con il
contatore.
Paolo Montevecchi 88
stepper
Paolo Montevecchi 89 Mobile Input Design
code referenceAndroid iOS Windows
PhoneHtml5
Custom
UIStepper Custom <input type=”number”>
Paolo Montevecchi 90 Mobile Input Design
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.
Paolo Montevecchi 91
multi picker
Paolo Montevecchi 92
multi picker
Paolo Montevecchi 93
multi picker
Conceptual model?
Paolo Montevecchi 94
multi picker
Modifica condizionale dell’input
associato a ciascuna ghiera.
Paolo Montevecchi 95
multi picker
Modificando l’unità di misura del
controllo si aggiorna confermandomi la
coerenza del modello concettuale.
Paolo Montevecchi 96
multi picker
Paolo Montevecchi 97
multi picker
Conceptual model?
Paolo Montevecchi 98
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 100 Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
retrieve username
Show password
Paolo Montevecchi Mobile Input Design
retrieve username
Show password
Paolo Montevecchi Mobile Input Design
retrieve username
Show password
the same functionality!
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Forgot password?
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Not resizable!
Paolo Montevecchi Mobile Input Design
Sow password
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Show password
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
Paolo Montevecchi Mobile Input Design
login form
● don’t remove features
● use input types & attributes
● show passwords (by default?)
● input masks, if needed
● save session
● social login
Paolo Montevecchi 120 Mobile Input Design
Grazie! :)
@giesus
![Progettare Prodotti e Servizi Design-Oriented per il Mercato Mobile [Riflessioni sulla Creatività] - 15 Aprile 2010 Bologna - Antonio Prigiobbo](https://static.fdocumenti.com/doc/165x107/548df7dbb479591e1d8b46ff/progettare-prodotti-e-servizi-design-oriented-per-il-mercato-mobile-riflessioni-sulla-creativita-15-aprile-2010-bologna-antonio-prigiobbo.jpg)
