SEG 3520 conception et implémentation d’interface usager

Présentation au sujet: "SEG 3520 conception et implémentation d’interface usager"— Transcription de la présentation:

1 SEG 3520 conception et implémentation d’interface usager
Prof. Dr.-Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5-037) (613) x 6277 site.uottawa.ca mcrlab.uottawa.ca

2 Unité C: modèles conceptuels
Révision: trouble avec les usagers Introduction au modèle conceptuel Modèles mentaux Relation entre la conception et les modèles de l’usager Métaphores Directives pour construire des modèles conceptuels Points essentiels à revoir

3 1. Revision: trouble avec les usagers
N’importe quel développeur peut vous dire que les usagers sont: paresseux, demandant, négligeant et incompétent En particulier, les développeurs sont souvent frustrés parce que plusieurs usagers manquent de “connaissances en informatique” un jour, on va connecter toutes les machines et éliminer l’intermédiaire qu’est ce qu’on peut faire en attendant? Il y a quelques stratégies communes...

4 Première stratégie – attendre leur mort
Pailles de stratégie: les nouveaux “mauvais” utilisateurs vont les remplacer Il y aura toujours des utilisateurs qui sont nouveaux à la génération courante de technologie.

5 2eme stratégie – attendre l’usager parfait pour s’impliquer
Pailles de stratégie: Aucuns sauts évolutionnaires récents apparents Les usagers experts sont moins pardonnant des problèmes de convivialité que les nouveaux … alors, on doit s’arranger avec les usagers qu’on a obtenu.

6 3e stratégie – les apprendre

7 Concevoir des systèmes utilisables
Analyser Evaluer concevoir Analyser Comprendre les usagers et leurs tâches Concevoir (Design) Appliquer cette compréhension durant les activités de conception Evaluer Valider les décisions de conception pour voir si les personnes peuvent utiliser les système.

8 2. Introduction au modèle conceptuel
Designer’s Model User’s Model System image

9 2. Introduction au modèle conceptuel
Model conceptuel = modèle de conception (design) Modèle retenu par le concepteur- peut ne pas être le même pour tous les concepteurs travaillant sur un produit Modèle mental = modèle de l’usager Modèle retenu par un utilisateur – peut être différent pour chaque utilisateur Image du système Réflexion du modèle dans le système lui-même: ses possibilités d'affichage et de commande de l'information Image du système L’interface, le comportement du système, et la documentation sont appelés l’image du système. Si l'image du système ne donne pas aux utilisateurs le modèle de conception d'une manière claire et évidente, les utilisateurs développeront les modèles d'utilisateurs incorrects.

10 2. Introduction au modèle conceptuel
Modèle conceptuel – définition(1): Le concepteur analyse le contenu à apprendre, La tâche à exécuter ou L’information à afficher,et Définit sa structure et fonctionnalité. Cette structure dans la tête du concepteur est appelée modèle conceptuel Modèle conceptuel: Une tentative du concepteur, à travers l’interface usager, de faciliter le développement d’un modèle mental utile. Un cadre (framework ) à travers lequel la fonctionnalité est présentée Un modèle conceptuel est aussi appelé un “mythe externe” i.e. la tentative du concepteur à présenter une vue simplifié du système Ce n’est pas le même que le système Peut être considérée comme une “carte routière” (roadmap) au système 1) Bielenberg, D. (1993). Interactive design and the mythical "intuitive user interface". Journal of Interactive Instruction Development, 6 (2), 14-19

11 Connaissance humaine L’intelligence humaine se fonde sur une bonne connaissance de base. Plus qu’on sait Plus les tâches deviennent faciles Nous avons des millions de faits dans nos cerveaux La plupart de faits doivent être rapidement accessible Par conséquent ils doivent être fortement organisés Plus nous comprenons l’organisation mieux, plus nous construisons de meilleurs interfaces qui Nous permettent d’accéder à nos connaissances Nous aident à améliorer nos modèles mentales

12 Principes d'organisation de la connaissance:
Filets sémantiques Structures des graphes avec... Noeuds représentant des concepts Liens représentant des relations e.g. Une personne peut être reliée à un chien par la relation ‘propriétaire’. Les idées sont similaires à la relation entité rapport (entity-relationship) ou diagrammes d’objets Théorie Rhétorique de Structure: Un exemple de ceci est dans les phrases anglaises: "An apple is a fruit, Fruit is sweet." Apple Fruit Is a Sweet is

