Interazione

I dispositivi con schermi piccoli, come i telefoni cellulari, spesso hanno touchscreen. I dispositivi con schermi di grandi dimensioni, come laptop e computer, sono spesso dotati di hardware come un mouse o un trackpad. È facile associare gli schermi piccoli al tocco e quelli grandi ai cursori.

Ma la realtà è più sfumata. 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 esterno con un dispositivo touchscreen come un tablet.

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

Puntatore

Puoi verificare la presenza di tre possibili valori con la funzionalità multimediale pointer: none, coarse e fine.

Se un browser riporta un valore pointer pari a none, l'utente potrebbe utilizzare una tastiera per interagire con il tuo sito web.

Se un browser riporta un valore pointer pari a coarse, significa che il meccanismo di inserimento principale non è molto preciso. Un dito su un touchscreen è un cursore approssimativo.

Se un browser riporta un valore pointer pari a fine, significa che il meccanismo di immissione principale è in grado di eseguire un controllo granulare. Un mouse o uno stilo sono ottimi cursori.

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

In questo esempio, i pulsanti vengono ingranditi per i cursori approssimativi:

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

È possibile anche ridurre le dimensioni degli elementi per i cursori di precisione, ma fai attenzione:

Cosa non fare

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

Anche se un utente dispone di un meccanismo di input principale in grado di fornire un controllo granulare, pensaci bene prima di ridurre le dimensioni degli elementi interattivi. La legge di Fitts si applica ancora. Un target più piccolo richiede una maggiore concentrazione anche con un cursore preciso. Un'area di destinazione più grande è vantaggiosa per tutti, indipendentemente dal dispositivo di puntamento.

Qualsiasi cursore

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

any-pointer è diverso dalla funzionalità multimediale pointer in quanto segnala se qualsiasi 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. Tuttavia, questo potrebbe non essere il meccanismo di inserimento principale.

Un valore any-pointer pari a fine indica che almeno un dispositivo di puntamento è in grado di eseguire un controllo granulare. Tuttavia, questo potrebbe non essere il meccanismo di inserimento principale.

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

In questo esempio, se il dispositivo ha sia un meccanismo di immissione fine 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 immissione principale può passare il mouse sopra gli elementi. In genere, significa che sullo schermo è presente un cursore controllato da un mouse o un trackpad.

A differenza della funzionalità multimediale pointer che distingue tra cursori fini e approssimativi, la funzionalità multimediale hover è binaria. Se il dispositivo di input principale è in grado di passare il mouse sopra gli elementi, verrà riportato un 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 passare al pulsante, l'icona rimane invisibile. Quando usi la tastiera, attivi lo stato attivo anziché il passaggio del mouse. Un computer con un mouse collegato segnalerà che il meccanismo di immissione principale è in grado di eseguire il passaggio del mouse, il che è vero. Tuttavia, chi utilizza una tastiera con un mouse collegato 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 con il passaggio del mouse. Le informazioni diventano meno rilevabili. Non utilizzare il passaggio del mouse per nascondere informazioni importanti o un elemento dell'interfaccia importante.

Qualsiasi passaggio del mouse

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

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

Se decidi di invertire la logica nell'esempio precedente, puoi impostare gli stili di passaggio del mouse come predefiniti e poi 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 che non dispone di un meccanismo di input in grado di eseguire il passaggio del mouse, l'icona aggiuntiva è sempre visibile.

Tastiere virtuali

Le persone usano cursori e dita per esplorare le interfacce, ma quando arriva il momento di inserire informazioni, hanno bisogno di una tastiera. Non c'è problema se il dispositivo è dotato di una tastiera fisica, ma se utilizza un dispositivo touchscreen, la procedura è un po' più complicata. 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 immissione

Browser Support

• 66
• 79
• 95
• 12.1

Source

L'attributo inputmode ti offre un controllo granulare sulle tastiere virtuali. Ad esempio, se esiste un input type con un valore pari a 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 chiedi 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 degli 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 agire. Per informazioni più approfondite, è disponibile un corso dedicato all'apprendimento dei moduli.

Nel prossimo modulo di questo corso esamineremo alcuni pattern di interfaccia comuni.

Verificare di aver compreso

Verifica le tue conoscenze sulle interazioni

Quale funzionalità dovresti utilizzare anziché provare a dedurre il tipo di input di un utente dalle dimensioni dello schermo?

Funzionalità dei contenuti multimediali del CSS

Ad esempio @media (pointer: coarse) o @media (-any-pointer: coarse)

Chiedi all'utente con prompt() di JavaScript

Non è ideale chiedere direttamente.

Tipo multimediale del CSS handheld

Questo valore è stato ritirato in Media Queries 4.

Qual è la differenza tra @media (pointer) e @media (any-pointer)?

Qualsiasi cursore include elementi come il dito.

Il cursore include già il tocco come tipo di input.

I cursori non includono dispositivi come il mouse.

I cursori includono un mouse come dispositivo di input.

Qualsiasi cursore restituirà true quando input aggiuntivi non principali, come uno stilo, superano il test.

any-pointer esegue query su tutti i tipi di input del dispositivo per qualsiasi corrispondenza.

Quali tipi di input mostrano una tastiera virtuale più appropriata per gli utenti?

type="url"

La tastiera offrirà pulsanti per supportare la digitazione degli URL.

type="tel"

La tastiera offrirà pulsanti per supportare la digitazione dei numeri di telefono.

type="number"

La tastiera offrirà pulsanti per supportare la digitazione di soli numeri.

type="email"

La tastiera offrirà pulsanti per supportare la digitazione degli indirizzi email.