mobile input design
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
![Page 1: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/1.jpg)
PAOLO MONTEVECCHI
Mobile Input DesignMobile Input Design
ARCHITECTA ASSOCIAZIONE ITALIANA ARCHITETTI DELL’INFORMAZIONE
PAOLO MONTEVECCHI
![Page 2: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/2.jpg)
![Page 3: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/3.jpg)
![Page 4: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/4.jpg)
![Page 5: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/5.jpg)
UX Designer
http://uxcomics.comhttp://etnograph.com
@giesus
UX Designer
http://uxcomics.comhttp://etnograph.com
@giesus
![Page 6: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/6.jpg)
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
![Page 7: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/7.jpg)
Paolo Montevecchi 6 Mobile Input Design
http://lostpedia.wikia.com/wiki/Pushing_the_button
![Page 8: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/8.jpg)
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
![Page 9: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/9.jpg)
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)
![Page 10: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/10.jpg)
Paolo Montevecchi 9 Mobile Input Design
http://www.flickr.com/photos/ari/
in qualsiasi momento ci si senta ispirati
![Page 11: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/11.jpg)
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
![Page 12: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/12.jpg)
Paolo Montevecchi 11 Mobile Input Design
http://www.flickr.com/photos/olivieroberson/
59% chatta regolarmente45% spedisce email31% parla al telefono
![Page 13: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/13.jpg)
Paolo Montevecchi 12 Mobile Input Design
http://www.flickr.com/photos/dominiksyka-photography/
65.000.000 sms per day
![Page 14: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/14.jpg)
MOBILE CONSTRAINTSMOBILE CONSTRAINTS
![Page 15: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/15.jpg)
Paolo Montevecchi 14 Mobile Input Design
http://www.lukew.com/ff/entry.asp?1281
Big screen
Network
Power supply
Keyboard
Mouse
Desk
![Page 16: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/16.jpg)
Paolo Montevecchi 15 Mobile Input Design
http://www.lukew.com/ff/entry.asp?1281
Small screen
Finger
Sensor
Battery
Mobile Network
![Page 17: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/17.jpg)
INPUT CONTROLS & PATTERNS
INPUT CONTROLS & PATTERNS
![Page 18: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/18.jpg)
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”>
![Page 19: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/19.jpg)
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”>
![Page 20: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/20.jpg)
Paolo Montevecchi 19
tel on iPhone
Focus sul tipo
![Page 21: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/21.jpg)
Paolo Montevecchi 20
tel on Android
Tasti grandi
![Page 22: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/22.jpg)
Paolo Montevecchi 21
date on iPhone
Controllo dedicato
![Page 23: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/23.jpg)
Paolo Montevecchi 22
date on Android
Fail :(
![Page 24: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/24.jpg)
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
![Page 25: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/25.jpg)
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.
![Page 26: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/26.jpg)
Paolo Montevecchi 25
casella di testo
![Page 27: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/27.jpg)
Paolo Montevecchi 26
casella di testo
Tastiera email
![Page 28: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/28.jpg)
Paolo Montevecchi 27
casella di testo
Tastiera email
troppo corta
![Page 29: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/29.jpg)
Paolo Montevecchi 28
casella di testo
Auto focus
● Form Autofocus: Evita passaggi inutili.
![Page 30: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/30.jpg)
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;
![Page 31: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/31.jpg)
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
![Page 32: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/32.jpg)
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)
![Page 33: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/33.jpg)
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
![Page 34: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/34.jpg)
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.
![Page 35: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/35.jpg)
Paolo Montevecchi 34 Mobile Input Design
tendina a “schermo parziale”
![Page 36: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/36.jpg)
Paolo Montevecchi 35 Mobile Input Design
tendina a “tutto schermo”
![Page 37: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/37.jpg)
Paolo Montevecchi 36
drop-down lists
Disclosure indicator
![Page 38: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/38.jpg)
Paolo Montevecchi 37
drop-down lists
![Page 39: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/39.jpg)
● 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
![Page 40: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/40.jpg)
Paolo Montevecchi 39
drop-down lists
![Page 41: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/41.jpg)
Paolo Montevecchi 40
drop-down lists
![Page 42: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/42.jpg)
Paolo Montevecchi 41
drop-down lists
![Page 43: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/43.jpg)
Paolo Montevecchi 42
drop-down lists
![Page 44: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/44.jpg)
Paolo Montevecchi 43
drop-down lists
Fail! :(
● Scrolling: rendere sempre visibile il campo al quale ci stiamo riferendo.
![Page 45: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/45.jpg)
Paolo Montevecchi 44
drop-down lists
● Evidenziare in maniera inequivocabile il campo sul quale stiamo operando una modifica.
E’ questo!
![Page 46: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/46.jpg)
Paolo Montevecchi 45
drop-down lists
![Page 47: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/47.jpg)
Paolo Montevecchi 46
drop-down lists
● tendine a tutto schermo: in iOS vengono implementate con il controllo UITableView
FailFail! :(
Disclosure indicator
Disclosure indicator?
![Page 48: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/48.jpg)
Paolo Montevecchi 47
drop-down lists
![Page 49: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/49.jpg)
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.
![Page 50: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/50.jpg)
Paolo Montevecchi 49
drop-down lists
![Page 51: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/51.jpg)
Paolo Montevecchi 50
drop-down lists
![Page 52: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/52.jpg)
Paolo Montevecchi 51
drop-down lists
● titoli: deve informare l’utente anche in caso di scarsa attenzione.
Natural UI
![Page 53: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/53.jpg)
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)
![Page 54: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/54.jpg)
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.
![Page 55: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/55.jpg)
Paolo Montevecchi 54
slider
![Page 56: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/56.jpg)
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.
![Page 57: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/57.jpg)
Paolo Montevecchi 56
slider
![Page 58: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/58.jpg)
Paolo Montevecchi 57
slider
Et voilà!
![Page 59: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/59.jpg)
Paolo Montevecchi 58
slider
Ops!
![Page 60: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/60.jpg)
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.
![Page 61: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/61.jpg)
Paolo Montevecchi 60 Mobile Input Design
code referenceAndroid iOS Windows
PhoneHtml5
SeekBar
UISlider Slider <input type=”range”>
![Page 62: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/62.jpg)
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.
![Page 63: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/63.jpg)
Paolo Montevecchi 62
stepper
● Baby step: Con semplice gesto
permette l’aumento o la
riduzione di un parametro
numerico attraverso step di
quantità costanti.
![Page 64: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/64.jpg)
Paolo Montevecchi 63
stepper
● Smart Deafult: il maggior
numero di prenotazioni
riguardano una sola persona;
![Page 65: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/65.jpg)
4 amici, 2 camere per una fantastica vacanza a New York
http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/
![Page 66: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/66.jpg)
Paolo Montevecchi
stepper
3x
![Page 67: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/67.jpg)
Paolo Montevecchi
stepper
1x
![Page 68: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/68.jpg)
Paolo Montevecchi
stepper
3 taps + 1 tap = 4 taps
![Page 69: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/69.jpg)
4 amici, 2 camere per una fantastica vacanza a New York
http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/
![Page 70: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/70.jpg)
Paolo Montevecchi
stepper
1x
![Page 71: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/71.jpg)
Paolo Montevecchi
All’incremento delle camere aumentano
anche gli ospiti.
stepper
![Page 72: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/72.jpg)
Paolo Montevecchi
stepper
2x
![Page 73: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/73.jpg)
Paolo Montevecchi
stepper
1 tap + 2 taps = 3 taps
![Page 74: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/74.jpg)
Paolo Montevecchi
stepper
Avoid disattention error
Avoid frustrating error message
![Page 75: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/75.jpg)
4 amici, 2 camere per una fantastica vacanza a New York
http://www.businessinsider.com/the-google-investor-jan-12-2012-1
![Page 76: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/76.jpg)
Paolo Montevecchi 75
stepper
● Agoda Smarter Hotel Booking
Prenotazioni alberghiere
intelligenti ancora più
intelligenti
![Page 77: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/77.jpg)
Paolo Montevecchi 76
stepper
Meno di 0 bambini?
![Page 78: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/78.jpg)
Paolo Montevecchi 77
stepper
![Page 79: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/79.jpg)
Paolo Montevecchi 78
stepper
Why?
![Page 80: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/80.jpg)
Paolo Montevecchi 79
stepper
1x
![Page 81: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/81.jpg)
stepper
Paolo Montevecchi 80
Arg!
![Page 82: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/82.jpg)
Paolo Montevecchi 81
stepper
3x
![Page 83: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/83.jpg)
stepper
Paolo Montevecchi 82
1x
![Page 84: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/84.jpg)
stepper
Paolo Montevecchi 83
2 tap + 3 taps + 1 tap = 6 taps
1 Error message
![Page 85: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/85.jpg)
stepper
Paolo Montevecchi 84
Usability issues
![Page 86: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/86.jpg)
stepper
Paolo Montevecchi 85
Usability issues
![Page 87: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/87.jpg)
stepper
Paolo Montevecchi 86
Usability issues
![Page 88: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/88.jpg)
Paolo Montevecchi 87
stepper
● UIStepper iOS
Lo standard non prevede che i
pulsanti siano raggruppati con il
contatore.
![Page 89: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/89.jpg)
Paolo Montevecchi 88
stepper
![Page 90: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/90.jpg)
Paolo Montevecchi 89 Mobile Input Design
code referenceAndroid iOS Windows
PhoneHtml5
Custom
UIStepper Custom <input type=”number”>
![Page 91: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/91.jpg)
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.
![Page 92: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/92.jpg)
Paolo Montevecchi 91
multi picker
![Page 93: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/93.jpg)
Paolo Montevecchi 92
multi picker
![Page 94: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/94.jpg)
Paolo Montevecchi 93
multi picker
Conceptual model?
![Page 95: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/95.jpg)
Paolo Montevecchi 94
multi picker
Modifica condizionale dell’input
associato a ciascuna ghiera.
![Page 96: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/96.jpg)
Paolo Montevecchi 95
multi picker
Modificando l’unità di misura del
controllo si aggiorna confermandomi la
coerenza del modello concettuale.
![Page 97: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/97.jpg)
Paolo Montevecchi 96
multi picker
![Page 98: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/98.jpg)
Paolo Montevecchi 97
multi picker
Conceptual model?
![Page 99: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/99.jpg)
Paolo Montevecchi 98
multi picker
Conceptual model?
Call to action?
● Considerare i controlli come
componenti di un processo di input.
● Modelli concettuali coerenti.
![Page 100: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/100.jpg)
FORMFORM
![Page 101: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/101.jpg)
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
![Page 102: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/102.jpg)
Paolo Montevecchi Mobile Input Design
![Page 103: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/103.jpg)
Paolo Montevecchi Mobile Input Design
retrieve username
Show password
![Page 104: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/104.jpg)
Paolo Montevecchi Mobile Input Design
retrieve username
Show password
![Page 105: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/105.jpg)
Paolo Montevecchi Mobile Input Design
retrieve username
Show password
the same functionality!
![Page 106: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/106.jpg)
Paolo Montevecchi Mobile Input Design
![Page 107: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/107.jpg)
Paolo Montevecchi Mobile Input Design
![Page 108: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/108.jpg)
Paolo Montevecchi Mobile Input Design
Forgot password?
![Page 109: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/109.jpg)
Paolo Montevecchi Mobile Input Design
![Page 110: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/110.jpg)
Paolo Montevecchi Mobile Input Design
![Page 111: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/111.jpg)
Paolo Montevecchi Mobile Input Design
![Page 112: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/112.jpg)
Paolo Montevecchi Mobile Input Design
![Page 113: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/113.jpg)
Paolo Montevecchi Mobile Input Design
Not resizable!
![Page 114: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/114.jpg)
Paolo Montevecchi Mobile Input Design
Sow password
![Page 115: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/115.jpg)
Paolo Montevecchi Mobile Input Design
![Page 116: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/116.jpg)
Paolo Montevecchi Mobile Input Design
Show password
![Page 117: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/117.jpg)
Paolo Montevecchi Mobile Input Design
![Page 118: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/118.jpg)
Paolo Montevecchi Mobile Input Design
![Page 119: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/119.jpg)
Paolo Montevecchi Mobile Input Design
![Page 120: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/120.jpg)
Paolo Montevecchi Mobile Input Design
![Page 121: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/121.jpg)
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
![Page 123: Mobile input design](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c378124a7959d62b8b474b/html5/thumbnails/123.jpg)
Grazie! :)
@giesus