I dispositivi con schermi di piccole dimensioni, come i telefoni cellulari, spesso sono dotati di touchscreen. I dispositivi con schermi di grandi dimensioni, come laptop e computer desktop, spesso sono dotati di hardware come mouse o trackpad. Si può avere la tentazione di trovare schermi piccoli con schermi tattili e schermi grandi con puntatori.
Ma la realtà è più articolata. Alcuni laptop sono dotati di touchscreen. Gli utenti possono interagire con un touchscreen, un trackpad o entrambi. Analogamente, è possibile utilizzare una tastiera o un mouse esterni con un dispositivo touchscreen come un tablet.
Anziché provare a dedurre il meccanismo di input dalle dimensioni dello schermo, utilizza le funzionalità multimediali in CSS.
Puntatore
Puoi testare tre possibili valori con la funzionalità dei contenuti multimediali pointer
: none
, coarse
e fine
.
Se un browser riporta un valore pointer
pari a none
, è possibile che l'utente stia utilizzando una tastiera per interagire con il tuo sito web.
Se un browser segnala un valore pointer
pari a coarse
, significa che il meccanismo di input principale non è molto accurato. Un dito su un touchscreen è un puntatore approssimativo.
Se un browser segnala un valore pointer
pari a fine
, significa che il meccanismo di input primario è in grado di avere un controllo granulare. Un mouse o uno stilo sono un puntatore efficace.
Puoi regolare le dimensioni degli elementi dell'interfaccia in base al valore pointer
. Prova a visitare questo sito web con diversi tipi di dispositivi per vedere come l'interfaccia si adatta.
In questo esempio, i pulsanti sono più grandi per i puntatori approssimativi:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
È anche possibile ridurre gli elementi per i puntatori piccoli, ma fai attenzione a questa operazione:
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
Anche se qualcuno dispone di un meccanismo di input primario in grado di controllare in modo dettagliato, pensaci due volte prima di ridurre la dimensione degli elementi interattivi. Si applica comunque la legge di Fit. Un bersaglio più piccolo richiede una maggiore concentrazione anche con un puntatore più preciso. Un'area target più ampia va a vantaggio di tutti, indipendentemente dal dispositivo di puntamento.
Qualsiasi puntatore
La funzionalità dei contenuti multimediali pointer
riporta la precisione del meccanismo di immissione principale. Tuttavia, molti dispositivi hanno più di un meccanismo di input. È possibile che un utente stia interagendo contemporaneamente con il tuo sito web utilizzando un touchscreen e un mouse.
any-pointer
è diverso dalla funzionalità dei contenuti multimediali pointer
in quanto indica se un dispositivo di puntamento supera il test.
Il valore none
di any-pointer
indica che non è disponibile nessun dispositivo di puntamento.
Un valore any-pointer
pari a coarse
indica che almeno un dispositivo di puntamento non è molto preciso. Ma questo potrebbe non essere il meccanismo di input principale.
Un valore any-pointer
pari a fine
indica che almeno un dispositivo di puntamento è in grado di avere un controllo granulare. Ma ripeto, potrebbe non essere il meccanismo di input principale.
Poiché la query multimediale any-pointer
restituirà un risultato positivo se uno dei meccanismi di input supera il test, è possibile che un browser segnali un risultato per any-pointer: fine
e anche un risultato per any-pointer: coarse
. In questo caso, l'ordine delle query supporti è importante. L'ultimo avrà la precedenza.
In questo esempio, se il dispositivo ha un meccanismo di input sia granulare che approssimativo, vengono applicati gli stili coarse.
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
Passaci il mouse sopra
La funzionalità multimediale hover
indica se il meccanismo di input principale può passare il mouse sopra gli elementi. Questo di solito significa che sullo schermo è presente un qualche tipo di cursore controllato da un mouse o un trackpad.
A differenza della funzionalità dei contenuti multimediali di pointer
, che differenzia i puntatori granulari e approssimativi, la funzionalità dei contenuti multimediali di hover
è binaria. Se il dispositivo di input principale è in grado di passare il mouse sopra gli elementi, verrà segnalato il valore hover
. In caso contrario, il valore è none
.
In questo esempio, alcune icone supplementari sono disponibili al passaggio del mouse, ma solo se il dispositivo di input principale è in grado di passare il mouse sopra un elemento.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
Se passi il mouse sopra il pulsante, viene visualizzata l'icona. Tuttavia, se utilizzi la tastiera per accedere al pulsante con il tasto Tab, l'icona rimane invisibile. Quando usi la tastiera, sei attivo e non passi il mouse sopra. Un computer con un mouse collegato segnala che è possibile passare il mouse sopra il meccanismo di input principale, il che è vero. Tuttavia, chiunque usi una tastiera mentre è collegato un mouse non usufruirà dei vantaggi degli stili :hover
. Pertanto, è una buona idea combinare gli stili :hover
e :focus
per coprire entrambe le interazioni.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:is(:hover, :focus) .extra {
visibility: visible;
}
}
Anche se il dispositivo di input principale è in grado di passare il mouse sopra gli elementi, presta attenzione a nascondere le informazioni dietro un'interazione con il passaggio del mouse. Le informazioni diventano meno individuabili. Non utilizzare il passaggio del mouse per nascondere informazioni importanti o un importante elemento dell'interfaccia.
Qualsiasi passaggio del mouse
La query supporti hover
genera report solo sul meccanismo di immissione principale. Alcuni dispositivi hanno più meccanismi di immissione: touchscreen, mouse, tastiera, trackpad.
Proprio come any-pointer
riporta su uno qualsiasi dei meccanismi di input, il valore any-hover
è vero se uno qualsiasi dei meccanismi di input disponibili è in grado di passare il mouse sopra gli elementi.
Se nell'esempio precedente hai deciso di invertire la logica, puoi rendere predefiniti gli stili visualizzati al passaggio del mouse e rimuoverli se any-hover
ha un valore none
.
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
Su un dispositivo sprovvisto di meccanismo di input che consente di passare il mouse sopra, l'icona aggiuntiva è sempre visibile.
Tastiere virtuali
Gli utenti utilizzano cursori e dita per esplorare le interfacce ma, quando è il momento di inserire le informazioni, hanno bisogno di una tastiera. Non c'è problema se al loro dispositivo è collegata una tastiera fisica, ma se usano un dispositivo touchscreen il processo è un po' più complicato. Questi dispositivi offrono tastiere virtuali sullo schermo.
Tipi di input
A differenza delle tastiere fisiche, le tastiere virtuali possono essere personalizzate in modo da corrispondere all'input previsto. Se fornisci informazioni sull'input previsto, i dispositivi possono mostrare la tastiera virtuale più appropriata.
I tipi di input HTML5 sono un ottimo modo per descrivere gli elementi input
. L'attributo type
accetta valori come email
, number
, tel
, url
e altri.
<label for="email">Email</label>
<input type="email" id="email">
<label for="number">Number</label>
<input type="number" id="number">
<label for="tel">Tel</label>
<input type="tel" id="tel">
<label for="url">URL</label>
<input type="url" id="url">
Modalità di immissione
L'attributo inputmode
ti offre un controllo granulare sulle tastiere virtuali. Ad esempio, mentre c'è un type
input
con un valore di number
, puoi utilizzare l'attributo inputmode
per distinguere i numeri interi dai decimali.
Se richiedi un numero intero, ad esempio l'età di una persona, usa inputmode="numeric"
.
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
Se chiedi un numero che include cifre decimali, come un prezzo, usa inputmode="decimal"
.
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
Completamento automatico
A nessuno piace compilare moduli. In qualità di designer, puoi migliorare l'esperienza degli utenti consentendo loro di compilare automaticamente i campi dei moduli. L'attributo autocomplete
offre una serie di opzioni per migliorare i moduli di contatto, di accesso e di pagamento.
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">
Questi attributi HTML (type
, inputmode
e autocomplete
) sono piccole aggiunte ai campi del modulo, ma possono fare un'enorme differenza per l'esperienza utente. Pensando alle funzionalità dei dispositivi dei tuoi utenti e reagendo a loro, offri maggiori possibilità agli utenti. Per informazioni più dettagliate, è disponibile un corso dedicato ad aiutarti a imparare i moduli.
In questo corso dobbiamo analizzare alcuni pattern comuni dell'interfaccia.
Verifica le tue conoscenze
Verifica le tue conoscenze sulle interazioni
Quale funzionalità dovresti usare invece di provare a dedurre il tipo di input di un utente dalle dimensioni dello schermo?
handheld
prompt()
di JavaScriptQual è la differenza tra @media (pointer)
e @media (any-pointer)
?
Quali tipi di input mostrano una tastiera virtuale più appropriata per gli utenti?
type="email"
type="url"
type="number"
type="tel"