Différences
Ci-dessous, les différences entre deux révisions de la page.
| Prochaine révision | Révision précédente | ||
|
ihm:principes:bastien_scapin:groupement_distinction_entre_items [2019/06/28 18:46] maiwann créée |
ihm:principes:bastien_scapin:groupement_distinction_entre_items [2019/07/05 21:13] (Version actuelle) maiwann |
||
|---|---|---|---|
| Ligne 2: | Ligne 2: | ||
| # Groupement / Distinction entre Items | # Groupement / Distinction entre Items | ||
| - | Il est fondamental de regrouper les éléments qui vont ensemble et de séparer ceux qui ne vont pas ensemble. | + | [[ihm:principes:bastien_scapin:criteres_bastien_scapin|]] : |
| + | // Regrouper les éléments qui vont ensemble et séparer ceux qui ne vont pas ensemble, que se soit par la localisation ou par leur format. 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 : [[ihm:principes:bastien_scapin:guidage|]] - [[ihm:principes:bastien_scapin:incitation|]] - [[ihm:principes:bastien_scapin:feedback_immediat|]] - [[ihm:principes:bastien_scapin:lisibilite|]] - [[Gestalt]] | ||
| + | |||
| + | ## Définition | ||
| + | |||
| + | 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. | ||
| ## par la localisation | ## par la localisation | ||
| - | 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. | + | // 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.// |
| + | |||
| + | |||
| + | ### Définition | ||
| + | |||
| + | Le critère Groupement/Distinction par la Localisation concerne le positionnement des items les uns par rapport aux autres dans le but d’indiquer leur appartenance ou non-appartenance à une même classe, ou encore dans le but de montrer la distinction entre différentes classes. Ce critère concerne aussi l’organisation des items dans une même classe. | ||
| + | |||
| + | ### Justification | ||
| + | |||
| + | La compréhension d’un écran dépend, entre autres choses, de l’arrangement des objets (images, textes, commandes, etc.) qui y sont présentés. Les utilisateurs auront plus 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 les apprendre et s’en rappeler. Le critère groupement/distinction par la localisation entraîne un meilleur guidage. | ||
| + | |||
| + | ### Recommandations | ||
| + | |||
| + | |||
| + | |||
| + | * Lorsque plusieurs options sont présentées: | ||
| + | * Organiser les items en listes hiérarchiques. | ||
| + | * Grouper les options de menus en fonction des objets sur lesquels elles s’appliquent. | ||
| + | * l’organisation de ces dernières doit être logique (arrangement alphabétique, fonctionnel, fréquence d’utilisation, etc.) | ||
| + | * 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 | ||
| + | |||
| + | |||
| + | * 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 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 | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| ## par le format | ## par le format | ||
| - | 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. | ||
| - | > 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 | ||
| - | [[ihm:principes:criteres_bastien_scapin|Bastien & Scapin]] | + | //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. | ||
| + | |||
| + | |||
| + | |||
| + | ### Définition | ||
| + | |||
| + | Le critère Groupement/Distinction par le Format concerne plus particulièrement les caractéristiques graphiques (format, couleur, etc.) permettant de faire apparaître l’appartenance ou la non-appartenance d’items à une même classe, ou encore permettant d’indiquer des distinctions entre classes ou bien encore des distinctions entre items d’une même classe. | ||
| + | |||
| + | |||
| + | ### Justification | ||
| + | |||
| + | Les utilisateurs auront plus de facilité à connaître les liens entre items ou classes d’items si des formats, ou codages permettent d’illustrer leurs similitudes ou leurs différences. De tels liens seront ainsi mieux appris et mieux rappelés. Un bon groupement/distinction par le format entraîne un meilleur guidage. | ||
| + | |||
| + | |||
| + | |||
| + | ### Recommendations | ||
| + | |||
| + | * Établir une distinction visuelle entre | ||
| + | * des aires ayant des fonctions différentes (commande, message, etc.). | ||
| + | * les labels et les champs d’entrée. | ||
| + | * des champs saisissables des champs en lecture seule | ||
| + | * les champs obligatoires et non-obligatoires | ||
| + | |||
| + | : Facilite la reconnaissance des différents composants. | ||
| + | |||
| + | * 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 | ||
| + | |||
| + | |||
| + | [[ihm:principes:bastien_scapin:criteres_bastien_scapin|Bastien & Scapin]] | ||
| - | 1. [[Guidage]] | + | 1. [[guidage]] |
| - | 1. [[Incitation]] | + | 1. [[incitation]] |
| 2. [[Groupement/Distinction entre items]] | 2. [[Groupement/Distinction entre items]] | ||
| 1. Groupement/Distinction par la localisation | 1. Groupement/Distinction par la localisation | ||
| 2. Groupement/Distinction par le format | 2. Groupement/Distinction par le format | ||
| 3. [[Feedback immédiat]] | 3. [[Feedback immédiat]] | ||
| - | 4. [[Lisibilité]] | + | 4. [[..:lisibilite] |
Dernière modification: 2019/06/28 18:46
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution 4.0 International