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 de bureau, sont souvent fournis avec du matériel tel qu'une souris ou un pavé tactile. Il est tentant d'associer les petits écrans au toucher et les grands écrans aux pointeurs.

Mais la réalité est plus nuancée. Certains ordinateurs portables sont équipés d'écrans tactiles. 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 externes avec un appareil à écran tactile comme une tablette.

Au lieu d'essayer de déduire le mécanisme de saisie de la taille de l'écran, utilisez des caractéristiques média dans les CSS.

Pointeur

Vous pouvez tester trois valeurs possibles avec la caractéristique média pointer : none, coarse et fine.

Si un navigateur signale une valeur pointer de none, l'utilisateur peut interagir avec votre site Web à l'aide d'un clavier.

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

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

Vous pouvez ajuster la taille des éléments de votre interface en fonction de la valeur pointer. Essayez de consulter ce site Web de démonstration 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;
  }
}

Il est également possible de réduire la taille des éléments pour les pointeurs précis, mais soyez prudent :

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

Même si une personne dispose d'un mécanisme de saisie principal capable d'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 précis. Une zone cible plus grande profite à tous, quel que soit le dispositif de pointage.

N'importe quel pointeur

La caractéristique média pointer indique la précision du mécanisme de saisie principal. Mais de nombreux appareils disposent de plusieurs mécanismes de saisie. Il est possible qu'une personne interagisse avec votre site Web à l'aide d'un écran tactile et d'une souris en même temps.

La caractéristique média any-pointer diffère de pointer en ce qu’elle 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 il ne s'agit peut-être pas du mécanisme de saisie principal.

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

Étant donné que la requête média any-pointer renvoie un résultat positif si l'un des mécanismes de saisie réussit le test, il est possible qu'un navigateur signale un résultat pour any-pointer: fine et également un résultat pour any-pointer: coarse. Dans ce cas, l'ordre de vos requêtes média est important. La dernière sera prioritaire.

Dans cet exemple, si l'appareil dispose d'un mécanisme de saisie précis et d'un mécanisme de saisie 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 caractéristique média hover indique si le mécanisme de saisie principal peut survoler des éléments. Cela signifie généralement qu'un curseur s'affiche à l'écran et qu'il est contrôlé par une souris ou un pavé tactile.

Contrairement à la caractéristique média pointer, qui fait la distinction entre les pointeurs précis et grossiers, la caractéristique média hover est binaire. Si le dispositif de saisie principal est capable de survoler des éléments, il signale une valeur hover. Sinon, la valeur est none.

Dans cet exemple, une icône supplémentaire est disponible au survol, mais uniquement si le dispositif de saisie principal est capable de survoler un élément.

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

Si vous utilisez votre souris pour survoler ce bouton, l'icône s'affiche. Mais si vous utilisez votre clavier pour passer au bouton, l'icône reste invisible. Lorsque vous utilisez le clavier, vous vous concentrez plutôt que de survoler. Un appareil de bureau avec une souris connectée indique que le mécanisme de saisie principal est capable de survoler, ce qui est vrai. Mais toute personne utilisant un clavier lorsqu'une souris est connectée ne bénéficiera 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 dispositif de saisie principal est capable de survoler des éléments, veillez à ne pas masquer d'informations derrière une interaction de survol. Les informations deviennent moins visibles. N'utilisez pas le survol pour masquer des informations importantes ou un élément d'interface important.

N'importe quel survol

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

Tout comme any-pointer signale n'importe quel mécanisme de saisie, any-hover sera vrai si l'un des mécanismes de saisie disponibles est capable de survoler 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 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 de saisie capable de survoler, l'icône supplémentaire est toujours visible.

Claviers virtuels

Les utilisateurs utilisent des curseurs et des doigts pour explorer les interfaces, mais lorsqu'il est temps de saisir des informations, ils ont besoin d'un clavier. C'est parfait si un clavier physique est connecté à leur appareil, mais si l'appareil est équipé d'un é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 adaptés à l'entrée attendue. Si vous fournissez des informations sur l'entrée attendue, les appareils peuvent proposer 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 d'entrée

L'attribut inputmode vous offre un contrôle précis sur les claviers virtuels. Par exemple, alors qu'il existe un seul input type avec la valeur number, vous pouvez utiliser l'attribut inputmode pour faire la distinction entre 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 qui inclut 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'autocomplete attribut 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 à vos champs de formulaire, mais ils peuvent faire une grande différence pour l'expérience utilisateur. En anticipant les fonctionnalités de l'appareil de votre utilisateur et en y répondant, vous lui donnez plus de pouvoir. Pour en savoir plus, consultez le cours dédié à l'apprentissage des formulaires.

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

Vérifiez vos connaissances

Testez vos connaissances sur les interactions