13 3. Modèle mental Une représentation dans la tête de l’usager de ce que contient sa conceptualisation et compréhension d’un système Modèles de représentation de la connaissance dans le cerveau Les humains construisent des modèles de systèmes en utilisant des schémas et d'autres filets sémantiques Les modèles mentales sont comme les simulations des ordinateurs Mais dans le cerveau Les humains manipulent les modèles mentales pour: Prédire et tester les conséquences des actions i.e. on “exécute” (run) nos modèles Résoudre les problèmes Intégrer de nouveaux faits

14 Modèle mental Modèles mentaux ...
S’améliorent avec l’expérience Peuvent être faux et besoin d’être replacés On recherche constamment l’évidence pour renforcer ou modifier nos modèles mentaux Par observation et exploration Une bonne rétroaction peut aider dans ce processus Plusieurs défaillances de l’interface usager peuvent être attribués aux modèles mentaux incorrects Qui peuvent être générés par des modèles conceptuels faibles Les défauts de fonctionnements systématique fortement suggestifs des modèles mentaux incorrects Modèles mentaux peuvent être contrastés avec des images Les images sont des vues d’un seul état du modèle mental

15 Types des Modèles mentaux
On peut construire des interfaces usagers qui aident les usagers à construire et diriger un des suivants: Modèles structurels: L'utilisateur a internalisé comment quelque chose travaille e.g. comment une auto fonctionne Modèles fonctionnels: L'utilisateur a internalisé comment utiliser quelque chose e.g. comment conduire une auto comment: Acheter un billet, Aller à une plateforme, Attendre un train, Monter dans un train, Changer un train quitter la station à destination

16 Comment les deux types peuvent aider
Structurel: Aide à s’occuper des problèmes peu familiers Aide les utilisateurs à prévit l’effet de n’importe quelle séquence d’actions Toutefois, ils exigent plus de travail à apprendre Sans contexte -> peut être prolongé et intégré avec d'autres connaissances Fonctionnel: Aide à exécuter une tâche rapidement avec une réflexion minimale i.e. suivre les directives “aveuglement” Dépendant du contexte --> plus facile à utiliser Pour la plupart des tâches, la plupart des personnes construisent seulement un modèle fonctionnel

17 Modèle mentaux Modèles mentaux peuvent être Abstraits Concrets Simples
Subway / Métro / Cartes souterraines qui ne doivent pas mesurer et exclure beaucoup de détails Concrets Carte topologique Simples Modèle moyen du conducteur d'une voiture Détaillés Modèle mécanique d’une voiture

18 London complete system Fameux pour présenter l'abstraction – pas à l’échelle

19 London central core m, just bigger scale

20 Paris suburban system: Even more abstract

21 Paris central core Less abstract - more to scale - more complex

22 Toronto Highly abstract and simple

23 Modèles mentaux sont typiquement incomplets
Ils sont incomplets La capacité des personnes à les exécuter est très limitée Nous ne sommes pas des machines Ils sont instables Les gens oublient les détails Les modèles des systèmes similaires sont confus entre eux Les gens incorporent les idées non scientifiques et les superstitions aux modèles mentaux S'il y a une chance de 50%, alors s'il avait réussi la fois passée il échouera la prochaine fois On ne peut espérer d’instiller les modèles mentaux parfaits dans les usagers (We cannot hope to instill perfect mental models in users) Nous pouvons seulement favoriser le développement d'un modèle qui est plus ordonné, plus élégant, plus stable, plus complet et plus confiant

24 Exercices Dans les tâches suivantes, penser à:
Quel activité mentale vous exécutez pour calculer la réponse Combien de temps prend- t- il Quelle est la précision de votre réponse Si vous avez besoin de faire des tâches similaires souvent, comment pourriez-vous améliorer votre modèle mental Un ordinateur peut-il faciliter la tâche? Comment? Combien y at-il de fenêtres dans votre maison? Combien de feux de circulation y a-t-il sur l'itinéraire que vous conduisez au travail (ou une autre route) ? Si vous revenez à une maison froide et vous voulez une température 20˚C, que feriez-vous ? Comment laisseriez-vous un message pour quelqu'un sur sa boîte vocale ? Quand l'obtiendrait-il ? Comment figurez-vous qu’une procédure dans un programme sera appelée?

