Interaction

Les appareils à petit écran, comme les téléphones mobiles, ont souvent des écrans tactiles. Les appareils à grand écran, comme les ordinateurs portables et de bureau, sont souvent livrés avec du matériel tel qu'une souris ou un pavé tactile. Il peut être tentant d'assimiler les petits écrans au tactiles et les grands écrans aux pointeurs.

Mais la réalité est plus nuancée. Certains ordinateurs portables sont équipés d'un écran tactile. Les utilisateurs peuvent interagir avec un écran tactile, un pavé tactile ou les deux. De même, il est possible d'utiliser un clavier ou une souris externe avec un appareil à écran tactile, comme une tablette.

Au lieu d'essayer de déduire le mécanisme d'entrée à partir de la taille de l'écran, utilisez les fonctionnalités multimédias en CSS.

Pointeur

Vous pouvez tester trois valeurs possibles avec la fonctionnalité multimédia pointer: none, coarse et fine.

Si un navigateur signale une valeur pointer de none, il est possible que l'utilisateur utilise un clavier pour interagir avec votre site Web.

Si un navigateur signale une valeur pointer de coarse, cela signifie que le mécanisme d'entrée principal n'est pas très précis. Un doigt sur un écran tactile est un pointeur approximatif.

Si un navigateur signale une valeur pointer de fine, cela signifie que le mécanisme de saisie principal est capable d'effectuer un contrôle ultraprécis. Une souris ou un stylet est un pointeur précis.

Vous pouvez ajuster la taille de vos éléments d'interface pour qu'ils correspondent à la valeur pointer. Essayez de consulter ce site Web sur différents types d'appareils pour voir comment l'interface s'adapte.

Dans cet exemple, les boutons sont agrandis pour les pointeurs approximatifs:

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

Il est également possible de réduire la taille des éléments pour les pointeurs fins, mais faites attention de le faire:

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

Même si quelqu'un dispose d'un mécanisme de saisie principal capable d'effectuer un contrôle ultraprécis, réfléchissez à deux fois avant de réduire la taille des éléments interactifs. La loi de Fitts s'applique toujours. Une cible plus petite nécessite plus de concentration, même avec un pointeur fin. Une zone cible plus étendue profite à tous, quel que soit l’appareil de pointage.

N'importe quel pointeur

La fonctionnalité multimédia pointer indique la précision du mécanisme d'entrée principal. Mais de nombreux appareils ont plusieurs mécanismes d'entrée. Il est possible qu'un internaute utilise à la fois un écran tactile et une souris pour interagir avec votre site Web.

Le any-pointer diffère de la fonctionnalité multimédia pointer dans la mesure où il indique si un dispositif de pointage réussit le test.

Une valeur any-pointer définie sur none signifie qu'aucun dispositif de pointage n'est disponible.

Une valeur any-pointer de coarse signifie qu'au moins un dispositif de pointage n'est pas très précis. Mais ce n'est peut-être pas le mécanisme d'entrée principal.

Une valeur any-pointer de fine signifie qu'au moins un dispositif de pointage peut offrir un contrôle ultraprécis. Mais là encore, il ne s'agit peut-être pas du mécanisme d'entrée principal.

Étant donné que la requête média any-pointer renvoie un résultat positif si l'un des mécanismes d'entrée réussit le test, un navigateur peut signaler un résultat pour any-pointer: fine, ainsi qu'un résultat pour any-pointer: coarse. Dans ce cas, l'ordre de vos requêtes média est important. Le dernier d'entre eux est prioritaire.

Dans cet exemple, si l'appareil dispose à la fois d'un mécanisme d'entrée fine et d'un mécanisme d'entrée approximative, les styles approximatifs sont appliqués.

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

Survol

La fonctionnalité multimédia hover indique si le mécanisme de saisie principal peut pointer sur des éléments. Cela signifie généralement qu'un certain type de curseur à l'écran est contrôlé par une souris ou un pavé tactile.

Contrairement à la fonctionnalité multimédia pointer qui différencie les pointeurs fins et approximatifs, la fonctionnalité multimédia hover est binaire. Si le périphérique d'entrée principal peut pointer sur des éléments, la valeur hover est indiquée. Sinon, la valeur est none.

