- Cours Conception
- TD en équipes
- Vidéo en équipes
- 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
- Cours Critères d'évaluation généraux
- TP évaluation ergo avec JADE
- Cours Critères d'évaluation Web
- TP noté évaluation ergonomique Web - Cours Critères d'évaluation mobile
- TP évaluation ergo. mobile avec JADE
- Cours Critères d'évaluation Handicap
u Problèmes
u mémoire limitée (capacité, durée)
u usages intermittents
u Risques
u l'utilisateur est perdu, perd du temps, abandonne la tâche
u exemple exagéré : ...
u Solutions
u faciliter la prise en main
u simplifier interface et interactions
u s'appuyer sur ce que l'utilisateur connaît déjà
u la vraie vie : langages, métaphores
u les autres logiciels : guides de style
Guides de style (guidelines)
u Principe
... ... ...
(Guides) - (Interactions) => Fenêtre => Icône => Menu => Curseur => Bouton => Liste => Groupe => Autres => Retour => (Tâches)
u Quel type d'interaction pour quelle commande ?
11—
u Fenêtre inactive/active (focus)
u Multifenêtrage avec superposition
u à éviter
u inconvénients
u informations masquées
u temps d'accès aux fenêtres masquées
u Fenêtres modales u
u on doit fermer la fenêtre pour retourner à la fenêtre principale
u obligatoire quand la commande
u on peut passer de la fenêtre de dialogue à la fenêtre principale
u l'utilisateur peut abandonner
WIMP - Windows, Icons, Menus, Pointers |
u Fenêtres d'applications u
u MDI : Multiple Document Interface
u 1 unique instance de l'application
u fenêtre principale : espace de travail
u 1 instance de l'application par document
u adapté au multi écran
u fenêtres filles : les documents
u indication de progression 15—
u Fenêtre/boîte de dialogue (lié à une action de l'utilisateur)
u pour l'interaction entre le système et l'utilisateur
u séparation (temps et lieu) entre spécification et exécution de la commande
u fenêtres modales
u groupes nommés mieux que succession de dialogues
u boutons
u pas plus de 5
u au moins OK, Annuler (+ Aide)
u Annuler : aucune entrée faite sur le dialogue ne doit être prise en compte
u contrôle des saisies
u Fenêtre de dialogue : ordre des boutons
u Icônes : symbole graphique interactif
u fenêtres "iconisées"
u objets, parfois associés à un état
u corbeille, disques
u applications
u documents, dossiers
u actions
u enregistrer , lancer la reconnaissance vocale
u Association représentation graphique / signification
u ressemblance
u description
u exemple
u métaphore
u analogie (couper = ciseaux)
u symbole
u arbitraire1847—
u Utilisation des icônes
u pour libérer l'espace
u Menu
u détachable (tear-off)
u contenant généralement une palette qui se transforme en fenêtre utilitaire
u Règles pour les barres de menus
u Règles pour les items de menu
u au moins 2 items par menu
u sinon autre composant ou autre répartition
u libellé possible en plusieurs mots (max 4) u groupement : séparateurs
u items regroupés et séparés par un trait horizontal u prendre en compte
u thématique, fréquence d'usage, ordre d'utilisation, (ordre alphabétique)
, Menus, Pointers
u Dispositifs de pointage (souris, trackball, joysticks…) u Curseurs
u curseur différent → action différente
u positionnement
u positionnement dans un texte
u attente
u lien hypertexte, objet cliquable
u déplacement
u redimensionnement
u …
u Bouton poussoir
u pour exécuter une action
u bouton d'action, boutons graphiques d'une barre d'outils
u effet 3D
u différents états
u 1 à 2 positions stables
u relâché
u dans certains cas enfoncé : palette affichée
u Bouton radio
u pour faire un choix parmi n alternatives exclusives
u cocher un bouton enlève le choix antérieur
u n positions possibles dans un groupe de n boutons radio
u Interrupteur à bascule / à glissière
u pour faire un choix parmi 2 alternatives exclusives
u 2 positions stables : activé / non activé
u Case à cocher
u pour sélectionner n options non exclusives u chaque case est une bascule à n positions
u n=2 : cochée / non cochée
u n=3 : cochée / non cochée / partiellement coché
u Version adaptée aux menus / version graphique
u Le composant doit être adapté à l'usage
u L'élément à cocher est à gauche du texte descriptif
u Liste (fort encombrement)
u paramètres : (par défaut)
u Liste arborescente (encombrement modulable)
u contenu hiérarchisé
u choix du contenu affiché ( déployé)
u Boîte de regroupement / conteneurs
u pour regrouper cases à cocher, boutons radio…
u nommer les groupes
u Barre de séparation
u pour matérialiser des (sous-)groupes
u Volets
u redimensionnables (et déplaà§ables)
u pour laisser l'utilisateur organiser l'écran
u Classeur à onglets
u pour regrouper dans un classeur
u des informations structurées en pages
u étiquetées dans un onglet
u Boutons concernant toute la fenêtre
u à l'extérieur des regroupements
u Zones de saisie mono-ligne
u texte sur une seule ligne
u correspondant à 1 unité d'information
u Zones de saisie multi-lignes
u (redimensionnable)
u (barre de défilement)
u Attention à adapter au besoin
u type (mono/multi-ligne)
u dimensions
u contraintes
u format
u nombre de caractères max.
u pour ajuster une valeur initiale (précisément)
u par incrément ou décrément : min / max / pas
u (éventuellement par saisie)
u Sélecteurs : glissière / potentiomètre
u pour sélectionner une valeur (peu précisément)
u (éventuellement avec affichage de la valeur)
u Lien hypertexte
u texte cliquable
u généralement associé à une URI
u liens visités affichés différemment
u Tableau/grille
u organisation visuelle à 2 dimensions
u pour structurer des données
(texte, composants)
u lignes, colonnes, en-têtes
u Indicateur de progression
u taux d'avancement graphique
u organisation visuelle à 2 dimensions
u attention au cas de la naissance
u relâché/enfoncé
u coché/non coché…
u étiquette
u texte pertinent
u non éditable non interactif
u associé à certains composants
u menu, item de menu, bouton, etc.
u pour décrire l'IHM (titres par exemple)
u Complétée par
u icônes
u … après l'intitulé : l'activation ouvre un dialogue
u accélérateurs : Alt + caractère souligné
u raccourcis (respecter les conventions) : Fx / Ctrl / Cmd
u variable (modifiable) : ajout/suppression d'éléments
u Définition
u le graphisme des objets numériques imite l'esthétique des objets physiques
u Quels composants graphiques pour quelle tâche ?
u Boutons
u attention à la surcharge de l'écran
u Menus
u si un nombre suffisant de fonctionnalités
u Glisser - déposer
u glisser - lâcher, glisser - déplacer, drag and drop
u l'action dépend de la source et de la destination
u glisser - déposer un fichier sur un même disque : déplacement
u glisser - déposer un fichier sur des disques différents : copie
➢ pas grand public
u Choix d'un élément dans un ensemble
u boutons radio
u interrupteurs
u liste déroulante
u liste avec sélection simple
u Choix de plusieurs éléments dans un ensemble
u cases à cocher
u liste avec sélection multiple (pas grand public)
u par ajout/retrait (ctrl)
u par intervalle (shift)
u liste double (pas grand public)
u Choix d'un fichier
u Barre de défilement (ascenseur)
u verticale ou/et horizontale
u ne pas combiner les barres de défilement
u défilement manuel
u 1 unité d'information, 1 page écran, en % du document
u défilement automatique
u si modification de la quantité d'information u affichage des barres
u si inutile : jamais
u si (parfois) utile
u toujours visible
u activé si besoin (grisé sinon) à°
u solution complémentaire
u interface adaptable (responsive)
u Spécification d'ordre u Spécification d'arguments
u listes modifiables u boîtes de dialogue
u Poignées de manipulation
u laisser la possibilité de redimensionner
u fenêtres
u dessins, images
u redimensionnement
u suivant un axe
u proportionnellement : shift (pas grand public)
u concentriquement : maj (pas grand public)
46— 47
Exemple de rédaction :
La position de la barre d'état de PhotoScape
u Problème
u La barre d'état est placée au dessus de la boîte à onglets des outils.
u En quoi c'est une erreur ergonomique, de quel type (quel concept) ?
u Les guides de style imposent qu'elle soit positionnée en bas de la fenêtre.
u Risque pour l'utilisateur
u 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.
u Solution proposée
u Il convient de placer la barre d'état sous les outils, tout en bas de la fenêtre, sur toute sa largeur.
- Cours Conception
- TD en équipes
- Vidéo en équipes
- 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
- Cours Critères d'évaluation généraux
- TP évaluation ergo avec JADE
- Cours Critères d'évaluation Web
- TP noté évaluation ergonomique Web - Cours Critères d'évaluation mobile
- TP évaluation ergo. mobile avec JADE
- Cours Critères d'évaluation Handicap
u Problèmes
u mémoire limitée (capacité, durée)
u usages intermittents
u Risques
u l'utilisateur est perdu, perd du temps, abandonne la tâche
u exemple exagéré : ...
u Solutions
u faciliter la prise en main
u simplifier interface et interactions
u s'appuyer sur ce que l'utilisateur connaît déjà
u la vraie vie : langages, métaphores
u les autres logiciels : guides de style
Guides de style (guidelines)
u Principe
... ... ...
(Guides) - (Interactions) => Fenêtre => Icône => Menu => Curseur => Bouton => Liste => Groupe => Autres => Retour => (Tâches)
u Quel type d'interaction pour quelle commande ?
11—
u Fenêtre inactive/active (focus)
u Multifenêtrage avec superposition
u à éviter
u inconvénients
u informations masquées
u temps d'accès aux fenêtres masquées
u Fenêtres modales u
u on doit fermer la fenêtre pour retourner à la fenêtre principale
u obligatoire quand la commande
u on peut passer de la fenêtre de dialogue à la fenêtre principale
u l'utilisateur peut abandonner
WIMP - Windows, Icons, Menus, Pointers |
u Fenêtres d'applications u
u MDI : Multiple Document Interface
u 1 unique instance de l'application
u fenêtre principale : espace de travail
u 1 instance de l'application par document
u adapté au multi écran
u fenêtres filles : les documents
u indication de progression 15—
u Fenêtre/boîte de dialogue (lié à une action de l'utilisateur)
u pour l'interaction entre le système et l'utilisateur
u séparation (temps et lieu) entre spécification et exécution de la commande
u fenêtres modales
u groupes nommés mieux que succession de dialogues
u boutons
u pas plus de 5
u au moins OK, Annuler (+ Aide)
u Annuler : aucune entrée faite sur le dialogue ne doit être prise en compte
u contrôle des saisies
u Fenêtre de dialogue : ordre des boutons
u Icônes : symbole graphique interactif
u fenêtres "iconisées"
u objets, parfois associés à un état
u corbeille, disques
u applications
u documents, dossiers
u actions
u enregistrer , lancer la reconnaissance vocale
u Association représentation graphique / signification
u ressemblance
u description
u exemple
u métaphore
u analogie (couper = ciseaux)
u symbole
u arbitraire1847—
u Utilisation des icônes
u pour libérer l'espace
u Menu
u détachable (tear-off)
u contenant généralement une palette qui se transforme en fenêtre utilitaire
u Règles pour les barres de menus
u Règles pour les items de menu
u au moins 2 items par menu
u sinon autre composant ou autre répartition
u libellé possible en plusieurs mots (max 4) u groupement : séparateurs
u items regroupés et séparés par un trait horizontal u prendre en compte
u thématique, fréquence d'usage, ordre d'utilisation, (ordre alphabétique)
, Menus, Pointers
u Dispositifs de pointage (souris, trackball, joysticks…) u Curseurs
u curseur différent → action différente
u positionnement
u positionnement dans un texte
u attente
u lien hypertexte, objet cliquable
u déplacement
u redimensionnement
u …
u Bouton poussoir
u pour exécuter une action
u bouton d'action, boutons graphiques d'une barre d'outils
u effet 3D
u différents états
u 1 à 2 positions stables
u relâché
u dans certains cas enfoncé : palette affichée
u Bouton radio
u pour faire un choix parmi n alternatives exclusives
u cocher un bouton enlève le choix antérieur
u n positions possibles dans un groupe de n boutons radio
u Interrupteur à bascule / à glissière
u pour faire un choix parmi 2 alternatives exclusives
u 2 positions stables : activé / non activé
u Case à cocher
u pour sélectionner n options non exclusives u chaque case est une bascule à n positions
u n=2 : cochée / non cochée
u n=3 : cochée / non cochée / partiellement coché
u Version adaptée aux menus / version graphique
u Le composant doit être adapté à l'usage
u L'élément à cocher est à gauche du texte descriptif
u Liste (fort encombrement)
u paramètres : (par défaut)
u Liste arborescente (encombrement modulable)
u contenu hiérarchisé
u choix du contenu affiché ( déployé)
u Boîte de regroupement / conteneurs
u pour regrouper cases à cocher, boutons radio…
u nommer les groupes
u Barre de séparation
u pour matérialiser des (sous-)groupes
u Volets
u redimensionnables (et déplaà§ables)
u pour laisser l'utilisateur organiser l'écran
u Classeur à onglets
u pour regrouper dans un classeur
u des informations structurées en pages
u étiquetées dans un onglet
u Boutons concernant toute la fenêtre
u à l'extérieur des regroupements
u Zones de saisie mono-ligne
u texte sur une seule ligne
u Zones de saisie multi-lignes
u (redimensionnable)
u (barre de défilement)
u Attention à adapter au besoin
u type (mono/multi-ligne)
u dimensions
u contraintes
u format
u nombre de caractères max.
u pour ajuster une valeur initiale (précisément)
u par incrément ou décrément : min / max / pas
u (éventuellement par saisie)
u Sélecteurs : glissière / potentiomètre
u pour sélectionner une valeur (peu précisément)
u (éventuellement avec affichage de la valeur)
u Lien hypertexte
u texte cliquable
u généralement associé à une URI
u liens visités affichés différemment
u Tableau/grille
u organisation visuelle à 2 dimensions
u pour structurer des données
(texte, composants)
u lignes, colonnes, en-têtes
u Indicateur de progression
u taux d'avancement graphique
u organisation visuelle à 2 dimensions
u attention au cas de la naissance
u relâché/enfoncé
u coché/non coché…
u étiquette
u texte pertinent
u non éditable non interactif
u associé à certains composants
u menu, item de menu, bouton, etc.
u pour décrire l'IHM (titres par exemple)
u Complétée par
u icônes
u … après l'intitulé : l'activation ouvre un dialogue
u accélérateurs : Alt + caractère souligné
u raccourcis (respecter les conventions) : Fx / Ctrl / Cmd
u variable (modifiable) : ajout/suppression d'éléments
u Définition
u le graphisme des objets numériques imite l'esthétique des objets physiques
u Quels composants graphiques pour quelle tâche ?
u Boutons
u attention à la surcharge de l'écran
u Menus
u si un nombre suffisant de fonctionnalités
u Glisser - déposer
u glisser - lâcher, glisser - déplacer, drag and drop
u l'action dépend de la source et de la destination
u glisser - déposer un fichier sur des disques différents : copie
➢ pas grand public
u Choix d'un élément dans un ensemble
u boutons radio
u interrupteurs
u liste déroulante
u liste avec sélection simple
u Choix de plusieurs éléments dans un ensemble
u cases à cocher
u liste avec sélection multiple (pas grand public)
u par ajout/retrait (ctrl)
u par intervalle (shift)
u liste double (pas grand public)
u Choix d'un fichier
u Barre de défilement (ascenseur)
u verticale ou/et horizontale
u ne pas combiner les barres de défilement
u défilement manuel
u 1 unité d'information, 1 page écran, en % du document
u défilement automatique
u si modification de la quantité d'information u affichage des barres
u si inutile : jamais
u si (parfois) utile
u toujours visible
u activé si besoin (grisé sinon) à°
u solution complémentaire
u interface adaptable (responsive)
u Spécification d'ordre u Spécification d'arguments
u listes modifiables u boîtes de dialogue
u Poignées de manipulation
u laisser la possibilité de redimensionner
u fenêtres
u dessins, images
u redimensionnement
u suivant un axe
u proportionnellement : shift (pas grand public)
u concentriquement : maj (pas grand public)
46— 47
Exemple de rédaction :
La position de la barre d'état de PhotoScape
u Problème
u La barre d'état est placée au dessus de la boîte à onglets des outils.
u En quoi c'est une erreur ergonomique, de quel type (quel concept) ?
u Les guides de style imposent qu'elle soit positionnée en bas de la fenêtre.
u Risque pour l'utilisateur
u Solution proposée
u Il convient de placer la barre d'état sous les outils, tout en bas de la fenêtre, sur toute sa largeur.