-   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

Respecter les habitudes de l'utilisateur

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 de style - références

... ... ...

(Guides) - (Interactions) => Fenêtre => Icône => Menu => Curseur => Bouton => Liste => Groupe => Autres => Retour => (Tâches)

Les types d'interaction

u Quel type d'interaction pour quelle commande ?

  11_—

WIMP - Windows, Icons, Menus, Pointers Multifenêtrage

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

Fenêtres non modales

u  on peut passer de la fenêtre de dialogue à  la fenêtre principale

u  l'utilisateur peut abandonner

Types de fenêtres

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

Fenêtres de documents

u  1 instance de l'application par document

u  adapté au multi écran

u  fenêtres filles : les documents

u  indication de progression ₁₅—

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  arbitraire¹⁸₄₇^—

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  …

Boutons pour exécuter une action

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

Boutons pour faire un choix

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

Listes pour regrouper des items

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é)

Organisation de la fenêtre

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é…

Intitulés des composants

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

Skeuomorphisme

u  Définition

u  le graphisme des objets numériques imite l'esthétique des objets physiques
 

Les tâches de l'interaction graphique

u Quels composants graphiques pour quelle tâche ?

Tâche de déclenchement

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                                                                                   

Tâche de sélection

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

Tâche de défilement

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

Respecter les habitudes de l'utilisateur

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 de style - références

... ... ...

(Guides) - (Interactions) => Fenêtre => Icône => Menu => Curseur => Bouton => Liste => Groupe => Autres => Retour => (Tâches)

Les types d'interaction

u Quel type d'interaction pour quelle commande ?

  11_—

WIMP - Windows, Icons, Menus, Pointers Multifenêtrage

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

Fenêtres non modales

u  on peut passer de la fenêtre de dialogue à  la fenêtre principale

u  l'utilisateur peut abandonner

WIMP - Windows, Icons, Menus, Pointers

Types de fenêtres

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

Fenêtres de documents

u  1 instance de l'application par document

u  adapté au multi écran

u  fenêtres filles : les documents

u  indication de progression ₁₅—

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  arbitraire¹⁸₄₇^—

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  …

Boutons pour exécuter une action

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

Boutons pour faire un choix

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

Listes pour regrouper des items

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é)

Organisation de la fenêtre

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é…

Intitulés des composants

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

 

Skeuomorphisme

u  Définition

u  le graphisme des objets numériques imite l'esthétique des objets physiques
 

Les tâches de l'interaction graphique

u Quels composants graphiques pour quelle tâche ?

Tâche de déclenchement

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                                                                                   

 

Tâche de sélection

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

Tâche de défilement

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.