Principes de Conception Inclusive

trois montgolfières dans un ciel calme et ensoleillé

Contributeurs : Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson

Avec The Paciello Group

Ces Principes de Conception Inclusive mettent la personne au premier plan. L’idée est de s’assurer que la conception prend en compte les besoins de personnes avec incapacités permanentes, temporaires, contextuelles, ou changeantes — c’est à dire nous tous.

Ils veulent offrir une approche de conception inclusive à toutes celles et tous ceux qui sont impliqués dans la conception et le développement de contenus et d’applications pour le Web, qu’ils soient designers, professionnels de l’expérience utilisateur, gérants de produits, créateurs d’idées, innovateurs, artistes, penseurs.

Pour en savoir plus sur la motivation, consultez l’article Inclusive Design Principles (en anglais) sur le blog du PacielloGroup.

Les Principes

Offrez une expérience identique

Assurez-vous que votre interface permette une expérience identique à tous, afin qu’ils puissent accomplir les tâches de la façon qui leur convient, sans pour autant diminuer la qualité des contenus.

Description complète

Que ce soit à cause des circonstances, d’un choix, ou du contexte, les gens sont différents. Quels que soient les méthodes et outils qu’ils utilisent pour lire et interagir avec les interfaces, ce que l’interface propose doit être identique en terme de valeur, de qualité et d’efficacité.

Exemples

  • Contenus alternatifs : Une alternative de base, que ce soit sous forme de texte alternatif, d’une transcription, d’une description audio, ou de langue des signes, rend les contenus accessibles. Mais pour être équivalent, elle doit capturer aussi l’essence de l’original.
  • Ergonomie : Les sous-titres synchronisés rendent votre vidéo accessible. Mais les rendre configurables, colorés, et repositionnables donne une expérience plus comparable aux autres.
  • Notifications : Les notifications qui apparaissent dans l’interface sont visuellement évidentes, mais pour les utilisateurs de lecteurs d’écran il faut une action spécifique pour les découvrir. Une expérience similaire peut être obtenue grâce à une région aria-live. Ainsi la notification est présentée à l’utilisateur sans autre action de sa part.

Lien vers la section Offrez une expérience identique

Considérez la situation de l’utilisateur

Votre interface peut être utilisée dans diverses situations. Assurez-vous qu’elle donne une expérience enrichissante quelles que soient les circonstances actuelles de l’utilisateur.

Description complète

Les utilisateurs peuvent être néophytes, experts, au travail, chez eux, en voyage, sous pression. Chacune de ces situations peut les affecter, et pour ceux qui ont déjà des difficultés avec les interactions, par exemple en raison d’une incapacité, peut rendre l’utilisation particulièrement difficile.

Exemples

  • Contraste des couleurs : À l’extérieur, un bon contraste diminue l’effet du soleil qui rend l’écran plus difficile à lire.
  • Aide contextuelle : Les utilisateurs peuvent vouloir de l’aide la première fois qu’ils rencontrent un formulaire ou une interaction complexe. Cette aide peut devenir superflue, voire devenir une distraction, dès l’instant où l’utilisateur s’habitue à l’interaction ou au formulaire. L’aide contextuelle donne à l’utilisateur le choix d’accéder à l’information quand il le désire, et lui permet un meilleur contrôle sur la page.
  • Sous-titres hors du bureau : Vos contenus vidéo seront utilisés sur des appareils mobiles, peut-être dans des lieux publics où l’on préfère ne pas déranger les autres. Pour les écrans réduits, désactivez le son et activez les sous-titres par défaut.

Lien vers la section Considérez la situation de l’utilisateur

Soyez cohérent

Utilisez les conventions connues, de manière cohérente.

Description complète

Les interfaces reconnues répètent des modèles de conception bien établis. Utilisez-les pour renforcer le sens et l’objectif des éléments de l’interface, y compris leurs fonctionnalités, leur comportement, leur contenu et leur présentation. Vous devez pouvoir dire les mêmes choses de la même façon, et les utilisateurs doivent pouvoir faire les mêmes choses de la même façon.

Exemples

  • Modèles de conception cohérents : Utilisez les même modèles d’interaction et de présentation, afin d’aider l’utilisateur à se familiariser et à comprendre.
  • Contenu cohérent : Assurez-vous que le style d’écriture est harmonisé partout dans votre site, ainsi que pour tous les contenus utilisés par les lecteurs d’écran, comme les textes alternatifs, titres, boutons, etc. Une présentation harmonisée est aussi importante, comme par exemple avoir un paragraphe de résumé au début d’un article, ou faire en sorte que les listes à puces commencent toujours par une définition en gras.
  • Architecture de page cohérente : Utilisez une architecture de page répétée dans vos modèles afin d’aider l’utilisateur à trouver et reconnaître les principaux contenus plus vite.

Lien vers la section Soyez cohérent

Laissez l’utilisateur décider

Assurez-vous que l’utilisateur a le contrôle. Il doit être possible pour chacun d’accéder aux contenus, et interagir avec eux, selon ses préférences.

Description complète

Ne supprimez pas la capacité de modifier la configuration du navigateur ou de la plateforme, par exemple l’orientation de l’écran, la taille des caractères, le niveau de zoom ou de contraste. De plus, évitez les changements de contenus qui ne répondent pas à une action explicite de l’utilisateur, sauf s’il y a un moyen de les contrôler.

