Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente | |||
|
ihm:principes:bastien_scapin:groupement_distinction_entre_items [2019/07/03 23:24] maiwann |
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, que se soit par la localisation ou par leur format.// | + | [[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. // | ||
| - | 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. | + | Voir aussi : [[ihm:principes:bastien_scapin:guidage|]] - [[ihm:principes:bastien_scapin:incitation|]] - [[ihm:principes:bastien_scapin:feedback_immediat|]] - [[ihm:principes:bastien_scapin:lisibilite|]] - [[Gestalt]] |
| - | • 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]] | + | |
| ## Définition | ## 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. | + | 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. |
| - | + | ||
| - | + | ||
| - | ## Justifications | + | |
| - | + | ||
| - | 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. | + | |
| ## 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 | ### Définition | ||
| - | 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. | + | 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 | ### Justification | ||
| - | 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. | + | 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 | ||
| - | ### Recommendations | ||
| - | * 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 | * 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. | * 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 | * 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 | * Indentation des éléments d’une hiérarchie (arborescence) : Facilite la recherche visuelle et la compréhension de l’organisation hiérarchique | ||
| Ligne 53: | Ligne 53: | ||
| ## 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. | ||
| - | 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. | + | //Donner aux éléments des caractéristiques graphiques particulières afin d'indiquer leur appartenance, ou non, à une classe donnée d'objets.// |
| - | • 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. | + | 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. |
| Ligne 63: | Ligne 62: | ||
| ### Définition | ### Définition | ||
| - | 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. | + | 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 | ### Justification | ||
| - | 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. | + | 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. |
| Ligne 74: | Ligne 73: | ||
| ### Recommendations | ### Recommendations | ||
| - | * Établir une distinction visuelle entre des aires ayant des fonctions différentes(commande, message, etc.). | + | * Établir une distinction visuelle entre |
| - | * Établir une distinction visuelle entre les labels et les champs d’entrée. | + | * des aires ayant des fonctions différentes (commande, message, etc.). |
| - | * Distinguer l’apparence les champ saisissables des champs en lecture seule : Facilite la reconnaissance des zones saisissables | + | * les labels et les champs d’entrée. |
| - | * Indiquer les champs obligatoires (astérisque rouge) : Évite à l’utilisateur d’attendre la validation du formulaire pour connaître les champs obligatoires. | + | * 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 | * 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. | * 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 | * 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 | ||
| [[ihm:principes:bastien_scapin:criteres_bastien_scapin|Bastien & Scapin]] | [[ihm:principes:bastien_scapin:criteres_bastien_scapin|Bastien & Scapin]] | ||
Dernière modification: 2019/07/03 23:24
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution 4.0 International