Les bonnes pratiques à adopter lors du design

Démarche

La documentation sur ces questions est très riche mais parfois complexe et aux sources multiples. Dans cet article, je répertorie certaines bonnes pratiques de l’éco-conception web et certaines exigences d’accessibilité à prendre en compte lors de la phase de design. Afin d’en faciliter la compréhension et la navigation, cette liste est volontairement épurée des éléments techniques qui sont plutôt à considérer lors de la phase de développement.

Cette liste est non exhaustive et reprend uniquement les points que j’aborde régulièrement avec ma clientèle et mes partenaires.

Les pratiques

• Un parcours utilisateur clair et prévisible

  Un parcours utilisateur prévisible permet aux visiteureuses de trouver l'information facilement et de réduire ainsi le nombre de pages consultées. Il est donc bénéfique de favoriser des choix logiques, intuitifs et connus du public.

• Commencer par designer la version mobile

  59% du trafic web mondial provient des smartphones. Il est donc important de concevoir les sites web selon l'approche « Mobile First » afin que l'expérience utilisateurice soit adaptée au contexte majoritaire.

• Favoriser un design sobre et épuré

  Un design clair facilite la compréhension du contenu et permet de limiter le temps de lecture ce qui réduit les ressources nécessaires à chaque visite.

• Navigation

  Opter pour une navigation prévisible :

  • Éviter les jeux de mots ou les termes peu explicites pour les liens du menu.
  • Éviter les exceptions ou les cheminements complexes : la répétition des éléments facilite la compréhension de la structure du site.

• Polices d'écriture

  Les polices d'écriture sont chargées sous forme de fichiers lorsqu'un site s'affiche. Plus ces fichiers seront nombreux, plus le site web consommera de ressources pour les télécharger. Il est conseillé de prioriser l'utilisation des polices natives. Sinon, utiliser un maximum de 2 polices d'écriture différentes.

• Couleurs & contrastes

  Il y a un certain niveau de contraste à respecter entre l'avant et l'arrière-plan afin de garantir la lisibilité du contenu pour toutes et tous. Pour vérifier le respect de ces exigences, j'utilise ce logiciel : Colour Contrast Analyser. Le niveau doit être conforme aux recommandations WCAG - AA.

  Au niveau de l'interface, la couleur ne peut pas être utilisée comme seul moyen de transmettre une information.

• Carrousels / Sliders

  Les sliders sont difficiles à rendre accessibles et consomment beaucoup de bande passante. Il est conseillé de privilégier du contenu statique (quitte à rediriger vers une page contenant plus de contenu si nécessaire.)

  Plus d'informations à ce sujet dans cet article :
  Dites adieu aux sliders : pourquoi sont-ils devenus des obstacles au web moderne ?

• Cartes interactives (ex: Google Maps)

  Charger des cartes interactives sur son site web, c'est embarquer toute une série de fichiers à cet effet. Ces intégrations ralentissent la page, augmentent l'empreinte écologique du site et sont souvent peu respectueuses de la vie privée. Je déconseillerais leur utilisation dans la plupart des cas.

• Titres

  Un titre de niveau 1 (H1) doit se trouver sur chaque page. Cette pratique est bénéfique pour l'accessibilité et pour le référencement.

  Les différents niveaux de titre doivent être organisés de manière logique (pas de h2 avant un h1 par exemple.)

• Liens & boutons

  Le contenu textuel des liens et boutons doit être explicite et indiquer clairement leurs destinations.

  La taille minimale des éléments interactifs est de 24x24 pixels (sauf pour les liens dans un texte).

• Images & logos

  Privilégier le format vectoriel (.svg) lorsque c'est possible, notamment pour les logos. Pour le contenu, je conseille d'utiliser les images avec modération et sobriété, en fonction des besoins du projet.

• Vidéos

  La vidéo est un média souvent lourd et consommateur en ressources. De plus, certaines mesures doivent être prises pour garantir leur accessibilité.

  Je conseille donc d'éviter l'utilisation de vidéos dans la mesure du possible.

Chaque projet a ses spécificités

Ces différents points permettent de poser quelques balises et de répondre à certaines questions fréquentes. Cependant chaque projet a ses contraintes et un contexte unique. Il est important de considérer tous ces éléments spécifiques en amont du projet pour concevoir un site qui réponde à certaines exigences.

Aù delà de l’intégration du design, je vous accompagne également tout au long du processus de réflexion sur ces sujets essentiels qui sont au coeur de mon projet et de mes services. Rencontrons-nous et discutons-en !

Références

• WCAG - Règles pour l’accessibilité des contenus Web (WCAG) 2.2
• Éco-conception web : Les 115 bonnes pratiques - Frédéric Bordage