Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Université Constantine 2 Etudiants concernés Faculté/Institut Département Nivea

Université Constantine 2 Etudiants concernés Faculté/Institut Département Niveau Spécialité Licence 3 Technologies de l’information (TI) 2017/2018. Semestre 2 Dr. Mostefai Sihem Faculté des nouvelles technologies sihem.mostefais@univ-constantine2.dz Nouvelles technologies IFA – Cours 1 – Chapitre 1: Introduction à l’IHM IHMI Université Constantine 2 2 Objectifs du cours Définir l’IHM et les Disciplines liées Présentation du contenu du module … Plan du cours Définition de l’IHM Rôle de l’IHM Historique IHM au présent… et au futur Disciplines liées à l’IHM Ce que vous allez apprendre dans le module IHMI Résumé © Mostefai Sihem Université Constantine 2 3 Section 1 : Définition de l’IHM © Mostefai Sihem Université Constantine 2 4 C’est quoi l’IHM? IHM = Interface Homme Machine = Human Computer Interface IHM = Interactions Homme Machine = Human Computer Interaction L’IHM concerne: dialogue/Interaction/Communication Homme Machine Définition de l’IHM © Mostefai Sihem Université Constantine 2 5 Définition de l’IHM Interface Homme Machine Ensemble des dispositifs matériels et logiciels permettant à un utilisateur d’interagir avec un système interactif. Interaction Homme Machine Ensemble des aspects de la conception, de l’implémentation et de l’évaluation des systèmes informatiques interactifs. Dans ce module nous allons apprendre a construire des interfaces centrées vers l’utilisateur en suivant une démarche tirée de l’Interaction Homme Machine © Mostefai Sihem Université Constantine 2 6 C’est quoi l’IHM? Construction d’interfaces centrées utilisateurs en adoptant une approche itérative Définition de l’IHM © Mostefai Sihem Conception Implémentation Evaluation Université Constantine 2 7 HCI “discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” [hcibi’b.org] IHM “discipline qui concerne la conception, l’implémentation et l’évaluation de systèmes interactifs destinés à des êtres humain” Interface ensemble des dispositifs matériels et logiciels permettant à une personne de commander, contrôler, superviser un système interactif Système interactif système dont le fonctionnement dépend d'informations fournies par un environnement externe qu'il ne contrôle pas [Wegner, 1997] Définitions associées à l’IHM © Mostefai Sihem Université Constantine 2 8 Section 2 : Rôle de l’IHM © Mostefai Sihem Université Constantine 2 9 Pourquoi l’IHM? • Les utilisateurs car ils ne savent pas utiliser l’interface… • Les personnes qui achètent (Directions…) ne sont pas en général les utilisateurs finaux Causes d’échec d’un logiciel Concevoir des Interfaces adaptées à leurs utilisateurs… (User-centered Interfaces) Important © Mostefai Sihem • Les logiciels utiles se vendent mieux • Les sites web inutiles sont abandonnés La perception d’un logiciel dépend de son interface Université Constantine 2 10 Perte de temps précieuse pour les utilisateurs Accidents dus à de mauvaises interfaces: Catastrophe du mont St Odile (accident d’avion, 87 morts, 9 survivants) Accident nucléaire Three-Miles Island Coûts des mauvaises interfaces © Mostefai Sihem Université Constantine 2 11 Partir d’une approche d’adaptation de l’utilisateur à la machine vers une approche d’adaptation de la machine à l’utilisateur Prise en compte de l’Utilisateur © Mostefai Sihem Université Constantine 2 12 Notion d’utilisabilité(usability) Notion de facilité d’apprentissage (learnability) Prise en compte de l’Utilisateur © Mostefai Sihem Université Constantine 2 13 Caractéristiques physiques âge Capacité physique, handicap Connaissances et expériences dans le domaine de la tâche (novice, expert, professionnel) Fréquence d’utilisation (usage occasionnel, quotidien) Caractéristiques psychologiques visuel/auditif, logique/intuitif, analytique/synthétique… Caractéristiques socio-culturelles sens d'écriture format des dates signification des icônes, des couleurs… Caractéristiques de l’utilisateur- © Mostefai Sihem Université Constantine 2 14 Contexte grand public (proposer une prise en main immédiate) loisirs (rendre le produit attrayant) industrie (augmenter la productivité) systèmes critiques (assurer un risque zéro) Caractéristiques de la tâche répétitive, régulière, occasionnelle, sensible aux modifications de l'environnement, contrainte par le temps, risquée... Contraintes techniques visuel/auditif, logique/intuitif, analytique/synthétique… Caractéristiques socio-culturelles plate-forme taille mémoire écran, … Contexte et Contraintes © Mostefai Sihem Université Constantine 2 15 L’IHM est souvent un élément clé du logiciel (condition de son succès ou son échec) La conception de l'interface représente plus de 50% du coût de développement L’IHM peut représenter 80% du code d’une application elle peut être modifiée/reconstruite plusieurs fois importance de l’indépendance interface / cœur du système Création et programmation des IHMs (1) © Mostefai Sihem Université Constantine 2 16 Developper un logiciel d’IHM C’est: difficile, long, coûteux nécessite une approche méthodique, itérative Ce n’est pas une opération esthétique de l'écran Méthode ? pas de solution magique des principes théoriques, expérimentaux, des savoir-faire, de l’experience. Création et programmation des IHMs (2) © Mostefai Sihem Université Constantine 2 17 Section 3 : Historique © Mostefai Sihem Université Constantine 2 18 Les premiers ordinateurs n’avaient pas d’interface (ou très peu) Historique de L’IHM – Les débuts © Mostefai Sihem Université Constantine 2 19 Vision de Vannevar Bush(1945) – ordinateur Memex Historique de L’IHM – Les débuts © Mostefai Sihem Université Constantine 2 20 Naissance de l’infographie- Sutherland sketchpad (1963) Rapport d’Engelbart 1963(“augmentation of human intellect”)… Souris Ecrans bitmap PCs Windows Historique de L’IHM – Infographie -souris © Mostefai Sihem Université Constantine 2 21 PC avec interface graphique: XEROX Star 1981 Historique de L’IHM – interfaces graphiques © Mostefai Sihem Université Constantine 2 22 1985: système d’exploitation X Windows 1990 : naissance du web (liens hypertextes) 2000… nos jour: Evolutions de plus en plus rapides et omniprésentes Naissance des Smartphone (iPhone d’Apple) Tablettes Ecrans tactiles Jeux etc Historique de L’IHM – Dates importantes © Mostefai Sihem Université Constantine 2 23 Réalité virtuelle et réalité augmentée IHM au présent… et au futur © Mostefai Sihem Université Constantine 2 24 Interfaces tangibles IHM au présent… et au futur © Mostefai Sihem Université Constantine 2 25 Ecrans et surfaces tactiles, mobiles… IHM au présent… et au futur © Mostefai Sihem Université Constantine 2 26 Visualisation de l’information IHM au présent… et au futur © Mostefai Sihem Université Constantine 2 27 Multimodalité IHM au présent… et au futur © Mostefai Sihem Université Constantine 2 28 Section 4 : Disciplines liées à l’IHM © Mostefai Sihem Université Constantine 2 29 IHM = Machine + Humain en Communication Disciplines liées à la machine: Infographie, systèmes d’exploitation, programmation, génie logiciel, environnement de développement Disciplines liées à l’homme: linguistique, sociologie, psychologie cognitive, performances humaine… Disciplines liées à la communication: théorie de la communication, conception graphique et industrielle, ergonomie, engineering .. Disciplines liées à l’IHM © Mostefai Sihem Université Constantine 2 30 Interaction Design – Conception d’interaction : domaine plus vaste IHM Utilisabilité Interface utilisateur (UI) Ergonomie Expérience utilisateur (UX) Design IHM et mots-clés associés © Mostefai Sihem Université Constantine 2 31 Situation de l’IHM(HCI) par rapport a la conception d’interaction IHM et disciplines associées © Mostefai Sihem Université Constantine 2 32 Consulter hall of fame/shame Un exemple d’interface © Mostefai Sihem Université Constantine 2 33 Consulter hall of fame/shame Un exemple d’interface © Mostefai Sihem Université Constantine 2 34 Meilleure presentation Un exemple d’interface © Mostefai Sihem Université Constantine 2 35 Un peu esthétique mais pas utile Un autre exemple © Mostefai Sihem Université Constantine 2 36 Affichages et couleurs Un autre exemple © Mostefai Sihem Université Constantine 2 37 Messages d’erreurs Un autre exemple © Mostefai Sihem Université Constantine 2 38 Section 5 : Ce que vous allez apprendre dans ce module © Mostefai Sihem Université Constantine 2 39 Ce qui caractérise une bonne interface Types d’interfaces/ interactions Processus de développement d’interfaces Analyse des besoins prototypage Evaluation d’interfaces Eléments de base dans une interface (TP) et comment les utiliser + supplément d’infographie Ce que vous allez apprendre en IHMI © Mostefai Sihem Université Constantine 2 40 Comment choisir les boutons, menus, listes… (TP)? Quels types de textes doit-on afficher (utiliser des verbes significtifs à la place de OK/Oui/Yes/No)? Comment choisir les couleurs textes et arrieres-plan? ….. Comprendre… © Mostefai Sihem Université Constantine 2 41 [www.hcibib.org] [Wegner, 1997] : P. Wegner, 1997: “Why Interaction Is More Powerful Than Algorithms”, Communications of the ACM, 40 (5), 80–91. www.glasberger.com/computer-cartoons https://drive.google.com/folderview?id=0BwFBedbVB2Zbak00cnlvOUlGbH M&usp=sharing Références © Mostefai Sihem uploads/Finance/ chapitre-1-formatte 1 .pdf