25 Exercices Il y a 4 cartes Il y a quatre reçus
Chacune a une lettre sur un côté et un chiffre sur l’autre côté règle: s’il y a une voyelle sur un côté, alors il y a un chiffre pair de l’autre côté Vous voyez les cartes suivantes : E, D, 4, 7 Quelles cartes devez-vous tourner pour vérifier la règle ? Il y a quatre reçus Règle: Si un achat est pour plus de $1000, le directeur doit signer le dos du reçu Vous voyez les reçus suivants sur la table: 2 reçus montrant les montants de 1200$ et 200$ deux montrant le dos, un avec la signature du directeur Quels reçus devez-vous tourner pour vérifier la règle ?

26 4. Relation entre la conception et le modèle de l’usager
Idéalement le modèle d'utilisateur devrait complètement « Mapper » sur le modèle de conception. Très souvent, les utilisateurs développent seulement un modèle mental partiel du modèle de conception. La manière que les utilisateurs découvrent le modèle de conception est à travers l'interface, le comportement du système, et la documentation Les golfes (gulfs?) de l'exécution et de l'évaluation : Les utilisateurs peuvent lier les golfes en changeant leur modèle mental Les concepteurs peuvent lier les golfes en changeant le modèle conceptuel qu’ils se présentent

27 Mapping Le “Mapping” indique le rapport entre l'action de l'utilisateur et le résultat de l'action. Mapping Naturel La compréhension normale de l’usager des résultats d'action La direction de la roue (association directe) Rouge pour arrêter et vers pour continuer (compréhension culturelle) Quatre contrôleurs pour 4 brûleurs de fourneau (association logique) Présentez les choix de police (fonts) en utilisant les polices elles-mêmes Times New Roman Arial Arial Black Courier New Old English Monotype Sorts Univers

28 Fonctions forçantes Conception qui prévient les usagers d’entreprendre des actions qui sont inappropriées ou qui peuvent mener aux erreurs L'appareil s’arrête une fois ouvert Micro-ondes laveuses Boutons Radio En Choisir un seul Bon exemple d'une fonction de conception : Barre de menu- mettre en gris et empêcher le choix de ces articles inapplicables au contexte courant New Open Close Save Save as...

29 Directivité de l’interface
Le sentiment qu'on agit directement dans le monde d'intérêt Plutôt qu’à travers un ordinateur Droiture de sémantique : The degree to which the UI allows users to say what they want to say simply and concisely good: If users can directly draw in a word processor when creating a document rather than switching applications bad: If users in a draw program must draw a shape using separate lines Articulatory directness: The relation between the meanings of elements in a UI and their physical form reasonable: turn indicator in a car bad: burner controls on many stoves

30 Example: burner controls on many stoves
Stove Top B Stove Top A Controls A Controls B

31 Capacités suggestives d'action et contraintes
Un élément d’IU qui a une bonne capacité suggestive d’action indique les possibilités de son utilisation Un élément d’IU qui a une bonne capacité suggestive d’action indique les impossibilités de son utilisation. Bonnes capacités et contraintes: Réduire la référence de l’usager sur son modèle mental Elle peut dire immédiatement quoi faire sans même réfléchir Aider les usagers à construire leur modèle mental Capacités typiques: Un élément qui ressemble à un bouton peut être pressé Quand le curseur est sur le bouton, il s’assombrit indiquant qu’en cliquant une action aura lieu Contraintes typiques: e.g. un carré et un trou rond e.g. la barre de défilage (scroll bar) peut juste défiler sur une distance limitée.

32 Modèles conceptuels des débutants vs les experts
La connaissance a un début déclaratif Faits qui peut être décrits en mots Avec la pratique, la connaissance devient graduellement plus automatique et procédurale On “internalise” le modèle mental de comment faire certaines choses Un expert peut ne même pas être capable d’expliquer ce qu’il fait The fact-learning required in the early stage is a bottleneck Les interfaces doit être concues de façon à ce qu’elles peuvent être apprises et utilisées avec peu de connaissance e.g. Comment utiliser la souris L'examen la connaissance procédurale existante peut parfois être plus facile Les experts en informatique peuvent apprendre les IU plus facilement

