Harmony, une plateforme de ressources sur l'accessibilité numérique
Projet académique mené avec Jason R. et Manal A.
Contexte
Dans le cadre de notre formation en UX Design, nous avons mené un projet intensif d'une semaine visant à concevoir une plateforme de ressources dédiées à l’accessibilité numérique.
Ce projet est né du constat qu’il existe peu de ressources pratiques pour aider les UX/UI designers à comprendre et intégrer les critères d’accessibilité du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) dans leurs créations.
Ce projet est né du constat qu’il existe peu de ressources pratiques pour aider les UX/UI designers à comprendre et intégrer les critères d’accessibilité du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) dans leurs créations.
Nous avons donc relevé le défi de produire quatre modèles de pages web (versions desktop et mobile) tout en respectant ces normes d’accessibilité.
Objectif
Nous avons identifié que le manque de ressources pédagogiques complique l'intégration des critères d'accessibilité pour les UX/UI designers. Après avoir analysé les sites existants à destination des designers, nous avons décidé de créer Harmony, une plateforme de ressources éducatives dédiée à l’accessibilité numérique.
Harmony propose des informations fiables, claires et régulièrement mises à jour. Des cours sont également disponibles, structurés de manière ludique, avec des quiz pour valider les connaissances et un système de progression qui encourage l'utilisateur à continuer son apprentissage. Nous avons intégré des podcasts pour diversifier les formats d'apprentissage et rendre les contenus plus vivants. Tout a été conçu pour que l’accessibilité numérique devienne un sujet facile à aborder et ainsi accompagner au mieux les designers à concevoir des solutions plus accessibles.
Processus
Notre choix de design “mobile first” nous a permis de hiérarchiser l’information et d'assurer une expérience utilisateur fluide. Nous avons respecté les critères d’accessibilité en soignant le contraste, en adaptant la taille des caractères et en optimisant les contenus visuels pour une meilleure lisibilité. Le système de navigation a été conçu pour être totalement accessible : le header intègre un menu et une barre de recherche, tandis que le footer propose un plan du site. Toute la navigation a été optimisée pour le clavier, afin de garantir l'accès aux utilisateurs avec des limitations physiques.
Nous avons commencé par un benchmarking pour identifier les points forts et les lacunes des ressources existantes. Nos recherches nous ont permis de définir deux proto personae clés :Proto-Persona 1 : un designer freelance et intervenant qui souhaite accéder rapidement à de l’information pertinente pour former ses étudiants et améliorer les services proposés à ses clients.
Proto-Persona 2 : une étudiante malvoyante en design, en alternance, qui souhaite approfondir ses connaissances pour sensibiliser son entreprise aux enjeux de l'accessibilité numérique.
Après avoir défini les parcours utilisateur de chacun, nous avons conçu dans un premier temps sous forme de wireframes quatre modèles de pages :
- une page d'accueil engageante avec un menu intuitif;
- une page de contact avec un formulaire;
- une page de liste avec filtres;
- une page d'exemple de contenus pédagogiques.
Pour le design d'interface, nous avons développé une charte graphique en accord avec les principes d’accessibilité. Cette charte comprend :
Couleurs : nous avons choisi #008080 comme couleur primaire, un vert-bleu qui évoque la sérénité et la confiance et #FFFFF5 comme couleur secondaire, un blanc cassé offrant une bonne lisibilité et contrastant harmonieusement avec la couleur principale. Pour créer une palette de couleurs accessibles, nous avons utilisé l'outil Accessible color matrix de Github.
Couleurs primaire et couleurs secondaire de Harmony
Tableau des contrastes pour évaluer la lisibilité du texte sur un fond de couleur particulier
Typographie : la typographie Arvo a été choisie pour sa lisibilité et de sa clarté. En tant que police serif, elle aide à guider l'œil et facilite la lecture, surtout pour les personnes ayant des difficultés visuelles. Elle est également bien adaptée aux écrans, offrant un bon contraste et restant lisible même sur des appareils mobiles. En plus, elle permet une hiérarchisation claire du contenu grâce à ses différentes variantes de poids. En tant que typo système, Arvo est optimisée pour les interfaces web, garantissant une bonne expérience utilisateur sur différents supports.
Logo : le logo de Harmony a été conçu en noir et blanc pour assurer une flexibilité maximale en fonction des couleurs de fond. Le logomarque et le mot-symbole ont été positionnés avec soin et leurs proportions ajustées pour garantir une utilisation optimale dans différents contextes. Le logo peut être utilisé avec un fond clair ou foncé, en fonction de l’arrière-plan, assurant ainsi une bonne visibilité.
Résultats et impacts
Exemple d'une page desktop avec annotations d'accessibilité
Exemple d'une page mobile avec annotations d'accessibilité
Bien que les impacts de Harmony n’aient pas pu être mesurés en conditions réelles, ce projet nous a permis de mieux comprendre comment créer des expériences engageantes et accessibles pour un public varié. Nous avons appris l'importance de rendre l’information accessible et plaisante à consommer, ainsi que de documenter nos choix pour faciliter leur mise en œuvre.
Ce projet a aussi renforcé notre conviction que l'accessibilité numérique est aujourd’hui essentielle et doit être prise en compte dans chaque processus de design dès le départ pour répondre aux besoins de tous les utilisateurs.
Ce que je retiens de ce projet
Ce projet m'a permis de développer de nombreuses compétences, tout en mettant en évidence plusieurs défis importants. La gestion du temps a été l'un des principaux obstacles, étant donné la contrainte d'une semaine pour mener à bien la conception des pages requises. Cela m'a appris à prioriser l'essentiel, notamment avec l'approche "mobile first" et à faire des choix stratégiques pour éviter des fonctionnalités superflues.
L'intégration des critères d'accessibilité numérique, bien que complexe, m'a permis d'approfondir mes connaissances sur le RGAA et de m'assurer que toutes les pages respectaient les normes essentielles en matière de contraste et de taille de caractères. Travailler en équipe m'a rappelé l'importance de la communication et de la coordination entre les différents membres pour aligner nos objectifs et garantir la cohérence du projet. C'est d'ailleurs aussi un aspect essentiel à appliquer tout au long du processus de conception.
Enfin, bien que nous ayons travaillé sur des proto-personae, le manque de validation par de vrais utilisateurs a mis en évidence la nécessité de mener des recherches approfondies pour affiner les solutions proposées.
Ce projet a été une expérience très enrichissante, renforçant notablement mes compétences en accessibilité numérique. Il a également mis en lumière le rôle crucial des annotations des maquettes, qui permettent aux développeurs de mieux comprendre les choix de conception et d’assurer une mise en œuvre fidèle aux intentions de design.