Interazione

I dispositivi con schermi piccoli, come i cellulari, spesso hanno touchscreen. I dispositivi con schermi di grandi dimensioni, come laptop e computer, spesso sono dotati di hardware come un mouse o un trackpad. È allettante equiparare gli schermi piccoli al tocco e gli schermi grandi ai puntatori.

Ma la realtà è più complessa. Alcuni laptop sono dotati di funzionalità touchscreen. Gli utenti possono interagire con un touchscreen, un trackpad o entrambi. Allo stesso modo, è possibile utilizzare una tastiera o un mouse esterni con un dispositivo touchscreen come un tablet.

Anziché tentare di dedurre il meccanismo di input dalle dimensioni dello schermo, utilizza le funzionalità multimediali in CSS.

Puntatore

Puoi eseguire il test per tre valori possibili con la funzionalità multimediale pointer: none, coarse e fine.

Se un browser segnala un valore pointer pari a none, l'utente potrebbe utilizzare 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 su un touchscreen è un puntatore grossolano.

Se un browser segnala un valore pointer pari a fine, significa che il meccanismo di input principale è in grado di controllare in modo preciso. Un mouse o uno stilo sono ottimi puntatori.

Puoi regolare le dimensioni degli elementi dell'interfaccia in base al valore di pointer. Prova a visitare questo sito web demo su diversi tipi di dispositivi per vedere come si adatta l'interfaccia.

In questo esempio, i pulsanti vengono ingranditi per i puntatori grossolani:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

È anche possibile rimpicciolire gli elementi per i puntatori sottili, ma fai attenzione:

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Anche se una persona ha un meccanismo di input principale in grado di offrire un controllo granulare, pensaci bene prima di ridurre le dimensioni degli elementi interattivi. La legge di Fitts è ancora valida. Un target più piccolo richiede maggiore concentrazione anche con un puntatore sottile. Un'area target più ampia è utile a tutti, indipendentemente dal dispositivo di puntamento.

Qualsiasi puntatore

La funzionalità multimediale pointer indica la precisione del meccanismo di input principale. Tuttavia, molti dispositivi hanno più di un meccanismo di input. È possibile che qualcuno interagisca con il tuo sito web utilizzando contemporaneamente un touchscreen e un mouse.

La funzionalità any-pointer si differenzia dalla funzionalità multimediale pointer in quanto indica se un dispositivo di puntamento supera il test.

Un valore any-pointer pari a none indica che non è disponibile alcun dispositivo di puntamento.

Un valore any-pointer pari a coarse indica che almeno un dispositivo di puntamento non è molto preciso. ma potrebbe non essere il meccanismo di input principale.

Un valore any-pointer di fine indica che almeno un dispositivo di puntamento è in grado di controllare con precisione. Ma, ancora una volta, questo potrebbe non essere il meccanismo di input principale.

Poiché la media query any-pointer restituirà un risultato positivo se uno qualsiasi dei meccanismi di input supera il test, è possibile che un browser restituisca un risultato per any-pointer: fine e anche per any-pointer: coarse. In questo caso, l'ordine delle query supporti è importante. L'ultima avrà la precedenza.

In questo esempio, se il dispositivo ha sia un meccanismo di input preciso che uno approssimativo, vengono applicati gli stili approssimativi.

@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. Di solito significa che sullo schermo è presente un cursore controllato da un mouse o un trackpad.

A differenza della funzionalità multimediale pointer, che distingue tra puntatori precisi e grossolani, la funzionalità multimediale hover è binaria. Se il dispositivo di input principale è in grado di passare il mouse sopra gli elementi, verrà segnalato un valore di 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, l'icona viene visualizzata. Tuttavia, se usi la tastiera per passare al pulsante, l'icona rimane invisibile. Quando utilizzi la tastiera, ti concentri anziché passare il mouse sopra. Un dispositivo desktop con un mouse collegato segnalerà che il meccanismo di input principale è in grado di passare il mouse sopra, il che è vero. Tuttavia, chiunque utilizzi una tastiera mentre è collegato un mouse non potrà usufruire dei vantaggi degli stili :hover. Pertanto, è consigliabile 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 non 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 hover

La media query hover genera report solo sul meccanismo di input principale. Alcuni dispositivi hanno più meccanismi di input: touchscreen, mouse, tastiera, trackpad.

Proprio come any-pointer segnala uno qualsiasi dei meccanismi di input, any-hover sarà vero se uno qualsiasi dei meccanismi di input disponibili è in grado di passare il mouse sopra gli elementi.

Se hai deciso di invertire la logica dell'esempio precedente, potresti impostare gli stili al passaggio del mouse come predefiniti e poi rimuoverli se any-hover ha un valore di none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Su un dispositivo che non dispone di un meccanismo di input in grado di passare il mouse sopra, l'icona aggiuntiva è sempre visibile.

Tastiere virtuali

Le persone usano i cursori e le dita per esplorare le interfacce, ma quando è il momento di inserire informazioni, hanno bisogno di una tastiera. Va bene se al dispositivo è collegata una tastiera fisica, ma se l'utente utilizza un dispositivo touchscreen è un po' più complicato. Questi dispositivi forniscono 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 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 input

L'attributo inputmode ti offre un controllo granulare sulle tastiere virtuali. Ad esempio, mentre esiste un solo input type con un valore di number, puoi utilizzare l'attributo inputmode per distinguere tra numeri interi e decimali.

Se chiedi un numero intero, ad esempio l'età di una persona, utilizza inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Se richiedi un numero che include cifre decimali, ad esempio 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 dei tuoi utenti consentendo loro di compilare automaticamente i campi del modulo. 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. Anticipando e rispondendo alle funzionalità del dispositivo dell'utente, lo metti in condizione di sfruttare al meglio il suo dispositivo. Per informazioni più approfondite, esiste un corso dedicato ad aiutarti a imparare a usare i moduli.

Nella prossima lezione di questo corso, esamineremo alcuni pattern di interfaccia comuni.

Mettiti alla prova

Metti alla prova le tue conoscenze sulle interazioni