6. Wireframes ou prototyper en basse-fidélité

Une fois tout le contenu rédigé et bien hiérarchisé, on peut passer à une première mise en forme visuelle. Les prototypes basse-fidélité sont utiles pour développer le service (comportement responsive, etc.), définir des comportements en cas d'interaction ou encore, anticiper la mise en forme pour les personnes malvoyantes.

a. Conception mobile-first

En accessibilité, il est important de prototyper en mobile-first car cela permet de :

• hiérarchiser les informations en une seule colonne, telles que le lecteur d'écran va les lire
• s'assurer que la longueur des textes reste digeste et la structure, compréhensible
• garantir que le site est responsive pour toutes les personnes utilisant des technologies d'assistance comme le Zoom à 200% par exemple. voir les Différents modes de navigation

Exemple

Prototypage d'interface en 3 étapes

Pour la page de contenu "Trouver de l'audiodescription" du Portail de l'audiodescription :

1. la designer a d'abord hiérarchisé le contenu de la page sur Notion et validé cette proposition avec le reste de l'équipe Produit,
2. puis elle a proposé une première version mobile avec listes à puces, déjà en moyenne fidélité à l'aide du système de design existant,
3. avant de concevoir des versions mobile et desktop en haute-fidélité avec liens et images définitives venant habiller le contenu.

b. Focus sur le Composant Carte

Les composants cartes sont des éléments très répandus dans les interfaces, car ils permettent de hiérarchiser l'information. Cependant, leur utilisation nécessite des points d'attention pour les personnes déficientes visuelles.

Lecture intelligible de la carte

La mise en forme peut modifier la façon dont les lecteurs d'écran énoncent le texte, influençant ainsi sa compréhension.

Exemple

Lecture perturbante d'une carte

Pour présenter un film, nous souhaitons avoir l'information suivante : "Les gardiens de la galaxie de James Gunn." Mais la mise en forme en titre et sous-titre a induit un retour à la ligne donc des pauses ce qui a causé la compréhension suivante chez une utilisatrice : “Les gardiens de la galaxie, 2, James Gunn". Une reformulation en "réalisé par" résoudrait ce problème.

Vérifier que le texte reste explicite même après la mise en composants.

Carte cliquable ou non ?

Pour les usagers non-voyants et si la carte est riche, il vaut mieux privilégier un bouton dans une carte qu'une carte entièrement cliquable pour éviter les comportements suivants :

• Si l'élément "lien" est le titre, je dois remonter jusqu'à lui après avoir lu le contenu de la carte pour pouvoir cliquer ce qui est fastidieux.
• Si toute la carte est le contenu du lien, alors la navigation de lien en lien devient très pénible voire confuse.

Nombre de cartes

Quelle longueur de liste de liens est acceptable ? Par exemple, si vous affichez un groupe de cartes, à partir de combien est-ce trop ?

Comme pour tout usager, il s'agit d'une question de charge cognitive acceptable dépendante du contexte :

• si l'utilisateur recherche un produit sur un site d'e-commerce ou un genre cinématographique de film, une liste de 12 à 20 éléments peut être tout à fait utilisable
• si l'utilisateur navigue dans une liste d'éléments nouveaux pour lui, comme des offres de service, 12 sera probablement largement trop.

Il faut donc tester et se poser la question : deux éléments de la même liste risquent-ils de prêter à confusion ?

c. Page de résultats de recherche

Affichage au clic ou par défaut

Les utilisateurs, en fonction de leur degré d'aisance avec le numérique et de leur mode de navigation, peuvent exprimer des préférences variées voire contradictoires en matière d'affichage et d'interaction. Nous recommandons d'arbitrer en faveur des personnes les moins à l'aise avec le numérique afin de rester inclusif avant tout, le handicap étant déjà un facteur d'exclusion en soi.

Exemple

Conception des filtres

Sur une page de résultats de recherche, les filtres peuvent être fastidieux à passer à l'oreille lorsque l'on veut arriver rapidement aux résultats. Le Portail de l'audiodescription a conçu ses filtres de manière itérative.

1. Nous avons d'abbord pensé à les mettre dans un accordéon, mais fallait-il l'ouvrir ou le fermer par défaut ? Les utilisateurs peu à l'aise avec le numérique pourraient rencontrer des difficultés à les ouvrir et ont tendance à naviguer de façon très linéaire dans la page.
2. Nous les avons donc gardés ouverts par défaut afin de maximiser la découvrabilité, mais fermables pour que les personnes à l'aise puissent facilement les sauter. Mais les utilisateurs peu à l'aise étaient perdus par tous ces choix avant les résultats.
   "Il faut que je mette un genre. Des fois on ne sait pas quoi mettre donc je me suis retrouvée avec la liste complète des films. Je n’ai pas bien compris."
3. Nous avons donc mis en place des ancres : lorsque je lance une recherche, j'arrive directement sur les résultats. Les utilisateurs plus avancés, habitués à balayer la page, trouveront les filtres.
4. Les filtres s'appliquent désormais automatiquement et ne sont plus dans un accordéon.
5. La liste pré-filtrée des films gratuits, très recherchée, est quant à elle en accès direct depuis l'accueil et le menu. Ainsi les personnes les moins à l'aise peuvent y accéder sans manipuler de case à cocher.

