[PDF] Cours de Recommandations ergonomiques et Guides de Style - Cours Ergonomie

et guides de style

Stéphanie Jean-Daubias Stephanie.Jean-Daubias@univ-lyon1.fr http://liris.cnrs.fr/stephanie.jean-daubias/

INFO

L3

• CoursIntroduction l’IHM

• CoursConception • TD en équipes • Vidéo en équipes Conception

• CoursProg d’interfaces • TP projet partie interface • CoursProg d’interactions • TP projet partie interactions

Programmation

pour l’IHM • Cours Théories générales pour l’ergo_{• TP évaluation ergo théories avec JADE}

• Cours Éléments d’IHM – guides de style

• TP rapport d’évaluation ergonomique • CoursCritères d’évaluation généraux • TP évaluation ergo avec JADE

• CoursCritères d’évaluation Web

• TP noté évaluation ergonomique Web • CoursCritères d’évaluation mobile • TP évaluation ergo. mobile avec JADE • CoursCritères d’évaluation Handicap Ergonomie

• TP finalisation ergo projet • TD évaluation globale JADE • Vidéo pédagogique en équipes • TP éval croisée projet

Préparation de l’examen

—



_{Les composants de l’interface graphique (guides de style)}



Les tâches de l’interaction graphique



_Problèmes

 _{mémoire limitée (capacité, durée)}  _{usages intermittents}



