Design d’interface et critère ergonomique 3 : Groupement – Distinction entre Items

Ma 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.

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
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
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

Pas de groupement - pas de hiérarchisation : la CATA !
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 ...
L’espace est un élément crucial pour la distinction des items. Ici c’est raté !

Autre mauvais exemple :

distinction_bad-3

Autre mauvais exemple:

Une distinction entre action 1 et 2 aurait été préférable
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)
Trés bonne distinction entre les deux actions (bonne prévention des erreurs)

Autre exemple:

Distinction des rubriques par couleurs
Distinction des rubriques par couleurs

Autre exemple:

Zoning. Distinction des zones de l'écran. Extrait Charte ergonomique DGME
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 Ebay
Trés belle distinction des zones et des items au sein du formulaire Eba
A propos de jc-Qualitystreet (Jean Claude Grosjean) 448 Articles
Jean Claude GROSJEAN - COACH d’Organisation. Coach d'Equipes - Coach Agile. J’accompagne la transformation des organisations et coach les PERSONNES, les EQUIPES dans leur nouveau parcours. La facilitation & la formation font aussi partie de mes activités. Me contacter: 06.20.98.58.40

1 Comment

6 Trackbacks / Pingbacks

  1. Jean Claude Grosjean
  2. Les tweets qui mentionnent Design d’interface et critère ergonomique 3 : Groupement - Distinction entre Items | Qualitystreet -- Topsy.com
  3. Valtech Technology
  4. Nicolas Ruffel
  5. Sylvain Gladieux
  6. Sylvain Lys

Les commentaires sont fermés.