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:
@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
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 ?
handheld
prompt()
de JavaScriptQuelle est la différence entre @media (pointer)
et @media (any-pointer)
?
Quels types de saisie affichent un clavier virtuel plus approprié pour les utilisateurs ?
type="tel"
type="number"
type="email"
type="url"