SEG 3520 Conception et analyse des interfaces usagers

1
SEG 3520Conception et analyse des interfaces
usagers

• Prof. Dr.-Ing. Abdulmotaleb El Saddik
• University of Ottawa (SITE 5-037)
• [phone] x 6277
• elsaddik _at_ site.uottawa.ca
• abed _at_ mcrlab.uottawa.ca
• http//www.site.uottawa.ca/elsaddik/

2
Unité A Introduction à HCI

1. Pourquoi étudier le design dinterfaces usagers ?
   
2. Histoire
3. Buts de HCI
4. Cinq idée clés dans HCI
5. Illusions optiques
6. Comprendre les utilisateurs
7. Productivité de lutilisateur
8. Disciplines contribuant à HCI
9. Ingénierie du HCI une branche du génie
   logiciel
10. Défauts de fonctionnements des UI
11. Études de cas défaillances dans une interface
    usager
12. Points clés à reviser

3
Définition

• L'étude des personnes et de lordinateur et leur
  influence les uns sur les autres
• Un ensemble de processus, dialogues et actions
  par lesquelles une personne utilise et interagit
  avec lordinateur
• Une discipline concernant la conception,
  l'évaluation et l'exécution de systèmes
  interactifs pour l'usage humain avec l'étude des
  phénomènes majeurs qui les entourent

4
1. Pourquoi étudier interface usagers?

• 75 ou plus des efforts de développement
  concernent les UI
• 40 à 70 est typique
• Spécialistes en conception dinterface sont
  nécessaires
• Tout le monde doit connaître les fondations sur
  lesquelles se basent le logiciel d'interface
  usagers
• Logiciel d'interface usagers devient plus
  compliqué
• La complexité des UI croît plus rapidement que
  d'autres aspects des systèmes
• Les interfaces usagers graphiques (GUI) ont fait
  le plus grand saut en terme de complexité
• Les applications tendent à grossir pour utiliser
  les ressources informatiques disponibles
• ? Il y a des avantages financiers directs à
  améliorer ses interfaces usagers

5
Avantages financiers et coûts pour améliorer des
interfaces usagers

• Augmente la productivité de lutilisateur
• Économie directe dargent
• Augmente les revenues des ventes
• Le système est plus attrayant et la satisfaction
  du client est plus grande
• Diminue le prix de support et denseignement
  (training)
• Le système est plus intuitif
• Diminue le prix de maintenance
• Le système fait ce que lutilisateur demande
• De nombreuses améliorations du système concernent
  lUI mieux vaut investir un peu au début que
  beaucoup après la distribution du produit.
• Mais
• Léquipe de développement doit connaître les
  bases de lanalyse et la conception dUI
• Les utilisateurs doivent participer au
  développement
• Des outils de conception d'UI sont nécessaires
• Les bénéfices sont presque toujours supérieurs
  aux coûts

6
2. Histoire

• Dans les premiers jours de lordinateur
• Les ordinateurs coûtaient plus que les
  programmeurs
• Les ordinateurs avaient peu de fonctionnalité
• ?UI nétait pas important
• Début des années 1970
• Man Machine Interface (MMI) est né
• Le terme est graduellement changé en User
  Interface (UI)
• Idées pour utiliser Graphical User Interface
  (GUI) pour la première fois ont été développées
• Dynabook at Xerox
• Fin 1970 et années 1980
• Produits sont appelés user friendly
• Termes non scientifiques il sagit seulement de
  marketing (marketing buzzword)
• Développement du premier vrai GUI
• Xerox Star --gt Smalltalk et Macintosh

7
2. Histoire (suite)

• Pendant les années 1980
• Le terme interaction Humain-Ordinateur (HCI
  pour Human-Computer Interaction) est né
• MS-Windows, X-Windows a suivi Mac
• Recherches intenses dans le domaine de HCI
• 1990 et début 2000
• Réalité virtuelle, sons et reconnaissance de la
  voix, entrées/sorties, etc.
• Bien!
• MAIS de mauvaises UI continuent à être
  développer!!!

8
3. Buts de HCI

• Améliorer la productivité et diminuer les coûts à
  travers
• Sûreté
• Est-ce que le système a prévu le danger?
• Fonctionnalité
• Combien des choses le système peut-il faire?
• Efficacité
• Combien de ressources a-t-on besoin pour terminer
  la tâche?
• Convivialité
• Est-il facile dapprendre à utiliser le système?
• Mais
• Haute fonctionnalité (plusieurs manières de faire
  la même chose) peut réduire la convivialité