33 États et modes En IU, le mode est:
Un état atteinte par une action particulaire, dans lequel l’ensemble des actions disponibles changent e.g. dans l’éditeur vi de Unix, on peut être dans Le mode texte Le mode commande e.g. les “Dialog boxes” sont des modes utilisées si on veut quitter avant de faire quoique se soit. (are modes if one has to quit before doing anything else) ‘Modeless dialogs’ sont meilleur. Chaque mode a son propre mini ,odèle conceptuel Ceci peut confondre les utilisateurs Alors, éviter les modes lorsque possible

34 5. Métaphores Métaphores sont des outils importants pour la construction des modèles conceptuels Il y a une relation étroite entre les métaphores et les modèles conceptuels. La métaphore implique un modèle Un modèle n’est pas facilement saisi sans les métaphores Qu’est ce qu’une métaphore ? Un mot ou une expression dénotant un objet employé pour suggérer une similarité L'utilisation dans une interface des concepts familiers pour représenter des concepts plus abstraits de système Analogie: La similarité partielle entre les choses comparées Metaphore vs. Analogie La distinction est que dans une métaphore que un objet est traité comme si il était un autre ; dans l'analogie nous restons conscients du fait qu'ils sont différents Metaphores Aider l'utilisateur à employer la connaissance antérieure pour comprendre un système Rendre les idées abstraites plus concrètes Aider l’utilisateur à construire les modèles mentals

35 Exemples de métaphores
Mac/MS-Windows – métaphore de bureau (desktop) – disparité : éjection de la disquette en la tirant sur la poubelle Processeur Word – métaphore d’écriture– Disparité: “auto- line wrap” Spreadsheet comme ledger – métaphore du papier carré (squared paper) – Disparité: formules de calcul Outils du courriel – métaphore de la boîte de récéption – Diparité de l’icône: boîte de récéption des EU et non pas de l’Angleterre, allemand, français Panneu de configuration comme une carte avec des onglets Modèle conceptuel comme une carte de route pour le système ‘calcul omniprésent Ubiquitous computing’ est un pas au delà des métaphores: integrating a computer invisibly into an everyday device (e.g. an employee badge) 2 types de métaphores: Métaphores verbales Le système est expliqué de manière métaphorique • métaphores des interfaces virtuelles Le système apparaît de manière métaphorique

36 Difficultés de développement des métaphores
Suivre littéralement une métaphore peut sous-utilisé la puissance d’un ordinateur e.g. dans un système à fenêtre, il est très difficile de trier les multiples fenêtres qui représentent les documents Ceci est plus facile avec les documents en papier On doit s’assurer que l’ordinateur facilite cette tâche Les métaphores incomplètes peuvent mal guider les usagers e.g. éjecter une disquette en la mettant dans la poubelle Il est difficile d’étendre les métaphores uniformément surtout lorsqu’on ajoute des fonctionnalités e.g. les dipositifs “magiques”de Macintosh: Dossiers dans des dossiers Infini (folders-within-folders) Des alias pour les fichiers (Même fichier dans plusieurs dossiers) La poubelle est sur le bureau!

37 Une solution au problème de prolongation de métaphore
Métaphores composées Plusieurs métaphores travaillant ensemble Tant et aussi longtemps qu’il n’y a pas de conflit! Les personnes ne semblent pas avoir de problème à travailler avec des modèles mentaux multiples en même temps E.g. desktop + menus + windows + scrolls + cutting and pasting + publishing and subscribing

38 Quelques idées pour les métaphores
Activités humaines: Agents Stage et théâtre chercher, créer, écrire etc. Machines: Television et telecommunications Menuiserie, tuyauterie et construction Dispositifs de bureau comme les claviers Horloges et autres représentations du temps Espace 2-D Formes, bilans (spreadsheets) Les tables de rédaction, petites tables Panneaux de jeux Panneaux d’instruments Menus Maps Espace 2.5 -D Desktop et briefcases Livres et encyclopédies Cahiers et fiches Espace 3-D Portes, chambres et immeubles Surface terrestre, atmosphère, espace externe

39 Liste de contrôle des métaphores
Le concept représente-il la fonctionnalité? L’usager est-il familier avec le concept? Le concept se concorde-t-il avec le contexte du système? Le concept est-il complexe pour un groupe d’usager? Quelles sont les diparités de la métaphore dans la représentation des “use scénarios/use cases” ? Identifier des stratégies pour gérer les disparités? Identifier les niveaux ou les métaphores s’appliquent- la tâche, la méthode procédurale, niveau d’apparence. La métaphore est un compromis de précision du modèle mental d’apprentissage

