Interfaces Homme-Machine - Cours

Ce cours pratique explore l'ergonomie des interfaces Web, en mettant l'accent sur les spécificités de l'interaction sur le WWW. Il enseigne les principes fondamentaux pour concevoir des sites Web faciles à utiliser, adaptés aux utilisateurs pressés, ignorants et paresseux (PIP). Le travail nécessite une compréhension préalable des interfaces homme-machine et des bases en conception Web.

Objectifs

• Comprendre les spécificités ergonomiques des interfaces Web par rapport aux interfaces WIMP.
• Appliquer les règles d’or pour la conception ergonomique d’un site Web.
• Structurer efficacement le contenu d’un site Web selon la méthode du tri par carte.
• Concevoir une navigation claire et intuitive, notamment par une arborescence hiérarchique adaptée.
• Évaluer et améliorer la visibilité et le repérage dans un site Web.
• Concevoir des pages Web et formulaires ergonomiques, en tenant compte des contraintes utilisateurs.

Prérequis et installation

• Connaissances de base en ergonomie des interfaces homme-machine.
• Notions élémentaires de conception Web et navigation Internet.
• Accès à un navigateur Web standard (sans plug-in propriétaire).
• Outils pour réaliser des tests d’utilisabilité (utilisateurs novices recommandés).

Spécificités de l’ergonomie Web

La première étape consiste à comprendre les différences entre les interfaces WIMP (Windows, Icons, Menus, Pointer) classiques et les interfaces Web. Contrairement aux logiciels interactifs, les interfaces Web offrent une interaction limitée (clics, saisie clavier) et une navigation centrée sur les liens hypertextes. Les utilisateurs Web sont souvent pressés, ignorants et paresseux (PIP), ce qui impose une simplicité et une prévisibilité maximales.

Un résultat correct est la capacité à expliquer pourquoi les solutions sophistiquées ou propriétaires sont à éviter, et pourquoi la simplicité, la sobriété et la standardisation sont essentielles.

Application des règles d’or pour l’ergonomie Web

Il faut appliquer les règles suivantes :

• Rester standard : éviter les solutions non compatibles avec tous les navigateurs et les plug-ins propriétaires.
• Rester simple et sobre : ne pas utiliser plus de trois ou quatre couleurs principales par page, limiter les polices de caractères et éviter la multiplication des images ou animations.
• Respecter le contexte de la page : le Web n’est pas multi-documents ou multi-contextes.
• Penser aux utilisateurs PIP en évitant l’effet publicité.

Un bon résultat est une page Web claire, sans surcharge visuelle, facile à comprendre et à naviguer.

Démarche de conception d’un site Web

La conception d’un site Web suit trois étapes principales :

1. Ciblage du site : définir les objectifs et le contenu, en ciblant précisément les utilisateurs (âge, catégorie socioprofessionnelle, expérience informatique).
2. Structuration du site : organiser les rubriques et définir les protocoles de navigation adaptés aux utilisateurs ciblés.
3. Finalisation de l’implémentation : appliquer une charte graphique, concevoir les interfaces en respectant les recommandations ergonomiques, et réaliser des tests d’utilisabilité.

Les tests d’utilisabilité doivent être menés le plus tôt possible avec des utilisateurs novices représentatifs, incluant des tests de perception (sur visuels) et des tests de navigation sur prototype.

Un résultat correct est une définition claire du public cible, une organisation cohérente du contenu, et des interfaces validées par des tests.

Structuration du contenu : méthode du tri par carte

Cette méthode empirique permet d’organiser les pages du site :

• Chaque carte décrit un grain d’information (une page) par quelques mots-clés et une phrase.
• Les cartes sont regroupées par similarité, avec possibilité de sous-rubriques.
• Plusieurs participants (utilisateurs ou concepteurs) réalisent le tri, puis on analyse et compare les classifications.
• Limiter à une cinquantaine de cartes plus des cartes blanches pour flexibilité.

Cette étape facilite une structuration intuitive et accessible du site. Un résultat correct est un classement clair, partagé et validé par les participants.

Navigation Web : conception et recommandations

La navigation est l’activité principale sur le Web. Il faut :

• Définir une arborescence claire, préférablement hiérarchique, avec une profondeur limitée à 3-4 niveaux et un maximum de 8 sous-rubriques par rubrique.
• Favoriser une arborescence en arbre plutôt qu’en graphe pour éviter que l’utilisateur se perde.
• Permettre un accès direct à la page d’accueil et aux rubriques principales.
• Utiliser des bandeaux de navigation ou des onglets permanents, avec indication visuelle claire de la rubrique courante (ex : inversion de couleur).
• Afficher le chemin de progression et le titre de la page pour faciliter le repérage.

Un bon résultat est une navigation fluide où l’utilisateur ne se sent jamais perdu et peut toujours revenir facilement à l’accueil ou aux rubriques principales.

Zones de navigation : liens, bandeaux, onglets, menus

Les zones de navigation doivent être visibles et proches du contenu principal pour éviter le phénomène de « banner blindness » (ignorance des zones de navigation placées trop haut ou trop éloignées).

Recommandations spécifiques :

