Interazione

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