Il est fondamental de regrouper les éléments qui vont ensemble et de séparer ceux qui ne vont pas ensemble, que se soit par la localisation ou par leur format.

Grouper les différents éléments visuels de façon cohérente et ordonnée. L’objectif est que les caractéristiques visuelles de l’interface nous renseigne sur le sens. • Il est fondamental de regrouper les éléments qui vont ensemble et de séparer ceux qui ne vont pas ensemble. • Avant de penser à la manière de le faire, il faut réfléchir aux groupes eux-mêmes. On doit principalement se demander si les groupements effectués sont pertinents.

Voir aussi : Gestalt

Le critère Groupement/Distinction entre Items concerne l’organisation visuelle des items d’information les uns par rapport aux autres. Ce critère prend en compte la topologie (localisation) et certaines caractéristiques graphiques (format) afin d’illustrer les relations entre les divers items affichés, leur appartenance ou non-appartenance à une même classe, ou encore dans le but de montrer la distinction entre différentes classes d’items. Ce critère concerne aussi l’organisation des items à l’intérieur d’une même classe.

La compréhension d’un écran dépend, entre autres choses, de l’arrangement, du positionnement et de la distinction des objets (images, textes, commandes, etc.) qui y sont présentés. Les utilisateurs auront plus de facilité à repérer les items et/ou groupes d’items et à connaître leurs liens si ils sont présentés de façon organisée (ex.:alphabétique, fréquence d’utilisation, etc.) d’une part, et si ces items ou groupes d’items sont présentés dans des formats ou codages qui permettent d’illustrer leurs similitudes ou leurs différences, d’autre part. De même, les utilisateurs pourront mieux les apprendre et s’en rappeler. Le groupement/distinction entre items entraîne un meilleur guidage.

Distinguer des éléments par la localisation, c'est les éloigner ou les séparer d'un point de vue géographique pour signifier leur différence.

Le critère Groupement/Distinction par la Localisation concerne le positionnementdes items les uns par rapport aux autres dans le but d’indiquer leur appartenance ounon-appartenance à une même classe, ou encore dans le but de montrer la distinctionentre différentes classes. Ce critère concerne aussi l’organisation des items dans unemême classe.

La compréhension d’un écran dépend, entre autres choses, de l’arrangement desobjets (images, textes, commandes, etc.) qui y sont présentés. Les utilisateurs aurontplus de facilité à repérer les différents items si ils sont présentés de façon organisée(ex.: alphabétique, fréquence d’utilisation, etc.). De même, ils pourront mieux lesapprendre et s’en rappeler. Le critère groupement/distinction par la localisationentraîne un meilleur guidage.

• Organiser les items en listes hiérarchiques.
• Grouper les options de menus en fonction des objets sur lesquels elles s’appliquent.
• Lorsque plusieurs options sont présentées, l’organisation de ces dernières doit êtrelogique, i.e. représenter une organisation fonctionnelle pertinente ou significative(arrangement alphabétique, fonctionnel, fréquence d’utilisation, etc.)
• Hiérarchie visuelle pour représenter la relation contenant-contenu (l’élément en bas, à droite est le contenu) : Facilite la compréhension de l’écran
• Proximité spatiale entre des éléments d’un même groupe logique et laisser une marge entre les groupes : Facilite la recherche visuelle.
• Placer les éléments importants en début de série (à partir du haut ou de la gauche selon l’orientation verticale ou horizontale) : L’utilisateur même expérimenté entame sa recherche visuelle en début de série
• Placer les boutons près des champs sur lesquels ils portent : Facilite la compréhension de l’action en suggérant son périmètre d’effet
• Indentation des éléments d’une hiérarchie (arborescence) : Facilite la recherche visuelle et la compréhension de l’organisation hiérarchique

Distinguer des éléments par le format, c'est attribuer des formats différents aux éléments qui sont différents.

Donner aux éléments des caractéristiques graphiques particulières afin d'indiquer leur appartenance, ou non, à une classe donnée d'objets. Par exemple: utiliser un symbole et la couleur rouge pour les boîtes de dialogue d'alerte ou d'erreur. Autrement dit, dans cet exemple la couleur renseigne sur le sens. • Distinguer des éléments par le format, c'est attribuer des formats différents aux éléments qui sont différents. Par exemple, dans le menu d'une application, on peut griser les options qui sont inaccessibles pour les différencier des options accessibles.

Le critère Groupement/Distinction par le Format concerne plus particulièrement lescaractéristiques graphiques (format, couleur, etc.) permettant de faire apparaîtrel’appartenance ou la non-appartenance d’items à une même classe, ou encorepermettant d’indiquer des distinctions entre classes ou bien encore des distinctionsentre items d’une même classe.

Les utilisateurs auront plus de facilité à connaître les liens entre items ou classesd’items si des formats, ou codages permettent d’illustrer leurs similitudes ou leursdifférences. De tels liens seront ainsi mieux appris et mieux rappelés. Un bongroupement/distinction par le format entraîne un meilleur guidage.

• Établir une distinction visuelle entre des aires ayant des fonctions différentes(commande, message, etc.).
• Établir une distinction visuelle entre les labels et les champs d’entrée.
• Distinguer l’apparence les champ saisissables des champs en lecture seule : Facilite la reconnaissance des zones saisissables
• Indiquer les champs obligatoires (astérisque rouge) : Évite à l’utilisateur d’attendre la validation du formulaire pour connaître les champs obligatoires.
• Frontières visibles des zones cliquables (bordure aux boutons et icônes, liens hypertextes bleus et soulignés…) : Évite à l’utilisateur, de manquer une action ou de chercher avec le pointeur de la souris
• Différencier l’option de menu actuellement sélectionnée des autres : Évite à l’utilisateur de mémoriser sa position dans la hiérarchie de menus.
• Indiquer les zones dépliables/déroulantes par un symbole (+ ou - pour arborescences, le triangle pour les menus déroulants…) : Évite à l’utilisateur de manquer les zones escamotables

Par exemple, dans le menu d'une application, on peut griser les options qui sont inaccessibles pour les différencier des options accessibles.C'est aussi cette distinction par le format qui est souvent utilisée pour confirmer à l'utilisateur d'un site web la rubrique dans laquelle il se trouve : La différence de format (couleur) entre les rubriques d'un menu

Bastien & Scapin

1. Guidage
   1. Incitation
   2. Groupement / Distinction entre Items
      1. Groupement/Distinction par la localisation
      2. Groupement/Distinction par le format
   3. Feedback Immédiat
   4. [[..:lisibilite]