Différences

Ci-dessous, les différences entre deux révisions de la page.

--- bloc1:fichesavoirsihm [2021/11/25 22:53] – [OOUI : Object Oriented User Interface] techer.charles_educ-valadon-limoges.fr
+++ bloc1:fichesavoirsihm [2021/11/25 23:15] (Version actuelle) – [Ergonomie] techer.charles_educ-valadon-limoges.fr
@@ Ligne 61: / Ligne 61: @@
 Par exemple, les traitements de textes montrent à l’écran exactement ce que donnera l’impression.
+===== Les règles fondamentales de l’IHM =====
+==== But de l’IHM ====
+Une IHM doit permettre à l’utilisateur d’utiliser les fonctionnalités de l'application :
+  * de façon **efficace** (on doit pouvoir réaliser toutes les fonctionnalités proposées) ;
+  * en toute **sécurité** (les manipulations doivent être contrôlées pour éviter les erreurs) ;
+  * de manière **agréable** ;
+  * et de façon **intuitive** (il doit être facile de trouver ce que l’on cherche).
+La démarche est de regrouper les fonctionnalités portant sur les mêmes informations dans une même fenêtre.
+<WRAP center round info >
+La règle des **3 clics** : pour accéder à une fonctionnalité, on ne doit jamais avoir besoin de faire plus de 3 clics.
+</WRAP>
+==== Ergonomie ====
+L’ergonomie fait appel à des compétences qui relèvent du métier d’infographiste.
+Quelques principes cependant.
+=== Les différents types d’applications  ne suivent pas les mêmes règles===
+  * **applications de bureau** : elles doivent respecter l’ergonomie et les couleurs du système d’exploitation utilisé.
+  * **applications particulières** (jeux, multimédia...) : une personnalisation est possible suivant le sujet traité, mais il faut rester vigilant et ne pas abuser de présentations trop spéciales.
+  * **sites Internet** : d’autres règles spécifiques s’appliquent lors de création des sites Web.
+  * **applications mobiles** : il existe également des règles spécifiques compte tenu de la taille des smartphones.
+Les cinq règles ergonomiques fondamentales qui doivent caractériser une interface :
+  * **Cohérente** : il faut garder les mêmes règles de présentation (les objets similaires doivent être présentés de la même façon et à la même position) ;
+  * **Concise** : il faut simplifier et réduire les manipulations (en regroupant les fonctionnalités et en respectant la règle des 3 clics) ;
+  * **Réactive** : des retours d’informations (feedback) doivent être proposés à l’utilisateur, à travers des messages (textuels ou visuels) prouvant que l’opération a bien été effectuée ;
+  * **Structurée** : le contenu doit être organisé de façon logique ;
+  * **Flexible** : la présentation doit être modifiable pour s’adapter aux besoins voire aux goûts de l’utilisateur.
+=== Les pictogrammes ===
+Les dessins sont à favoriser car ils sont toujours plus parlants que les mots.
+Par exemple mettre le dessin d’une imprimante plutôt qu’un bouton portant le mot **Imprimer** :
+{{ :bloc1:gui_02.png |}} {{ :bloc1:gui_03.png |}}
+=== La disposition ===
+La lecture d'un livre se fait en général de gauche à droite et de haut en bas.
+Le parcours de pages de magazines se fait en suivant cette règle un peu plus rapidement, ce qui donne une lecture qu’on appelle **en diagonale** allant du coin haut gauche au coin bas droit.
+L’observation d’un écran suit cette même règle. Le positionnement des objets graphiques doit suivre cette règle par rapport à l’ordre d’utilisation des objets.
+Les objets graphiques doivent aussi être alignés le plus possible et les espaces vides doivent être minimisés.
+{{ :bloc1:gui_04.png?400 |}}
+==== Le contenu des applications classiques de bureau ====
+  * **Titres** : une fenêtre ne doit pas contenir de titre, le titre étant placé dans la barre de titre.
+  * **Polices** : le choix des polices doit rester sobre et harmonieux, généralement en accord avec le système d’exploitation.
+  * **Alignements** : les objets graphiques doivent respecter un alignement logique (par exemple, plusieurs zones de texte positionnées les unes sous les autres doivent commencer au même niveau).
+  * **Contenus** : suivant les types d’objets graphiques, les contenus doivent être centrés (bouton), alignés à gauche (texte), alignés à droite ou sur la virgule (numérique).
+  * **Couleurs** : elles respectent généralement les couleurs du système d’exploitation. Il faut éviter tout ce qui est agressif et hors de propos.
+==== Le focus ====
+  * Le focus représente le positionnement du curseur.
+  * Il est important que le focus soit toujours là où on l’attend, donc sur l’objet qui est censé interagir à ce moment-là.
+Dans l’exemple ci-dessus, à l’ouverture de la fenêtre il est logique de positionner le focus sur la première zone de saisie (là où l’on voit actuellement le **45**). Une fois que l’utilisateur a saisi une valeur et validé, il est logique de positionner le focus sur la deuxième zone de saisie pour que l’utilisateur puisse rentrer une deuxième valeur. Après validation, le focus ne doit pas se positionner sur la troisième zone de saisie (puisque cette zone est remplie automatiquement lors du calcul) mais sur le premier bouton d’opération.
+Il faut donc se mettre à la place de l’utilisateur pour lui faciliter la tâche. Même si la souris est très pratique d’utilisation, minimiser son utilisation au profit de raccourcis encore plus performants est une bonne pratique.
+===== Accessibilité =====
+De plus en plus, les IHM intègrent la notion d’accessibilité pour les personnes ayant un handicap.
+==== Nature du handicap ====
+Le handicap peut être de différentes natures :
+  * **Déficience visuelle** (légère à sévère)
+  * **Daltonisme** et autres problèmes liés à la perception des couleurs ou formes
+  * …
+==== Solutions ====
+Le but est de rendre l’IHM aussi adaptable que possible en proposant des alternatives.
+Bien qu'il soit difficile de créer une IHM 100% accessible, l'objectif est de s’en rapprocher.
+Par exemple, au niveau visuel, suivant le niveau de la déficience, l’accessibilité peut intervenir sur les points suivants :
+  * Contraste des couleurs
+  * Taille d’écriture
+  * Texte explicatif derrière les images
+  * Lecteurs d’écran
+  * …
+Il existe de nombreux sites, et aussi des outils, qui permettent d’aider à l’accessibilité et de la contrôler.
+===== Adaptabilité ergonomique =====
+On parle d’interface **responsive**.
+{{ :bloc1:gui_05.png?400 |}}