• En causant de la confusion

9
4. Cinq idées clés dans HCI

• Visibilité
• UI doit toujours aider lutilisateur à
  comprendre...
• létat courant du système
• quelles opérations peuvent être réalisées
• par exemple
• En positionnant le curseur au-dessus d'un point
  sur l'écran, se quil se produira en cliquant
  avec la souris devrait être clair
• Plusieurs directives de design de l'unité E
  aideront à améliorer la visibilité
• Rétroaction (Feedback )
• Quand quelque chose change, ça devrait être
  évident
• quand vous supprimez un dossier, le système ne
  devrait pas simplement dire OK
• But (Goal)
• Un état que l'utilisateur veut atteindre
• parler avec quelqu'un au téléphone
• enregistrer un dossier

10
4. Five Key Ideas in HCI (Contd)

• Affordance
• Ensemble des opérations et des procédures qui
  peuvent être faites à un objet
• Perceived affordance est ce que les
  utilisateurs pensent qui peut être fait à un
  objet
• Faut-il tirer ou pousser la porte pour louvrir?
• Que signifie cette icône?
• Pour améliorer la visibilité / rétroaction
  (feedback), il faut
• Choisir les objets avec la bonne perception (a
  good Perceived affordance)
• Concevoir l'UI pour obtenir une meilleure
  perception
• tâche (Task)
• Une action que lutilisateur veut réaliser
• pour appeler quelqu'un
• pour enregistrer un dossier
• les buts engendrent des tâches, les tâches
  engendrent des buts.
• Unité C discute de lanalyse des tâches et
  donne des bon modèles conceptuels qui aideront à
  atteindre ceci

11
5. Illusions Optiques
12
5. Illusions Optiques (suite)

• The quick brown
• fox jumps over the
• the lazy dog.

13
5. Illusions Optiques (suite)

• Maintenant lisez la phrase suivante en comptant à
  voix haute les "F" à mesure que vous les
  rencontrez (1... 2... etc..).
• Comptez-les UNE FOIS SEULEMENT
• Ne revenez pas en arrière! ! !.
• OK - ALLEZ !

FINISHED FILES ARE THE RESULT OF YEARS OF
SCIENTIFIC STUDY COMBINED WITH THE EXPERIENCE OF
YEARS.
14
6. Comprendre Lutilisateur

• Théorie des doubles processeurs
• Chaque système interactif est un système
  distribué sexécutant sur deux processeurs
• La conception dinterfaces usagers précise /
  contraint
• Comportement des usagers
• Comportement du système
• Nous devons comprendre la nature des
  processeurs humains
• différent modes devraient être considérés en
  concevant l'UI

15
6. Comprendre lutilisateur (suite)

• Utilisateur peut être catégorisé par
• Par classe
• Déterminé par exemple par
• administrateur, étudiant, professeur, client
• Par type de personnalité
• timide / extraverti
• offensif / défensif
• designer!
• Par capacité
• Handicap physique
• --gt des I/O innovatives peuvent être nécessaires
• Daltonien (Colourblind)
• --gt ne pas seulement utiliser les couleurs pour
  transmettre de l'information
• Problèmes cognitifs
• --gt gauche vs droit !
• Illettrisme
• --gt utiliser des icônes
• Ignorance du domaine

16
7. Productivité de lutilisateur Convivialité

• Productivité de lutilisateur
• Fonctionnalité (quest-ce que lordinateur peut
  faire)
• Convivialité (quest-ce quon peut faire avec
  lordinateur)
• Si un des deux est zéro, le système est inutile
• Facteurs influençant la productivité de
  l'utilisateur
• le nombre et les caractéristiques des tâches
• Caractéristiques des utilisateurs (capacités,
  expérience etc...)
• Environnement de travail (distractions etc...)
• Formation et documentation
• Fonctionnalité et convivialité des logiciels et
  matériels disponibles

17
A Model of Usability Factors
18
Critical Usability Factors
High staff turnover Learnability critical
Discretionary use Fit to task critical
Prolonged or frequent use Efficiency critical
Creative use Ease of extension and customization critical
High functionality Higher usability needed
Infrequent discretionary use of highly functional system with staff turnover A problem!
19
8. Disciplines contribuant à HCI

• Psychologie cognitive
• Possibilités et limitations des sens et des
  processus humains
• Ergonomie
• Efficacité des logiciels et hardware et
  sûreté/sécurité de lenvironnement pour lusager
