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 2 – Chapitre 2: Elements de base de l’IHM IHMI Université Constantine 2 2 Objectifs du cours Connaitre les bases de l’IHM Connaitre les styles d’interaction Connaitre les composants de l’IHM WIMP … Plan du cours Caractéristiques de la mémoire humaine Modèles d’interaction Styles d’interaction Eléments de l’interface WIMP Conception de l’aide & gestion des erreurs Résumé © Mostefai Sihem Université Constantine 2 3 Section 1 : Caractéristiques de la mémoire humaine © Mostefai Sihem Université Constantine 2 4 Types de mémoires © Mostefai Sihem • Petite taille (7 ± 2 ‘items” ou ‘chunks’) • Volatile (10 à 30 secondes) • Nécessite des répétitions fréquentes pour ne pas oublier • Mémorisation plus facile à l’aide de « souvenirs » une distraction inutile peut détruire son contenu Mémoire à Court Terme (MCT) • Taille et durée de persistance « infinies » • La répétition des infos dans la MCT les transfère vers la MLT Se construit par répétition Mémoire à Long Terme (MLT) Université Constantine 2 5 Unités de mémoire (“chunks”) • permet de faire passer un chunk de la MCT vers la MLT • On apprend par répétition ou en associant à des choses connues La mémorisation Difficile Facile Plus facile Exemple © Mostefai Sihem • “chunk”= “ unité” de mémoire humaine • Des morceaux d’informations mémorisables Le découpage de l’information en “chunks” permet de mieux la retenir Université Constantine 2 6 Reconnaissance vs Rappel Reconnaissance : se rappeler à l’aide d’un indice qu’on connait déjà. Connaissances par le “monde qui nous entoure”…Ex: un langage gestuel Rappel: retenir une information Connaissances par “notre tête”… Ex: apprendre un poème par cœur Reconnaissance plus facile que Rappel Nécessite moins d’efforts © Mostefai Sihem Université Constantine 2 7 Effets sur les IHMs • Limiter les items des écrans / menus de 4 à 7 • Etablir des liens entre éléments (couleurs, format, emplacements) • Utiliser des messages brefs • Ne pas présenter d’informations inutiles MCT • Favoriser l’apprentissage par répétition (MLT) • Favoriser l’apprentissage en utilisant ce qu’on connait (Metaphore) ex: imprimer , corbeille MLT © Nom et prénom Université Constantine 2 8 Section 2 : Modèles d’Interaction © Mostefai Sihem Université Constantine 2 9 Qu’est-ce que l’interaction? Communication utilisateur système Modèle d’un système Description simplifiée d’un système d’Interface Pour apprendre un nouveau système, l’utilisateur construit un modèle mental de ce système (comment il l’imagine). Un modèle spécifie quelles sont les parties du système et comment elles interagissent lorsqu’il fonctionne. Modèles en IHM (1) © Mostefai Sihem Université Constantine 2 10 Dans la conception d’interfaces, il y-a 3 modèles à considérer : Le modèle du système (system /core model) ou modèle d’implémentation exprime comment le système marche vraiment. Le modèle d’interface (interface/manifest model) est le modèle présenté par le système à l’utilisateur à travers son interface. Le modèle utilisateur (ou modèle conceptuel) exprime comment l’utilisateur pense/imagine que le système fonctionne. Modèles en IHM (2) © Mostefai Sihem Université Constantine 2 11 Modèles en IHM (3) © Mostefai Sihem Université Constantine 2 12 Une bonne interaction est obtenue lorsque les 3 systèmes sont les plus proches possibles: En particulier le modèle d’interface doit être le plus proche possible du modèle utilisateur La facilité d’apprentissage dépend de la facilité à imaginer un système et sa conformité avec son interface Modèle utilisateur ≠Modèle d’interface Apprentissage difficile Modèles en IHM (4) © Mostefai Sihem Université Constantine 2 13 Selon Abowd et Beale [1] , un schéma d’interaction est composé de 4 parties: 1. Utilisateur (User) 2. Entrée (Input) 3. Système (System ) 4. Sortie (output) L’interface = Entrées + Sorties Chaque partie possède son propre “langage” Interaction = ”traduction” entre langages Problèmes d’interaction = problèmes de traduction Modèles d’interaction © Mostefai Sihem Université Constantine 2 14 Section 3 : Styles d’Interaction © Mostefai Sihem Université Constantine 2 15 En IHM, il existe plusieurs styles d’interaction Langage naturel Langages de commandes Menus Formulaires et Requêtes Manipulation directe Styles d’interaction © Mostefai Sihem Université Constantine 2 16 Le langage naturel entre humains (oral ou écrit) est: Pour l’homme, le moyen le plus simple pour communiquer Pour la machine, très peu utilisé (seulement quelques commandes restreintes) Difficultés techniques difficultés de l’analyse du langage naturel problème des ambiguïtés, difficultés de reconnaissance vocale Difficultés fonctionnelles difficulté d’utilisation du clavier Erreurs… Le Langage Naturel © Mostefai Sihem Université Constantine 2 17 L’utilisateur saisit des commandes dans un langage special (DOS, Unix shell…), le système les execute C:\> dir/p ----DOS Ls -1 *.java ----Unix schell http://www.constantine 2.dz----URL Le Langage de commandes(1) © Mostefai Sihem Université Constantine 2 18 Avantages concision (mieux que le langage naturel) accès direct aux fonctionnalités du système pour les experts possibilité d’extensions (définition de macros, scripts) Inconvenients nécessite un apprentissage et une pratique régulière Difficile pour les novices Le Langage de commandes(2) © Mostefai Sihem Université Constantine 2 19 L’utilisateur doit choisir dans des menus Avantages très intuitif Basé sur la reconnaissance Inconvénients Choix des options Comment grouper les options Comment organiser les options Les Menus (1) © Mostefai Sihem Université Constantine 2 20 3 activités de base Navigation (dans les hiérarchies des menus, information ressources, etc.) Sélection (données , paramètres, etc.) Activation (de programmes, accès aux documents, etc.) Sélections faites par: souris, touches clavier, en touchant sur des écrans tactiles, etc. Plusieurs Types de menus Textuels Graphiques (icons) Combination de textes et graphiques Static menus (e.g., menu bar) Pull-down menu Pop-up menus etc Les Menus (2) © Mostefai Sihem Université Constantine 2 21 Formulaires : pour répondre à des questions entrer des informations nombreuses simple mais fonctionnalités limitées Requêtes : pour poser des questions langages de requêtes (type SQL) plus complexe utilisé dans les BDs Formulaires & Requêtes © Mostefai Sihem Université Constantine 2 22 L’utilisateur intéragit avec des représentations visuelles d’objets, selon 3 principes (Shneiderman[1]): 1. Représentation permanente à l’écran ( à l’aide de metaphores) des objets des actions possibles Manipulation directe(1) © Mostefai Sihem Université Constantine 2 23 2. Actions physiques sur les objets pointer et cliquer illusion de travailler directement sur les objets 3. Opérations rapides et réversibles avec effet visible immédiat Manipulation directe(2) © Mostefai Sihem Université Constantine 2 24 Avantages plus fort engagement de l’utilisateur impression d’agir sur l’environnement plus facile à apprendre et comprendre Inconvénients problème pour les opérations abstraites encombrement de l’écran jugée moins rapide par les experts problème du choix des métaphores Manipulation directe(3) © Mostefai Sihem Université Constantine 2 25 Comparer les styles d’interaction précédents par rapport aux critères suivants: Reconnaissance/ Rappel Facilité d’ implémentation Type d’utilisateurs (expert/novice) Résumé –Styles d’interaction © Mostefai Sihem Université Constantine 2 Langage naturel Langage De commandes …… Manipulation Directe Rec/Rappel Implementation Type d’utilisateur uploads/Litterature/ chapitre-2-partie1.pdf