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