Nouveau projet

• Utilisez ces techniques en phase de création et non pas en phase d’utilisation.
• Préférez les test utilisateurs de temps à autre.

• L'utilisateur.rice doit trouver facilement les informations de désinscription et le bouton pour se désinscrire.

• Envoyer une notification, un mail ou un SMS à la personne peut être un bon moyen de la prévenir.
• Éviter de multiplier les communications sur diverses canaux.

• Permettre aux personnes de valider leur besoin / confirmer leur action aux endroits clefs.
• Informer lorsqu’un traitement est en cours en arrière-plan et rendre indisponible le bouton d’action qui génère ce traitement.

• Proposer par exemple des fonctionnalités de choix pour la définition d'affichage des contenu multimédias.

• Informer les personnes en amont des impacts environnementaux avant l'utilisation de fonctionnalités coûteuse en énergie.
• Suggérer plusieurs formats pour les téléchargements.
• Conseiller aux personnes de naviguer et de télécharger les contenus médias en Wi-FI plutôt qu’en 4G.

• Proposer au moins deux moyens de navigation est recommandé : par le menu, le plan du site ou le moteur de recherche.

• S’interroger sur l’unité fonctionnelle du service numérique
• Réduire les étapes au maximum en différenciant ce qui est essentiel de ce qui est superflu.

• Travailler les composants de la page de manière responsive (leur donner des tailles et des espacements qui s’adaptent à la taille de l’écran).
• Privilégier les tailles flexibles (ex : “Fill container” sur Figma) et les positions en % par rapport à la largeur et hauteur de l’écran.
• Toujours vérifier ce que donne votre interface sur des écrans très larges et très petits.

• Préférer des pages avec des numéros de pages.
• Séparer ce qui est nouveau de ce qui est déjà vu.

• Le remplacer par des éléments de type "cards" visibles sur l’écran.
• Permettre à l’utilisateur de filtrer le contenu.

• Respecter des espaces entre les éléments interactifs de minimum 12 px.

• Réserver le défilement horizontal qu’aux galeries d’image en explicitant bien que du contenu est caché (flèche, “voir tout”, image tronquée).
• Ne pas faire défiler horizontalement du texte ou une page.
• Ne pas faire défiler à l’infini pour les navigation clavier.

