Download as PDF, PPTX
![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
5
Mobile Input Design](https://image.slidesharecdn.com/input-20mobile-20design-131118100833-phpapp01/75/Mobile-input-design-6-2048.jpg)
Uploaded byPaolo Montevecchi
Mobile input design
Il documento esamina il design dell'input mobile, evidenziando l'evoluzione dei metodi di input e l'importanza di adattarli a diverse piattaforme. Vengono discussi vari controlli di input, come caselle di testo, slider e picker, insieme a suggerimenti di usabilità per migliorare l'esperienza dell'utente. Inoltre, si pone l'accento sulla necessità di considerare le limitazioni dei dispositivi mobili e le loro specifiche caratteristiche quando si progettano interfacce utente.
Mobile input design
- 1. Mobile Input Design PAOLOMONTEVECCHI ARCHITECTA ASSOCIAZIONE ITALIANA ARCHITETTI DELL’INFORMAZIONE
- 5.
- 6. input (īn’pōōt’) Something putinto a system or expended in its operation to achieve output or a result [...] http://www.thefreedictionary.com/input Paolo Montevecchi 5 Mobile Input Design
- 7.
- 8. THE INPUT (re)EVOLUTION “Eachnew 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/ Paolo Montevecchi 7 Mobile Input Design
- 9. Perchè mobile? Pc Desktop Internet MobileInternet 1010 1012 1013 (100 M) (1 B+) 1990 (10 B+) 2000 2010 2020 ITU, Mark Lipacis Morgan Stanley Research Paolo Montevecchi 8 Mobile Input Design
- 10. in qualsiasi momentoci si senta ispirati http://www.flickr.com/photos/ari/ Paolo Montevecchi 9 Mobile Input Design
- 11. 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/jmilles/ Paolo Montevecchi 10 Mobile Input Design
- 12. 59% chatta regolarmente 45%spedisce email 31% parla al telefono http://www.flickr.com/photos/olivieroberson/ Paolo Montevecchi 11 Mobile Input Design
- 13. 65.000.000 sms perday http://www.flickr.com/photos/dominiksyka-photography/ Paolo Montevecchi 12 Mobile Input Design
- 14.
- 15. Big screen Network Keyboard Mouse Desk Power supply http://www.lukew.com/ff/entry.asp?1281 PaoloMontevecchi 14 Mobile Input Design
- 16.
- 17.
- 18. HTML input type Checkbox <inputtype=”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”> Paolo Montevecchi 17 Mobile Input Design
- 19. HTML5 input type TimePicker <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”>
- 20. tel on iPhone Focussul tipo Paolo Montevecchi 19
- 21. tel on Android Tastigrandi Paolo Montevecchi 20
- 22. date on iPhone Controllodedicato Paolo Montevecchi 21
- 23. date on Android Fail:( Paolo Montevecchi 22
- 24. frammentazione Android 4.1.X -4.2.X 4.0.3 -4.0.4 2.3.3 -2.3.7 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 23 Mobile Input Design
- 25. 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 24 Mobile Input Design
- 26. casella di testo PaoloMontevecchi 25
- 27. casella di testo Tastieraemail Paolo Montevecchi 26
- 28. casella di testo troppocorta Tastiera email Paolo Montevecchi 27
- 29. casella di testo ●Form Autofocus: Evita passaggi inutili. Auto focus Paolo Montevecchi 28
- 30. casella di testo PlaceHolder ●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 29
- 31. casella di testo PlaceHolder ●Usare i placeholder al posto delle label non è sempre corretto. ● Allineare la label al di sopra dei campi di testo. Label Paolo Montevecchi 30
- 32. code reference Android iOS Windows Phone Html5 EditText (single/mul ti line) IUTextField (singleline) TextBlock (single line) <input type=" text"..> (single line) UITextView (multi line) EditBox (multi line) Paolo Montevecchi 31 <textarea ..> (multi line) Mobile Input Design
- 33. Input Text auto-capitalize • Switchto off per: email, password, URL e altri input case sensitive. auto-correct • Turn off on email, password, URL, and other nonalpha inputs Paolo Montevecchi 32 Mobile Input Design
- 34. drop-down list È ilcontrollo 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 33 Mobile Input Design
- 35. tendina a “schermoparziale” Paolo Montevecchi 34 Mobile Input Design
- 36. tendina a “tuttoschermo” Paolo Montevecchi 35 Mobile Input Design
- 37. drop-down lists Disclosure indicator PaoloMontevecchi 36
- 38.
- 39. drop-down lists ● Formassistnat: evita passaggi inutili; ● Evidenziare il campo al quale ci stiamo riferendo. Previous & Next ● Ridurre la distanza tra utenti le informazioni: aggiorna instantaneamente il campo in funzione del valore del picker. Paolo Montevecchi 38
- 40.
- 41.
- 42.
- 43.
- 44. drop-down lists Fail! :( ●Scrolling: rendere sempre visibile il campo al quale ci stiamo riferendo. Paolo Montevecchi 43
- 45. drop-down lists E’ questo! ●Evidenziare in maniera inequivocabile il campo sul quale stiamo operando una modifica. Paolo Montevecchi 44
- 46.
- 47. drop-down lists ● tendinea tutto schermo: in iOS vengono implementate con il controllo UITableView FailFail! :( Disclosure indicator? Disclosure indicator Paolo Montevecchi 46
- 48.
- 49. drop-down lists ● 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. Distrazione! Paolo Montevecchi 48
- 50.
- 51.
- 52. drop-down lists ● titoli:deve informare l’utente anche in caso di scarsa attenzione. Natural UI Paolo Montevecchi 51
- 53. code reference Android iOS Windows Phone Html5 Spinner dropdown UIPickerView ListPicker <= a5 voci <select><option>.. . (tendina schermo parziale) (tendina schermo parziale) (tendina schermo parziale) Spinner dialog (tendina schermo parziale) UITableView (tendina schermo intero) ListPicker > di 5 voci (tendina schermo intero) Paolo Montevecchi (tendina schermo intero) 52 Mobile Input Design
- 54. slider Lo slider permetteagli utenti di scegliere facilmente un valore tra i possibili di un insieme ordinato e delimitato da un massimo ed un minimo. Paolo Montevecchi 53 Mobile Input Design
- 55.
- 56. slider ● mancano gliindicatori del minimo e massimo; ● con la manopola all’estrema sinistra il campo risulta impostato a qualsiasi; ● larghezza stranamente ridotta. Paolo Montevecchi 55
- 57.
- 58.
- 59.
- 60. slider ● lo slidernon 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 59
- 61. code reference Android SeekBar Paolo Montevecchi iOS Windows Phone Html5 UISlider Slider <inputtype=” range”> 60 Mobile Input Design
- 62. stepper È il componenteche 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 61 Mobile Input Design
- 63. stepper ● Baby step:Con semplice gesto permette l’aumento o la riduzione di un parametro numerico attraverso step di quantità costanti. Paolo Montevecchi 62
- 64. stepper ● Smart Deafult:il maggior numero di prenotazioni riguardano una sola persona; Paolo Montevecchi 63
- 65. 4 amici, 2camere per una fantastica vacanza a New York http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/
- 66.
- 67.
- 68. stepper 3 taps +1 tap = 4 taps Paolo Montevecchi
- 69. 4 amici, 2camere per una fantastica vacanza a New York http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/
- 70.
- 71. stepper All’incremento delle camere aumentano anchegli ospiti. Paolo Montevecchi
- 72.
- 73. stepper 1 tap +2 taps = 3 taps Paolo Montevecchi
- 74. stepper Avoid disattention error Avoidfrustrating error message Paolo Montevecchi
- 75. 4 amici, 2camere per una fantastica vacanza a New York http://www.businessinsider.com/the-google-investor-jan-12-2012-1
- 76. stepper ● Agoda SmarterHotel Booking Prenotazioni alberghiere intelligenti ancora più intelligenti Paolo Montevecchi 75
- 77. stepper Meno di 0bambini? Paolo Montevecchi 76
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84. stepper 2 tap +3 taps + 1 tap = 6 taps 1 Error message Paolo Montevecchi 83
- 85.
- 86.
- 87.
- 88. stepper ● UIStepper iOS Lostandard non prevede che i pulsanti siano raggruppati con il contatore. Paolo Montevecchi 87
- 89.
- 90. code reference Android Custom Paolo Montevecchi iOS Windows Phone Html5 UIStepper Custom <inputtype=” number”> 89 Mobile Input Design
- 91. multi picker E’ ilcontrollo che viene utilizzato per effettuare input di un dato composto da più parti. Per esempio: data, ora e minuti di un appuntamento. Paolo Montevecchi 90 Mobile Input Design
- 92.
- 93.
- 94. multi picker Conceptual model? PaoloMontevecchi 93
- 95. multi picker Modifica condizionaledell’input associato a ciascuna ghiera. Paolo Montevecchi 94
- 96. multi picker Modificando l’unitàdi misura del controllo si aggiorna confermandomi la coerenza del modello concettuale. Paolo Montevecchi 95
- 97.
- 98. multi picker Conceptual model? PaoloMontevecchi 97
- 99. multi picker ● Considerarei controlli come componenti di un processo di input. ● Modelli concettuali coerenti. Call to action? Conceptual model? Paolo Montevecchi 98
- 100.
- 101. login statistics #5 passwords useddaily 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
- 102.
- 103.
- 104.
- 105. retrieve username the same functionality! Showpassword Paolo Montevecchi Mobile Input Design
- 106.
- 107.
- 108. Forgot password? Paolo Montevecchi MobileInput Design
- 109.
- 110.
- 111.
- 112.
- 113. Not resizable! Paolo Montevecchi MobileInput Design
- 114. Sow password Paolo Montevecchi MobileInput Design
- 115.
- 116. Show password Paolo Montevecchi MobileInput Design
- 117.
- 118.
- 119.
- 120.
- 121. login form ● don’tremove features ● use input types & attributes ● show passwords (by default?) ● input masks, if needed ● save session ● social login Paolo Montevecchi 120 Mobile Input Design
- 123.