Dans cet exemple, certaines icônes supplémentaires sont disponibles lorsque l'utilisateur pointe dessus, mais uniquement si le périphérique d'entrée principal peut pointer sur un élément.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Si vous passez la souris sur ce bouton, l'icône s'affiche. Toutefois, si vous utilisez votre clavier pour accéder au bouton via la touche de tabulation, l'icône reste invisible. Lorsque vous utilisez le clavier, vous êtes concentré sur l'élément au lieu de le pointer. Un ordinateur de bureau équipé d'une souris indique que le mécanisme de saisie principal est compatible avec le survol, ce qui est vrai. Toutefois, si vous utilisez un clavier alors qu'une souris est connectée, vous ne pourrez pas bénéficier des styles :hover. Il est donc judicieux de combiner les styles :hover et :focus pour couvrir les deux interactions.

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

Même si le périphérique d'entrée principal peut survoler des éléments, faites attention à ne pas masquer des informations derrière une interaction de survol. Les informations deviennent moins visibles. N'utilisez pas le passage de la souris pour masquer des informations importantes ou un élément d'interface important.

Sur tous les points

La requête média hover ne signale que le mécanisme d'entrée principal. Certains appareils disposent de plusieurs mécanismes de saisie: écran tactile, souris, clavier et pavé tactile.

Tout comme any-pointer signale un mécanisme de saisie, any-hover a la valeur "true" si l'un des mécanismes de saisie disponibles peut pointer sur des éléments.

Si vous avez décidé d'inverser la logique de l'exemple précédent, vous pouvez définir les styles de pointage par défaut, puis les supprimer si la valeur de any-hover est none.

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

Sur un appareil ne disposant pas d'un mécanisme de saisie permettant de pointer dessus, l'icône en trop est toujours visible.

Claviers virtuels

Les utilisateurs se servent du curseur et des doigts pour explorer les interfaces, mais lorsqu'ils doivent saisir des informations, ils ont besoin d'un clavier. Ce n'est pas un problème si un clavier physique est connecté à leur appareil, mais s'ils utilisent un appareil à écran tactile, c'est un peu plus compliqué. Ces appareils fournissent des claviers virtuels à l'écran.

Types d'entrée

Contrairement à un clavier physique, les claviers virtuels peuvent être personnalisés pour correspondre à l'entrée attendue. Si vous fournissez des informations sur l'entrée attendue, les appareils peuvent afficher le clavier virtuel le plus approprié.

Les types d'entrée HTML5 sont un excellent moyen de décrire vos éléments input. L'attribut type accepte des valeurs telles que email, number, tel, url, etc.

  <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">

Modes de saisie

L'attribut inputmode vous permet de contrôler précisément les claviers virtuels. Par exemple, bien qu'il existe une type input avec une valeur de number, vous pouvez utiliser l'attribut inputmode pour différencier les nombres entiers des nombres décimaux.

Si vous demandez un nombre entier, comme l'âge d'une personne, utilisez inputmode="numeric".

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

Si vous demandez un nombre qui inclut des décimales (par exemple, un prix), utilisez inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Saisie semi-automatique

Personne n'aime remplir des formulaires. En tant que concepteur, vous pouvez améliorer l'expérience de vos utilisateurs en leur permettant de remplir automatiquement les champs de formulaire. L'attribut autocomplete vous offre de nombreuses options pour améliorer les formulaires de contact, de connexion et de paiement.

<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">

Ces attributs HTML (type, inputmode et autocomplete) sont de petits ajouts aux champs de votre formulaire, mais ils peuvent avoir un impact important sur l'expérience utilisateur. En anticipant les fonctionnalités des appareils des utilisateurs et en y répondant, vous leur donnez les moyens d'agir. Pour des informations plus détaillées, il existe un cours dédié à l'apprentissage des formulaires.

Dans la suite de ce cours, il est temps d'examiner quelques modèles d'interface courants.

Testez vos connaissances

Tester vos connaissances sur les interactions