_Risques

 _{l’utilisateur est perdu, perd du temps, abandonne la tâche}  _{exemple exagéré : https://userinyerface.com/}



_Solutions

 faciliter la prise en main

 simplifier interface et interactions

 s’appuyer sur ce que l’utilisateur connaît déjà

 la vraie vie : langages, métaphores

—



_Principe

 _{spécificités à respecter pour concevoir des IHM pour un OS donné}

 _{aspect des interfaces}

 _{fonctionnement des interactions}  _{différents niveaux de granularité}



_Avantages

 régularités entre applications

 apprentissage et utilisation facilités

 intégrés dans les env. de développement



Limites

 _{spécifique à un système d’exploitation / à une version}

 _{≠ recommandations ergonomiques, mais respect des recommandations}



Windows

 https://developer.microsoft.com/fr-fr/windows/design 

_MacOs

 https://developer.apple.com/library/content/documentation/Use rExperience/Conceptual/OSXHIGuidelines 

_iOS

 https://developer.apple.com/ios/human-interface-guidelines



Linux (+ window manager)

 http://design.ubuntu.com



_Android

 https://developer.android.com/guide/practices/ui_guidelines



_{Android Wear}

https://designguidelines.withgoogle.com/wearos/wear-os-by-—



_{Les composants de l’interface graphique (guides de style)}



Les tâches de l’interaction graphique

—



_{Langage (semi)naturel}

 _{dictée de SMS, de comptes-rendus médicaux}

 _{commandes simples : Quelle température fait-il ?, Morceau suivant}



_{Langage de commande}

_(expert)

 _{configuration, programmation}



_Menus

 besoin de visualiser les commandes potentielles



Formulaires

 _{interrogation de l’utilisateur par le système,}

saisie d’informations nombreuses



_Requêtes

 _{interrogation du système par l’utilisateur}



_{Manipulation directe}

_{, interaction tactile (grand public)}



_{Les composants de l’interface graphique (guides de style)}



Les tâches de l’interaction graphique

—

Fenêtres : vocabulaire

11 barre de titre barre de menu barres d’outils /ruban barre d’état fenêtre

Multifenêtrage



_{Fenêtre inactive/active (focus)}



_{Multifenêtrage avec superposition}

 _{à éviter}

 _{inconvénients}

 informations masquées

 _{temps d’accès aux fenêtres masquées}  via la barre des tâches



_{Multifenêtrage sans superposition}

 _mosaïque

fenêtre inactive fenêtre

—



_{Fenêtres modales}

 _{on doit fermer la fenêtre pour}

retourner à la fenêtre principale

 _{obligatoire quand la commande}

en cours ne peut être suspendue

+ déplaçable pour laisser

l’utilisateur voir la tâche amont

13



_{Fenêtres non modales}

 _{on peut passer de la fenêtre de}

dialogue à la fenêtre principale

 _{l’utilisateur peut abandonner}

Types de fenêtres



Fenêtres d’applications

 _{MDI : Multiple Document Interface}  _{1 unique instance de l’application}  _{fenêtre principale : espace de travail}  _{fenêtres filles : les documents}



Fenêtres de documents

 _{1 instance de l’application}

par document

—

Fenêtres utilitaires



_{Fenêtre flottante}

 _{palette d’outils}

 _{barres d’outils flottantes}



_{Fenêtre jaillissante (pop-up)}

à l’initiative du système

 bulle d’aide / info-bulle

 _{informations contextuelles}

 _{messages (différents types)}

 _{question, information, avertissement, erreur bloquante}



_{Fenêtre/boîte de dialogue (lié à une action de l’utilisateur)}

 _{pour l’interaction entre le système et l’utilisateur}  _{séparation (temps et lieu) entre spécification}

et exécution de la commande

 _{fenêtres modales}

 _{groupes nommés mieux que}

succession de dialogues

 _boutons

 pas plus de 5

 _{au moins OK, Annuler (+ Aide)}

 Annuler : aucune entrée faite sur le dialogue ne doit être prise en compte  contrôle des saisies

—



_{Fenêtre de dialogue : ordre des boutons}

 _{respect des guides de style}

 _{mais problème sur le web…}  l’ordre dépend du client !

17



_{Icônes : symbole graphique interactif}

 _{fenêtres "iconisées"}

 _{objets, parfois associés à un état}

 _{corbeille, disques}  _applications

 _{documents, dossiers}

 _actions

 enregistrer , lancer la reconnaissance vocale



_{Association représentation graphique / signification}

 _ressemblance  _description  _exemple  _métaphore d’ in ter pr ét at ion

—



_{Utilisation des icônes}

 _{pour libérer l’espace}

 _{pour des commandes fréquentes}  _{associée à un libellé}

 _{intégré à un bouton, un menu}

 _{limiter leur nombre (12 au mieux, 20 max)}



_{Inconvénients}

 _{difficulté de compréhension}  _pérennité



Solutions

 tester les représentations

 bulles d’aide, icônes + texte



_Menu

 _{ensemble d’items}

 _{liste de commandes déclenchées par un clic}

 _{mise en évidence (surbrillance) de l’option choisie}



_Types

 _déroulant

 _{à partir d’un point d’entrée}

 contextuel (pop-up)

 _{à partir de la position du curseur}

—



_{Caractéristiques}

 _{hiérarchique}

 _{indiqué par }

 _{pour regrouper des sous-items}  _{1 seul sous-niveau}

 détachable (tear-off)

 _{contenant généralement une palette}

qui se transforme en fenêtre utilitaire



_{Règles pour les barres de menus}

 _{entre 2 et 7 menus}

 _{sinon autre composant}

ou autre répartition

—



_{Règles pour les items de menu}

 _{au moins 2 items par menu}

 _{sinon autre composant}

ou autre répartition

 _{libellé possible en plusieurs mots (max 4)}  _{groupement : séparateurs}

 _{items regroupés et séparés}

par un trait horizontal

 _{prendre en compte}

 thématique, fréquence d’usage,

ordre d’utilisation, (ordre alphabétique)



_{Dispositifs de pointage (souris, trackball, joysticks…)}



_Curseurs

 _{curseur différent → action différente}  _{positionnement}

 _{positionnement dans un texte}  _attente

 _{lien hypertexte, objet cliquable}  _déplacement

 _{redimensionnement}

—



_{Bouton poussoir}

 _{pour exécuter une action}

 _{bouton d’action, boutons graphiques d’une barre d'outils}  _{effet 3D}

 _{différents états}

 _{1 à 2 positions stables}

 _relâché

 _{dans certains cas enfoncé : palette affichée}



Bouton radio

 _{pour faire un choix parmi n alternatives exclusives}  cocher un bouton enlève le choix antérieur

 _{n positions possibles dans un groupe de n boutons radio}



_{Interrupteur à bascule / à glissière}

 _{pour faire un choix parmi 2 alternatives exclusives}  2 positions stables : activé / non activé



_{Case à cocher}

 _{pour sélectionner n options non exclusives}  _{chaque case est une bascule à n positions}

 n=2 : cochée / non cochée

 n=3 : cochée / non cochée / partiellement coché

—



_{Liste (fort encombrement)}

 _{contenu ordonné affiché en permanence (3 à 8 éléments)}  _{éventuellement items masqués + barre de défilement}  _{sélection simple ou multiple (ctrl/shift/cases à cocher)}



_{Liste déroulante (faible encombrement)}

 _{valeur choisie toujours visible (un seul élément)}  _{contenu exhaustif visible après un clic sur la flèche}

 _{valeur éventuellement éditable (sélection ou saisie directe)}  _{choix facultatif : (aucun)}

 _{paramètres : (par défaut)}



_{Liste arborescente (encombrement modulable)}

 contenu hiérarchisé

 _{choix du contenu affiché ( déployé)}



_{Boîte de regroupement / conteneurs}

 _{pour regrouper cases à cocher, boutons radio…}  _{nommer les groupes}



_{Barre de séparation}

 _{pour matérialiser des (sous-)groupes}



_Volets

 redimensionnables (et déplaçables)

 pour laisser l’utilisateur organiser l’écran



Classeur à onglets

 _{pour regrouper dans un classeur}

—



_{Zones de saisie mono-ligne}

 _{texte sur une seule ligne}

 _{correspondant à 1 unité d’information}



_{Zones de saisie multi-lignes}

 _{(redimensionnable)}  _{(barre de défilement)}



_{Attention à adapter au besoin}

 type (mono/multi-ligne)

 dimensions

 contraintes

 format

 _{nombre de caractères max.}



_{Champ obligatoire}

 _{informer à l’avance : marquer d’un astérisque}



_{Formats acceptés}

 _{texte, numérique, adresse mél…}

 mot de passe : masqué

 empêcher certaines saisies

 _{mettre en place des filtres}

 _informer

 donner le format à respecter

 _{donner un exemple qui reste visible (placeholder)}



_{Vérifier la conformité}

—



_{Molette d’incrément}

 _{pour ajuster une valeur initiale (précisément)}  _{par incrément ou décrément : min / max / pas}  _{(éventuellement par saisie)}



_{Sélecteurs : glissière / potentiomètre}

 _{pour sélectionner une valeur (peu précisément)}  _{(éventuellement avec affichage de la valeur)}  _{2 types}

 _{sélecteur rotatif : potentiomètre}  _{sélecteur rectiligne : glissière}



_{Lien hypertexte}

 texte cliquable

 généralement associé à une URI

 liens visités affichés différemment



Tableau/grille

 organisation visuelle à 2 dimensions

 _{pour structurer des données}

(texte, composants)

 _{lignes, colonnes, en-têtes}



_{Indicateur de progression}

 taux d’avancement graphique

—



_{Différents états du point de vue du système}

 activable → normal

 _{activable avec focus}  _activé

 _{inactif / non activable}

 _{intitulé grisés (ex : copier sans sélection)}  _{mais PAS effacés ou déplacés}

 _{(personnaliser → experts uniquement)}



_{Différentes positions (stables) du point de vue de l’utilisateur}

 _{relâché/enfoncé}  _{coché/non coché…}



_Étiquette

 _{texte pertinent}

 _{non éditable non interactif}  _{associé à certains composants}

 _{menu, item de menu, bouton, etc.}

 pour décrire l’IHM (titres par exemple)



Complétée par

 _icônes

 _{… après l’intitulé : l’activation ouvre un dialogue}  _{accélérateurs : Alt + caractère souligné}

—



_Collection

 _{d’items d’une liste, d’un menu}  _{de cellules d’un tableau}

 _{de boutons radio}  _{de cases à cocher}



_Séparateur

 _{groupes / intitulés}



Cardinal

 fixe (non modifiable)

 variable (modifiable) : ajout/suppression d’éléments



_Menu/liste

 _{ligne sélectionnée} 

_{Saisie de texte}

 _curseur 

_Attente

 changement de curseur



Sélection d’un objet

 _poignées



_{Sélection de texte}

 _{surbrillance (inversion vidéo)}

—



_Définition

 _{le graphisme des objets numériques}

imite l’esthétique des objets physiques

✓

Les composants de l’interface graphique (guides de style)



Les tâches de l’interaction graphique

—



_{Quels composants graphiques pour quelle tâche ?}



_Boutons

 _{attention à la surcharge de l’écran}



_Menus

 _{si un nombre suffisant de fonctionnalités}



_{Glisser - déposer}

 glisser - lâcher, glisser - déplacer, drag and drop

 l’action dépend de la source et de la destination

 _{glisser - déposer un fichier sur un même disque : déplacement}  _{glisser - déposer un fichier sur des disques différents : copie} ➢ _{pas grand public}

—



_{Saisie de texte}

 _{zone de saisie}  _{+ clavier (virtuel)}



_{Saisie de quantités / valeurs numériques}

 _{zone de saisie}

 _{sélecteur ou molette}  _{+ souris/clavier}



Attention

 associer une étiquette

 préciser l’unité, le format

 utiliser les valeurs par défaut intelligemment



Saisie de positions, de tracés

 _pointage



_{Choix d’}

_{un élément}

_{dans un ensemble}

 _{boutons radio}  _{interrupteurs}  _{liste déroulante}

 _{liste avec sélection simple}



_{Choix de}

_{plusieurs éléments}

_{dans un ensemble}

 _{cases à cocher}

 _{liste avec sélection multiple (pas grand public)}

 _{par ajout/retrait (ctrl)}  _{par intervalle (shift)}

 _{liste double (pas grand public)}

—



_{Barre de défilement (ascenseur)}

 _{verticale ou/et horizontale}

 _{ne pas combiner les barres de défilement}  _{défilement manuel}

 _{1 unité d’information, 1 page écran,}

en % du document

 _{défilement automatique}

 si modification de la quantité d’information

 _{affichage des barres}

 _{si inutile : jamais}  _{si (parfois) utile}

 toujours visible

 activé si besoin (grisé sinon)   _{solution complémentaire}

 _{interface adaptable (responsive)}



_{Spécification d’ordre}

 _{listes modifiables}



_{Spécification d’arguments}

 _{boîtes de dialogue}

 _{boîtes de propriétés}

—



_{Poignées de manipulation}

 _{laisser la possibilité de redimensionner}

 _fenêtres  _{dessins, images}  _{redimensionnement}  _{suivant un axe}  horizontal  vertical

 _{suivant les deux axes à la fois}

 proportionnellement : shift (pas grand public)  concentriquement : maj (pas grand public)

1.

Tester (en faisant des erreurs)

2.

Observer les utilisateurs

3.

Croiser les sources

(guides de style, critères ergonomiques…) 4.

Faire des arbitrages, trouver un équilibre

5.

Rédiger un rapport d’évaluation ergonomique

 diplomatique (attention aux formulations)

 constructif (proposer des solutions)

—

 _Problème

 La barre d’état est placée au dessus de la boîte à onglets des outils.

 _{En quoi c’est une erreur ergonomique, de quel type (quel concept) ?}  Les guides de style imposent qu’elle soit positionnée en bas de la fenêtre.  _{Risque pour l’utilisateur}

 Par habitude (mémoire à long terme), l’utilisateur cherchera la barre d’état en

bas de la fenêtre et risque de ne pas trouver les informations dont il a besoin.

 _{Solution proposée}  Il convient de placer

la barre d’état sous

les outils, tout en

bas de la fenêtre, sur toute sa largeur.

✓

Les types d’interaction



_{choisir les types d’interaction les plus adaptés}

✓

Les composants de l’interface graphique (guides de style)



respecter les repères de utilisateurs pour faciliter l’usage

✓

Les tâches de l’interaction graphique



_{associer au mieux composants et interactions}