Mobile input design
•
11 recomendaciones•1,431 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
Similar a Mobile input design
Similar a Mobile input design (20)
Mobile input design
- 1. Mobile Input Design PAOLO MONTEVECCHI ARCHITECTA ASSOCIAZIONE ITALIANA ARCHITETTI DELL’INFORMAZIONE
- 6. 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
- 8. 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
- 9. 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
- 10. in qualsiasi momento ci 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 per day http://www.flickr.com/photos/dominiksyka-photography/ Paolo Montevecchi 12 Mobile Input Design
- 15. Big screen Network Keyboard Mouse Desk Power supply http://www.lukew.com/ff/entry.asp?1281 Paolo Montevecchi 14 Mobile Input Design
- 16. Small screen Finger Sensor Battery Mobile Network http://www.lukew.com/ff/entry.asp?1281 Paolo Montevecchi 15 Mobile Input Design
- 18. 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
- 19. 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”>
- 20. tel on iPhone Focus sul tipo Paolo Montevecchi 19
- 21. tel on Android Tasti grandi Paolo Montevecchi 20
- 22. date on iPhone Controllo dedicato 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 Paolo Montevecchi 25
- 27. casella di testo Tastiera email Paolo Montevecchi 26
- 28. casella di testo troppo corta 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 (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
- 33. 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
- 34. 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
- 35. tendina a “schermo parziale” Paolo Montevecchi 34 Mobile Input Design
- 36. tendina a “tutto schermo” Paolo Montevecchi 35 Mobile Input Design
- 37. drop-down lists Disclosure indicator Paolo Montevecchi 36
- 39. 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
- 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
- 47. drop-down lists ● tendine a tutto schermo: in iOS vengono implementate con il controllo UITableView FailFail! :( Disclosure indicator? Disclosure indicator Paolo Montevecchi 46
- 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
- 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 <= 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
- 54. 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
- 56. 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
- 60. 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
- 61. code reference Android SeekBar Paolo Montevecchi iOS Windows Phone Html5 UISlider Slider <input type=” range”> 60 Mobile Input Design
- 62. 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
- 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, 2 camere per una fantastica vacanza a New York http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/
- 68. stepper 3 taps + 1 tap = 4 taps Paolo Montevecchi
- 69. 4 amici, 2 camere per una fantastica vacanza a New York http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/photostream/
- 71. stepper All’incremento delle camere aumentano anche gli ospiti. Paolo Montevecchi
- 73. stepper 1 tap + 2 taps = 3 taps Paolo Montevecchi
- 74. stepper Avoid disattention error Avoid frustrating error message Paolo Montevecchi
- 75. 4 amici, 2 camere per una fantastica vacanza a New York http://www.businessinsider.com/the-google-investor-jan-12-2012-1
- 76. stepper ● Agoda Smarter Hotel Booking Prenotazioni alberghiere intelligenti ancora più intelligenti Paolo Montevecchi 75
- 77. stepper Meno di 0 bambini? Paolo Montevecchi 76
- 84. stepper 2 tap + 3 taps + 1 tap = 6 taps 1 Error message Paolo Montevecchi 83
- 88. stepper ● UIStepper iOS Lo standard non prevede che i pulsanti siano raggruppati con il contatore. Paolo Montevecchi 87
- 90. code reference Android Custom Paolo Montevecchi iOS Windows Phone Html5 UIStepper Custom <input type=” number”> 89 Mobile Input Design
- 91. 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
- 94. multi picker Conceptual model? Paolo Montevecchi 93
- 95. multi picker Modifica condizionale dell’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
- 98. multi picker Conceptual model? Paolo Montevecchi 97
- 99. multi picker ● Considerare i controlli come componenti di un processo di input. ● Modelli concettuali coerenti. Call to action? Conceptual model? Paolo Montevecchi 98
- 100. FORM
- 101. 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
- 102. Paolo Montevecchi Mobile Input Design
- 103. retrieve username Show password Paolo Montevecchi Mobile Input Design
- 104. retrieve username Show password Paolo Montevecchi Mobile Input Design
- 105. retrieve username the same functionality! Show password Paolo Montevecchi Mobile Input Design
- 106. Paolo Montevecchi Mobile Input Design
- 107. Paolo Montevecchi Mobile Input Design
- 108. Forgot password? Paolo Montevecchi Mobile Input Design
- 109. Paolo Montevecchi Mobile Input Design
- 110. Paolo Montevecchi Mobile Input Design
- 111. Paolo Montevecchi Mobile Input Design
- 112. Paolo Montevecchi Mobile Input Design
- 113. Not resizable! Paolo Montevecchi Mobile Input Design
- 114. Sow password Paolo Montevecchi Mobile Input Design
- 115. Paolo Montevecchi Mobile Input Design
- 116. Show password Paolo Montevecchi Mobile Input Design
- 117. Paolo Montevecchi Mobile Input Design
- 118. Paolo Montevecchi Mobile Input Design
- 119. Paolo Montevecchi Mobile Input Design
- 120. Paolo Montevecchi Mobile Input Design
- 121. 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
- 123. Grazie! :) @giesus