Support de Cours 2024 - Interaction Avancée

**Université - Mohamed-Cherif Messaâdia- Souk Ahras\ Faculté des Sciences et de la Technologie\ Département d'Informatique** Support de cours du module : **Interaction Avancée** *Présenté par Mr. BOULEDROUA Amor* Table des Matières ================== [[Table des Figures] 4](#table-des-figures)...

**Université - Mohamed-Cherif Messaâdia- Souk Ahras\ Faculté des Sciences et de la Technologie\ Département d'Informatique** Support de cours du module : **Interaction Avancée** *Présenté par Mr. BOULEDROUA Amor* Table des Matières ================== [[Table des Figures] 4](#table-des-figures) [*[1-]* [Introduction] 5](#introduction) [[Evolution de l\'interface graphique] 7](#evolution-de-linterface-graphique) [[Evolution de l\'interactivité] 9](#evolution-de-linteractivit%C3%A9) [*[1-]* [Introduction] 10](#introduction-1) [[Organisation des Fenêtres] 12](#organisation-des-fen%C3%AAtres) [[1.] [Règles d'interface :] 12](#r%C3%A8gles-dinterface) [[1.] [dans une barre d'actions :] 12](#dans-une-barre-dactions) [[2.] [Région client :] 13](#r%C3%A9gion-client) [[3.] [Barre d'outils :] 13](#barre-doutils) [[2.] [Type de Multifenêtrages :] 13](#type-de-multifen%C3%AAtrages) [[1.] [Multifenêtrage avec superposition] 13](#multifen%C3%AAtrage-avec-superposition) [[2.] [Multifenêtrage sans superposition] 13](#multifen%C3%AAtrage-sans-superposition) [[3.] [Fenêtres modales] 13](#fen%C3%AAtres-modales) [[4.] [Fenêtres non modales] 14](#fen%C3%AAtres-non-modales) [[5.] [Fenêtres d'applications] 14](#fen%C3%AAtres-dapplications) [[3.] [Type d'actions :] 14](#type-dactions) [[Avantages par rapport aux interfaces conversationnelles :] 15](#avantages-par-rapport-aux-interfaces-conversationnelles) [*[1-]* [Introduction] 16](#introduction-2) [[Modèles cognitifs pour la description d'une IHM] 17](#mod%C3%A8les-cognitifs-pour-la-description-dune-ihm) [[2.1. Modèle du Processeur Humain (MPH)] 17](#mod%C3%A8le-du-processeur-humain-mph) [[2.2. Goal Operator Method Selection (GOMS)] 18](#goal-operator-method-selection-goms) [**[1.]** **[Goal :]** 20](#goal) [**[2.]** **[Operator :]** 20](#operator) [**[3.]** **[METHODS :]** 22](#methods) [[2.3. Keystroke] 26](#keystroke) [[Tentatives de modélisation des activités humaines] 28](#tentatives-de-mod%C3%A9lisation-des-activit%C3%A9s-humaines) [[3.1 Échelle de décision] 28](#%C3%A9chelle-de-d%C3%A9cision) [[2.4. Théorie de l'action de Norman] 31](#th%C3%A9orie-de-laction-de-norman) [*[1-]* [Définition] 34](#d%C3%A9finition) [[Principes pratiques ergonomiques (Général)] 34](#principes-pratiques-ergonomiques-g%C3%A9n%C3%A9ral) [[2.1. La concision] 35](#la-concision) [[2.2. La rétroaction] 35](#la-r%C3%A9troaction) [[2.3. La cohérence] 36](#la-coh%C3%A9rence) [[2.4. La structuration] 36](#la-structuration) [[2.5. La flexibilité] 37](#la-flexibilit%C3%A9) [[2.6. La compatibilité] 37](#la-compatibilit%C3%A9) [[2.7. L'homogénéité] 37](#lhomog%C3%A9n%C3%A9it%C3%A9) [[2.8. La signifiance] 38](#la-signifiance) [[2.9. Le pilotage] 38](#le-pilotage) [[Règles de l'ergonomie Web] 38](#r%C3%A8gles-de-lergonomie-web) [[3.1.] [Architecture : Un site bien rangé] 38](#architecture-un-site-bien-rang%C3%A9) [[3.2.] [Organisation visuelle : faire le ménage dans les pages] 39](#organisation-visuelle-faire-le-m%C3%A9nage-dans-les-pages) [[3.3.] [Cohérence : Capitaliser l'apprentissage interne du site] 39](#coh%C3%A9rence-capitaliser-lapprentissage-interne-du-site) [[3.4.] [Convention] 40](#convention) [[3.5.] [Information : Le site informe et répond] 41](#information-le-site-informe-et-r%C3%A9pond) [[3.6.] [Compréhension : Bien choisir les mots et les symboles.] 42](#compr%C3%A9hension-bien-choisir-les-mots-et-les-symboles.) [[3.7.] [Assistance] 43](#assistance) [[3.8.] [Gestion des erreurs] 44](#gestion-des-erreurs) [[3.9.] [Rapidité, le temps de l'internaute est précieux] 44](#rapidit%C3%A9-le-temps-de-linternaute-est-pr%C3%A9cieux) [[3.10.] [Liberté : laisser l'internaute commander] 45](#libert%C3%A9-laisser-linternaute-commander) [[3.11.] [Accessibilité : un site facile d'accès] 46](#accessibilit%C3%A9-un-site-facile-dacc%C3%A8s) [[Accessibilité physique :] 46](#accessibilit%C3%A9-physique) [[Accessibilité technologique :] 46](#accessibilit%C3%A9-technologique) [[3.12.] [Satisfaction de l'internaute :] 47](#satisfaction-de-linternaute) [[Règles de l'ergonomie Mobile] 47](#r%C3%A8gles-de-lergonomie-mobile) [[1.1] [Une App mobile : qu'est-ce que ça change ?] 48](#une-app-mobile-quest-ce-que-%C3%A7a-change) [[1.2] [Quelques macro-principes :] 49](#quelques-macro-principes) [[1.] [Adapter l'affichage au petit écran] 49](#adapter-laffichage-au-petit-%C3%A9cran) [[2.] [Agrandir les zones cliquables] 49](#agrandir-les-zones-cliquables) [[3.] [Indiquer où on se trouve dans l'App] 49](#indiquer-o%C3%B9-on-se-trouve-dans-lapp) [[4.] [4. Limiter l'utilisation du clavier] 49](#limiter-lutilisation-du-clavier) [[5.] [Rendre les éléments cliquables « reconnaissables »] 50](#rendre-les-%C3%A9l%C3%A9ments-cliquables-reconnaissables) [[6.] [Soigner les icônes] 50](#soigner-les-ic%C3%B4nes) [[7.] [Exploiter le canal sonore et celui haptique] 50](#exploiter-le-canal-sonore-et-celui-haptique) [[8.] [Assurer la continuité des contenus] 51](#assurer-la-continuit%C3%A9-des-contenus) [[9.] [Exploiter les outils « mobiles »] 51](#exploiter-les-outils-mobiles) [[10.] [Penser au contexte d'utilisation et adapter la charte graphique] 51](#penser-au-contexte-dutilisation-et-adapter-la-charte-graphique) [*[1-]* [Qu'est-ce que le Responsive Design ?] 58](#quest-ce-que-le-responsive-design) [*[2-]* [CSS3 et Responsive Web Design] 59](#css3-et-responsive-web-design) [*[3-]* [Avantages du responsive web design] 60](#avantages-du-responsive-web-design) [*[4-]* [Inconvénients du responsive web design] 60](#inconv%C3%A9nients-du-responsive-web-design) [*[5-]* [Pourquoi un site doit-il être « mobile friendly » ?] 62](#pourquoi-un-site-doit-il-%C3%AAtre-mobile-friendly) [*[6-]* [L'invention du Responsive Web Design] 63](#linvention-du-responsive-web-design) [*[7-]* [Conclusion] 63](#conclusion) Table des Figures ================= [[Figure 1. Interfaces à lignes de commande] 7](#_Toc184625225) [[Figure 2. Exemple d\'interface menu + écran de saisie] 8](#_Toc184625226) [[Figure 3. Exemple d\'interface Multifenêtrage] 8](#_Toc184625227) [[Figure 4. Exemple d'interface WIMP] 12](#_Toc184625228) [[Figure 5. Multifenêtrage avec superposition] 13](https://d.docs.live.net/6692cba2d480ae19/Documents/Enseignement/Interaction%20Avanc%C3%A9/Support%20de%20Cours%202024.docx#_Toc184625229) [[Figure 6. Multifenêtrage sans superposition] 13](https://d.docs.live.net/6692cba2d480ae19/Documents/Enseignement/Interaction%20Avanc%C3%A9/Support%20de%20Cours%202024.docx#_Toc184625230) [[Figure 7. Fenêtres modales] 13](https://d.docs.live.net/6692cba2d480ae19/Documents/Enseignement/Interaction%20Avanc%C3%A9/Support%20de%20Cours%202024.docx#_Toc184625231) [[Figure 8. Fenêtres non modales] 14](https://d.docs.live.net/6692cba2d480ae19/Documents/Enseignement/Interaction%20Avanc%C3%A9/Support%20de%20Cours%202024.docx#_Toc184625232) [[Figure 11. Modèle du Processeur Humain] 18](#_Toc184625233) [[Figure 12. Exemple d\'un système de distribution automatique de billets] 19](#_Toc184625234) [[Figure 13. Modèle de l'échelle (J. Rasmussen)] 30](#_Toc184625235) [[Figure 14. Les étapes de la théorie de l'action dans un contexte de supervision] 32](#_Toc184625236) [[Figure 15. Le tableau présente chaque attribut d'un élément sur une nouvelle colonne alors que la liste laisse plus de flexibilité sur l'agencement des attributs] 52](#_Toc184625237) [[Figure 16. Les (nombreuses) contraintes de validité du mot de passe ne sont affichées que lorsque le focus est mis sur le champ concerné, en utilisant le principe du dévoilement progressif.] 54](#_Toc184625238) [[Figure 17. Le bouton "..." permet d'éviter de présenter trop de boutons à l'utilisateur.] 54](#_Toc184625239) [[Figure 18. La duplication des boutons en haut et en bas de page permet de profiter des avantages de chaque solution avec peu de conséquences sur l'utilisateur] 56](#_Toc184625240) [[Figure 19. Adaptation du contenu selon l'appareil utilisé : ordinateur (desktop), tablette ou mobile] 58](#_Toc184625241) [[Figure 20. On voit clairement l'avantage d'un contenu qui s'adapte à l'appareil utilisé, ceci évitant de zoomer pour lire le texte ou naviguer] 59](#_Toc184625242) [[Figure 21. Évolution des utilisateurs d'internet dans le monde : Mobile VA ordinateur de 2007 à 2015 (Morgan Stanley Resarch) (Source : agence SEO.fr)] 62](#_Toc184625243) [[Figure 22. L'adaptation à différentes résolutions des appareils... pas si simple !] 63](#_Toc184625244) Chapitre 1 : Introduction aux IHM Introduction ============ L\'homme interagit avec les ordinateurs qui l\'entourent, cette interaction nécessite des médiatrices qui facilitent la communication entre l\'homme et la machine. La facilitation de l\'utilisation de dispositifs devient de plus en plus importante avec le nombre croissant d\'interfaces numériques dans la vie quotidienne. L\'interface est l\'ensemble des dispositifs matériels et logiciels qui permettent à un utilisateur de commander, contrôler, superviser un système interactif. Un système interactif est un système dont le fonctionnement dépend d\'informations fournies par un environnement externe qu\'il ne contrôle pas. Les systèmes interactifs sont également appelés ouverts, par opposition aux systèmes fermés -- ou autonomes -- dont le fonctionnement peut être entièrement décrit par des algorithmes. L\'IHM a pour but de trouver les moyens le plus efficaces, les plus accessibles et les plus intuitifs pour les utilisateurs afin de compléter une tache le plus rapidement et le plus précisément possible. L\'IHM est [pluridisciplinaire](https://fr.wikipedia.org/wiki/Pluridisciplinaire), elle bénéficie des [sciences cognitives](https://fr.wikipedia.org/wiki/Sciences_cognitives), [linguistiques](https://fr.wikipedia.org/wiki/Linguistique) et de [psychologie](https://fr.wikipedia.org/wiki/Psychologie) aussi bien que de la [vision par ordinateur](https://fr.wikipedia.org/wiki/Vision_par_ordinateur) et que de l\'[électronique](https://fr.wikipedia.org/wiki/%C3%89lectronique). L\'Interaction Homme-Machine est une discipline consacrée à la conception, à la mise en œuvre et à l\'évaluation de systèmes informatiques interactifs destinés à des utilisateurs humains ainsi qu\'à l\'étude des principaux phénomènes qui les entourent. Les boutons, les menus, les couleurs ou les animations ne suffisent pas à rendre un système utilisable. L'utilisabilité d'une interface peut être mesuré en se basant sur : - temps nécessaire pour apprendre - rapidité d'utilisation - taux d'erreurs - facilité à se souvenir - satisfaction subjective... etc. Ce n'est pas seulement l'interface qui compte, mais l'interaction : - la séquence d'actions nécessaires pour accomplir une tâche - l'adéquation entre le système et le contexte dans lequel il est utilisé Les deux notions sont indissociables dans les programmes d'aujourd'hui. La plupart des applications informatiques sont interactives, l'IHM est souvent un élément clé du logiciel (en + ou -), c'est pourquoi la conception de l\'interaction représente plus de 50% du coût de développement. Le développement de l'interface graphique peut prendre entre 50 % à 80 % du temps de développement car elle peut être modifiée/reconstruite de multiples fois. La partie visible de l'application est l'interaction / l'interface c'est pourquoi c'est très important pour le marketing (Exp : Apple vs Microsoft !). Evolution de l\'interface graphique =================================== - - - []{#_Toc184625225.anchor}Figure 1. Interfaces à lignes de commande - - -  []{#_Toc184625226.anchor}Figure 2. Exemple d\'interface menu + écran de saisie - []{#_Toc184625227.anchor}Figure 3. Exemple d\'interface Multifenêtrage Evolution de l\'interactivité ============================= Le degré d\'interactivité d\'un système peut se mesurer au nombre et à la nature de ses échanges avec les utilisateurs. Deux éléments importants ont contribué à l\'augmentation du degré d\'interactivité : - - Le nombre des échanges a beaucoup augmenté, mais leur nature n\'a pas vraiment évolué. CHAPITRE 2 : Principes des interfaces WIMP Introduction ============ L'acronyme WIMP (**W**indows, **I**cons, **M**enus, **P**ointing device) désigne un type d'interface graphique. Les interfaces WIMP permettent à l'utilisateur d'interagir avec le système depuis l'écran de l'ordinateur grâce à un dispositif de pointage (la souris), et d'éléments d'interfaces comme des fenêtres, des menus déroulants et des icônes, qui représentent les commandes actionnables. On parle donc d'interface graphique à ***manipulation directe***. L'origine du terme est attribuée à Merzouga Wilberts en 1980 et son invention revient à Douglas Englebart, également inventeur de la souris. Alan Kay et Adele Godberg ont contribué, en tant que membres de l'équipe de recherche du Xerox Parc, à en développer les principes, à la fin des années 1970. Ils proposent alors les premières interfaces graphiques proposant une manipulation directe d'objets graphiques avec une souris en développant la métaphore du bureau. Pour cela, le PARC s'est appuyé sur les travaux de psychologues spécialistes du développement de l'enfant et de l'apprentissage, Jean Piaget et Jerome Bruner. Le contenu est présenté sous la forme WYSIWYG «What You See Is What You Get», contrairement aux interfaces en lignes de commandes ou textuelle.  Les interfaces WIMP se caractérisent par la présence de fenêtres primaires contenant une représentation symbolique ou non des objets (données, logiciels, dossiers, textes, images,...). L'utilisation d'une souris permet de manipuler (sélectionner, déplacer,...) ces objets. Les menus contiennent les actions et les propriétés applicables à ces objets. Celles-ci peuvent nécessiter un dialogue qui prendra place dans une fenêtre secondaire. L'utilisation de métaphores (icônes, bureau, dossiers,...) permet la réutilisation des connaissances et favorise la prise en main. Au début des années 1980, Apple est le premier à vendre en grande quantité des ordinateurs proposant une interface WIMP, avec le Macintosh (1984). Leur système d'exploitation deviendra le standard pour ce type d'interface. Depuis la fin des années 1980, avec l'avènement du système opératif de Microsoft, Windows, inspiré des travaux précédents, les interfaces WIMP prédominent comme style d'interaction avec les ordinateurs. - **WIMP** : Window \[Fenêtres\], Icônes, Menu et Pointage - **Présentation** : Fenêtres, icônes, représentations graphiques Interaction Menus, boîtes de dialogue, champs de saisie, \...etc. - **Entrées** : Pointage, sélection, tracé - **Boucle perception-action** : Feedback Organisation des Fenêtres ========================= []{#_Toc184625228.anchor}Figure. Exemple d'interface WIMP Sauf exception, toute fenêtre, primaire ou secondaire, devra comporter : - une bordure redimensionnable - un menu système - un titre, avec sous-titre si fenêtre secondaire - un bouton de minimisation (maximisation optionnel) et fermeture - barre d'actions (de menu) - région client (espace de travail) - barre d'outils Règles d'interface : -------------------- ### dans une barre d'actions : - sur une seule ligne au lancement de l'application - au maximum une douzaine d'options par menu - au-delà de cinq options, regrouper avec des séparateurs - un maximum de trois niveaux de sous-menus - attention à l'abus de raccourcis-clavier ### Région client : - affichage libre de texte, graphiques - à programmer à partir d'API - si non-utilisée, la supprimer ### Barre d'outils : - si usage fréquent d'éléments de la barre d'actions Ils existent plusieurs fenêtres dont une seule accepte les actions utilisateur (focus) « fenêtre active ou primaires» et les autres sont « inactives ou secondaires ». Type de Multifenêtrages : ------------------------- ### Multifenêtrage avec superposition - à éviter - inconvénients - informations masquées - temps d'accès aux fenêtres masquées ### Multifenêtrage sans superposition - mosaïque ### Fenêtres modales - on doit fermer le dialogue pour retourner à la fenêtre principale - obligatoire quand la commande en cours ne peut être suspendue - fenêtre déplaçable pour laisser l'utilisateur voir la tâche amont ### Fenêtres non modales - on peut passer de la fenêtre de dialogue à la fenêtre principale - l'utilisateur peut abandonner temporairement la tâche en cours ### Fenêtres d'applications - MDI : Multiple Document Interface - 1 unique instance de l'application - fenêtre principale (espace de travail) - fenêtres filles (les documents) Type d'actions : ---------------- Les actions qu'on peut faire sur une fenêtre : - [menu système :] - déplacer, redimensionner (Move, Size) - iconifier, restaurer, maximiser (Minimize, Maximize) - avant-plan, arrière-plan (Raise, Lower) - sortir (Close, Exit) - [barre d'action] : à chaque action correspond plusieurs possibilit´es - utilisation de la souris - un mnémonique : lettre soulignée pour lancer l'action - un accélérateur : combinaison de touches-clavier (Ctrl, Alt \...) - utilisation des flèches et de la touche « Entrée » Sélectionner une action conduit à trois types d'actions : - activer un traitement - afficher un nouveau menu (sous-menus) - ouvrir une boite de dialogue - l'èche, triangle, sur la droite : non-terminal, conduit à un sous-menu - nom d'option suivi de \... : ouvre une boite de dialogue - option momentanément indisponible : mode grisé - option type interrupteur : cocher, d´décocher une option - si raccourci-clavier, indiqué sur la droite - groupement d'options dans un menu par séparateur Avantages par rapport aux interfaces conversationnelles : ========================================================= - - - - - - Chapitre 3 : Psychologie cognitive et ergonomie Introduction ============ Une application interactive communique en temps réel avec un utilisateur humain. Les échanges sont effectués par l\'intermédiaire d\'une interface, qui prend en charge : - la communication avec l\'application informatique ; - la communication avec l\'utilisateur humain ; - la traduction entre le monde de l\'application et celui de l\'utilisateur. Les concepteurs d\'interfaces cherchent à produire une représentation perceptible du système qui soit la plus proche possible à la représentation mentale de l\'utilisateur. La conception et le développement d\'une interface dérive d\'un travail d\'analyse et synthèse entre deux approches : - L'approche cognitive : dans cette approche, l\'interaction homme-application est vue comme l\'ensemble des phénomènes physiques et cognitifs qui participent à la réalisation des tâches informatisées - L'approche informatique : l\'interaction est vue comme un assemblage de composants logiciels et matériels qui permet l\'accomplissement de tâches avec le concours d\'un ordinateur. Modèles cognitifs pour la description d'une IHM =============================================== La psychologie cognitive offre des modèles théoriques du fonctionnement de l'esprit humain pour tout comportement mettant en œuvre des connaissances. Plusieurs modèles cognitifs ont été proposés pour décrire l\'interaction entre utilisateur et ordinateur. Nous allons examiner plus en détail deux parmi ces modèles, le modèle du processeur humain (Card, Moran et Newell 83) et la théorie de l\'action (Norman 86). 2.1. Modèle du Processeur Humain (MPH) -------------------------------------- Dans le modèle du processeur humain, l\'individu est présenté comme un système de traitement d\'informations régi par un ensemble de règles. Le processeur humain comprend trois sous-systèmes, sensoriel, moteur et cognitif, chacun disposant d\'une mémoire et d\'un processeur. La mémoire du système cognitif comprend une mémoire à court terme (contentant les informations en cours de manipulation) et une mémoire à long terme (contenant les informations permanentes). Les performances d\'une mémoire ou d\'un processeur sont caractérisées par des paramètres constituant des indications intéressantes qui permettent d\'adapter l\'interface en fonction des performances de l\'utilisateur. Ces paramètres ne permettent que d\'évaluer les performances mesurables de l\'individu, sans apporter des indications sur les modèles de représentation et raisonnement mis en œuvre. Ce modèle est suffisamment formel pour être utilisé par les informaticiens, cependant, il offre une modélisation trop simplifiée et trop réductrice.  []{#_Toc184625233.anchor}Figure 11. Modèle du Processeur Humain Mémoire à long terme : Mémoire à court terme : 2.2. Goal Operator Method Selection (GOMS) ------------------------------------------ Ce modèle se contente de modéliser le comportement observable de l'utilisateur (approche behavioriste) et ne cherche pas à décrire les états mentaux et les traitements internes. - - - - **[Exemple :]** Soit le système de distribution automatique de billets suivant : []{#_Toc184625234.anchor}Figure 12. Exemple d\'un système de distribution automatique de billets ### **Goal :** Les buts sont les services que l'utilisateur veut réaliser à travers le système. Ces buts peuvent être décomposés en sous-buts, d'une façon hiérarchique, tout en respectant le modèle humain de partition des problèmes en sous-problèmes lors de leur résolution. Toutefois, dans le modèle GOMS cette hiérarchie n'est pas complètement spécifiée (il y en a des versions qui permettent la représentation de buts en parallèle). Pour montrer son fonctionnement nous nous appuyons sur notre application, pour laquelle nous pouvons identifier les buts suivants : - - - - ### **Operator :** Les opérateurs sont des actions réalisées par l'utilisateur pour accomplir un but. Ces opérateurs peuvent être externes, c'est-à-dire des actions perceptuelles et motrices des utilisateurs sur les objets du système pour changer des informations (actions observées), ou internes, c'est-à-dire des opérateurs mentaux des utilisateurs, inférés par les théoriciens et analyseurs. - - A : la distance entre l'objet de pointage et l'icône à être pointé W : la largeur de l'icône k : constante (valeur 100 msec) - **Opérateur** **Description** **Temps** --------------- ------------------------------------------------------------ ----------- H Ramener la main au clavier 0.40 s K Presser une touche 0.20 s T(n) Taper une chaîne de caractères n x 0.2 P Pointer 1.10 s \* M Localiser un objet sur l'écran ou vérifier une description 1.35 s W(t) Attendre la réponse du système t~R~ \*\* I Insérer ou retirer une carte 1.50 s \* temps calculé par la Loi de Fitts. \*\* t~R~ est le temps pendant lequel le système fait attendre l'utilisateur. Si on considère **m** comme le temps de traitement d'une commande par le système et **t** le temps exploité par l'utilisateur pour exécuter un opérateur pendant le traitement de la commande, t~R~ vaut : t~R~ = 0 si m ≤ t t~R~ = m - t si m \> t - **Description** **Temps** ----------------------------------------------- ----------- Accomplir un but \- Décider 1.35 s Rappeler à partir de la mémoire à court terme 1\. 20 s Rappeler à partir de la mémoire à long terme 1.35 s Penser à une valeur \- ### **METHODS :** Les méthodes sont des séquences d'opérateurs qui permettent l'accomplissement d'un but. Dans le cas où on pourrait avoir plusieurs méthodes pour le même but, le modèle fournit des règles de sélection de la méthode. Dans notre application, les méthodes sont uniques pour chaque but. **Méthode pour le but : Retirer d'argent** Pas1. Identifier l'écran M 1.35 Pas2. Décider : si vous n'êtes pas dans le système, Pas2. Accomplir but : Sélectionner service Pas3. Accomplir but : Sélectionner montant Pas4. Accomplir but : Prendre d'argent Pas5. Retourner avec le but accompli **Méthode pour le but : Entrer dans le système** Pas1. Insérer la carte I 2.0 Pas2. Attendre vérification de la carte W(t) t~R~ Pas3. Rappeler de la LTM le code secret (\....) Pas4. Ramener la main au clavier H 0.20 Pas5. Tapez code secret T(4) 1.12 Pas6. Accomplir le but : Valider Pas7. Attendre vérification du code W(t) t~R~ Pas8. Décider, si code incorrecte, aller au Pas3 (\...) Pas9. Retourner avec le but accompli Les opérateurs signalés par le symbole (\...) sont normalement anticipés dans l'opérateur précédant, leurs durées sont donc comprises dans le temps précédent. **Méthode pour le but : Sélectionner un service** Pas1. Localiser le service sur l'écran M 1.35 Pas2. Pointer sur l'écran P 1.10 Pas3. Vérifier que le service a été attendu M 1.35 Pas4. Retourner avec le but accompli **Méthode pour le but : Sélectionner montant** Pas1. Penser sur le montant désiré M 1.35 Pas2. Localiser montant sur l'écran (\...) Pas3. Décider : si montant inexistant, aller au Pas1 (\...) Pas4. Pointer sur le montant P 1.10 Pas5. Attendre vérification du montant W(t) t~R~ Pas6. Décider : si montant impossible, aller au Pas1 (\...) Pas7. Retourner avec le but accompli **Méthode pour le but : Spécifier montant** Pas1. Penser sur le montant à transférer M 1.35 Pas2. Ramener la main au clavier H 0.20 Pas3. Tapez le montant T(n) n x 0.28 Pas4. Vérifier le montant M 1.35 Pas5. Décider : si " montant correcte ", aller au Pas8 (\...) Pas6. Accomplir le but : Effacer Pas7. Retourner au Pas2 Pas8. Accomplir but : Confirmer Pas9. Retourner avec le but accompli **Méthode pour le but : Spécifier compte** Pas1. Rappeler de la LTM le numéro de compte M 1.35 Pas2. Ramener la main au clavier H 0.20 Pas3. Tapez numéro de compte T (10) 2.80 Pas4. Vérifier le compte M 1.35 Pas5. Décider : si " compte correcte ", aller au Pas8 (\...) Pas6. Accompli le but : Efface Pas7. Retourner au Pas2 Pas8. Retourner avec le but accompli **Méthode pour le but : Valider** Pas1. Lire les valeurs sur l'écran (\...) Pas2. Localiser le service sur l'écran (\...) Pas3. Pointer sur " Valider " P 1.10 Pas4. Retourner avec le but accompli **Méthode pour le but : Effacer** Pas1. Localiser le service " Effacer " sur l'écran (\...) Pas2. Pointer sur " Effacer " P 1.10 Pas3. Attendre le résultat W(t) tR Pas4. Retourner avec le but accompli **Méthode pour le but : Confirmer** Pas1. Localiser le service " OK " sur l'écran (\...) Pas2. Pointer sur " OK " P 1.10 Pas3. Attendre le résultat W(t) tR Pas4. Retourner avec le but accompli **Méthode pour le but : Sortir** Pas1. Localiser le service sur l'écran M 1.35 Pas2. Pointer sur l'écran P 1.10 Pas3. Attendre réponse du système W(t) tR Pas4. Retirer la carte I 1.5 Pas5. Retourner avec le but accompli Il existe plusieurs familles de GOMS qui permettent d'étudier et de prédire avec précision différents aspects de l'interface. Le modèle de GOMS le plus utilisé en interaction homme machine (IHM) est le modèle de Keystrokes-Level-Model (KLM) 2.3. Keystroke -------------- C'est une relation simplifiée de GOMS étant donné une tâche, un langage de commande (textuel ou graphique), les paramètres caractéristiques des capacités motrices de l'utilisateur, les paramètres mesurant le temps de réponse du système, une méthode pour réaliser une tâche, ce modèle permet de **[prédire le temps]** d'exécution de cette tâche par un utilisateur expert. Le modèle KLM est une méthode de mesure qui peut être utilisée par des particuliers ou des entreprises cherchant des moyens d'estimer le temps qu'il faut pour remplir les tâches de saisie lors d'une utilisation du clavier ou de la souris. Le modèle KLM-GOMS est généralement appliqué dans les situations qui nécessitent des quantités minimales de travail et d'interaction avec un ordinateur, ou pour la conception d'une interface pour un logiciel. L'approche KLM consiste à spécifier d'abord un scénario définissant une action à effectuer. Ce scénario est décomposé en plusieurs sous-tâches traduites par des opérateurs. Trois valeurs ont été déterminées pour chaque opérateur : pour les personnes expertes, pour les personnes averties et pour les personnes débutantes (novice). Ces opérateurs sont les suivants : - - - - - - - - **[Exemple :]** Prenons l'exemple d'un « drag-and-drop » d'un fichier. Un des scénarios possibles serait le suivant : - - - - - - Le temps total pour effectuer le « drag-and-drop » pour une personne « niveau avancé » sera donc : TT = H + M + P + B + M + P + B En prenant en compte l'anticipation de l'usager (on supprime un temps d'activité mentale M), on a finalement : TT = H + 2P + 2B + M = 0,4 + 2\*1,1 + 2\*0,1 + 0,024 = 2,824 sec. Les modèles que nous venons de détailler présentent cependant deux inconvénients. Tout d'abord, les temps affectés aux opérateurs de GOMS et KLM ont été déterminés pour des personnes valides. Ensuite, les opérateurs de ces modèles sont considérés comme des valeurs fixes malgré la diversité des catégories de population. Tentatives de modélisation des activités humaines ================================================= Les deux approches de modélisation des activités humaines les plus couramment considérées actuellement sont certainement celles proposées par **RASMUSSEN** et **NORMAN**, représentatives de deux écoles de pensée, l'une européenne, et l'autre américaine. Malgré leurs limites, elles ont permis à de nombreux développeurs de systèmes interactifs de prendre conscience d'un ensemble de notions, issues de la psychologie, relatives aux interactions homme-machine. 3.1 Échelle de décision ----------------------- RASMUSSEN a proposé un cadre, appelé « échelle de décision » (decision ladder), illustrant la démarche générale de résolution de problème suivie par un opérateur humain. « L'échelle de décision » de RASMUSSEN comprend plusieurs étages séquentiels de traitement d'informations. Il considère que la perte de contrôle dans un système complexe est le résultat d'une mauvaise adaptation dynamique de l'opérateur aux contraintes de l'environnement. Il distingue d'abord quatre niveaux de comportement : - - - - La détection d'événement anormal met l'utilisateur en état d'alerte, suite à l'apparition d'une alarme ou par l'observation de l'évolution anormale d'une ou plusieurs variables. L'évaluation de la situation consiste pour l'opérateur à observer l'ensemble des informations utiles de façon à identifier l'état du système. « L'échelle de décision » offre un bon cadre pour analyser le comportement cognitif de l'homme et proposer en conséquence une interface homme-machine adaptée à chaque type de comportement suivi. « L'échelle de décision » de RASMUSSEN a d'abord été considérée comme un modèle, puis de plus en plus comme une architecture cognitive générique, produisant une classe de modèles. Dans un deuxième temps, avec le modèle SRK, Rasmussen distingue trois niveaux de comportement : - - - La perte de contrôle ne résulte pas d'une défaillance « locale », mais plutôt d'une défaillance du système de gestion cognitive du passage d'un mode de fonctionnement à l'autre. Rasmussen s'intéresse donc au processus dynamique de l'adaptation à la situation. Il a formalisé l'aspect dynamique dans le « modèle de l'échelle » (*step ladder*). L'idée est résumée dans le schéma suivant qui représente les cheminements possibles du processus cognitifs entre les trois niveaux de comportement.  []{#_Toc184625235.anchor}Figure 13. Modèle de l'échelle (J. Rasmussen) Rasmussen s'est également intéressé aux changements de point de vue dans le processus cognitif : **représentation tout/partie** (privilégiée quand la situation est sous contrôle) ou **représentation fin/moyens** (utilisée quand l'opérateur rencontre une difficulté de compréhension), et dans chaque cas, aux changements de « profondeur » (entre la stratégie générale et la gestion des détails). Il décrit le processus cognitif comme une « trajectoire » dans l'espace des approches possibles, qui est un espace à deux variables (axe «fin/moyens» et axe «tout/partie»), les axes étant gradués en fonction du niveau de détail considéré. Enfin Rasmussen a proposé une voie intermédiaire entre les traditions anglo-saxonne (centrée sur une modélisation des limites cognitives locales) et française (centrée sur l'analyse du décalage entre tâche prescrite et activité observée) concernant la conception des systèmes. Il décrit le champ des activités « légitimes » (pour l'opérateur) comme l'ensemble des procédures qui lui paraissent acceptables ; dans ce champ, l'opérateur doit faire des choix (décision d'une stratégie d'action) selon des critères subjectifs, liés à son analyse de la situation, ses préférences, son historique. A partir de cet « espace (subjectif) des possibles », il décrit le processus cognitif dynamique en s'appuyant sur les niveaux SRK. Le moteur de la dynamique est le sentiment d'adéquation (ou non) du niveau actuel par rapport aux exigences de la situation. 2.4. Théorie de l'action de Norman ---------------------------------- La théorie de l'action, proposée et définie par **Donald Norman** décrit toute la **psychologie d'un individu qui réalise une tâche.** Comment passer de la **pensée théorique** à l'**action concrète** ?  La décomposition du processus réel prend tout son sens au prisme de cette pensée d'Huxley : *«La fin ultime de la vie n'est pas la connaissance, mais l'action.»* Selon la théorie de l\'action, un individu agit selon des modèles mentaux, élaborés par l\'individu même et évoluant avec l\'expérience. Dans un processus de communication interpersonnelle, les individus confrontent et adaptent leurs représentations mentales. Dans le cas d\'une interface homme-application, la communication met en jeu l\'utilisateur et l\'interface (production d\'une représentation perceptible (image) du système à partir de laquelle l\'utilisateur adapte sa représentation. Un modèle conceptuel est une représentation mentale. Il dépend\ étroitement de la connaissance déjà acquise et de la compréhension de la\ situation présente. Il évolue avec l\'expérience. Il est incomplet et imprécis\ mais il guide l\'essentiel du comportement. []{#_Toc184625236.anchor}Figure 14. Les étapes de la théorie de l'action dans un contexte de supervision Sept étapes seront alors développées dans cette recherche de caractérisation d'une tâche, allant de l'établissement du but à l'évaluation de l'action. \(1) **But** : un but est une représentation mentale de l'état du système que l'opérateur souhaite atteindre, et ceci en agissant sur des dispositifs de commande. Si inconsciemment la réalisation pour atteindre ce but est inenvisageable, l'individu va faire découler des **sous-buts,** le processus sera plus long mais le but réalisé. \(2) **Intention** : celle-ci correspond à la décision d'agir afin d'atteindre un but préétabli. \(3) **Spécification de l'action** : Elle va être la traduction entre l'intention et l'action, elle correspond à la représentation psychologique de l'ensemble des actions et de leur ordonnancement que l'utilisateur doit exécuter au moyen des dispositifs physiques, et ceci dans le but d'atteindre son objectif. \(4) **Exécution** : le plan est mis en application en agissant sur le système. Celui-ci est donc modifié. \(5) **Système** (La perception du nouvel état du système) : Après l'exécution de l'action, l'opérateur constate un ensemble de changements survenus sur le système \(6) **Interprétation** : elle aboutit à une représentation mentale du nouvel état du système. Cette étape relève de la satisfaction de l'individu en rapport à son action. Comment puis-je percevoir la satisfaction de mon action ? \(7) **Évaluation** : Nous trouvons ici une corrélation qui existe ou non, entre l'étape numéro 1 et le but souhaité. S'il n'y a pas de satisfaction de l'action, l'individu peut corriger son plan et émettre un ajustement de la procédure. En cas d'apparition d'un défaut, l'opérateur interprète et évalue la situation de fonctionnement du système. Puis, en fonction des buts opératoires, il traduit ses intentions en une suite d'actions qu'il exécute. On distingue donc bien dans cette interaction les variables physiques, correspondant à des variables du système (température, pression\...) et les variables psychologiques à partir desquelles il évalue la situation de fonctionnement. L'opérateur est par conséquent amené à traduire dans un premier temps les variables physiques en variables psychologiques et cela dans un but d'évaluation de la situation. Dans un second temps, la traduction des variables psychologiques en variables physiques lui permet de spécifier les actions à mettre en œuvre. Chapitre 4 : Principes d'ergonomie des interfaces WEB & MOBILE Définition ========== Du Grec : - Ergon : Travail \- Nomos : loi et règle L'ergonomie énonce des règles et des propositions de bon sens établis le plus souvent expérimentalement, par observation de l'interaction homme machine. L'ergonomie est l'étude quantitative et qualitative du travail dans l'entreprise visant à améliorer les conditions de travail et à accroître la productivité. Ces améliorations portent traditionnellement sur l'adaptation aux besoins de l'homme du poste de travail, des outils, des machines, des horaires,... Principes pratiques ergonomiques (Général) ========================================== L\'ergonomie s\'intéresse à la facilitation d\'utilisation. En ergonomie informatique, nous nous attachons particulièrement à l\'usage des produits interactifs. Quel que soit le média, qu\'il s\'agisse de web, de logiciel, de PDA ou de téléphone mobile, nos missions visent à mesurer et à améliorer l\'utilisabilité du produit. Ce concept, traduit de l\'anglais **usability**, résume la capacité du produit à permettre à l\'utilisateur de réaliser efficacement la tâche pour laquelle il a été conçu. L\'analyse de l\'ergonomie de navigation sur internet ne diffère pas de celle d\'un autre produit interactif : Un site doit permettre au visiteur de trouver rapidement l\'information qu\'il cherche, de la même manière que le produit doit permettre à l\'utilisateur de réaliser facilement la tâche. A partir de là, la tâche de l\'ergonome consiste à identifier quels sont les freins, les difficultés qui vont empêcher l\'utilisateur d\'atteindre rapidement l\'information qu\'il cherche. C\'est en analysant la cause de ces difficultés, qu\'il détermine les manières d\'y remédier et permet ainsi d\'améliorer l'utilisabilité de son produit. La théorie de l'action de Norman a permis de définir un ensemble de règles ergonomiques trouvées expérimentalement. Dans cette section nous allons décrire les propriétés principales devant être présentes dans une interface ergonomique. 2.1. La concision ----------------- La concision a pour but de réduire les activités de perception, de mémorisation et de formulation d'une suite d'actions pour réaliser une intention. Moins l'utilisateur doit se focaliser sur l'IHM pour interpréter, comprendre ou formuler sans problème, et plus il est disponible pour son métier. Il faudra donc éviter toute information inutile. Pour assurer la concision, on doit suivre certaines règles : - - - - - 2.2. La rétroaction ------------------- Suite à une action de l'utilisateur, l'ordinateur doit montrer : - - - Le retour d'information (le feedback) doit être immédiat et informatique : Les variables psychologiques, centre d'intérêt de l'utilisateur, doivent trouver leurs correspondants dans les variables physiques de l'image. - - - 2.3. La cohérence ----------------- Une interface cohérente est une interface dans laquelle il n'existe pas de contradiction : - - - - 2.4. La structuration --------------------- Pour définir une interface structurée, il faut : - - - 2.5. La flexibilité ------------------- - - - - - - - 2.6. La compatibilité --------------------- La compatibilité désigne la capacité de l'IHM à s'intégrer dans l'activité de l'utilisateur. Elle doit pour cela être conforme à la représentation de la tâche pour l'utilisateur. 2.7. L'homogénéité ------------------ On parle d'homogénéité intra-application (au sein de la solution logicielle qu'on a proposée) et inter-application (par rapport aux autres applications que l'utilisateur exploite dans son environnement de travail). L'homogénéité concerne les zones d'affichage, l'emplacement, les tailles, la police de caractères, les messages... 2.8. La signifiance ------------------- La signifiance désigne la capacité d'un élément de l'interface à être significatif pour les utilisateurs. Lors du choix de dénomination, il faut veiller à ce que le vocabulaire soit celui de l'utilisateur et non pas de l'informaticien. Il faut pour cela observer l'utilisateur, l'interroger, ce qui nous ramène à l'étape de recueil de données. Exemple : Ne pas laisser à l'utilisateur des dénominations techniques : « id\_Clt » au lieu de « numéro client ». 2.9. Le pilotage ---------------- Il faut donner à l'utilisateur le sentiment qu'il dirige l'application. Ainsi il doit pouvoir quitter, annuler une action, revenir au menu principal, naviguer entre des enregistrements. Règles de l'ergonomie Web ========================= Au moment de créer un site web, nous distinguons deux catégories : ceux qui prennent en considération les principes d'ergonomie et ceux qui ne les connaissent pas. Ignorer ces principes d'ergonomie, c'est prendre le risque de perdre ces internautes alors même que votre contenu peut les intéresser. Car un internaute sur un site où il ne se sent pas à l'aise est un internaute qui va s'enfuir d'un moment à l'autre ! Architecture : Un site bien rangé --------------------------------- Pour qu'un internaute se sente à l'aise, faut-il encore qu'il y trouve ce qu'il est venu y chercher ! Cet objectif ne sera atteint que si les informations sont bien rangées dans votre site de telle manière que les visiteurs ne s'y perdent pas. Architecturer l'information consiste à organiser votre contenu en vue de le présenter à vos internautes, cela fait appel à un travail de catégorisation (créez des groupes de contenu) puis de structuration (hiérarchiser le contenu). Bien sûr, ces étapes se font en prenant en considération les attentes de vos internautes. - - - 2. Organisation visuelle : faire le ménage dans les pages ------------------------------------------------------ L'organisation visuelle n'est rien d'autre que l'architecture (comme vu en 3.1), mais cette fois-ci appliqué à la page, car elles aussi doivent être bien organisées. Cet objectif général qui est de bien penser l'architecture et l'organisation des pages peut tout à fait paraitre logique, car de façon générale, nous nous en sortons mieux dans des environnements simples, organisés et aérés. Éviter l'embouteillage d'informations et ne jamais surcharger les pages d'informations inutiles, ne privilégier que l'essentiel. Cohérence : Capitaliser l'apprentissage interne du site ------------------------------------------------------- Tout au long de leurs navigations sur vote site, les utilisateurs vont se forger un modèle mental solide sur la façon avec laquelle naviguer. Votre objectif sera de préserver au maximum cette cohérence pour ne pas perturber l'expérience d'utilisation de vos internautes d'une part, et rendra la navigation plus efficiente d'une autre part. Le phénomène de capitalisation de l'apprentissage se manifeste lorsqu'un internaute utilise avec succès un élément d'interface pour l'accomplissement d'une action. Il essaiera automatiquement la même stratégie lorsqu'il se retrouvera en situation comparable. Préserver la localisation et le positionnement des éléments. Cette règle est applicable de page en page et de mise à jour en mise à jour. Car une fois que l'internaute a navigué d'une certaine manière, il utilisera la même logique chaque fois qu'il voudra accomplir une action sur le site. Préconiser les appellations cohérentes, dans le sens où il faut toujours utiliser les mêmes pour désigner les mêmes choses de page en page. Ceci est aussi bien valable pour les mots que pour leurs déclinaisons. Convention ---------- Lorsqu'un internaute arrive sur votre site, il arrive avec son expérience de navigation, souvent capitalisée à partir d'autres sites que le vôtre. Il a déjà visité d'autres sites et en a tiré des leçons sur la logique de fonctionnement d'un site web. Nous parlons là d'apprentissage externe. Inconsciemment, un visiteur qui a acquis une certaine expérience ailleurs va essayer d'appliquer ses connaissances sur votre site. Mais le plus difficile avec cette règle est de savoir ce qui relève de la convention et ce qui ne l'ai pas. Jakob Nielsen le définit selon le pourcentage de sites qui applique un principe. On parlera donc : - - Donc, pour que votre site puisse tirer profit des connaissances de vos utilisateurs, il faut que vous adoptiez une certaine cohérence avec les autres sites. Tenir compte des conventions web garantira un niveau d'expertise minimal des utilisateurs sur votre site web. Suivre la convention, c'est aussi adopter, puis accepter certaines règles d'ergonomie qui ne sont pas des solutions ergonomiques dans l'absolu, mais une solution adaptée à notre internaute. Il faut Respecter les conventions de localisation en maintenant l'emplacement des éléments primordiaux d'interaction, aux mêmes endroits. Car si nous prenons un panel de sites web, nous remarquerons que ces éléments se retrouvent toujours aux mêmes endroits. **Exemple :** Le logo, la barre de recherche, l'accès au panier, etc. Respecter les conventions d'interaction et de présentation et essayant de respecter au maximum les modes d'interaction les plus répandus sur le web. Car vos visiteurs s'attendront à ce que votre site se comporte comme la majorité des sites sur lesquelles ils naviguent habituellement. Information : Le site informe et répond --------------------------------------- Cette règle n'est vraiment pas compliquée, elle est même très logique : l'internaute arrive sur votre site et pour cela, politesse et informations de qualités sont de mises. Dans l'idéal, un visiteur ne doit pas réfléchir ou chercher trop longtemps l'information. Donner de l'information générale, cela passe par le fait que vous informez vos visiteurs sur votre identité et sur vos services proposés. Les éléments qui se trouvent en permanence sur votre site doivent être là pour que l'utilisateur comprenne ce que vous lui apportez. Le logo et le slogan vous seront d'une très grande utilité. Apporter de l'information ponctuelle, et c'est là qu'échouent pas mal de sites web : au moment de donner de l'information à l'intérieur même des pages. Pour pallier à cette limite, assurez-vous de toujours donner assez d'informations à votre internaute relative à sa navigation. Cela peut se faire grâce à une barre de navigation principale visible en permanence à l'écran. Compréhension : Bien choisir les mots et les symboles. ------------------------------------------------------ Il ne suffit pas juste de « balancer » de l'information à votre internaute, vous devez aussi et surtout bien lui parler. Et cela se fait en employant des codes sémantiques qu'il connait. Il y a à ce sujet une belle phrase qui résume bien cette situation : « *en web, chaque mot, chaque phrase, lutte pour sa survie* » : seuls les éléments qui auront un lien fort et cohérent avec le contexte du site resteront. La bonne utilisation des mots sur le web : en effet, le choix des mots à utiliser représente une difficulté majeure, notamment pour optimiser le site web pour l'utilisateur. Utilisez le vocabulaire, car il s'agit là du défaut le plus fréquent et le plus récurrent. Même si, aujourd'hui, le recours aux logos de types minimalistes se fait de plus en plus souvent, ne ratez pas une occasion d'utiliser du bon vieux texte. Car dépendamment de votre audience, un logo (ou un symbole) sera bien compris ou pas par vos visiteurs.   Dans cet exemple, de prime à bord rien n'indique ce à quoi correspondent les symboles utilisés. Dans le web, appréhender un obstacle doit se faire comme dans la vie réelle. Lorsque vous vous avancez vers une porte, vous savez quelle action entreprendre pour l'ouvrir avant même d'y parvenir, et cela à partir de la forme générale de la porte (tourner la poignée, tirer la porte, pousser la porte, etc.). Il en va de même pour un symbole, il doit pouvoir nous indiquer sa fonction sans forcément cliquer dessus. banner-lars  Pour rester dans le même exemple, nous remarquons que le concepteur a eu recours au survol de la souris pour identifier le symbole. Même si cette méthode diminue ambiguïté de façon significative, reste qu'elle n'est pas naturelle. Assistance ---------- Quel que soit l'objectif principal du site, il doit pouvoir aider l'internaute durant son expérience de navigation, pour cela nous distinguons 2 catégories d'aides : - - L'organisation et la visibilité, les guides principaux sur vote site : Pour mieux diriger vos visiteurs, tout ce dont ils doivent avoir besoin doit être visible (objets, actions, boutons, options, etc.). Le but principal étant de ne pas surcharger la mémoire de vos utilisateurs avec des manipulations trop contraignantes : ils n'auront donc pas besoin de mémoriser les informations d'une page pour les réutiliser sur une autre page. Ainsi une barre de menu située en bas de page ne remplira pas forcément le rôle qui est le sien. Les clics logiques, votre meilleur second guide : le tout consiste à faciliter la tâche de navigation aux internautes en vous adaptant à leur logique de fonctionnement. Une petite astuce consiste à rendre cliquable le bouton qui nous a aidé à prendre la décision. Aussi, ne pas oublier que diriger c'est surtout orienter les utilisateurs dans la bonne direction. Donc, montrer rapidement à l'internaute ce qui est cliquable (call to action) et ce qui est actionnable (champs, boutons) sur votre site. Gestion des erreurs ------------------- Nous aurons beau concentrer tous nos efforts sur la réalisation du processus idéal que l'on souhaite pour nos utilisateurs, mais on se fait toujours rattraper par la flexibilité du web. Cette flexibilité est telle que les internautes sortent toujours du tracé qui était prévu. La gestion des erreurs intervient pour pallier ce genre de situation où l'utilisateur sort du chemin tracé pour lui.  Votre mission sera alors de tout mettre en œuvre pour protéger votre internaute contre l'erreur et l'aider à la franchir si elle se présente. Dépendamment de la situation, l'apparition d'erreurs peut être plus ou moins critique. Par exemple, lors d'une opération transactionnelle, l'interaction entre l'utilisateur et le système est à son maximum. L'apparition d'une erreur dans une telle situation peut entraîner de nombreuses conséquences, dont l'abandon du site. Globalement, une petite règle facile à retenir : ***Présence de formulaire = haute probabilité d'erreurs***. Faites en sorte que l'internaute ne se trompe pas : Concevez votre site de manière à ce que votre internaute soit assez guidé pour ne pas faire d'erreurs. Le plus souvent, comme nous l'avons dit plus haut, les interfaces qui rencontrent le plus de problématiques sont presque exclusivement basées sur des formulaires. Il est facile de diminuer le nombre d'erreurs en jumelant certaines techniques telles que : l'indication des champs obligatoires, utiliser les libellés et légendes des champs, adapter la taille des champs à la longueur de la saisie, etc. Rapidité, le temps de l'internaute est précieux ----------------------------------------------- Une fois sur votre site, l'utilisateur ne cherche pas seulement à accomplir une tâche. Il veut le faire rapidement. Donc votre mandat et de lui offrir une interface lui offrant cette possibilité. Rendre les zones et éléments cliquables faciles à viser, et par conséquent, facile à atteindre, donc essayer de respecter une certaine proximité entre le champ d'informations et le bouton à cliquer. Tout planifier sur le plan fonctionnel afin que l'internaute n'ait pas à revenir en arrière après avoir effectué une action (surtout lorsqu'il s'agit d'un achat). Par exemple, lorsque vous effectuez un achat en ligne et que le produit se trouve éloigné du bouton « ajouter au panier », vous aurez tendance à bien vérifier qu'il s'agit de la même ligne avant de poursuivre. Une action plutôt simple qui rendrait la ligne sélectionnée toute colorée faciliterait cette tâche. Liberté : laisser l'internaute commander ---------------------------------------- L'internaute doit toujours avoir le contrôle sur le site sur lequel il navigue, ou tout au moins en avoir l'impression. Pour lui la seule logique reste : action -- réaction. Votre mission est donc éviter au maximum de le contrarier en inversant les rôles : ni l'ordinateur ni le site web ne doivent contraindre l'internaute. Ils doivent en tout temps sentir qu'ils ont la situation en main et que rien ne se passera sans leur consentement. Respectez les contrôles utilisateur conventionnels, pour cela il faut que l'expérience de votre internaute sur votre site web soit similaire aux autres sites, et réponde donc à ses habitudes de navigation (retour en arrière, la fonction de copie textuelle, la disposition des principaux éléments). Évitez le déclenchement automatique des actions au survol (**Rollover**). Même si cette action à tendance à disparaitre, et avait connu ses heures de gloire lors de l'utilisation massive du flash, il arrive parfois de tomber nez à nez avec cette pratique. La meilleure façon de montrer à l'utilisateur qu'il n'a plus le contrôle, est de déclencher une action sans son approbation, il aura l'impression à ce moment de vraiment perdre le contrôle. Accessibilité : un site facile d'accès -------------------------------------- La règle d'or est la suivante : dépendamment de votre public cible, tout le monde peut avoir accès à votre site web, du moins facilement. Cependant, il ne faut pas oublier que l'accessibilité peut prendre deux versants : physique et technologique. Voici quelques petites astuces afin d'améliorer votre **accessibilité physique et technologique** : ### Accessibilité physique : L'enjeu ici est de faire en sorte que votre site soit accessible à tous les internautes, quel que soit le canal perceptif par lequel ils consultent votre site. C'est comme si l'on disait que le plus important n'est pas que les visiteurs perçoivent tous notre site de la même façon, mais plutôt puissent bénéficier du contenu que l'on offre selon les modalités perceptives qui leurs conviennent. ### Accessibilité technologique : Le second versant se réfère aux possibilités d'accès à notre site d'un point de vue technologique. Donc les possibilités d'accès à notre site, quel que soit le matériel à partir duquel l'internaute le consulte. Encore une fois, le plus important reste l'accès au contenu et non pas la façon avec laquelle chaque internaute percevra ce dernier. Pour cela, l'accès à ce contenu doit se faire à partir de n'importe quelle plate-forme. - - 12. Satisfaction de l'internaute : ------------------------------ Même si cette règle se retrouve en 12e position de ce classement, elle passe avant toutes les autres, car c'est la seule à remettre en question toutes les autres. La satisfaction de vos internautes nécessite de prendre en compte les besoins de vos personas en tant qu'êtres humains, mais aussi, et surtout leurs besoins en tant qu'internautes spécifiques dans un contexte spécifique, avec des objectifs spécifiques. Toutes les règles précédentes participent à l'atteinte de la satisfaction, si elles sont réunies, vos visiteurs seront satisfaits de la qualité d'utilisation de votre site. La satisfaction est le critère le plus difficile à mesurer, à côté des critères tels que la facilité d'utilisation et de l'efficience, la satisfaction peut faire appel à d'autres critères tels que la qualité de service, d'esthétique et d'expérience utilisateur. Pour finir, on peut dire que l'application des 12 règles à votre site web vous évitera les principaux désagréments en matière d'ergonomie web. Ces règles doivent devenir pour vous un réflexe quasi naturel à la fois au moment de la conception et à l'évaluation. Règles de l'ergonomie Mobile ============================ L'arrivée de l'iPhone sur le marché des téléphones, dans le lointain 2007 a créé *de facto* de nouveaux usages et un nouveau marché, celui des Apps mobiles. L'arrivée de la concurrence de Google dans un premier temps et de celle de Microsoft plus récemment, n'ont fait que donner encore plus de choix aux utilisateurs, qui ont aujourd'hui la possibilité de faire « à peu près tout » sur leur smartphone ou leur tablette, comme le dit si bien la marque à la Pomme. Oui, mais à condition que l'interface reste simple et intuitive. Une App mobile : qu'est-ce que ça change ? ------------------------------------------ Il ne faut pas oublier que ces applications présentent 3 différences fondamentales par rapport à l'exploitation de sites et logiciels sur ordinateur : - - - 2. Quelques macro-principes : -------------------------- 1. ### Adapter l'affichage au petit écran Penser une IHM pour le mobile signifie épurer les contenus, simplifier l'affichage et, si nécessaire, fournir des moyens d'accès à des informations plus détaillées. Comparez par exemple la page web de votre compte *Twitter* sur ordinateur à celle qui s'affiche dans l'App mobile : suggestions, tendances et moteur de recherche n'apparaissent pas sur l'accueil et les boutons pour « **retwitter** » ou « répondre » sont disponibles uniquement après être rentrés dans chaque **tweet**. ### Agrandir les zones cliquables En miniaturisant les contenus, on pourrait être tentés de réduire proportionnellement la taille des éléments cliquables, mais ceci est une erreur : il ne faut pas oublier qu'une bonne partie des supports mobiles ne proposent pas de stylet pour interagir avec l'écran, il faut donc tenir compte de la taille des doigts. Selon les lignes-guides Microsoft, chaque élément cliquable doit ainsi avoir une taille minimum d'environ 7mm et être espacé des autres éléments d'au moins 2 mm, pour éviter tout problème de visée. ### Indiquer où on se trouve dans l'App Même dans une App avec un nombre d'écrans limités, il est possible de ne pas savoir dans lequel on se trouve et se perdre. Bien que l'espace à l'écran soit réduit, il est par ailleurs conseillé d'afficher un titre pour chaque écran. ### 4. Limiter l'utilisation du clavier Si la taille des icônes et des boutons est limitée, celle des touches d'un clavier virtuel l'est encore plus : on peut aisément imaginer les contraintes que cela créé à une bonne partie des utilisateurs. La seule solution, dans ce cas, est de limiter au maximum la saisie clavier. Ceci signifie que l'App devra essayer de récupérer toute information pertinente par d'autres biais, par exemple en cherchant dans les données du smartphone (pour récupérer par exemple l'adresse mail de l'utilisateur), en proposant de se **logguer** via *FaceBook* ou *Twitter* ou grâce aux fonctions du téléphone (la géolocalisation peut éviter à l'utilisateur de saisir sa ville et son pays, par exemple). ### Rendre les éléments cliquables « reconnaissables » Il ne faut pas oublier que sur un smartphone ou une tablette il n'y a ni les **tooltips** ni l'effet de survol sur les éléments cliquables (la « petite main » blanche qui apparait sur ordinateur). Ceci signifie que l'utilisateur doit identifier tout seul les éléments cliquables (ou prendre le temps de cliquer sur tout ce qui apparaît à l'écran...). Il est donc impératif que les icônes et les boutons de l'App soient visuellement saillants et « [affordants](http://fr.wikipedia.org/wiki/Affordance) » (ils doivent avoir un aspect bombé, pour indiquer qu'ils peuvent être enfoncés) afin que l'utilisateur comprenne qu'il s'agit bien d'éléments interactifs. ### Soigner les icônes Comme dit précédemment, sur un support mobile il n'y a pas de **tooltips**. Une icône peu évocatrice risque donc de poser de sérieux problèmes à l'utilisateur, qui n'a d'autre choix que de cliquer dessus pour découvrir sa signification. Dans cet univers il est donc encore plus important d'utiliser des icônes claires et bien dessinées, pour que l'utilisateur en comprenne le sens le plus facilement possible. Lorsque la place à disposition et le nombre d'éléments à afficher le permettent, il est conseillé aussi de doubler les icônes d'un équivalent textuel, pour en rendre la compréhension encore plus facile. ### Exploiter le canal sonore et celui haptique Si limiter le nombre d'informations affichées à l'écran, en raison de sa taille réduite, pose un problème de communication, il ne faut pas oublier que d'autres canaux sont disponibles pour fournir un feedback à l'utilisateur. Paradoxalement, sur un téléphone portable le canal sonore n'est souvent pas le meilleur choix, car si l'utilisateur est dans un environnement urbain, très bruyant, il peut ne pas entendre les signaux émis par son téléphone. En revanche, le canal **haptique** (autrement dit, les vibrations de l'appareil) permet une communication sensorielle efficace : une vibration pourra ainsi indiquer une erreur, l'arrivée d'une mise à jour d'informations ou encore la sélection d'un élément important. ### Assurer la continuité des contenus Dans le cas d'une App qui s'inscrit dans la continuité d'un site Web, il est important que l'utilisateur puisse retrouver un univers familier et des contenus cohérents. De plus, s'il a la possibilité d'avoir un compte sur le site Web, il faut que le **login** soit disponible aussi sur l'App mobile, qui se doit donc d'être synchronisée avec le site Web. Ceci permet de garantir à l'utilisateur une *user experience* unique, dans laquelle, s'il modifie par exemple des options de son compte sur le site Web, elles seront automatiquement prises en compte sur l'App mobile. ### Exploiter les outils « mobiles » Il ne faut pas oublier que tout bon smartphone est avant tout « smart », autrement dit il peut nous simplifier la vie de plusieurs façons. Une App mobile bien conçue pourra exploiter à son avantage toute la puissance de ces supports, en permettant par exemple de chercher personnes ou commerces « autour de l'utilisateur » (grâce à la géolocalisation), de scanner le code barre des produits à mettre dans la liste des courses, de trouver des numéros de téléphone à appeler directement d'un simple clic (et oui, un smartphone reste un téléphone). Appareil photo, microphone, GPS, accéléromètre, sont donc des outils qui peuvent venir compléter les fonctionnalités d'une App. ### Penser au contexte d'utilisation et adapter la charte graphique Un tout dernier rappel vis-à-vis du fait qu'une App reste avant tout un objet à utiliser en condition de mobilité, donc probablement dans des conditions de luminosité qui ne sont pas identiques à celles d'un bureau, dans lequel on utilise peut être la version Web des mêmes services et contenus. Il faut donc penser à une charte graphique qui tienne compte de l'éclairage extérieur et soit suffisamment contrastée pour rester lisible en plein soleil. Pour certaines App, utilisées dans des contextes très différents (jour et nuit, par exemple), il ne faut pas hésiter à créer 2 versions de la charte graphique, que l'utilisateur choisira en fonction de ses besoins. Souvent, les applications de gestion s'articulent autour d'une interface dite "**Master-Detail**". Cela signifie qu'un ensemble d'éléments est présenté à l'utilisateur « **Master list** » et que la sélection d'un élément affiche sa fiche détaillée « **Detail** ». Si la **Master** **list** peut être présentée sous forme de tableau, il est parfois intéressant de l'afficher sous forme d'une liste à proprement parler :  []{#_Toc184625237.anchor}Figure. Le tableau présente chaque attribut d'un élément sur une nouvelle colonne alors que la liste laisse plus de flexibilité sur l'agencement des attributs Du point de vue de l'ergonomie, les avantages de la liste sont nombreux : - - - - - Il faut cependant être vigilant au fait que le tri de chaque colonne n'est plus possible. Il faut donc prévoir un élément d'interaction supplémentaire comme dans l'exemple ci-dessus, car le tri est souvent important dans les applications de gestion. En outre, la comparaison d'éléments est plus difficile que dans un tableau. - #### Utilisez le dévoilement progressif Le dévoilement progressif, ou « Progressive disclosure », est une stratégie permettant d'alléger visuellement les pages. Le principe consiste à présenter à l'utilisateur uniquement l'information nécessaire à chaque étape de l'interaction. C'est une bonne pratique ergonomique pour gérer l'affichage d'information complexe qui s'applique particulièrement bien pour les applications de gestion. L'objectif est de ne pas effrayer l'utilisateur lorsqu'il arrive sur une nouvelle page en **affichant les éléments interactifs quand l'utilisateur en a besoin et uniquement quand il en a besoin**. C:\\Users\\AMOR\\Pictures\\Progressive-disclosure.png []{#_Toc184625238.anchor}Figure 16. Les (nombreuses) contraintes de validité du mot de passe ne sont affichées que lorsque le focus est mis sur le champ concerné, en utilisant le principe du dévoilement progressif. Dans les applications de gestion, le dévoilement progressif peut prendre plusieurs formes. Par exemple cacher les boutons/éléments les moins importants dans un bouton « **Plus** » ou « **...** » pour hiérarchiser les actions, désengorger l'interface et améliorer l'ergonomie générale :  []{#_Toc184625239.anchor}Figure 17. Le bouton "..." permet d'éviter de présenter trop de boutons à l'utilisateur. - #### Répétez les boutons d'action en haut et en bas de page Dans une interface en mode **Master-Detail**, c'est à dire dans la plupart des applications de gestion, lorsque l'utilisateur sélectionne un élément dans la **Master list**, il est renvoyé vers sa fiche détaillée. Cette fiche présente à coup sûr des boutons d'actions. Une question se pose alors : où les placers ? S'ils sont placés en haut de la page, cela permet à l'utilisateur d'y avoir directement accès, mais si la page présente du défilement il ne les voit plus une fois en bas... alors que c'est justement à ce moment-là qu'il en a besoin. S'ils sont placés en bas de page, l'utilisateur les aura à portée de main lorsqu'il aura fini la lecture/manipulation de la page... mais si la page est longue il risque de ne pas les voir lors de son arrivée et devra faire défiler la page jusqu'en bas pour agir. C'est une perte de temps, donc un problème d'ergonomie, surtout s'il cherche juste le bouton « Retour ». Habituellement, nous conseillons simplement... de **positionner les boutons en haut ET en bas de la page**. Les boutons sont donc facilement accessibles et l'utilisateur profite des avantages de chacune des deux options. Les inconvénients sont mineurs : la duplication ne pose a priori pas de problème de compréhension si les boutons sont repris à l'identique (reste qu'il faut tout de même s'en assurer lors d'un [test utilisateurs](https://www.usabilis.com/expertise/etudes-utilisateurs/test-utilisateur/)) et l'encombrement des boutons en bas de page est souvent négligeable, car cela ne gêne pas l'utilisateur dans sa tâche (rien ne l'oblige à descendre jusqu'en bas de la page, il y a rarement un *footer* dans les applications de gestion). C:\\Users\\AMOR\\Pictures\\Duplication-bouton-UX-620x544.jpg []{#_Toc184625240.anchor}Figure 18. La duplication des boutons en haut et en bas de page permet de profiter des avantages de chaque solution avec peu de conséquences sur l'utilisateur Une autre option consiste à ferrer la barre d'action au navigateur de sorte qu'elle soit toujours visible lors du défilement (comportement "sticky"). Ceci permet de résoudre les problèmes d'accès aux boutons, mais la barre d'actions occupera toujours de la place à l'écran. Or nous déconseillons d'avoir trop de zones ferrées au navigateur, la zone de contenu visible s'en trouvant réduite. - #### Des conseils : Pensez à la mise en forme liste, utilisez le dévoilement progressif et n'ayez pas peur de dupliquer les boutons ! De notre expérience, ces quelques conseils d'ergonomie s'appliquent bien aux applications de gestion, mais peuvent être utilisés dans d'autres contextes. Reste qu'il ne faut pas les considérer comme des recettes miracles, mais comme des pistes à considérer lors de la conception. Chapitre 5 : Responsive Web Design  Le **Responsive Web Design (RWD)** ajuste automatiquement l'affichage d'une page web à la taille d'écran du terminal utilisé. Cette technique de conception de site web, ou d'interface digitale, répond à un besoin des utilisateurs, toujours plus nombreux à se connecter sur le web depuis un appareil mobile. Le Responsive Design permet de faciliter la navigation et d'améliorer l'expérience utilisateur lorsqu'il s'agit de consulter le site sur un appareil mobile. Le Responsive Web Design est souvent confondu avec un concept plus large, l'Adaptive Design. **Design responsive ou Design adaptatif**, les deux méthodes de conception visent à [améliorer l'ergonomie mobile du site web](https://www.usabilis.com/references/ergonomie-web/). C'est un enjeu majeur pour les entreprises, tant en termes de référencement que pour s'adapter aux nouveaux usages. C:\\Users\\AMOR\\Pictures\\responsive.png Qu'est-ce que le Responsive Design ? ==================================== Le Responsive design a été traduit en français par Design réactif/adapté/réceptif. Ce design permet de modifier la mise en page d'un site afin que le contenu s'adapte à l'écran quel que soit le terminal utilisé (smartphone, tablette, ordinateur de bureau, TV...). Il s'agit d'[adapter le site à toutes les résolutions](https://www.usabilis.com/responsive-webdesign-adapter-resolutions/). Autrement dit, les blocs de contenus (textes et images) se redimensionnent et se réorganisent en fonction de l'espace disponible sur l'écran.  []{#_Toc184625241.anchor}Figure 19. Adaptation du contenu selon l'appareil utilisé : ordinateur (desktop), tablette ou mobile CSS3 et Responsive Web Design ============================= Le Responsive Web Design a bénéficié de l'arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style). Un site pensé en Responsive Web Design est conçu ainsi : - - - - Lorsque l'objectif est atteint, l'interface du site web est lisible et utilisable sur tous les appareils. Le contenu se rétrécit et s'agrandit à volonté sans changer. Néanmoins, il est possible de cacher un contenu. Par exemple, une image ou un texte peuvent n'être visible que sur le site web en mode ordinateur (desktop) et tablette, et absents pour un affichage sur mobile. C:\\Users\\AMOR\\Pictures\\02-responsive-design-mobile-first.jpg []{#_Toc184625242.anchor}Figure 20. On voit clairement l'avantage d'un contenu qui s'adapte à l'appareil utilisé, ceci évitant de zoomer pour lire le texte ou naviguer Le Responsive Design s'appuie sur des règles, lesquelles dictent le rendu visuel. Les points de rupture/points d'arrêt (breakpoints) sont ainsi les valeurs utilisées pour définir les intervalles selon les gabarits de pages, intervalles associés aux catégories de terminaux. Avantages du responsive web design ================================== Le responsive web design est une adaptation de la mise en forme de votre contenu. Cette solution est donc facile à mettre en place, puisque vous pourrez vous baser sur votre site web existant. La proximité entre la version mobile et la version desktop présente de nombreux avantages : - - - Inconvénients du responsive web design ====================================== Le responsive Web Design charge l'ensemble du fichier CSS, y compris les informations destinées à un affichage sur ordinateur, ce qui peut retarder l'affichage sur les appareils mobiles.  On le verra plus bas, certains sites ayant des besoins critiques en rapidité d'affichage ou une utilisation de certaines fonctionnalités natives des appareils mobiles, gagneront à s'orienter vers d'autres solutions. La particularité du responsive web design d'adapter un même contenu à plusieurs écrans ne présente pas seulement des avantages, mais génère également des problèmes, principalement d'ordre technique : - - - - Pourquoi un site doit-il être « mobile friendly » ? =================================================== Reprenons au début. Un **site mobile friendly** est un site conçu pour que la navigation et l'affichage soient optimaux sur un mobile. L'utilisateur n'a pas besoin de zoomer/dé-zoomer avec deux doigts (« pinch to zoom ») ni de faire défiler la page dans tous les sens pour comprendre où se trouve le menu, voir correctement l'image, lire le texte etc. Bref, un site mobile friendly apporte un confort visuel sur une interface mobile. Voici quelques exemples d'éléments importants pour un site mobile friendly : - - - - Début 2015, pour la première fois dans le monde, le nombre de mobinautes a surpassé le nombre d'internautes. La [conception pour les sites mobiles](https://www.usabilis.com/conception-site-web-mobile/) est devenue indispensable.  []{#_Toc184625243.anchor}Figure 21. Évolution des utilisateurs d'internet dans le monde : Mobile VA ordinateur de 2007 à 2015 (Morgan Stanley Resarch) (Source : agence SEO.fr) L'invention du Responsive Web Design ==================================== En mai 2010, Ethan Marcotte, designer, publie un article sur le webzine « [A List Apart ](https://alistapart.com/article/responsive-web-design)». Il y aborde pour la première fois le **concept de Responsive Design**, qu'il développe dans un livre (« Responsive Web Design ») un an plus tard.  Comparé à un design statique, un **site web responsive** présente différents avantages, notamment : - - - C:\\Users\\AMOR\\Pictures\\06-Responsive-Webdesign-templates.jpg []{#_Toc184625244.anchor}Figure 22. L'adaptation à différentes résolutions des appareils... pas si simple ! Conclusion ========== Le **responsive design** s'est imposé très rapidement. Aujourd'hui, le digital est partout, les appareils et les écrans extrêmement divers (petits, moyens, grands, très grands...) et les objets connectés se multiplient. Cela fait bien longtemps qu'il n'est plus envisageable d'ignorer la version mobile d'un site. Pour autant, il reste techniquement difficile de concevoir une interface adaptée à tous les terminaux tout en enrichissant l'expérience utilisateur. Les manières de véhiculer le contenu d'un site web sur une tablette ou un smartphone sont nombreuses. Le responsive design est une solution actuellement privilégiée bien qu'elle ne soit pas la seule. Avant de se lancer dans un projet de site responsive et/ou mobile friendly, mobile first ou non, il faudra s'interroger sur le contenu, le budget à y consacrer... et, surtout, garder une conception orientée utilisateurs.