Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Mobile Input Design
PAOLO MONTEVECCHI

ARCHITECTA ASSOCIAZIONE ITALIANA ARCHITETTI DELL’INFORMAZIONE
UX Designer
UX Designer
http://uxcomics.com
http://uxcomics.com
http://etnograph.com
http://etnograph.com
@giesus
@giesus
input (īn’pōōt’)
Something put into a system or
expended in its operation to achieve
output or a result [...]

http://www....
http://lostpedia.wikia.com/wiki/Pushing_the_button

Paolo Montevecchi

6

Mobile Input Design
THE INPUT (re)EVOLUTION

“Each new input method led to not
just a disruption but new platforms
and new business models.”

...
Perchè mobile?
Pc

Desktop Internet

Mobile Internet

1010

1012

1013

(100 M)

(1 B+)

1990

(10 B+)

2000

2010

2020

...
in qualsiasi momento ci si senta ispirati

http://www.flickr.com/photos/ari/

Paolo Montevecchi

9

Mobile Input Design
2,7 h/g (media) Social Network
doppio delle ore che dedicano per i pasti
⅓ del tempo passato a dormire

http://www.flickr....
59% chatta regolarmente
45% spedisce email
31% parla al telefono

http://www.flickr.com/photos/olivieroberson/

Paolo Mont...
65.000.000 sms per day

http://www.flickr.com/photos/dominiksyka-photography/

Paolo Montevecchi

12

Mobile Input Design
MOBILE
CONSTRAINTS
Big screen
Network
Keyboard
Mouse
Desk
Power supply

http://www.lukew.com/ff/entry.asp?1281

Paolo Montevecchi

14

Mobile...
Small screen
Finger
Sensor
Battery
Mobile
Network

http://www.lukew.com/ff/entry.asp?1281

Paolo Montevecchi

15

Mobile I...
INPUT
CONTROLS &
PATTERNS
HTML input type
Checkbox

<input type=”checkbox”>

Radio Button

<input type=”radio”>

Password field

<input type=”passwo...
HTML5 input type
Time Picker

<input type=”time”>

Data Picker

<input type=”date”>

Email

<input type=”email”>

Date/Tim...
tel on iPhone

Focus sul tipo

Paolo Montevecchi

19
tel on Android

Tasti grandi

Paolo Montevecchi

20
date on iPhone

Controllo dedicato

Paolo Montevecchi

21
date on Android

