Nouveau projet

A chaque étape du processus de création, des recommandations vous sont faites. Vous pouvez les cocher pour rendre compte de vos avancées.

Si certains critères ne peuvent être appliqués sur votre produit. A la fin de votre projet vous pouvez exporter vos résultats de responsabilité numérique.

Critères : 0/0
→ Donnez un nom à votre projet
Tout décocher
Stratégie produit
UX
Contenu
UI
Interaction utilisateur

Stratégie produit

Abonnement

0 / 1
Faciliter la sortie de l'abonnement.
Mise en oeuvre :
  • L'utilisateur.rice doit trouver facilement les informations de désinscription et le bouton pour se désinscrire.
Persuasion
La désinscription est particulièrement complexe car elle ne peut se faire sans interaction avec une personne du service.
La désinscription est particulièrement complexe car elle ne peut se faire sans interaction avec une personne du service.
Pourquoi ?

Cela donne du pouvoir à l’utilisateur et ne le piège pas. (Article 25 du DSA). En savoir plus >

UX

Parcours utilisateur

0 / 1
Ajouter de la friction aux endroits clefs.
Mise en oeuvre :
  • 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.
Écoconception Persuasion
Cette fenêtre modale permets à l’utilisateur.rice de confirmer son action.
Cette fenêtre modale permets à l’utilisateur.rice de confirmer son action.
Pourquoi ?

Aide à réduire les erreurs des utilisateur.rice.s et donc leur procurer une meilleure expérience. 
En savoir plus >

> Évite de multiplier les requêtes serveur en laissant le temps aux personnes de prendre conscience de ce qu’il se passe.

Gestes et contrôle

0 / 1
Éviter le scroll infini.
Mise en oeuvre :
  • Préférer des pages avec des numéros de pages.
  • Séparer ce qui est nouveau de ce qui est déjà vu.
Attention Écoconception
Ici les pages permettent à l’utilisateur.rice de se repérer dans les produits.
Ici les pages permettent à l’utilisateur.rice de se repérer dans les produits.
Pourquoi ?

La navigation est compliquée pour les personnes ayant l'habitude d'utiliser une barre de défilement si celle-ci a disparu au profit du scroll. En savoir plus >

Le scroll infini augmente le temps passé sur la page donc son poids. En savoir plus >

Mise en page générale

0 / 1
Vérifier la lisibilité du texte et la cohérence du positionnement des contenus.
Mise en oeuvre :
  • 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).
Accessibilité
Ici deux mise en pages. La seconde permet de comprendre le produit numérique même si le contenu de la page est zoomé.
Ici deux mise en pages. La seconde permet de comprendre le produit numérique même si le contenu de la page est zoomé.
Pourquoi ?

Cela permet aux personnes peu à l’aise avec le numérique, ayant des troubles de l’attention ou utilisant des zooms d'interface, de pouvoir utiliser le produit.

Contenu

Images

0 / 3
Choisir des formats de fichiers adaptés au contenu.
Mise en oeuvre :
  • 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.
Écoconception
Pour représenter une équipe, une image de groupe sera moins lourde que une pour chaque membre.
Pour représenter une équipe, une image de groupe sera moins lourde que une pour chaque membre.
Pourquoi ?

Cela permet un chargement plus rapide des médias et réduit le poids du produit numérique. En savoir plus >

Choisir un niveau de compression adapté au contenu.
Mise en oeuvre :
  • 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
Écoconception
La plupart du temps, la compression à 60% est imperceptible. Ici la partie droite de la photo est compressée.
La plupart du temps, la compression à 60% est imperceptible. Ici la partie droite de la photo est compressée.
Pourquoi ?

Cela optimise le poids du produit numérique et permet un chargement facilité des médias, quelque soit le niveau de connectivité.

Rédiger les textes alternatifs des images.
Mise en oeuvre :
  • 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.
Accessibilité
Exemple de texte alternatif pour l’image.
Exemple de texte alternatif pour l’image.
Pourquoi ?

Sans textes alternatif les lecteurs d'écrans ne vont pas pouvoir décrire le contenu de l'image aux personnes qui ne la voient pas. Son propos sera donc perdu. En savoir plus >

Audio / Vidéos

0 / 3
Choisir des qualités qui soient adaptée à l’appareil de visionnage.
Mise en oeuvre :
  • 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.
Écoconception
Des images cliquables qui ouvre le lecteur Youtube dans une autre fenêtre.
Des images cliquables qui ouvre le lecteur Youtube dans une autre fenêtre.
Pourquoi ?

Cela permet le chargement plus rapide des médias et optimise le poids du produit numérique. 
En savoir plus >

Compresser les fichiers audio / video.
Mise en oeuvre :
  • 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.
Écoconception
Pourquoi ?

Le chargement des médias est optimisé pour tous les niveaux de connectivité. En savoir plus >

Éviter les audio ou vidéos en arrière plan.
Mise en oeuvre :

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.

Accessibilité Attention Écoconception
Le bouton de mise en pause pour une vidéo en arrière plan.
Le bouton de mise en pause pour une vidéo en arrière plan.
Pourquoi ?

Les vidéos d'arrière-plan peuvent être gênantes, en particulier si un contenu est placé au-dessus d'elles (comme du texte).

Formulaires

0 / 1
Nommer chaque champ de formulaire.
Mise en oeuvre :
  • 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.
