Mesures visuelles

Ce test vise à effectuer une analyse à 360 degrés du visuel graphique des futures interfaces.

Mesures principales du test visuel

Les principales mesures utilisées pour ce cas d’utilisation sont les suivantes :

• Rapport de contraste = Il s’agit du pourcentage de mots dont le rapport de contraste entre le texte et le fond est inférieur ou égal à 4.5.

• Homogénéité des couleurs = Il s’agit du pourcentage de couleurs dominantes assorties entre les écrans.

• Règle 60-30-10 = Vérifie si la répartition des 3 couleurs principales des images est proche de la répartition suivante : couleur principale recouvre 60% de l’écran, la couleur secondaire 30% de l’écran et la couleur d’accent 10% de l’écran.

• Harmonie des couleurs = Score d’harmonie basé sur la disposition des teintes de couleurs entre elles.

• Composition
  • Symétrie = Cette mesure analyse si la texture de l’écran est symétrique (horizontalement ou verticalement).
  • Equilibre = Cette mesure évalue si les éléments à gauche et à droite de l’écran sont répartis de manière homogène.

• Mesure de complexité = Estime la difficulté de lecture d’un écran.

Comprendre les mesures

La définition et l’utilisation dans UXvizer des mesures sont décrites ci-dessous.

 Rapport de contraste (contrat de léminence)

 Définition du rapport de contraste

Le contraste entre un mot et son arrière-plan est le rapport entre sa luminance relative. Plus ce ratio sera élevé, mieux sera l’accessibilité du texte. 

Quelle est la mesure utilisée dans UXvizer ?

Le score de contraste représente le pourcentage de mots ayant un rapport de contraste supérieur à 4,5.

Lorsque le contraste ratio de la couleur d’un mot avec le fond d’écran est inférieur à 4.5, deux recommandations sont proposées : l’une permettant un rapport de contraste à 4.5 et l’autre à 7.

On vous donne nos références 😀

De la définition du WCAG : https://webaim.org/standards/wcag/WCAG2Checklist.pdf des paragraphes 1.4.3 et 1.4.6 :

Des règles européennes d’accessibilité : (en FR) paragraphes 1.4.3 et 1.4.6 : https://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast

Calcul de la formule : https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-procedure

Calcul de luminance basé sur WCAG : Lignes directrices sur l’accessibilité du contenu Web (WCAG) 2.0

 Homogénéité des couleurs

 Définition de l’homogénéité des couleurs

Un score de palette de couleurs définit dans quelle mesure les principales palettes de couleurs extraites des images sont en accord les unes avec les autres.

 Quelle est la mesure utilisée dans UXvizer ?

Le score d’homogénéité représente le pourcentage de pixels qui sont bien représentés avec la palette de couleurs de référence. La palette de référence a été choisie comme la palette de couleurs faisant le meilleur consensus entre toutes les palettes extraites des écrans. 

 Règle 60-30-10

 Définition de la règle des 60-30-10

Certains cahier des charges imposent une répartition particulière sur l’utilisation des couleurs de la charte graphique. La règle des 60-30-10 est d’ailleurs souvent utilisée : 60 représente le pourcentage de la couleur principale présent dans l’écran analysé, 30% est le pourcentage de la couleur secondaire et 10% la couleur d’accent.

 Quelle est la mesure utilisée dans UXvizer ?

Uxvizer extrait les 3 couleurs principales d’une image et compare leur pourcentage à la règle des 60-30-10. Plus la distribution des couleurs s’éloigne de cette règle des 60-30-10, plus le score est faible.

Le score est d’environ 4 ici car c’est proche de la règle du 60-30-10.

 Complexité visuelle

 Définition de la complexité visuelle

La complexité visuelle évalue la quantité d’informations, de couleurs et de textures dans une page. Elle estime les zones où les yeux peuvent être attirés. Plus la complexité est élevée, plus il faut de temps à l’utilisateur pour trouver une information.

 Quelle est la mesure utilisée dans UXvizer ?

Une carte de chaleur des zones potentielles d’attention est estimée : en bleu les zones les moins attractives et en rouge, les zones les plus contrastées de l’écran. Le score de complexité correspond au pourcentage de zones de faible contraste. Plus le score est faible, plus l’écran dispose de contrastes visuels qui suppose une attention approfondie du lecteur.

 Équilibre

 Définition de l’équilibre

Il évalue la facilité de lecture en regardant la distribution des éléments des deux côtés du milieu de la page.

 Quelle est la mesure utilisée pour UXvizer ?

Le pourcentage d’éléments communs des deux côtés de l’image.

 Symétrie

 Définition de la symétrie

La composition de la page est évaluée au regard de la symétrie des éléments texturaux de l’écran analysé. Ce concept est plus fort que l’équilibre.

 Quelle est la mesure utilisée pour UXvizer ?

Le score est égal à 1 s’il y a une symétrie (verticale, horizontale ou rotation)

 Harmonie (Hue)

 Définition de l’harmonie

Ce concept a été emprunté au domaine de la photo. La notion d’harmonie évalue le rapport des teintes de couleurs utilisées entre elles. La complémentarité ou l’analogie des couleurs sont évaluées au regard des modèles d’Itten.

 Quelle est la mesure utilisée pour UXvizer ?

La mesure utilisée est la distance entre le rapport des teintes de l’image et un modèle d’Itten.

Créez votre compte gratuitement