Interaction

Les appareils à petit écran, comme les téléphones mobiles, sont souvent équipés d'écrans tactiles. Les appareils à grand écran, comme les ordinateurs portables et les ordinateurs de bureau, sont souvent livrés avec du matériel tel qu'une souris ou un pavé tactile. Il est tentant d'associer les petits écrans à l'écran tactile 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, vous pouvez utiliser un clavier ou une souris externe avec un appareil à écran tactile, comme une tablette.

Au lieu d'essayer d'inférer le mécanisme de saisie à partir de la taille de l'écran, utilisez les fonctionnalités multimédias du CSS.

Pointeur

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

Si un navigateur indique une valeur pointer de none, l'utilisateur utilise peut-être un clavier pour interagir avec votre site Web.

Si un navigateur indique 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 grossier.

Si un navigateur indique une valeur pointer de fine, cela signifie que le mécanisme de saisie principal est capable de contrôler de manière précise. Une souris ou un stylet est un pointeur précis.

Vous pouvez ajuster la taille de vos éléments d'interface en fonction de la valeur pointer. Essayez d'accéder à 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 grossiers:

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

Vous pouvez également réduire la taille des éléments pour obtenir des pointeurs plus précis, mais faites attention:

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

Même si un utilisateur dispose d'un mécanisme d'entrée principal permettant un contrôle précis, réfléchissez bien 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 grande est bénéfique pour tous les utilisateurs, quel que soit leur dispositif de pointage.

N'importe quel pointeur

La fonctionnalité multimédia pointer indique la finesse du mécanisme d'entrée principal. Cependant, de nombreux appareils disposent de plusieurs mécanismes d'entrée. Il est possible qu'une personne interagisse avec votre site Web à la fois à l'aide d'un écran tactile et d'une souris.

any-pointer diffère de la fonctionnalité multimédia pointer en ce sens qu'il indique si un dispositif de pointage réussit le test.

Une valeur any-pointer de 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 principal mécanisme d'entrée.

Une valeur any-pointer de fine signifie qu'au moins un dispositif de pointage est capable de contrôler de manière précise. Mais là encore, il ne s'agit peut-être pas du mécanisme d'entrée principal.

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

Dans cet exemple, si l'appareil dispose à la fois d'un mécanisme d'entrée précis et d'un mécanisme d'entrée grossier, les styles grossiers 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 d'entrée principal peut pointer sur des éléments. Cela signifie généralement qu'un curseur à l'écran est contrôlé par une souris ou un pavé tactile.

Contrairement à la fonctionnalité multimédia pointer, qui différencie les pointeurs précis et grossiers, la fonctionnalité multimédia hover est binaire. Si le périphérique d'entrée principal peut pointer sur des éléments, il renvoie une valeur de hover. Sinon, la valeur est none.

Dans cet exemple, une icône supplémentaire est disponible lorsque l'utilisateur pointe sur un élément, 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 pointez la souris sur ce bouton, l'icône s'affiche. Toutefois, si vous utilisez le clavier pour accéder au bouton, l'icône reste invisible. Lorsque vous utilisez le clavier, vous sélectionnez plutôt que de pointer. Un ordinateur de bureau avec une souris connectée indique que le mécanisme d'entrée principal est capable de pointer, ce qui est vrai. Toutefois, les utilisateurs qui utilisent un clavier lorsqu'une souris est connectée ne bénéficieront pas 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 permet de pointer sur des éléments, veillez à ne pas masquer d'informations derrière une interaction de pointage. Les informations deviennent moins visibles. N'utilisez pas le survol pour masquer des informations importantes ou un élément d'interface important.

Tout survol

La requête multimédia hover ne fournit des rapports que sur le mécanisme d'entrée principal. Certains appareils disposent de plusieurs mécanismes d'entrée: écran tactile, souris, clavier, pavé tactile.

Tout comme any-pointer signale l'un des mécanismes d'entrée, any-hover est vrai si l'un des mécanismes d'entrée disponibles permet de pointer sur des éléments.

Si vous décidez d'inverser la logique de l'exemple précédent, vous pouvez définir les styles de survol comme valeur par défaut, puis les supprimer si any-hover a la valeur none.

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

Sur un appareil qui ne dispose d'aucun mécanisme d'entrée permettant de pointer, l'icône supplémentaire est toujours visible.

Claviers virtuels

Les utilisateurs utilisent des curseurs et leurs doigts pour explorer les interfaces, mais lorsqu'ils doivent saisir des informations, ils ont besoin d'un clavier. Cela ne pose pas de problème s'il est connecté à un clavier physique, mais si l'utilisateur utilise un appareil à écran tactile, la situation est un peu plus complexe. Ces appareils disposent de claviers virtuels à l'écran.

Types d'entrée

Contrairement à un clavier physique, les claviers virtuels peuvent être adaptés à la saisie attendue. Si vous fournissez des informations sur la saisie attendue, les appareils peuvent afficher le clavier virtuel le plus approprié.

Les types de saisie 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

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 95.
  • Safari: 12.1.

Source

L'attribut inputmode vous permet de contrôler avec précision les claviers virtuels. Par exemple, alors qu'il existe un input type avec une valeur de number, vous pouvez utiliser l'attribut inputmode pour différencier les nombres entiers et les 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 avec des décimales, comme 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 petites additions à vos champs de formulaire, mais ils peuvent avoir un impact important sur l'expérience utilisateur. En anticipant les fonctionnalités de l'appareil de vos utilisateurs et en y répondant, vous leur donnez le pouvoir. Pour en savoir plus, consultez le cours dédié à l'apprentissage de Forms.

Dans la suite de ce cours, nous allons examiner quelques modèles d'interface courants.

Vérifier vos connaissances

Tester vos connaissances sur les interactions

Quelle fonctionnalité devez-vous utiliser plutôt que d'essayer d'inférer le type de saisie de l'utilisateur à partir de la taille de l'écran ?

Type de média CSS handheld
Fonctionnalités multimédias CSS
Demander à l'utilisateur avec prompt() de JavaScript

Quelle est la différence entre @media (pointer) et @media (any-pointer) ?

Tout pointeur indiquera "true" lorsque des entrées supplémentaires non principales, comme un stylet, réussiront le test.
Tout pointeur, comme votre doigt, peut être utilisé.
Les pointeurs n'incluent pas, par exemple, une souris.

Quels types de saisie affichent un clavier virtuel plus approprié pour les utilisateurs ?

type="tel"
type="number"
type="email"
type="url"