Fail :(

Paolo Montevecchi

22
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 ...
casella di testo
È il componente specifico per
l'inserimento libero di testo, ma può
essere utilizzato anche per dati che
...
casella di testo

Paolo Montevecchi

25
casella di testo

Tastiera email

Paolo Montevecchi

26
casella di testo
troppo corta

Tastiera email

Paolo Montevecchi

27
casella di testo

● Form Autofocus: Evita passaggi
inutili.

Auto focus

Paolo Montevecchi

28
casella di testo
PlaceHolder

● L’utilizzo dei placeholder, al
posto delle label, permette di
sfruttare tutta la larghezza...
casella di testo
PlaceHolder
● Usare i placeholder al posto
delle label non è sempre
corretto.
● Allineare la label al di ...
code reference
Android

iOS

Windows
Phone

Html5

EditText
(single/mul
ti line)

IUTextField
(single line)

TextBlock
(si...
Input Text
auto-capitalize
• Switch to off per: email, password, URL e altri input
case sensitive.

auto-correct
• Turn of...
drop-down list
È il controllo che permette agli utenti di
scegliere una singola opzione da una lista finita di
elementi

Q...
tendina a “schermo parziale”

Paolo Montevecchi

34

Mobile Input Design
tendina a “tutto schermo”

Paolo Montevecchi

35

Mobile Input Design
drop-down lists

Disclosure indicator

Paolo Montevecchi

36
drop-down lists

Paolo Montevecchi

37
drop-down lists
● Form assistnat: evita passaggi
inutili;
● Evidenziare il campo al quale ci
stiamo riferendo.

Previous &...
drop-down lists

Paolo Montevecchi

39
drop-down lists

Paolo Montevecchi

40
drop-down lists

Paolo Montevecchi

41
drop-down lists

Paolo Montevecchi

42
drop-down lists
Fail! :(

● Scrolling: rendere sempre visibile il
campo al quale ci stiamo riferendo.

Paolo Montevecchi

...
drop-down lists
E’ questo!
● Evidenziare in maniera
inequivocabile il campo sul quale
stiamo operando una modifica.

Paolo...
drop-down lists

Paolo Montevecchi

45
drop-down lists
● tendine a tutto schermo: in iOS
vengono implementate con il
controllo UITableView

FailFail! :(

Disclos...
drop-down lists

Paolo Montevecchi

47
drop-down lists
● titoli: deve informare l’utente anche
in caso di scarsa attenzione;
● evitare distrazioni: il menù in ba...
drop-down lists

Paolo Montevecchi

49
drop-down lists

Paolo Montevecchi

50
drop-down lists
● titoli: deve informare l’utente anche
in caso di scarsa attenzione.

Natural UI

Paolo Montevecchi

51
code reference
Android

iOS

Windows
Phone

Html5

Spinner
dropdown

UIPickerView

ListPicker
<= a 5 voci

<select><option...
slider
Lo slider permette agli utenti di
scegliere facilmente un valore tra i
possibili di un insieme ordinato e
delimitat...
slider

Paolo Montevecchi

54
slider
● mancano gli indicatori del
minimo e massimo;
● con la manopola all’estrema
sinistra il campo risulta
impostato a ...
slider

Paolo Montevecchi

56
slider

Et voilà!

Paolo Montevecchi

57
slider

Ops!

Paolo Montevecchi

58
slider
● lo slider non ha un comportamento
prevedibile ed è contrario gli
standard di iOS;
● non è aderente all'esperienza...
code reference
Android
SeekBar

Paolo Montevecchi

iOS

Windows
Phone

Html5

UISlider

Slider

<input type=”
range”>

60
...
stepper
È il componente che viene
utilizzato quando è necessario
scegliere un valore contenuto in un
insieme di pochi elem...
stepper
● Baby step: Con semplice gesto
permette l’aumento o la
riduzione di un parametro
numerico attraverso step di
quan...
stepper
● Smart Deafult: il maggior
numero di prenotazioni
riguardano una sola persona;

Paolo Montevecchi

63
4 amici, 2 camere per una fantastica
vacanza a New York
http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/ph...
stepper

3x

Paolo Montevecchi
stepper

1x

Paolo Montevecchi
stepper
3 taps + 1 tap = 4 taps

Paolo Montevecchi
4 amici, 2 camere per una fantastica
vacanza a New York
http://www.flickr.com/photos/25636359@N06/3014998617/sizes/l/in/ph...
stepper

1x

Paolo Montevecchi
stepper

All’incremento delle
camere aumentano
anche gli ospiti.

Paolo Montevecchi
stepper

2x

Paolo Montevecchi
stepper
1 tap + 2 taps = 3 taps

Paolo Montevecchi
stepper
Avoid disattention error

Avoid frustrating error message

Paolo Montevecchi
4 amici, 2 camere per una fantastica
vacanza a New York
http://www.businessinsider.com/the-google-investor-jan-12-2012-1
stepper
● Agoda Smarter Hotel Booking
Prenotazioni alberghiere
intelligenti ancora più
intelligenti

Paolo Montevecchi

75
stepper

Meno di 0 bambini?

Paolo Montevecchi

76
stepper

Paolo Montevecchi

77
stepper

Why?
Paolo Montevecchi

78
stepper

1x

Paolo Montevecchi

79
stepper

Arg!
Paolo Montevecchi

80
stepper

3x

Paolo Montevecchi

81
stepper

1x

Paolo Montevecchi

82
stepper
2 tap + 3 taps + 1 tap = 6 taps

1 Error message
Paolo Montevecchi

83
stepper

Usability issues
Paolo Montevecchi

84
stepper

Usability issues
Paolo Montevecchi

85
stepper

Usability issues
Paolo Montevecchi

86
stepper
● UIStepper iOS
Lo standard non prevede che i
pulsanti siano raggruppati con il
contatore.

Paolo Montevecchi

87
stepper

Paolo Montevecchi

88
code reference
Android
Custom

Paolo Montevecchi

iOS

Windows
Phone

Html5

UIStepper

Custom

<input type=”
number”>

89...
multi picker
E’ il controllo che viene utilizzato
per effettuare input di un dato
composto da più parti.

Per esempio: dat...
multi picker

Paolo Montevecchi

91
multi picker

Paolo Montevecchi

92
multi picker

Conceptual model?

Paolo Montevecchi

93
multi picker
Modifica condizionale dell’input
associato a ciascuna ghiera.

Paolo Montevecchi

94
multi picker

Modificando l’unità di misura del
controllo si aggiorna confermandomi la
coerenza del modello concettuale.

...
multi picker

Paolo Montevecchi

96
multi picker

Conceptual model?

Paolo Montevecchi

97
multi picker
● Considerare i controlli come
componenti di un processo di input.
● Modelli concettuali coerenti.

Call to a...
FORM
login statistics
#5

passwords used daily

82%

forgotten a password used on a WebSite

61%

retrieve password from websit...
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

the same functionality!
Show password

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
Paolo Montevecchi

Mobile Input Design
login form
● don’t remove features
● use input types & attributes
● show passwords (by default?)
● input masks, if needed
...
Grazie! :)
@giesus
Mobile input design
Mobile input design
Mobile input design
Mobile input design
Próxima SlideShare
Cargando en…5
×

Mobile input design

1.187 visualizaciones

Publicado el

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.

Publicado en: Diseño

Mobile input design

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

×