Les appareils à petit écran comme les téléphones mobiles sont souvent équipés d’écrans tactiles. Les appareils à grand écran tels que les ordinateurs portables et 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 aux écrans tactiles et les grands écrans aux pointeurs.
Mais la réalité est plus nuancée. Certains ordinateurs portables sont dotés de fonctionnalités d'é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 tel qu'une tablette.
Au lieu d'essayer de déduire le mécanisme d'entrée à partir de la taille de l'écran, utilisez des caractéristiques 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 d'entrée principal peut être contrôlé de manière ultraprécise. Une souris ou un stylet est un pointeur fin.
Vous pouvez ajuster la taille des éléments de votre interface pour qu'ils correspondent à la valeur pointer. Essayez de consulter ce site Web avec différents types d'appareils pour voir comment l'interface s'adapte.
Dans cet exemple, les boutons ont été 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 faites attention à ceci:
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
Même si un utilisateur dispose d'un mécanisme d'entrée principal capable d'offrir 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 étendue profite à tout le monde, quel que soit le dispositif de pointage.
Tout pointeur
La fonctionnalité multimédia pointer indique la précision du mécanisme d'entrée principal. Mais de nombreux périphériques
ont plus d’un mécanisme 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 signale si un dispositif de pointage réussit le test.
La valeur none pour any-pointer signifie qu'aucun dispositif de pointage n'est disponible.
Si la valeur any-pointer est définie sur coarse, cela 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.
Si la valeur any-pointer est définie sur fine, cela signifie qu'au moins un dispositif de pointage est capable d'offrir un contrôle ultraprécis. Mais là encore, ce n'est peut-être pas le principal mécanisme d'entrée.
Étant donné que la requête média any-pointer indiquera un résultat positif si l'un des mécanismes d'entrée réussit le test, un navigateur peut indiquer 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 sera prioritaire.
Dans cet exemple, si l'appareil dispose à la fois d'un mécanisme de saisie précis et général, 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 les éléments. Cela signifie généralement qu'un curseur sur l'écran est contrôlé par une souris ou un pavé tactile.
Contrairement à la fonctionnalité multimédia pointer, qui fait la différence entre 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 affichera la valeur 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 est capable de le survoler.
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 à l'aide de la touche de tabulation, l'icône reste invisible. Lorsque vous utilisez le clavier, vous effectuez la mise au point plutôt que de pointer dessus. Un ordinateur de bureau avec une souris connectée signalera que le mécanisme d'entrée principal est capable de pointer sur un élément, ce qui est vrai. Toutefois, les personnes qui utilisent un clavier avec une souris connectée ne bénéficieront pas des avantages 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 pointer sur 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 survol pour masquer des informations importantes ou un élément d'interface important.
Tout pointage
La requête média hover ne génère des rapports que sur 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 un mécanisme d'entrée, any-hover est vrai si l'un des mécanismes d'entrée disponibles est capable de 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 any-hover présente 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 n'est pas doté d'un mécanisme d'entrée capable de pointer sur un élément, l'icône supplémentaire est toujours visible.
Claviers virtuels
Les gens utilisent des curseurs et des doigts pour explorer les interfaces, mais pour 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 la procédure est un peu plus compliquée avec un appareil à écran tactile. Ces appareils fournissent des claviers virtuels à l'écran.
Types d'entrée
Contrairement à un clavier physique, les claviers virtuels peuvent être adaptés pour correspondre à l'entrée attendue. Si vous fournissez des informations sur l'entrée attendue, les périphériques peuvent diffuser 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 un type input avec la valeur number, vous pouvez utiliser l'attribut inputmode pour différencier les nombres entiers des nombres décimaux.
Si vous demandez un nombre entier, par exemple 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 (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, les formulaires de connexion et les formulaires 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 améliorer considérablement l'expérience utilisateur. En anticipant les capacités des appareils de vos utilisateurs et en y répondant, vous leur donnez les moyens d'agir. Pour en savoir plus, consultez l'article consacré aux 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
Quelle fonctionnalité devriez-vous utiliser plutôt que d'essayer de déduire le type d'entrée d'un utilisateur à partir de la taille de l'écran ?
@media (pointer: coarse) ou @media (-any-pointer: coarse)prompt() de JavaScripthandheldQuelle est la différence entre @media (pointer) et @media (any-pointer) ?
any-pointer interroge tous les types d'entrées de l'appareil pour trouver une correspondance.Quels types de saisie proposent un clavier virtuel plus adapté aux utilisateurs ?
type="url"type="tel"type="number"type="email"