Cours Interfaces Homme - Machine A-U 2012-2013
TBM 2012-13
page 1
Plan
1. Pourquoi l'ergonomie ? Introduction & historique
une idée lente à se développer 2. Facteurs humains d'utilisabilité
Quelques notions importantes sur la qualité des logiciels interactifs
3. Principes ergonomiques généraux pour les IHM Recommandations ergonomiques à portée générale
4. Ergonomie des interfaces WIMP
Règles de bonne conduite à l’usage de l’honnête concepteur de GUI
5. Ergonomie des interfaces WWW
le Web nécessitent certaines recommandations spécifiques
6. Conception des interfaces interactives
le cycle de vie logiciel doit intégrer complètement l’interface
7. Evaluation des interfaces interactives
Le cycle logiciel concerne également l’interaction avec l’utilisateur
TBM 2012-13
page 2
Partie 5 Ergonomie des Interfaces WWW
TBM 2012-13
page 3
Introduction : Objectif
Notions
Spécificité de l’interaction WWW : interaction limitée et utilisateurs PIP Zones de navigation WWW : liens, bandeaux, menus, onglets
Pratiques
Règles d’or spécifiques à l’ergonomie des interfaces Web Techniques de structuration du contenu (tri par carte) Recommandation ergonomiques sur la navigation Web : guidage et
repérage
Organisation d’une page Web : généralités, page d’accueil, formulaires
TBM 2012-13
page 4
Importance de l’Ergonomie du Web
WEB
Utilisateurs novices et nomades
Ergonomie des interfaces Web
62% des acheteurs en ligne abandonnent au moins une fois en cours
de transaction [Davis 99]
40% des consommateurs ne reviennent pas sur un site où leur
première visite s’est soldée par un échec [cité par Nogier 05, p. 101]
Formulaires en ligne : 40% d’incompréhension sur les sites d’offre
d’emploi [Creative 99]
Un exemple : site Web IBM
Ancien site : bouton de recherche et d’aide les 2 plus utilisés Refonte du site : 120% d’accès et 400 % de commandes en plus
TBM 2012-13
page 5
ERGONOMIE DU WEB : QUELLE SPECIFICITE ?
GUI : Logiciels WIMP interactifs
Interaction utilisateur importante et complexe : gestion événementielle Manipulation directe : importante et potentiellement très riche Navigation : aucune notion de parcours, sauf dans les menus Nécessite un effort d’apprentissage Utilisateurs : Motivés
WWW : « Network User Interfaces »
Peu de gestion événementielle (même avec DHTML ou AJAX) Manipulation directe limitée : clic et saisie clavier Navigation centrale : liens, retour avant/arrière, localisation, signets... Simplicité, grande observabilité : pas ou peu d’apprentissage Utilisateurs « PIP » : Pressés, Ignorants et Paresseux Remarque: pas de WYSIWYG intégral
TBM 2012-13
page 6
Ergonomie du Web
Nouvelles règles d’OR Objectif: facilité d’utilisation et prévisibilité sont au centre
du modèle WWW Rester standard
Pas de solutions sophistiquées non valables sur tous les navigateurs Pas de solutions propriétaires ou nécessitant l’installation de plug-in
Rester simple Rester sobre
Pas plus de trois ou quatre couleurs principales par page Ne pas multiplier les polices de caractères Ne pas multiplier les images ou animations : effet sapin de Noël
Respecter la page et son contexte
Le WWW n’est pas multi-documents / multi-contextes
Toujours penser à l’effet utilisateurs PIP Eviter l’effet publicité
TBM 2012-13
page 7
Ergonomie du Web
Nouvelles règles d’OR
Contre-exemple : Rester sobre
TBM 2012-13
page 8
Conception d’un Site Web
Compétences variées
Un site WWW conçu par une personne unique est généralement mal
conçu d’un point de vue ergonomique et/ou marketing
TBM 2012-13
page 9
Conception d’un Site Web
DEMARCHE DE CONCEPTION
1. Ciblage du site — définir les objectifs et le contenu du site, à coupler
impérativement avec un ciblage des utilisateurs visés
2. Structuration du site — définir l’organisation des différentes
rubriques et les protocoles de navigation, en fonction une fois encore des utilisateurs visés
3. Finaliser l’implémentation (chartre graphique, conception des
interfaces, etc.) en tenant compte de recommandations ergonomiques et en ayant recours à des tests d’utilisabilité
Publicité
TESTS D’UTILISABILITE
Tout au long de la conception et le plus tôt possible Avec des utilisateurs novices correspondant à la cible visée Tests de perception — statiques, sur des visuels d’interface Tests d’utilisabilité — navigation sur un prototype significatif
TBM 2012-13
page 10
Conception d’un Site Web
CIBLAGE : IDENTIFICATION DU CONTENU ET DES
USAGES 1. Définition du service et du public ciblé (âge, catégorie
socioprofessionnelle, expérience informatique et Internet...) 2. Analyse des besoins — interview auprès d’un échantillon
représentatif d’utilisateurs appartenant à la cible.
3. Tests d’utilisabilité — Ces tests peuvent conduire à une remise en
cause partielle du ciblage
TBM 2012-13
page 11
Conception d’un Site Web
CIBLAGE : Analyse des besoins et utilisabilité
Évaluation critique des sites Web concurrents (soit par vous- même, soit
avec un échantillon d’utilisateurs)
TBM 2012-13
page 12
Conception d’un Site Web
Structuration du contenu
Facteur essentiel d’utilisabilité : comment organiser la présentation de
l’information pour qu’elle soit facilement identifiable et accessible
1. Définition de l’architecture de communication — Détermination de
l’ensemble de l’information qui doit être présente sur le site
2. Structuration proprement dite — Organiser cette information pour la rendre accessible le plus aisément et intuitivement possible : Caractérisation des différentes page Web Vision dynamique : navigation entre les différentes pages
TBM 2012-13
page 13
Conception d’un Site Web
Structuration : contre-exemple
TBM 2012-13
page 14
Conception d’un Site Web
STRUCTURATION : METHODE DU TRI PAR CARTE
Objectif — Organiser les pages du site par une méthode empirique Carte — Décrire chaque grain d’information, qui correspondra à unepage sur le site, par quelques mots-clés et une phrase de description
Tri — Regroupement des cartes par similarité, avec possibilité de faire
éventuellement des groupes de groupes (sous-rubriques)
Plusieurs participants (utilisateurs ou concepteurs) Analyse comparative des différentes classifications obtenues Se limiter à une cinquantaine de cartes + cartes blanches EVOLUTIVITE DU SITE ET STRUCTURATION
Statistiques d’utilisation (pages consultées, liens suivis...) : tests d’utilisabilité grandeur nature pouvant conduire à une refonte Mise à jour régulière du site : fréquence accrue + référencement
TBM 2012-13
page 15
Navigation Web
STRUCTURATION ET NAVIGATION
Importance — navigation est l’activité principale sur le Web La structure de navigation qui a été définie doit permettre de définir les
axes principaux de parcours du site : épine dorsale qui doit être explicite pour l’utilisateur
ARBORESCENCE DE NAVIGATION
Plusieurs types de structuration envisageables a priori Linéaire avec ou sans possibilité de retour-arrière En étoile Hiérarchique stricte ou lâche Acyclique (graphe)
Utilisateur perdu si site d’importance
TBM 2012-13
page 16
Navigation Web
ARBORESCENCE HIERARCHIQUE
Recommandations analogues à la navigation par menus (largeur d’abord)
Minimiser la profondeur du site (3-4 niveaux maximum) Optimiser le nombre de sous-chemins par rubrique : 8 sous-rubriques
maximum
Préférer une arborescence en arbre plutôt qu’en graphe
Hiérarchique stricte ou lâche (navigation horizontale)
TBM 2012-13
page 17
Navigation Web
Exemple de structure de navigation hiérarchique souple
Accès direct à l’accueil et aux rubriques principales(«domaines) Accès aux sous-rubriques du domaine courant Pages WWW globales ( carte du site, aide, nouveautés...)
TBM 2012-13
page 18
Navigation Web
RECOMMANDATIONS GENERALES
Règle d’or : le visiteur ne doit jamais se sentir perdu
Observabilité et Guidage
Savoir se repérer dans le site en cours de navigation Être en mesure d’avoir une vision globale du site Comprendre les (sous) rubriques environnant la page consultée Pouvoir retourner directement à l’accueil de site Faciliter la navigation verticale et horizontale : Rubriques principales toujours accessibles Bandeaux de navigation
TBM 2012-13
page 19
Navigation Web
SE REPERER : QUELQUES AIDES RECOMMANDEES
Bandeau de navigation ou onglets permanents (inverse couleur pour
la rubrique / sous rubrique courante)
Affichage du chemin de progression Indiquer le titre de la page Rappel du titre en barre de navigation ou chemin de progression
TBM 2012-13
page 20
Navigation Web
Se repérer : exemple et contre-exemples…
Recommandation
Si page Web trop longue, prévoir une barre de navigation de rappel à
TBM 2012-13
Publicité
la fin
page 21
Navigation Web
Se repérer : Avoir une vision globale du site
Bandeau de navigation ou onglets permanents Carte du site
TBM 2012-13
page 22
Navigation Web : Zones de navigation
Zones de navigation Web
Plusieurs types de zones de navigation
Liens hypertextuels Bandeaux de navigation (vertical ou horizontal) Onglets Menus
Pas de solution idéale
Répartition des zones de navigations principales
TBM 2012-13
page 23
Navigation Web : Zones de navigation
Menus
Familiarité : analogie logiciels interactifs Observabilité : masquage de l’information Lenteur : précision de pointage
TBM 2012-13
page 24
Navigation Web : Zones de navigation
LIENS HYPERTEXTUELS : RECOMMANDATIONS
Liens à la dénomination explicite (éviter les cliquer ici) et courte Si liste à puces de liens, les puces doivent faire partie du lien Privilégier le bleu pour le texte des liens
Couleur des liens sur le WWW
Toujours marquer par une couleur différente les liens déjà visités
74% des sites respectent cette consigne Couleurs des liens visités
Souligner le texte reste une manière très efficace de marquer un lien
80% des sites utilisent encore des liens soulignés
TBM 2012-13
page 25
Navigation Web : Zones de navigation
TBM 2012-13
page 26
Navigation Web : Zones de navigation
TBM 2012-13
page 27
Navigation Web : Zones de navigation
RECOMMANDATIONS GENERALES
Zones de navigation dans les zones visibles : « banner blindness » Placer les zones de navigation à proximité des zones de contenu Les liens à une hauteur supérieure à celle du logo souvent ignorés
Eviter de dupliquer les zones de navigations : le même lien ne doit pas
être présent à deux endroits différents sur la page Grouper dans une même zone les liens de même type Eviter logos et icones (sauf si très connus) pour marquer les liens Informer le visiteur si un lien conduit à autre chose qu’une page Web
ou si il pointe sur un autre site
Exemple :
icône à coté d’un lien vers un document PDF icône de sortie de site
TBM 2012-13
page 28
Navigation Web : Zones de navigation
RECOMMANDATIONS GENERALES : Contre-exemple
Eviter les logos pour marquer les liens: « effet publicité »
TBM 2012-13
page 29
Navigation Web : Zones de navigation
RECOMMANDATIONS GENERALES : Contre-exemple
Ne jamais dupliquer une zone de navigation
TBM 2012-13
page 30
Navigation Web
LIENS EXTERNES
Peut servir à montrer clairement que l’on est sorti du site maintenu Fenêtre pop-up qui masque le contenu de la page initiale Perte de l’historique de navigation : retour direct impossible
Recommandation
Eviter sauf cas spécifique (charge cognitive, effet marketing...)
l’ouverture d’une nouvelle fenêtre lors de la navigation à l’intérieur du site
Nouvelle fenêtre recommandée si on sort du site à proprement parler
(raison commerciale et déontologique
TBM 2012-13
page 31
Page Web
VISUALISATION D’UNE PAGE WEB [Gaillard et Reneault 02]
TBM 2012-13
page 32
Page Web
ORGANISATION D’UNE PAGE WEB
Les sites commerciaux suivent souvent le même schéma d’organisation
optimisant la visualisation des pages Web : normalisation de facto (attente utilisateur forte)
TBM 2012-13
page 33
Page Web
DISPOSITION DES INFORMATIONS
Informations les plus importantes au centre vers le haut Regrouper les informations pour faciliter leur détection et compréhension
Proximité: la vision regroupe les informations proches Similitude: on regroupe les images qui se ressemblent par leur forme Continuité : la vision regroupe les informations alignées
Jouer sur les imbrications (cadres...) pour favoriser les regroupements
TBM 2012-13
page 34
Publicité
Page Web
DISPOSITION DES INFORMATIONS
Evaluation expérimentale peut donner des informations utiles : occulométrie Exemple : lecture page détaillée du site Amazon
TBM 2012-13
page 35
Page Web
TAILLE D’AFICHAGE
Limiter la taille de la page (2 écrans au maximum en hauteur) Concevoir les pages pour un affichage adapté aux écrans des utilisateurs
Gestion de la taille des fenêtres en largeur : deux approches opposées
qu’on ne peut distinguer d’un point de vue ergonomique
Largeur des colonnes fixée Largeur des colonnes adaptatives1%
Pas de réel critère ergonomique pour privilégier une des deux approches
TBM 2012-13
page 36
Page Web
COULEURS ET STYLES
Cohérence – Utiliser une chartre graphique homogène sur tout le site La page d’accueil peut cependant se distinguer très légèrement(pour
faciliter son identification)
Tester l’affichage sur les navigateurs les plus usuels(couleurs et tailles
de caractères en particulier)
Taille de caractères fixe (feuille de style) Palette de couleur web-safe (256 couleurs)
TBM 2012-13
page 37
Page d’accueil
UNE PAGE WEB BIEN PARTICULIERE...
Signature du site, page qui doit retenir l’attention de l’utilisateur
nomade en lui montrant ce qui peut l’intéresser
Montrer et faire comprendre clairement les objectifs du site Donner quelques éléments d’information pour accrocher le visiteur Fournir des repères de navigation clairs vers les sous-domaines du
site :inciter l’utilisateur à aller voir plus loin
Utilisateurs PIP : éviter ....
Animation d’entrée, surtout non désactivable Peu d’animations dans la page : détournent
l’attention + effet pub mal perçu
Page illisible sans installation d’un Plug-in Page très belle mais vide de sens
Site très connu ou visant des happy fews
Seul cas où on peut oser une page très belle ... mais vide de sens
TBM 2012-13
page 38
Page d’accueil
Exemple et contre-exemple
TBM 2012-13
page 39
Page d’accueil
Exemple et contre-exemple
TBM 2012-13
page 40
Formulaires
UNE AUTRE PAGE WEB BIEN PARTICULIERE !...
Saisie d’information et non plus simple navigation Informations souvent personnelles et/ou paiement
Facteur de stress et cause principale d’abandon sur le Web Montrer à l’utilisateur que ses actions sont annulables
RECOMMANDATIONS
Titres et nom des champs explicites Limiter le nombres d’informations à saisir par formulaire Un seul formulaire si moins de 20 informations à saisir Plusieurs formulaires successifs si plus d’information(dans ce cas, liens :
annuler, précédent, suivant)
Guidage
Marquer la différence champs optionnels / obligatoires
Prévention et gestion des erreurs essentielle
Recommandations générales toujours applicables
TBM 2012-13
page 41
Formulaires
Exemple :
SNCF
TBM 2012-13
page 42
Formulaires
Exemple : : DIE BAHN
TBM 2012-13
page 43
Conception d’un site Web : Intranet
SPECIFICITE DES INTRANETS
Utilisateurs captifs et experts : apprenabilité moins importante Plus grosse masse d’information : accès rapide Un Intranet mal conçu est également source de surcoûts
QUELQUES RECOMMANDATIONS D’ORGANISATION
Calquer la structure du site sur celle de l’entreprise Fournir un index thématique structuré sur les connaissances de
l’entreprise.
Intégrer un moteur de recherche interne en s’attachant à son optimisation (recherche par sous-domaines d’activités etc.)
TBM 2012-13
page 44
MERCI PUR VTRE ATTENTIN
TBM 2012-13
page 45