• Penser des alternatives nécessitant un seul pointeur pour les gestes complexes (gestes multipoints, basés sur un chemin ou nécessitant des mouvements de l'appareil).
• Indiquer aux personnes les alternatives possibles (clic droit, commandes clavier).

• Éviter le superflu et de mettre trop d'information par page.
• Maintenir des styles graphiques cohérents par composants sur toutes les pages du produit.

• Zoomer le texte à 200% pour vérifier sa lisibilité et que les éléments ne se superposent pas.
• Faire un poing avec sa main et ouvrir juste assez pour laisser passer une "paille". Placer le poing devant l'un des yeux et fermer l'autre. Vérifier qu’il est possible de voir les informations qui sont liées, ensemble (ex formulaires).

• Réduire le nombre d’image et privilégier une image globale à plusieurs juxtaposées pour le même objectif.
• Format vectoriel pour les illustrations, icônes, logos, graphes, jpg pour des photos, png pour des illustrations avec aplats de couleurs.

• La compression d'un format JPEG à 60% est visuellement acceptable.
• Réduire la palette de couleur pour les png.
• Aplatir les calques pour les fichier SVG.
• Outils : ShortPixel, TinyPNG

• Décrire toutes les informations visibles (axes du graphique, données représentées et légendes).
• Ajouter un texte alternatif succinct de présentation générale de l’image.

• Décrire le contenu de l'image de manière claire et concise.
• Dire ce que l'image veut dire et démontre.
• Si l'image comporte du texte, inclure celui-ci dans la description.

• Préférer une image cliquable plutôt que d’utiliser un plugin qui intègre la vidéo dans la page.
• Éviter les vidéos avec une définition de >1080p quand le terminal détecté est un smartphone.
• Utiliser MP3, OGG ou AAC au lieu du FLAC, AIFF ou WAV pour les fichiers audio.

• Optimisation du Bitrate (débit) au sein du format pour les videos
• Optimiser aussi le Ratio (Taux de compression) et de la Fréquence pour les fichiers audio.
• Préférer le Stéréo pour de la musique et Mono pour des dialogues.
• Éviter le ratio poids en mega-octet/durée en minute supérieur à 1.
• Outil de compression de vidéo en Opensource.

Si les vidéos ou audio en arrière plans sont nécessaires, permettre leur mise en pause par un bouton ou la barre espace du clavier.

• Préférer le texte et les images aux vidéos et audio.
• S'interroger sur la pertinence d'utiliser des médias décoratifs.

• Préférer un bouton play/pause actionnable et visible (le bouton doit être accessible au clavier).
• Permettre à l’utilisateur.rice de gérer les paramètres d’autoplay dans les paramètres du service.

• Permettre la mise de sous-titre ou de retranscription audio pour les vidéos.
• Les retranscriptions audio ou en LSF pour les vidéos peuvent être intéressantes.
• Permettre aux personnes de paramétrer ces fonctionnalités.

• Afficher les erreurs de saisie de formulaire dans une liste au-dessus du formulaire après sa soumission.

• Mentionner explicitement ce qui doit être rempli, les champs obligatoires ainsi que le format attendu (texte, type de fichier pour le transfert de média, taille max).
• Placer ces indications au dessus de l'espace de réponse.

• Permettre à la fin du parcours de revérifier les données enregistrées et de les corriger.

• Afficher une information relative au poids du fichier à télécharger.
• Proposer différentes résolutions lorsque cela est possible.
• Permettre aux personnes de choisir la résolution des fichiers à télécharger.

• Optimiser les paramètres de compression pour générer un PDF en résolution 72 dpi pour tous les médias du document.
• Outil en ligne.

• Utiliser un texte aligné à gauche pour les langues de gauche à droite (LTR) et un texte aligné à droite pour les langues de droite à gauche (RTL).

• Utiliser un vocabulaire simple, facilement compréhensible, sans double sens.
• Éviter les figures de style, les expressions idiomatiques, les métaphores compliquées ou bien la double négation.

• Ne pas utiliser de formulation culpabilisante, agressive ou (trop) sympathique.
• Éviter de mettre en avant graphiquement des éléments non essentiels (les textes en rouge, les points d’exclamation créent par exemple un sentiment d’alerte et de danger).

• Hiérarchiser graphiquement les titres et les sous-titre pour les rendre facilement identifiables.
• Veiller à n'avoir qu'un titre principal par page (H1).

• Si possible ne pas écrire en majuscule.

• Laisser l'utilisateur.rice sélectionner tous les filtres avant de les valider.

• Il est moins lourd de ne faire aucune suggestion lors de la saisie dans la barre de recherche.
• Si la suggestion est nécessaire, préférer les requêtes qui apparaissent après plus de 3 lettres ou 200 ms après la saisie.

• Privilégier les polices connues.
• Attention aux similitudes entre i et l, 0, O et b,d,p,q.
• Les espacements entre les lettres doivent suffisant (ex : rn et m peuvent se confondre).

• S'assurer de la lisibilité du texte si la superposition est vraiment nécessaire.

• Rendre les liens identifiables si tout est en niveaux de gris.
• Éviter une navigation qui nécessite de cliquer sur des éléments colorés sans autre indications.

• Rapport de contraste de 4,5:1 pour les textes de tailles normale (<24px et <19px en gras)
• Rapport de contraste de 3:1 pour les textes de grandes tailles (>24px et >19px en gras).
• (Conformité niveau AA).
• Outil de vérification de contraste de texte.

• Rapport de contraste de 3,0:1 (texte, boutons, cases à cocher, etc.).
• (Conformité au niveau AA).
• Outil de vérification de contraste sur Figma.

• Vérifier que le contenu (icônes, liens, bordures, formulaires et textes) soient toujours présents et lisibles lorsque les couleurs sont inversées ou que le mode "contraste" est activé.
• Méthodologie de test

• Le texte alternatif doit indiquer ce qui va se passer si la personne clique sur le lien.

• La couleur seule ne suffit pas à indiquer la présence d'un lien. Souligner est un moyen populaire et communément compris.

• Travailler un état graphique des boutons et éléments lorsque la personne navigue au clavier ou le survole avec sa souris.

• Éviter les liens qui ouvrent une nouvelle fenêtre.
• Si nécessaire, cela doit être communiqué d'une manière visible pour tous les utilisateur.rice.s.
• Le texte alternatif du bouton doit annoncer l’ouverture dans une nouvelle page.

• La taille des icônes doit être supérieure à 18px.
• Largeur boutons supérieure à 40px.
• La zone de clic supérieure à 48px de large et 48px de hauteur.

• Laisser l’utilisateur.rice choisir les options approfondies.
• Bien nommer les paramètres et décrire aux personnes quel sera l’impact de leur personnalisation.

• Par des messages instructifs, ou des frictions graduelles (ex: le service devient plus lent ou plus sombre au bout d’un moment).

• Séparer les différents type de newsletters pour que l’utilisateur.rice puisse choisir auxquelles s’inscrire. Cela peut être par exemple une liste à cocher.

• Ne pas ajouter des personnes de manière automatique sans formulaire de consentement.
• Plutôt que de pré-selectionner la réception de la newsletter par défaut, laissez le choix à la personne en expliquant quel sera le contenu et la fréquence de ces newsletters.

Préférer un bouton play/pause actionnable et visible.

• Bannir les animations lumineuses, brusques ou clignotantes.

• Éviter les animations décoratives.
• Faire attention à ce que les animations puissent être enlevées lorsque le mode "réduire les animations" est activé, ou ralentir sa durée.