Différences

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

--- bloc1:fichesavoirsihm [2021/11/25 23:08] – [Concept WYSIWYG (What You See Is What You Get)] techer.charles_educ-valadon-limoges.fr
+++ bloc1:fichesavoirsihm [2021/11/25 23:15] (Version actuelle) – [Ergonomie] techer.charles_educ-valadon-limoges.fr
@@ Ligne 106: / Ligne 106: @@
 Les objets graphiques doivent aussi être alignés le plus possible et les espaces vides doivent être minimisés.
-{{ :bloc1:gui_04.png |}}
+{{ :bloc1:gui_04.png?400 |}}
-Le contenu des applications classiques de bureau
+==== 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.
+  * **Titres** : une fenêtre ne doit pas contenir de titre, le titre étant placé dans la barre de titre.
-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).
+  * **Polices** : le choix des polices doit rester sobre et harmonieux, généralement en accord avec le système d’exploitation.
-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).
+  * **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).
-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.
+  * **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).
-Le focus
+  * **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 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à.
+==== Le focus ====
-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.
+  * 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.
-C. Accessibilité
+===== Accessibilité =====
 De plus en plus, les IHM intègrent la notion d’accessibilité pour les personnes ayant un handicap.
-Nature du handicap
+==== Nature du handicap ====
 Le handicap peut être de différentes natures :
-— Déficience visuelle (légère à sévère)
+  * **Déficience visuelle** (légère à sévère)
-CNED – BTS SIO – BLOC 1 – B1.2 – PARTIE I – SÉQUENCE 2 – Fiche savoirs – 7
+  * **Daltonisme** et autres problèmes liés à la perception des couleurs ou formes
-— Daltonisme et autres problèmes liés à la perception des couleurs ou formes
+  * …
-— Épilepsie
+==== Solutions ====
-— Déficience auditive (intervient dans le cas où du son, ou de la vidéo, sont inclus dans l’IHM)
+Le but est de rendre l’IHM aussi adaptable que possible en proposant des alternatives.
-— Anxiété, trouble panique
-— …
+Bien qu'il soit difficile de créer une IHM 100% accessible, l'objectif est de s’en rapprocher.
-Solutions
-Le but est de rendre l’IHM adaptable, en proposant des alternatives. Il est souvent difficile de rendre une IHM 100% accessible, quelle que soit la nature du handicap. Le but est tout de même 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
+  * Contraste des couleurs
-— Taille d’écriture
+  * Taille d’écriture
-— Texte explicatif derrière les images
+  * Texte explicatif derrière les images
-— Lecteurs d’écran
+  * Lecteurs d’écran
-— …
+  * …
 Il existe de nombreux sites, et aussi des outils, qui permettent d’aider à l’accessibilité et de la contrôler.
-D. Adaptabilité ergonomique
-On parle d’interface "responsive".
+===== Adaptabilité ergonomique =====
+On parle d’interface **responsive**.
+{{ :bloc1:gui_05.png?400 |}}