• Linguistique
• Syntaxe et sémantique des commandes
• Entrées/sorties de sons et voix
• Intelligence artificielle
• Entrées/sorties de sons et voix
• Estimation intelligente de ce que l'utilisateur
  veut
• Représentations des connaissance des utilisateurs
  
• Sociologie et psychologie sociale
• Assister des personnes pour travailler en groupes
  avec le logiciel
• Assurer que de logiciel fonctionne de la même
  façon dans différentes cultures
• Ingénierie et design industriel
• Approche basée sur les mesures
• Esthétique
• Story-board etc.

20
Système cognitif humain

• Perception et représentation
• Certains affichages peuvent être difficiles à
  comprendre
• Bleu avant-plan (foreground)
• Illusions doptiques
• Contrastent dans les couleurs
• Trop de couleurs
• Il y a 2 façons dutiliser les graphiques
• Pour la modélisation
• images directes des concepts
• Pour la codification
• représentant des idées fondamentales, par exemple
  montrer des données quantitatives

21
Système cognitif humain (suite)

• Distractions
• Personnes peuvent être distraits facilement
• Indiquer clairement les points importants
• Personnes peuvent être perdus si le système est
  très complexe
• Structurer linformation pour quelle soit facile
  à lire rapidement
• Pas trop dinformations
• Pas trop peu dinformations
• Groupez linformations logiquement
• Personnes multitâches
• Indiquer létat du système clairement pour que
  les usagers sy retrouvent facilement
• Certains processus mentaux sont automatiques, ou
  le deviennent (contrairement aux processus
  commandés)
• il est très difficile doublier ces processus

22
Système cognitif humain(suite)

• Limite de la mémoire
• La mémoire à court terme peut contenir 72 unités
  dinformation
• Eviter les situations où lutilisateur doit se
  rappeler plus
• Grouper linformation logiquement pour en faire
  des unités
