Design d’interface et critère ergonomique 3 : Groupement - Distinction entre Items
Posté par jc-Qualitystreet le 5 août 2010
TweeterMa liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.
- Critère n°1 : Incitation
- Critère n°2 : Lisibilité
- Critère n°3 :Groupement-Distinction entre items
- Critère n°4 : Feedback Direct
- Critère n°5: Contrôle Utilisateur
- Critère n°6 : Concision
- Critère n°7 : Gestion des erreurs
- Critère n°8: Adaptabilité
- Critère n°9: Cohérence
- Critère n°10: Signifiance
- Critère n°11: Compatibilité
Groupement - Distinction entre items : en quoi ça consiste ?
C’est l’art de regrouper ce qui va ensemble pour favoriser une meilleure distinction et reconnaissance des éléments. Ce critère concerne l’organisation visuelle des items les uns par rapport aux autres. Le groupement ou la distinction des informations s’appuie sur deux stratégies :
- la localisation (c’est-à-dire par le positionnement)
- le format (c’est-à-dire par les caractéristiques graphiques)
Liens commerciaux Top vs Colonne vs Référencement Naturel: un Layout efficace. Distinction par localisation et format
Le critère s’appuie aussi plus largement sur la théorie de la Gestalt et sur les lois de perception visuelle: proximité, similarité, fermeture, continuité…
Les Lois de la Gestalt
Quelques exemples de recommandations
- Utiliser la couleur pour distinguer les éléments de la barre de navigation, les contrôles actifs / inactifs
- Distinguer graphiquement l’item de navigation secondaire en cours de consultation et le mettre en valeur (ex: une puce, une couleur de typographie, un aplat…)
- Différencier les liens visités des liens non-visités
- Différentier l’item présentant la page en cours de consultation mais le rendre « non cliquable »
- Séparer les éléments du fil d’Ariane par le signe > avec 1 espace avant et après
- Regrouper les fonctions transverses dans une zone située en haut à droite, et les ‘afficher de manière constante sur l’ensemble du site
- …
Des mauvaises pratiques
Des groupements inadaptés - pas de hiérarchisation ... surcharge visuelle !!
Autre mauvais exemple:
L'espace est un élément crucial pour la distinction des items. Ici c'est raté !
Autre mauvais exemple :
Autre mauvais exemple:
Une distinction entre action 1 et 2 aurait été préférable
Quelques bons exemples … so GOOD !
Trés bonne distinction entre les deux actions (bonne prévention des erreurs)
Autre exemple:
Distinction des rubriques par couleurs
Autre exemple:
Zoning. Distinction des zones de l'écran. Extrait Charte ergonomique DGME
Autre exemple:
Trés belle distinction des zones et des items au sein du formulaire Eba
Ah les principes Gestalt de perception
Il y a aussi le “destin commun” utilisé dans les radars que j’évoque ici http://ux-fr.com/2010/06/24/destin-commun/
Il faut que je finisse mes articles à ce sujet.