Accessibilité Écoconception
Aiguiller l’utilisateur.rice dans l’écriture requise du mot de passe lui permet de ne pas faire d’erreur.
Aiguiller l’utilisateur.rice dans l’écriture requise du mot de passe lui permet de ne pas faire d’erreur.
Pourquoi ?

Cela permet de faciliter le remplissage des informations par l'utilisateur.rice et donc diminuer les risques d’abandon.

Téléchargements

0 / 1
Informer du poids des fichiers à télécharger.
Mise en oeuvre :
  • 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.
Écoconception
Une alternative à la lecture en ligne est proposée avec mention du poids du fichier.
Une alternative à la lecture en ligne est proposée avec mention du poids du fichier.
Pourquoi ?

Cela permet aux personnes de limiter leur impact environnemental et de leur faire prendre conscience de leurs actions.

Textes

0 / 3
Aligner le texte selon le sens de lecture.
Mise en oeuvre :
  • Utiliser un texte aligné à gauche pour les langues de gauche à droite (LTR) et un texte aligné à droite pour les langues de droite à gauche (RTL).
Accessibilité
Deux paragraphes textuels. Le second se lisant plus facilement.
Deux paragraphes textuels. Le second se lisant plus facilement.
Pourquoi ?

Le texte centré ou justifié est difficile à lire. 
En savoir plus >

Hiérarchiser le contenu textuel en titres et sous-titres.
Mise en oeuvre :
  • Hiérarchiser graphiquement les titres et les sous-titre pour les rendre facilement identifiables.
  • Veiller à n'avoir qu'un titre principal par page (H1).
Accessibilité
Exemple d’une hiérarchie textuelle de page.
Exemple d’une hiérarchie textuelle de page.
Pourquoi ?

Les titres et sous-titres sont importants pour aider les personnes qui utilisent des technologies d'assistance à comprendre le sens d'une page ou d'une vue.

Cela facilite l’accès aux informations de manière générale.

Mettre des majuscules avec parcimonie et que quand cela est nécessaire.
Mise en oeuvre :
  • Si possible ne pas écrire en majuscule.
Accessibilité Attention
Les majuscules cherchent ici à pousser l’utilisateur à la consommation.
Les majuscules cherchent ici à pousser l’utilisateur à la consommation.
Pourquoi ?

Cela rend la lecture compliquée et donne un sentiment d'urgence.

Barre de recherche / Filtres

0 / 1
Minimiser les requêtes pendant la saisie.
Mise en oeuvre :
  • 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.
Écoconception
Trois lettres ont été écrites avant que les suggestions apparaissent.
Trois lettres ont été écrites avant que les suggestions apparaissent.
Pourquoi ?

Cela permet de réduire le poids du produit numérique et les latences de chargement car il y a moins de requête serveur.

UI

Typographie

0 / 1
Choisir une police avec des caractères différentiables.
Mise en oeuvre :
  • 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).
Accessibilité
À droite une typographie dont les caractères sont bien différentiables.
À droite une typographie dont les caractères sont bien différentiables.
Pourquoi ?

Cela facilite la lecture pour toutes les personnes et en toutes circonstances. La transmission du contenu est assurée. En savoir plus >

Couleurs / Contraste

0 / 2
Vérifier le contraste de tous les textes.
Mise en oeuvre :
  • 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.
Accessibilité
Exemple de vérification de contraste de texte.
Exemple de vérification de contraste de texte.
Pourquoi ?

Faciliter la lecture des textes pour toutes les personnes et en toute circonstance.

Vérifier le contraste des icônes et des éléments interactifs.
Mise en oeuvre :
  • Rapport de contraste de 3,0:1 (texte, boutons, cases à cocher, etc.).
  • (Conformité au niveau AA).
  • Outil de vérification de contraste sur Figma.
Accessibilité
Deux contrastes sont ici évalués selon les niveaux d'accessibilité.
Deux contrastes sont ici évalués selon les niveaux d'accessibilité.
Pourquoi ?

Cela facilite la navigation pour toutes les personnes et en toute circonstance.

Boutons

0 / 3
Rendre les liens reconnaissables en tant que tels.
Mise en oeuvre :
  • La couleur seule ne suffit pas à indiquer la présence d'un lien. Souligner est un moyen populaire et communément compris.
Accessibilité
Une convention de traitement graphique des liens est le bleu et le soulignage.
Une convention de traitement graphique des liens est le bleu et le soulignage.
Pourquoi ?

Si les liens ne sont pas reconnaissables, le risque est de perdre l'utilisateur.rice et de bloquer son parcours.

Rendre repérables les éléments interactifs.
Mise en oeuvre :
  • Travailler un état graphique des boutons et éléments lorsque la personne navigue au clavier ou le survole avec sa souris.
Accessibilité
Le bouton change d’aspect lorsque la souris le survole, permettant de comprendre que celui-ci est interactif.
Le bouton change d’aspect lorsque la souris le survole, permettant de comprendre que celui-ci est interactif.
Pourquoi ?

Cela aide les personnes identifier qu'elles peuvent effectuer des actions telles que l'activation d'un bouton ou la navigation vers la destination d'un lien.

Rendre visuellement identifiables les liens s'ouvrant dans une nouvelle page.
Mise en oeuvre :
  • É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.
Accessibilité
Cet icône annonce la redirection vers un autre onglet.
Cet icône annonce la redirection vers un autre onglet.
Pourquoi ?

Cela aidera les personnes à comprendre ce qu'il se passera avant d'activer le lien (y compris les personnes utilisant un lecteur d’écran).