Ergonomie des IHM Karim Sehaba Maître de Conférences en Informatique karim.sehaba@univ-lyon2.fr http://liris.cnrs.fr/~ksehaba Université Lumière Lyon2
Conception Web Organisation du contenu Navigation Web La page Web
Organisation du contenu Test de l ergonomie des sites web Par Le observation du comportement des l utilisateurs plutôt possible dans la conception Choix d un groupe d utilisateurs représentatif Plusieurs itérations de test Deux méthodes Test de perception Test d utilisabilité
Organisation du contenu Test de Perception Objectif : Vérifier que l internaute comprend la façon d utiliser le site et qu il interprète correctement le vocabulaire utilisé. Principe : demander à l'utilisateur d expliquer comment il interprète les pages Question à poser lors du test de perception Que permet de faire cette page? Que voit l internaute en premier? Où se trouvent les liens? Que signifient-ils? A quoi servent ces liens? Quelles informations devrait-on trouver derrière? Pour une demande de type, où doit aller l internaute? Que pense-t-il trouver ensuite?
Organisation du contenu Test d'utilisabilité Objectif : Observer directement la façon dont l internaute se sert du site et identifier les problèmes qu il rencontre en situation d utilisation. Princie : Observer individuellement des individus appartenant au cœur de cible en situation réelle d utilisation du site Point à vérifier lors du test d utilisablité L internaute sait-il où il est? Trouve-t-il l information qu il cherche Choisit-il le chemin le plus court pour trouver l information? L internaute voit-il les informations importantes? A-t-il repéré où sont les liens? Certains liens manquent-ils à l internaute? Comprend-t-il correctement le contenu des pages L internaute réussit-il à mémoriser correctement l organisation du site.
Organisation du contenu Structure du site 1. Élaborer/Collecter le contenu du site 2. Regrouper et agencer les informations du site Organisation par rapport aux tâches principales des utilisateurs et pas en calquant la stucture de l organisme Tri par carte Objectif : Organiser les informations du site selon le point de vue des utilisateurs Procédure : Une carte (un libellé + une description) pour chaque rubrique. Présenter l'ensemble des cartes et à chaque participant Chaque participant regroupe les cartes qui lui semblent similaire. Il décrit chaque groupe par une phrase et un nom. Il est possible de créer «un groupe de groupes» Les différents regroupements obtenus sont ensuite compilés en identifiant les associations les plus fréquentes
Organisation du contenu Navigation Organiser les menus en largeur plutôt qu on profondeur [Miller 81] Minimiser la profondeur du site (3-4 niveaux maximum) Optimiser le nombre d items par rubrique (8 sous-rubriques maximum) Préférer une arborescence régulière Déconseillé Préférable
Organisation du contenu Navigation une barre de navigation en haut de toutes les pages qui permet d atteindre toutes les parties importantes du site les panneaux gauche et droits disponibles pour d autres style de navigation
Organisation du contenu Navigation : cas des intranets Faciliter Définir la navigation un modèle de page unique pour l ensemble de l intranet Calquer la structure du site sur l organisation de l entreprise. Page 124, figure 4.18
Organisation du contenu Utilisabilité du site au quotidien Définir le processus de fonctionnement du site Suivre les statistiques d utilisation Prévoir les cas d erreur Utiliser un rideau de construction Maintenir les liens externes Mettre à jour régulièrement le site Inciter au dialogue Répondre aux utilisateurs
Organisation du contenu Moteur de recherche Donner au champs de recherche l apparence d un champ de saisie Simplifier les modes de recherche Permettre une recherche par sous-domaine Optimiser la recherche Fournir un index thématique
Conception Web Organisation du contenu Navigation Web La page Web
Navigation Web Principes ergonomique Indiquer où est l utilisateur
Navigation Web Principes ergonomique Indiquer où est l utilisateur Indiquer par où est passé l utilisateur
Navigation Web Principes ergonomique Indiquer où est l utilisateur Indiquer par où est passé l utilisateur Fournir une vue globale du contenu du site Agencer les rubriques dans l ordre où elles sont utilisées Permettre Ne une navigation directe pour les utilisateurs expérimentés pas demander à l internaute de connaître le fonctionnement du navigateur
Navigation Web Eléments du système de navigation En haut à droite apparaissent des utilitaires. La barre de navigation horizontale permet une navigation primaire Chaque page du site possède également une zone de navigation appelée navigation secondaire ou
Navigation Web Barre de navigation Afficher Cadrer la barre de navigation en haut à gauche de la page Répéter Ne une barre de navigation sur toutes les pages du site la zone de navigation en bas de page lorsque la page est longue pas multiplier les zones de navigation Déconseillé
Navigation Web Barre de navigation Afficher Cadrer une barre de navigation sur toutes les pages du site la barre de navigation en haut à gauche de la page Répéter Ne la zone de navigation en bas de page lorsque la page est longue pas multiplier les zones de navigation Eviter les barres de navigation «à géométrie variable» Utiliser des rollover pour mettre en évidence les boutons de navigation Utiliser «>» entre les niveaux d un chemin de progression Indiquer le chemin de la page courante dans le chemin de progression
Navigation Web Les liens Ne pas changer la couleur et le comportement par défaut des liens Eviter les liens trop courts Placer le lien à la fin d une phrase ou du paragraphe
Navigation Web Les liens Ne pas changer la couleur et le comportement par défaut des liens Eviter les liens trop courts Placer le lien à la fin d une phrase ou du paragraphe Le texte du lien doit permettre de deviner le contenu de la page Déconseillé
Navigation Web Les liens Ne pas changer la couleur et le comportement par défaut des liens Eviter les liens trop courts Placer le lien à la fin d une phrase ou du paragraphe Le texte du lien doit permettre de deviner le contenu de la page Les liens doivent cohérents sur tout le site Placer Ne À les liens sur les mots clés pas utiliser une phrase entière comme lien éviter : cliquez ici Dans une liste de liens ayant en commun une partie de texte, ne prendre comme lien que la partie de texte spécifique Ex : Résumé de la conférence de Paris Résumé de la conférence de Rome
Navigation Web Vérification du système de navigation [Krug O1] De quel site s'agit-il? Quelles sont les rubriques du site? De quelle page s'agit-il? Où se situe la page par rapport au reste du site? Sous quelle rubrique? Que peut faire l'utilisateur depuis cette page?
Conception Web Organisation du contenu Navigation Web La page Web
La page Web Organisation visuelle Principe de la théorie de la Forme : le système visuel perçoit le tout avant ses parties. Les lois qui régissent le fonctionnement perceptif chez l être humain : La loi de proximité : regrouper les objets qui sont proches. La loi de similitude : réunir des entités qui se ressemblent par la forme, la couleur ou la taille. La loi de la bonne continuité : rassembler des éléments qui partagent le même alignement.
La page Web Organisation visuelle Regrouper Mettre visuellement les informations semblables les informations importantes au centre-haut de la page Adapter un tracé régulateur homogène pour toutes les pages du site
La page Web Structuration de l information Principe de la pyramide inversée Problème Lecture Les écran 25 % moins rapide que la lecture papier surfers veulent des pages Qui se chargent vite Faciles Qui à utiliser se parcourent vite Informations moins importantes Détails, Citations longues Solution Donner Informations importantes Titre, Courtes annonces, Résumés, Panorama les conclusions en premier Proposer des détails ensuite pour ceux qui en veulent
La page Web Structuration de l information Plus l élément est important, plus il doit se voir L imbrication Le visuelle permet de hiérarchiser l information titre doit décrire explicitement le contenu de la page ou du paragraphe Figure 6.5 page 167
La page Web Longueur de la page Chaque Limiter page doit tenir dans un écran, voire deux écrans maximum la navigation à l intérieur d une même page
La page Web Longueur de la page Chaque page doit tenir dans un écran, voire deux écrans maximum Limiter la navigation à l intérieur d une même page Alléger la page autant que possible La page doit être lisible sans utiliser les barres de défilement horizontal Permettre un retour rapide en haut de page
La page Web Page d accueil Indiquer La explicitement la vocation du site page d accueil doit permettre de comprendre le site Fournir les repères de navigation depuis la page d accueil
La page Web Page d accueil Indiquer La explicitement la vocation du site page d accueil doit permettre de comprendre le site Fournir Eviter les repères de navigation depuis la page d accueil les écrans d introduction tunnels Alléger la page d accueil
La page Web Page d accueil Indiquer La explicitement la vocation du site page d accueil doit permettre de comprendre le site Fournir Eviter les repères de navigation depuis la page d accueil les écrans d introduction tunnels Alléger la page d accueil
La page Web Police de caractères Si plusieurs polices sont utilisées, une sémantique bien définie doit être associée à chaque police Eviter Ne d écrire en italique, en majuscule pas utiliser de polices trop petites Taille 12 au minimum pour le texte courant Les couleurs Ne pas multiplier le nombre de couleurs sur une même page Utiliser les "true colors" : Seules 216 couleurs sont communes aux navigateurs : Standards W3C : http://www.w3c.org Se Rester Cours restreindre à ces couleurs très sobre pour la couleur de fond en ligne sur les couleurs http://membres.lycos.fr/interaction/ http://www.vrrh.ulaval.ca/sante/couleurs.html http://interface.free.fr/interface/couleur.html
La page Web Textes Faire Le ressortir les éléments clés du texte (gras, liste...) texte du lien doit être cohérent avec le titre de la page Justifier Ne les textes à gauche pas souligner les textes Permettre à l utilisateur d imprimer le texte Images Minimiser le poids des images Privilégier la qualité de l'image par rapport à sa taille Accélérer Afficher Rendre Les le chargement des images progressivement les images visible les zones actives de l'image images cliquables peuvent être employées pour faciliter la sélection
La page Web Formulaires Utiliser des tableaux à plusieurs colonnes à gauche les libellés à droite pour les objets de la saisie Aligner Choix les champs des éléments Moins De de 5 options : Radios boutons 5 à 100 éléments : Liste déroulante Plus de 100 : accéder à une nouvelle page pour faire une recherche Proposer par défaut la valeur la plus courant Guider l utilisateur dans la saisie Limiter les saisies au stricte nécessaire Indiquer les entrées obligatoires Présenter les items selon la logique de l'utilisateur
La page Web Formulaires