Il est important que les utilisateurs, notamment les moins à l'aise, trouvent très rapidement les informations qu'ils recherchent : nombre de résultats, premiers résultats de recherche… Or ils ont tendance à naviguer de façon linéaire (à tout écouter) plutôt que de titre en titre ou de lien en lien.

Il est donc important de :

• annoncer en haut de page les éléments importants : nombre de résultats, aller directement aux résultats…
• déplacer en bas de page les éléments secondaires : effectuer une nouvelle recherche…

Pour vous aider, penser aux ancres, aux liens d'évitement et aux sauts en un clic qui peuvent être mis en place côté développement.

Nombre de résultats

En écoconception, on recommande de minimiser le nombre de résultats par page : rien ne sert d'en afficher 50 si personne ne regarde en deça de 10. Pour les personnes naviguant au clavier, changer de page peut-être pénible et donc 10 résultats peut être trop peu ! Alors combien en met-on ?

Cela dépend de votre contexte bien sûr.

Et pourquoi pas de scroll infini ?

Le scroll infini ou chargement progressif automatique est une mauvaise pratique à multiples égards :

• C'est un mécanisme de captation de l'attention qui fait qu'on passe plus de temps que souhaité initialement sur le service (voir Concevoir sans dark patterns - Eviter le scroll infini).
• C'est un mécanisme énergivore puisqu'on va lancer des requêtes alors même que l'utilisateur n'en a peut-être pas l'usage (voir Guide d'écoconception - Interactions).
• C'est une mauvaise pratique de qualité web : il devient très pénible d'atteindre le pied-de-page et c'est un comportement pénalisant pour le référencement.
• On ne peut pas partager une page de résultat en particulier car il n'y en a qu'une avec une url unique.
• Cela créée un comportement imprévisible car je ne sais pas à l'avance combien je vais trouver de résultats sur ma page.
• Des utilisateurs naviguant au clavier de lien en lien peuvent se retrouver coincés dans le flux (source en anglais : Issue 565 - W3C aria practices).

Pour les personnes les plus à l'aise avec le numérique, vous pouvez laisser le choix du nombre de résultats par page.

d. Champs de formulaire

Apparence des champs

Pour les personnes malvoyantes, les champs doivent pouvoir être rapidement identifiés comme tels. Pour cela, deux éléments clés : la couleur d'arrière-plan et le contour.

Pour ce qui est du contour, les référentiels sont plus lacunaires mais les tests utilisateurs ont montré qu'une ligne en bas du champ ne suffit pas car :

• Les personnes malvoyantes ne le voient pas comme un champ à remplir.
  "Heureusement que mon épouse était là pour me montrer l’endroit, tout en haut de la page, où il fallait renseigner son adresse e-mail… Ce n’est pas du tout du tout intuitif !"
• Les personnes éloignées du numérique peuvent confondre cela avec un séparateur.

Concernant le contour, il est recommandé :

• si sa couleur a un faible contraste, de l'épaissir à 2 px (par exemple un ratio de contraste inférieur à 2)
• s'il fait 1 px d'accroître son contraste avec le fond (par exemple supérieur à 4.5).

Côte-à-côte ou en colonne ?

Il vaut mieux éviter de mettre les champs côte-à-côte pour les personnes malvoyantes utilisant un lecteur d'écran. En effet, sinon elles risquent de passer à côté.

Ainsi, il est recommandé d' afficher les champs en colonne alignée à gauche. Dans le cas de filtres, ils peuvent être affichés dans une colonne à gauche des résultats.

Exemple

Filtres verticaux

Suite aux retours utilisateurs de personnes malvoyantes, il est prévu que les filtres passent d'une disposition horizontale à verticale sur le portail de l'audiodescription.

Auto-complétion et suggestions

Faut-il mettre en place de l'auto-complétion et/ou des suggestions sur ses champs de formulaire ? Voici une liste de questions à se poser :

1. Une absence d'auto-complétion peut-elle générer des erreurs ? Par exemple, elle est utile sur une adresse, un code postal…
2. Est-ce que l'auto-complétion peut éviter la double-saisie ? Par exemple, si on connaît déjà les informations de contact de l'utilisateur, comme dans les services de l'Etat, c'est utile.
3. Est-ce que l'auto-complétion vise à faciliter le parcours utilisateur et non à lui pousser du contenu non souhaité ? Est-ce qu'elle lui propose bien ce qu'il cherche ? Par exemple, Allociné aide à retrouver le titre exact d'un épisode de Star Wars ce qui peut être utile, alors que Orange propose des "recherches populaires" comme des modèles de téléphone dernier cri avant même qu'on ait tapé quoique ce soit ce qui est superflu.

Exemple

Suggestions utiles

Sur le logiciel de création d'arrêtés de circulation DiaLog, les suggestions permettent aux agents publics d'entrer le bon numéro de la départementale.

Si vous décidez effectivement de mettre en place de l'auto-complétion ou des suggestions, faites-le de manière bien accessible à la navigation clavier et au lecteur d'écran.