I dispositivi con schermi di piccole dimensioni come i cellulari sono spesso dotati di touchscreen. I dispositivi con schermi di grandi dimensioni come laptop e computer desktop sono spesso dotati di hardware come mouse o trackpad. La tentazione di paragonare schermi di piccole dimensioni a touchscreen e schermi di grandi dimensioni con puntatori.
ma la realtà è più articolata. Alcuni laptop dispongono di funzionalità touchscreen. Gli utenti possono interagire con un touchscreen, con un trackpad o con 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à multimediale di pointer: none, coarse e fine.
Se un browser segnala un valore pointer di 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 preciso. Un dito sul touchscreen è un puntatore grosso.
Se un browser segnala un valore pointer pari a fine, significa che il meccanismo di input principale è in grado di avere un controllo granulare. Un mouse o uno stilo è un puntatore preciso.
Puoi regolare le dimensioni degli elementi dell'interfaccia in base al valore pointer. Prova a visitare questo sito web utilizzando diversi tipi di dispositivi per vedere come si adatta l'interfaccia.
In questo esempio, i pulsanti vengono ingranditi per i puntatori approssimativi:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
È possibile anche ridurre gli elementi per i puntatori più sottili, ma fai attenzione a questa operazione:
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
Anche se qualcuno dispone di un meccanismo di input principale in grado di ottenere un controllo granulare, rifletti bene prima di ridurre le dimensioni degli elementi interattivi. La legge Fit continua a essere applicata. Un bersaglio più piccolo richiede una maggiore concentrazione, anche con un puntatore preciso. Un'area target più ampia è vantaggiosa per tutti, indipendentemente dal dispositivo di puntamento.
Qualsiasi puntatore
La funzionalità dei contenuti multimediali pointer indica il livello di dettaglio del meccanismo di input principale. Tuttavia, molti dispositivi hanno più di un meccanismo di input. È possibile che qualcuno stia interagendo con il tuo sito web utilizzando contemporaneamente un touchscreen e un mouse.
any-pointer si differenzia dalla funzionalità multimediale pointer in quanto indica se un dispositivo di puntamento supera il test.
Un valore none pari a 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. Tuttavia, questo potrebbe non essere il meccanismo di input principale.
Un valore any-pointer pari a fine indica che almeno un dispositivo di puntamento può avere un controllo granulare. Ma ancora una volta, questo potrebbe non essere il meccanismo di input principale.
Poiché la query supporti any-pointer restituirà un risultato positivo se uno qualsiasi dei meccanismi di input supera il test, un browser può segnalare 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 ha la precedenza.
In questo esempio, se il dispositivo ha un meccanismo di immissione sia di precisione che di dati approssimativi, vengono applicati gli stili approssimativi.
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
Passa il mouse sopra
La funzionalità multimediale hover indica se il meccanismo di input principale può passare il mouse sopra gli elementi. In genere ciò significa che sullo schermo è presente un tipo di cursore controllato da un mouse o un trackpad.
A differenza della funzionalità dei contenuti multimediali pointer, che distingue tra puntatori granulari e approssimativi, la funzionalità dei contenuti multimediali hover è binaria. Se il dispositivo di input principale è in grado di passare il mouse sopra gli elementi, riporterà un valore pari a hover. In caso contrario, il valore è none.
In questo esempio, alcune icone supplementari sono disponibili al passaggio del mouse, ma soltanto se il dispositivo di input principale può 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. Se però usi la tastiera per passare al pulsante, l'icona rimane invisibile. Quando usi la tastiera, metti a fuoco e non passi il mouse sopra. Un dispositivo desktop con un mouse collegato segnala che il meccanismo di input principale è in grado di passare il mouse, il che è vero. Tuttavia, chiunque utilizzi una tastiera mentre è collegato un mouse non beneficia degli stili :hover. Quindi è 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, fai attenzione a nascondere le informazioni dietro un'interazione al passaggio del mouse. Le informazioni diventano meno rilevabili. Non utilizzare il passaggio del mouse per nascondere informazioni importanti o un elemento importante dell'interfaccia.
Qualsiasi passaggio del mouse
La query supporti hover genera report solo sul meccanismo di input principale. Alcuni dispositivi hanno più meccanismi di input: touchscreen, mouse, tastiera, trackpad.
Proprio come any-pointer su uno qualsiasi dei meccanismi di input, any-hover si verifica se uno qualsiasi di questi meccanismi di input è in grado di passare il mouse sopra gli elementi.
Se hai deciso di invertire la logica nell'esempio precedente, potresti impostare gli stili al passaggio del mouse come predefiniti e poi rimuoverli se any-hover ha il 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 privo di meccanismo di immissione sul quale è possibile passare il mouse, l'icona aggiuntiva è sempre visibile.
Tastiere virtuali
Le persone usano i cursori e le dita per esplorare le interfacce, ma quando si tratta di inserire informazioni, hanno bisogno di una tastiera. Non è un problema se il dispositivo ha una tastiera fisica, ma se il dispositivo utilizza un dispositivo touchscreen la procedura è leggermente più complessa. Questi dispositivi dispongono di tastiere virtuali sullo schermo.
Tipi di input
A differenza di una tastiera fisica, le tastiere virtuali possono essere personalizzate in base all'input previsto. Se fornisci informazioni sull'input previsto, i dispositivi possono visualizzare 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 offre un controllo granulare sulle tastiere virtuali. Ad esempio, mentre esiste un type input con valore number, puoi utilizzare l'attributo inputmode per distinguere numeri interi e decimali.
Se chiedi un numero intero, come l'età di una persona, usa inputmode="numeric".
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
Se richiedi un numero che include cifre decimali, come un prezzo, utilizza 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 una grande differenza per l'esperienza utente. Prevedendo e rispondendo alle capacità dei dispositivi degli utenti, offri loro nuove opportunità. Per informazioni più dettagliate, c'è un corso dedicato all'apprendimento dei moduli.
Nel prossimo corso vedremo alcuni pattern dell'interfaccia comune.
Verifica la tua comprensione
Verifica le tue conoscenze delle interazioni
Quale funzionalità dovresti usare anziché provare a dedurre il tipo di input di un utente dalle dimensioni dello schermo?
@media (pointer: coarse) o @media (-any-pointer: coarse)prompt() di JavaScripthandheldQual è la differenza tra @media (pointer) e @media (any-pointer)?
any-pointer esegue query su tutti i tipi di input del dispositivo per trovare qualsiasi corrispondenza.Quali tipi di immissione mostrano una tastiera virtuale più appropriata per gli utenti?
type="url"type="tel"type="number"type="email"