Aide mémoire sur les tailles cibles accessibles

Les tapotements de rage sont ennuyeux et frustrants. Ces merveilleuses occurrences dans notre interface lorsque nous devons appuyer deux fois ou parfois trois fois pour continuer nos voyages. Bien sûr, parfois ils se produisent parce que le site Web est trop lent, mais parfois c’est la taille cible des éléments interactifs qui est en cause.

Alors, quelle devrait être la taille de nos éléments interactifs de nos jours ? Quelle serait une taille fiable pour les icônes, les liens et les boutons ? — en navigation et sur mobile ? Comment rendons-nous plus difficile pour nos utilisateurs de faire des erreurs ? Nous allons jeter un coup d’oeil.

Note: Vous pouvez trouver un chapitre vidéo complet sur la conception pour le tactile dans Modèles de conception d’interface intelligente ainsi que 30 autres chapitres sur l’UX et les modèles de conception.

Aide-mémoire sur les tailles cibles

L’une des recommandations courantes concernant les tailles cibles sur mobile est 44×44px. C’est un peu trompeur car les pixels de l’écran, ou du moins pixels indépendants de l’appareil (creux) sont mis à l’échelle à un multiple de la résolution d’affichage. Ainsi, les pixels sont différents sur différents écrans, et lorsque nous avons une conversation sur les tailles, nous devrions probablement parler de trempettesplutôt que pixels.

Selon l’endroit où un élément apparaît à l’écran, il a besoin de plus ou moins de rembourrage. En général, nous sommes très précis dans notre saisie au centre de l’écran, mais nous sommes moins précis sur les bords de l’écran (tant en haut qu’en bas).

Accordéon aux recherches de Steven Hoober dans son livre sur Conception tactile pour les interfaces mobiles, pour minimiser les tapotements de rage, nous devons viser 11 mm (ou 31 pt / 42 px) en haut de l’écran et 12 mm (ou 34 pt / 46 px) en bas de l’écran. Au centre cependant, nous pourrions potentiellement descendre jusqu’à 7 mm (ou 20 pt / 27 px). Cela inclut à la fois la largeur et le rembourrage d’un élément interactif.

Comment les unités ponctuelles se traduisent-elles en pixels CSS ou en unités Android/iOS ?? Heureusement, Steven Hoober fournit un tableau de conversion utile pour vous aider à traduire des points en unités px et em, SP ou DP Android, points iOS et Windows DIP ou px.

Tous les pixels ne sont pas identiques

Comme nous l’avons vu ci-dessus, les tailles cibles changent en fonction de l’endroit où les composants apparaissent à l’écran. Il est à noter que selon le Exigences du niveau AAA des WCAG 2.1toutes les cibles doivent mesurer au moins 44 par 44px, sauf si la cible se trouve dans une phrase ou un bloc de texte. Pour de telles exceptions, nous pourrions utiliser 27px comme objectif, mais en général, plus c’est grand, mieux c’est.

Pour les menus collants en haut ou en bas de l’écran, nous devrions probablement viser environ 44 à 46 pixels, voire plus. Cependant, pour les liens qui apparaissent à l’écran lorsque l’utilisateur fait défiler la page, nous pourrons probablement éviter la plupart des problèmes avec des composants plus petits.

C’est aussi pourquoi nous pourrons probablement placez au plus cinq éléments dans les onglets inférieurs sur un téléphone mobile. Au lieu de cela, nous pourrions avoir besoin d’utiliser une feuille inférieure qui glisserait de haut en bas comme une superposition sur le dessus de l’écran.

Préférez le bouton « Actions » aux icônes uniques pour les tableaux de données

Les tableaux complexes ont généralement actions de survol qui apparaissent une fois qu’un utilisateur commence à survoler une ligne particulière. Ils incluent généralement tout, de la surbrillance et de l’exportation au déplacement et à la suppression.

En test, affichage des icônes au survol produit trop d’erreurs: non seulement les utilisateurs sautent souvent accidentellement sur une mauvaise ligne lorsqu’ils naviguent horizontalement vers les icônes. Ils commettent également des erreurs en cliquant accidentellement au mauvais endroit et en recommençant à zéro.

Pour éviter les clics de rage, il peut être judicieux de tester la qualité d’un Boutons « Actions » ou un bouton « Split » effectuerait à la place. En effet, ce bouton pourrait vivre sur chaque ligne, s’ouvrirait au toucher/clic et ne se fermerait pas automatiquement. Ce n’est peut-être pas idéal pour tous les cas d’utilisation, mais cela donne définitivement aux utilisateurs plus de contrôle car ils doivent agir à la suite.

Fournir un assistant pour les manipulations complexes

Avec des manipulations complexes, telles que la rotation d’une image ou la sélection d’une petite partie d’une zone plus grande, nous comptons souvent sur les boutons de pincement et de zoom ou de zoom avant/arrière. Ces options, bien sûr, fonctionnent, mais elles deviennent facilement un peu fastidieuses à utiliser pour des manipulations très précises, surtout si elles sont utilisées pendant un certain temps.

Au lieu de cela, nous pouvons attacher une petite poignée pour permettre aux utilisateurs de déplacer leur sélection dans l’objet plus rapidement et avec plus de précision. C’est ainsi Juste permet aux utilisateurs de personnaliser leurs étagères sur mobile. Le zoom est également pris en charge, mais il n’est pas nécessaire de sélectionner l’une des zones.

Quand plusieurs robinets valent mieux qu’un

Mais que faire si certaines zones de robinet doivent être petites ? Peut-être que nous impossible de réserver 27×27px pour chaque icône — par exemple, lorsque nous proposons une sélection de couleurs dans un site de commerce électronique ? Eh bien, dans ce cas, une option à considérer serait d’inviter une sélection « correcte » de couleurs avec un robinet supplémentaire. Cela pourrait être un peu plus lent en interaction, mais beaucoup plus précis.

Toujours maximiser la zone cliquable

Dès que possible, encapsuler l’élément entier, ainsi qu’un rembourrage suffisant pour vous assurer d’atteindre la taille magique de 42 à 46 pixels afin d’éviter définitivement les coups de rage. Cela signifie généralement ajouter suffisamment de rembourrage pour les icônes, mais préférant également les barres pleine largeur ou pleine hauteur pour les accordéons et la navigation.

Ahmad Shadeed présente quelques exemples utiles d’utilisation de l’espacement pour augmenter les zones cliquables et empêcher les clics de rage. Any Lupe fournit encore plus de suggestions dans son article sur tailles cibles accessibles.

Emballer

Lors de la conception pour le tactile aujourd’hui, nous devons utiliser au moins 27×27px pour les petits liens ou des icônes dans la zone de contenu et au moins 44×44px pour les icônes en haut et en bas de la page.

Personnellement, j’irais toujours jusqu’à 30×30px et 48×48px pour s’assurer que les erreurs sont vraiment difficiles à faire. Et, bien sûr, utilisez toujours toute la largeur ou toute la hauteur pour les zones cliquables. Espérons que cela nous aidera à supprimer complètement tous les taps de rage possibles de nos sites Web – et beaucoup de vos utilisateurs l’apprécieront sincèrement.

Vous pouvez trouver plus de détails sur expérience utilisateur de navigation dans le vidéothèque sur les Smart Interface Design Patterns 🍣 — avec une formation UX en direct prévue en septembre de cette année.

Ressources utiles

Il existe quelques ressources merveilleuses sur les tailles cibles accessibles qui pourraient être utiles si vous souhaitez approfondir le sujet :

(il)