Exemples

  • Contrôle du défilement : Le défilement infini (« infinite scroll ») peut poser des problèmes, surtout pour les utilisateurs au clavier qui ne peuvent plus aller au-delà du flux de contenu qui se remplit automatiquement. Ajoutez un moyen de désactiver cette fonction et de la remplacer par un bouton « Voir plus ».
  • Stoppez ! : Les animations ou le parallaxe donnent la nausée à certains utilisateurs, et peuvent en déconcentrer d’autres. S’ils démarrent automatiquement, donnez un moyen, facile à trouver, de les arrêter et de les relancer.
  • Autorisez le zoom : L’utilisateur peut avoir de nombreuses raisons de vouloir zoomer les contenus. Assurez-vous que cela fonctionne toujours, et que le contenu ne devienne pas caché.

Lien vers la section Laissez l’utilisateur décider

Donnez le choix

Offrez plusieurs façons de réaliser les tâches, surtout celles qui sont complexes ou peu communes.

Description complète

Souvent il existe plus d’une façon possible d’accomplir une tâche. N’essayez pas de deviner la méthode préférée de l’utilisateur. En offrant plusieurs alternatives de présentations, vous offrez à chaque utilisateur la possibilité de choisir la manière la plus confortable, dans le contexte où il se trouve.

Exemples

  • Plusieurs chemins : Autorisez des façons différentes d’accomplir les tâches. Pour supprimer un message dans une application il est possible de faire un geste sur l’écran tactile, ou bien de sélectionner un ou plusieurs messages et les supprimer avec un bouton. C’est le cas dans iOS Mail par exemple.
  • Présentation : Dans le cas de longues listes de contenus, fournissez la possibilité de les afficher en grille ou en liste. Ces choix aident ceux qui préfèrent les images plus grandes, ou de plus petites lignes de tableau.
  • Alternatives accessibles : Des présentations alternatives des données, par exemple une table au lieu d’un graphique, doivent être proposées à tous les utilisateurs, et pas uniquement aux utilisateurs de lecteurs d’écran. Les alternatives accessibles peuvent bénéficier non seulement à un groupe spécifique, mais à tous si le choix est offert.

Lien vers la section Donnez le choix

Le contenu en priorité

Aidez l’utilisateur à se concentrer sur les tâches, les fonctionnalités, et les informations principales, en les priorisant dans le contenu et la mise en forme.

Description complète

Les interfaces sont plus difficiles à comprendre si les éléments les plus importants ne sont pas présentés clairement selon leurs priorités. Un site ou une application peut offrir beaucoup d’informations et de fonctionnalités, mais on doit pouvoir se concentrer sur une seule chose à la fois. Identifiez le but principal de l’interface, et donc les contenus et les fonctionnalités nécessaires pour y parvenir.

Exemples

  • Maintenez la concentration : Révélez les fonctionnalités et les contenus quand ils sont pertinents, au lieu de le faire en une seule fois.
  • Priorisez les tâches : Une application d’emails sert principalement pour écrire et lire les messages. Le bouton « Composer » doit donc toujours être présent et en évidence, ainsi qu’apparaître tôt dans l’ordre de tabulation. La boîte de réception a plus de priorité que les autres, telles que « spam », ou « messages envoyés ». Les fonctionnalités supplémentaires, comme organiser et déplacer les messages, doivent apparaître plus tard, car en général on ne les utilisera qu’après la tâche principale de lecture des messages.
  • Hiérarchisez le contenu : Le contenu principal d’une page d’un journal est l’article. Il doit donc apparaître en premier, visuellement et dans le code source. Les contenus en relation, comme les articles liés, arrivent ensuite, puis suivent les autres contenus de la page.
  • Clarifiez le texte : Les intitulés des liens, titres, et boutons doivent être clairs et directs, avec les points principaux d’abord, que le texte soit visible ou non. Cela facilite la lecture rapide même avec un lecteur d’écran. Un langage clair permet aussi d’aider les utilisateurs étrangers et de simplifier la traduction.

Lien vers la section Le contenu en priorité

Ajoutez de la valeur

Demandez-vous ce qu’apportent les fonctionnalités, et en quoi elles améliorent l’expérience des divers utilisateurs.

Description complète

Chaque fonctionnalité doit bénéficier à l’utilisateur, en offrant des moyens efficaces d’accéder aux contenus. Pensez à des fonctionnalités telles que l’interaction par la voix, la géolocalisation, l’appareil photo, ou l’API de vibration, et comment l’intégration avec des appareils connectés ou un deuxième écran peut offrir plus de choix.

Exemples

  • Intégration avec les appareils connectés ou un second écran : Utiliser une interface vocale pour contrôler les contenus multimédia, rechercher du contenu, contrôler sa musique ou sa télévision, aide les utilisateurs qui ont des difficultés a manipuler les interfaces habituelles.
  • Intégration avec les API de l’appareil : Améliorez la fonctionnalité, en utilisant davantage les capacités de la plate-forme. Les vibrations aident les utilisateurs sourds ou malentendants à percevoir les notifications. La géolocalisation peut aider les utilisateurs ayant des difficultés à se déplacer pour trouver des services aux alentours.
  • Rendre les tâches plus faciles : Ajoutez un bouton pour montrer le mot de passe, pour permettre aux utilisateurs de vérifier qu’ils l’ont saisi correctement. Ajoutez l’identification par empreintes digitales là où l’on peut s’identifier avec un mot de passe.

Lien vers la section Ajoutez de la valeur