40 6. Directive pour construire les modèles conceptuels
Générale garder le modèle conceptuel, et par la suite le système, simple construire les modèles conceptuels selon les connaissances du monde réel Éviter les modèles conceptuels qui demandent une réflexion abstraite et logique documentation et aide en ligne doivent être explicitement présentes dans le modèle conceptuel choisir des noms et une terminologie qui sont consistants avec le modèle conceptuel concevoir des modèles conceptuels qui maximise la sémantique et la directivité. Éliminer les modes si c’est possible

41 Directive pour construire les modèles conceptuels
L’usage des modèles conceptuels pour construire les modèles mentaux Tenez compte des modèles mentaux que les utilisateurs apporteront avec eux au nouveau système Concevoir afin de faciliter le développement par l’usager d'un modèle mental efficace. Les modèles conceptuels doivent être orientés vers le modèle mental des usagers et non pas celui des concepteurs Aider l’usager à construire un modèle structurel s’ils ont besoin d’être créatifs avec le système Aider les usagers à construire un modèle fonctionnel s’ils ont besoin de performer rapidement quelques fonctions. S,assurer que la rétroaction fonctionne bien pour corriger et construire les modèles mentaux des usagers. Évitez de montrer l'image de fond ou l'information non pertinente car ceci ralentira le bâtiment d'un modèle mental. Les différents modèles conceptuels relatifs peuvent être nécessaires pour les débutants et les experts Réduisez la dépendance à l’égard du modèle mental de l’usager en rendant l'interface aussi évidente que possible- employer des éléments dont l'affordance et les contraintes perçues appropriées

42 Directive pour construire les modèles conceptuels
Métaphores: Faire le départ de n’importe quelle métaphore clair Évitez les métaphores qui ne permettraient pas à la puissance de l'ordinateur d'être entièrement employée si elles sont suivi littéralement. Quand la métaphore est déjà choisie, ajouter des dispositifs “magiques” afin de mettre en évidence la puissance Éviter les métaphores partielles que les usagers peuvent être trompés en supposant qu’elles sont complètes En construisant des métaphores composées, assurer qu’elles ne sont pas contradictoires

43 7. Points essentiels à revoir
L’analyse des tâches et la modélisation conceptuelle sont des techniques qui nous aident à mieux concevoir les interfaces usagers On comprend plus profondément les usagers et leurs besoins Tâche: procédure axée sur le but Avec des sous-tâches et actions Tâche interne vs. tâche externe Tâche naturelle vs. tâche artificielle but: état que l’usager veut être dedans But implicite vs. but explicite

44 Points essentiels à revoir
Analyse des tâches: modéliser les tâches de l’usager Parallèle avec les analyses traditionnelles (e.g. OO) Modéliser les tâches Déterminer les classes de l’usager Lister et prioriser les tâches Collecter des buts, pré-conditions, décompositions, modèles mentaux, effets secondaires et défauts Simplifier et améliorer les modèles Faire des résumés. Construire des modèles conceptuels Ajouter des détails secondaires: Standardiser, réarranger, Réduire les besoins

45 Points essentiels à revoir
Modèle conceptuel (carte de route au système) vs. modèle mental (la carte dans la tête de l’usager) Représentation des connaissances de l’humain Modèles mentaux Simulations utilisées pour tester et prédire la conséquences des actions Cause des défaillances quand c’est incorrect Contraste avec des images Structurel (travail) vs. fonctionnel (usage) Abstrait vs. concret; simple vs. détaillé En général malpropre Le modèle conceptuel aide à construire un meilleur modèle mental

46 Points essentiels à revoir
Modèle mental de l’usager vs celui de l’expert Golfes d'exécution et d'évaluation Directivité d’interface Sémantique: direce qu’on veut Articulaire: Relation à la forme physique Affordance et contraintes perçues Réduire le relais sur le modèle mental Débutants vs. experts Déclarative vs. Automatisé et connaissance procédurale “Bottleneck acquiring initial declarative knowledge” Modes: états ou les actions diffèrent: à éviter Métaphores: concepts familiers pour représenter le système Difficultés Suivre littéralement Mauvaise guide due à l’imperfection Être consistent Métaphores composées