• Ne pas dupliquer les liens dans plusieurs zones différentes sur la même page.
• Grouper les liens de même type dans une même zone.
• Éviter l’usage de logos ou icônes pour marquer les liens, sauf s’ils sont très connus, pour ne pas créer un effet publicité.
• Informer clairement l’utilisateur si un lien ouvre un document non HTML (exemple : icône PDF) ou mène vers un autre site (exemple : icône de sortie).

Les liens hypertextes doivent avoir une dénomination explicite et courte (éviter « cliquer ici »), être de couleur bleue, soulignés, et différencier la couleur des liens visités.

Un résultat correct est une page où les zones de navigation sont bien identifiées, cohérentes et non redondantes, avec des liens clairs et visibles.

Gestion des liens externes

Les liens vers l’extérieur du site peuvent :

• Montrer clairement que l’utilisateur quitte le site.
• Éviter l’ouverture de nouvelles fenêtres sauf si on sort réellement du site, pour ne pas perdre l’historique de navigation.

Un bon résultat est une navigation interne dans la même fenêtre, avec ouverture dans une nouvelle fenêtre uniquement pour les liens externes, respectant ainsi la charge cognitive et les attentes des utilisateurs.

Organisation et disposition d’une page Web

Les pages Web doivent suivre une organisation normalisée pour répondre aux attentes des utilisateurs :

• Placer les informations les plus importantes au centre et vers le haut de la page.
• Regrouper les informations proches pour faciliter leur détection et compréhension, en jouant sur les principes de proximité, similitude et continuité visuelle.
• Utiliser des cadres et imbrications pour favoriser les regroupements visuels.
• Limiter la taille de la page à deux écrans maximum en hauteur.
• Adapter la largeur des colonnes selon deux approches possibles : largeur fixe ou adaptative, sans préférence ergonomique claire.
• Maintenir une charte graphique cohérente sur tout le site, avec une palette de couleurs web-safe et une taille de caractères fixe définie par feuille de style.

Un résultat correct est une page claire, équilibrée, facile à lire et à parcourir, avec une cohérence visuelle respectée.

Page d’accueil : spécificités et recommandations

La page d’accueil est la signature du site et doit :

• Montrer clairement les objectifs du site.
• Donner des éléments d’information pour accrocher le visiteur.
• Fournir des repères de navigation clairs vers les sous-domaines du site.

Pour les utilisateurs PIP, il faut éviter :

• Animations d’entrée non désactivables.
• Multiplication d’animations distrayantes ou perçues comme publicitaires.
• Pages illisibles sans installation de plug-in.
• Pages très belles mais vides de sens.

Un résultat correct est une page d’accueil fonctionnelle, claire, sobre et engageante, adaptée à un public large et pressé.

Formulaires : conception ergonomique

Les formulaires sont des pages particulières où l’utilisateur saisit des informations souvent personnelles ou liées à un paiement, ce qui génère du stress et un risque d’abandon.

Recommandations :

• Utiliser des titres et noms de champs explicites.
• Limiter le nombre d’informations à saisir par formulaire : un seul formulaire si moins de 20 informations, plusieurs formulaires successifs sinon, avec liens « annuler », « précédent », « suivant ».
• Marquer clairement la différence entre champs optionnels et obligatoires.
• Prévenir et gérer les erreurs efficacement, en appliquant les recommandations générales d’ergonomie.

Un résultat correct est un formulaire clair, simple à remplir, avec un guidage efficace et une gestion des erreurs rassurante.

Spécificités des Intranets

Les intranets ont des utilisateurs captifs et experts, ce qui réduit l’importance de l’apprenant. Ils contiennent une grande masse d’informations nécessitant un accès rapide.

Recommandations :

• 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 optimisé (recherche par sous-domaines d’activités).

Un résultat correct est un intranet efficace, structuré selon l’organisation de l’entreprise, facilitant la recherche rapide d’informations.

Résultats attendus

• Sites Web simples, sobres, standardisés et compatibles avec tous les navigateurs.
• Navigation claire avec arborescence hiérarchique limitée à 3-4 niveaux et 8 sous-rubriques maximum.
• Pages Web organisées avec informations importantes en haut et centre, regroupements visuels efficaces.
• Pages d’accueil engageantes et fonctionnelles, sans animations excessives ni plug-ins requis.
• Formulaires ergonomiques, avec guidage clair, gestion des erreurs et limitation du nombre de champs.
• Intranets adaptés à la structure de l’entreprise, avec moteur de recherche performant.

Pièges courants

• Concevoir un site Web seul, sans collaboration, ce qui mène souvent à une mauvaise ergonomie.
• Utiliser des solutions propriétaires ou nécessitant des plug-ins, excluant une partie des utilisateurs.
• Multiplier les couleurs, polices, images ou animations, créant un effet sapin de Noël et distrayant l’utilisateur.
• Créer une navigation trop profonde ou complexe, perdant l’utilisateur.
• Dupliquer les liens dans plusieurs zones, provoquant confusion et surcharge.
• Ignorer les tests d’utilisabilité avec des utilisateurs novices, ce qui empêche de détecter les problèmes réels.
• Ne pas différencier clairement les liens externes, ou ouvrir trop souvent de nouvelles fenêtres.
• Concevoir des formulaires trop longs ou mal guidés, générant stress et abandon.