• Plus cest significatif, plus cest facile à
  retenir (les éléments familiés, les images et
  l'uniformité aide à mieux comprendre)
• Utiliser des noms et des icônes efficaces
• Associer icônes et mots
• Les icônes peuvent être des analogies, des
  exemples ou des abstractions mais ne doivent pas
  être arbitraires
• Attention aux différences culturelles (par
  exemple le symbole indiquant des toilettes nest
  pas le même partout!)
• Les gens reconnaissent plus facilement quils ne
  se rappellent
• Utiliser des menus, des icônes

23
Quelques points dorganisation

• E-MAILS
• doit commencer avec
• SEG 3520 xxxxxxxxxxxxxxxx
• Est-ce que vous avez un/e associé(e) pour les
  projets?

24
Quelque points dorganisation

• Les TAs sont
• Anwar Hossein
• anwar_at_mcrlab.uottawa.ca
• Yong Zhong
• zhong_at_mcrlab.uottawa.ca
• IMPORTANT pour Devoir 1
• Vous névaluez pas les humains (usagers)
• Vous évaluez SEULEMENT le logiciel pour trouver
  les défauts de fonctionnement
• Noubliez pas de signer Informed Consent Form

25
9. Ingénierie du HCI une branche du génie
logiciel (Unités C et D)

• Un modèle conceptuel du processus de
  développement des interfaces usagers
• Modèle Star
• Évaluation est le processus central
• UI est révisée chaque fois quun problème est
  soulevé

26
Un modèle conceptuel dUI à cinq niveaux

• À chaque niveau
• Design doit être fini
• Problèmes peuvent survenir
• Les niveaux sont
• Niveau des tâches
• Que veut faire lusager
• Niveau conceptuel
• Modèle du système tel quimaginé par
  lutilisateur
• Niveau du style dinteraction
• éléments du design qui sont répétés dans tout le
  système 
• commandes, menu de navigation, manipulations
  directes, hypermédia
• Niveau délément dinteraction
• Fenêtres spécifiques, dialogues, commandes, menus
• Niveau délément physique
• Bitmaps, caractères, structures des données,
  procédure de rappel

27
Évolution du simple SW- à ing. conviviale

• Développement normal du logiciel (impliquant UI)
• se concentrer sur les éléments dinteraction et
  les éléments physiques
• le modèle Waterfall domine (séquentiel),
  modèle Spirall
• évaluation par la revue et les tests des
  spécifications fonctionnelles
• Développement des interfaces usagers
• se concentrer sur les utilisateurs et les tâches
• le modèle Star domine (itératif)
• évaluation par la participation continu des
  usagers
• conduit par l'heuristique et les directives
• intègre la psychologie etc.
• influence la fonctionnalité
• Convivialité (Usability) engineering
• Se base sur des objectifs précis et rigoureux
• pousse fonctionnalité

28
Système darchitecture du modèle conceptuel de UI

• Pourquoi des couches?
• Simplifie le développement et la maintenance du
  logiciel
• Les deux couches
• sont développées en parallèle
• influence l'une l'autre
• sont inclus dans les spécifications du système
  complet
• sont évaluées en même temps
• Évolution des couches
• La couche fonctionnelle change peu pendant le
  développement du système
• Les deux couches peuvent avoir besoin dêtre
  modifiées si on mod les fonctions principales du
  système

29
Caractéristiques des produits et applications

• Chaque genre dapplications demande une
  réponse/adaptation différente du concepteur
  dUI 
• application pour usage interne vs produit destiné
  à la vente
• service générique vs outil spécialisé
• niveaux de connaissances requis (sans
  apprentissage particulier vs produit spécialisée
  pour un domaine)
• Quelques défis de design
• Adapter un produit de service générique de sorte
  quil devienne un outil tâche-spécifique pour
  l'usage interne et vice versa
• Convertir une application exigeant des
  utilisateurs spécialisés en une application
  facile à apprendre et utiliser

30
10. Défauts de fonctionnements des UI

• Idée clé
• Il ny a pas de bonnes interface usagers ... il
  ny que des interfaces qui s'adaptent au besoin
  actuel
• Une interface utilisateur véritablement mauvaise
  ne s'adaptera jamais
• mais parmi les bonnes, peu conviendront à une
  tâche ou une autre
• Pour maximiser ladaptation, nous devons réduire
  au minimum l'occurrence des défauts de
  fonctionnements dans le contexte de
  l'utilisation prévue du système.

31
Définitions défauts de fonctionnements
(Défaillances)

• Un désaccord entre ce que l'utilisateur veut, a
  besoin ou prévoit et ce que le système fournit.
• Une panne de convivialité
• Un obstacle pour accomplir une tâche désirée
• Il faut savoir que
• les défauts de fonctionnements occasionnels sont
  normals
• les défauts de fonctionnements systématiques ou
  fréquents ont besoin d'être corrigés

32
Idées relatives aux défauts de fonctionnements

• Erreur Erreur identifiable de la part de
  designer
• Défaut Une déviation de ce que l'utilisateur a
  besoin
• Une défaillance est une panne de convivialité
• Un défaut dans le fonctionnement régulier du
  système
• Les utilisateurs peuvent ne pas se rendre compte
  de plusieurs défauts de fonctionnement
• les défauts de fonctionnement peuvent seulement
  être isolés par des analyses soigneuses
• ils peuvent être subtiles
• Discussion détaillée sur les défaillancesdans
  lunité B

33
11. Études de cas défaillances dans une UI

• Désastres aériens
• Le pilote de la ligne aérienne de la Chine perd
  le contrôle
• On s'attendait à ce que l'humain agisse en tant
  que moniteur, mais les humains sont de mauvais
  moniteurs (obtenez alésé)
• Les humains ont besoin de contrôler les choses et
  dobtenir une réponse
• US Vincennes a abattu un avion iranien 290 morts
  
• informations critiques concernant lavion
  affichées sur différents écrans
• en recueillant les faits pertinants de différents
  endroits, on saperçoit que plusieurs
  informations se contredisent

34
12. Points clés à reviser

• Buts de HCI améliorer
• Sûreté
• Fonctionnalité
• Efficacité
• Convivialité
• Visibilité et rétroaction
• Affordance et perceived affordance
• But état tâche action
• Humain/ordinateur comme un système de 2
  processeurs
• Types, classes et capacité des utilisateurs
• Productivité de lutilisateur Fonctionnalité
  convivialité
• Facteurs de la convivialité
• Exemple simplicité d'apprentissage, fit,
  acceptabilité
• Disciplines contribuant
• Exemple linguistique, Intelligence artificielle

35
12. Points clés à reviser (suite)

• Système cognitif humain limité par
• perception
• attention
• mémoire
• Analyse des tâches vs. Analyse des fonctions
• Modèle Star avec évaluation au centre
• Niveaux UI
• tâches
• Modèle conceptuel
• style dinteraction
• élément dinteraction
• élément physique
• Convivialité engineering
• UI Couches avec API
• Défauts de fonctionnements (Défaillances) comme
  une déviation de ce que lusager a besoin