Ergonomie Web

LES INTERFACES HOMME-MACHINE
1ère Partie :
Introduction aux Interfaces Homme-Machine
2ème Partie :
Notions de base sur les Sciences Cognitives
3ème Partie :
Recommandations ergonomiques
4ème Partie :
Guides de Style
5ème Partie :
Méthodes de conception et d'évaluation
6ème Partie :
Principes ergonomiques des interfaces Web
© CNAM - Interaction Homme-Machine Ergonomie des interfaces Web Diapositive 1 / 66 Jean-Marc PUJOS
PLAN
Introduction
Les différences de métaphores
Les fondamentaux du Web
Les changements de l’interface Web
Conception et ergonomie des sites Web
Cinématique de navigation
Conception et mise en œuvre
Des conseils
Les standards
Elaboration de règles
Introduction
Introduction Jusqu’aux années 1980, interfaces de type lignes de

Métaphores commandes (systèmes Ms-Dos ou Unix) avec des applications
alphanumériques
Fondamentaux
Changements
10 ans pour voir s’imposer les interfaces graphiques (Graphical
Conception et User Interface)
ergonomie
Le but était de simplifier la gestion de quelques Mo de ressources
Cinématique de
navigation
locales. C’est la période client-serveur où l’assimilation de l’ergonomie
des applications graphiques ne s’est pas faite facilement.
Conception et
mise en œuvre
Conseils
Aujourd’hui, nous sommes entrés dans une nouvelle ère
La plupart des utilisateurs sont connectés à un réseau (local ou global).
Standards et
règles à suivre L'échelle des ressources à représenter a fortement grandi et l’influence
du Web permet aux utilisateurs d’exiger plus de simplicité.
Introduction
Le volume d’informations accessibles est aujourd’hui quasi-illimité,

il devient indispensable d’en faciliter l’accès
Introduction
Métaphores La définition d’une interface utilisateur pour un application

Fondamentaux Web est tout aussi difficile à réaliser que pour une
application dans un environnement graphique traditionnel
Changements
Conception et
ergonomie Faire table rase de tous les acquis, Il est nécessaire de
remettre en cause nos réflexes vis-à-vis de l’ergonomie des
Cinématique de
navigation interfaces graphiques
Conception et
mise en œuvre
En bref :
Conseils Nous allons progressivement passer de la notion de
Graphical User Interface (GUI)
Standards et
règles à suivre
à la notion de
Network User Interface (NUI)
Du GUI au Web
Introduction Les interfaces graphiques

Métaphores
Fondamentaux
Les interfaces graphiques reposent sur une gestion
Changements événementielle fine des actions de l’utilisateur
Conception et L’important n’est pas ce qui est visible, mais la manière et le
ergonomie
comportement
Cinématique de
navigation Cette finesse de gestion événementielle fait toute la richesse
des applications en environnement graphique
Conception et
mise en œuvre
Le potentiel de possibilité presque illimité de réalisation des
Conseils interfaces graphiques peut être un handicap lors de leur
conception
Standards et
règles à suivre
Du GUI au Web
Les interfaces Web

Introduction
Métaphores
Le modèle événementiel du Web est plus pauvre même avec
Fondamentaux l’association DHTML – DOM (Dynamic HyperText Markup
Changements
Language – Document Object Model) ou l’emploi de la
technologie AJAX (Asynchronous Javascript And XML)
Conception et
ergonomie
Ceci est lourd de conséquences sur le potentiel des interfaces
Cinématique de
navigation utilisateur du Web
Conception et
mise en œuvre
Mais ce handicap peut se révéler un avantage (simplicité de
Conseils conception et d’utilisation) en particulier pour les applications de
gestion
Standards et
règles à suivre des champs de saisie
des boutons d’action pour lancer des opérations
des liens hypertextes pour naviguer entre les pages
Du GUI au Web
Introduction En résumé :
Métaphores
L’important n’est pas de plagier l’environnement graphique mais
Fondamentaux d’appréhender les spécificités de l’interface hypertexte
Changements
Conception et
ergonomie
Il y a un monde de différence entre les deux types d’applications :
Les applications graphiques se manipulent alors que les
Cinématique de application Web se parcourent
navigation
Similitude de présentation et d’utilisation des applications
Conception et Web (à l’exemple des suites bureautiques)
mise en œuvre
Les applications graphiques nécessitent un certain
Conseils apprentissage alors que les applications Web (normalement)
Standards et
sont comprises dès le début
règles à suivre
Les différences de métaphores
Introduction
Métaphores Métaphores GUI WEB

Fondamentaux
Changements 1 - Manipulation Forte Faible

Conception et
ergonomie
2 - Navigation Faible Forte
Cinématique de
navigation
3 - Mode évènementiel Riche Pauvre
Conception et
mise en œuvre
Conseils Potentiel global : 1+2+3 Etendu Restreint

Standards et
règles à suivre
La métaphore de manipulation
Introduction
Cette métaphore est très forte pour les environnements
graphiques et les gestes possibles sont très nombreux
Métaphores Clic et double-clic
Fondamentaux Glisser/déplacer avec ou sans combinaison de touche
Processus objet-action
Changements
Conception et
ergonomie Métaphore bien faible pour les environnements Web
Simple clic et manipulation au clavier
Cinématique de
navigation Utilisation limitée de la souris (pas de glisser/déplacer)
Conception et
mise en œuvre Les possibilités sont réduites mais suffisantes
Conseils Objets graphiques courants (boite à cocher, bouton radio, liste
déroulante, etc.)
Standards et
règles à suivre
Boutons d’action et liens provoques un changement majeur de
contexte
La métaphore de navigation
Introduction Cette métaphore est essentielle pour les environnements

Web
Métaphores
L’hypertexte est centré sur le façon de naviguer ou de
Fondamentaux parcourir les entités disponibles (la page est le granule de
Changements
base)
Les navigateurs proposent des fonctions avancées facilitant
Conception et
ergonomie
le parcours (boutons avant et arrière, liste des pages vues,
bookmarks, etc.)
Cinématique de
navigation
C’est la plus grande faiblesse des environnements
Conception et
mise en œuvre graphiques
La notion de parcours et de navigation n’existent pas
Conseils
Le seul élément d’orientation réside dans la barre de menu, il
Standards et n’y a que cette barre comme point de départ et comme point
règles à suivre
d’aiguillage tout au long de la session
Le modèle événementiel
Ce mode est très important pour les environnements graphiques

Introduction Mode riche qui permet de rafraîchir une partie d’un dialogue ou d’une
fenêtre en réponse à une action de l’utilisateur
Métaphores
Ce mode est quasi inexistant pour le Web
Fondamentaux
Il ne se passe rien à l’intérieur d’une page tant que l’utilisateur ne
Changements clique sur un lien ou sur un bouton
L’ergonomie Web ne multiplie pas les échanges entre client et
Conception et
ergonomie
serveur, mais découpe le processus en unité atomique sous forme de
pages
Cinématique de Réduction au minimum avec la combinaison HTML + HTTP
navigation (remplacement d’une page par une nouvelle à chaque appel HTTP)
Conception et
mise en œuvre Il existe des possibilités pour réduire cette placidité
Enrichir la page HTML avec du code script (Jscript ou JavaScript), pas
Conseils d’enrichissement partiel avec HTML 3.2 mais possible avec HTML 4
Standards et Le HTML dynamique (DHTML) peut être une réponse adaptée à ce
règles à suivre problème
Emploi de la technologie AJAX
Le potentiel global
Introduction Les environnements graphiques sont particulièrement bien

Métaphores adapté pour les applications nécessitant une interaction
Fondamentaux
importante avec l’utilisateur et une grande richesse de
manipulation directe
Changements
On peut presque tout faire avec un environnement graphique
Conception et
ergonomie
Le Web est plus adapté aux applications découpables en
Cinématique de
navigation
processus élémentaires, il offre un potentiel plus limités par ses
différents handicaps
Conception et
mise en œuvre Presque pas de possibilités de manipulation
Pas de gestion événementielle sans script ou développements
Conseils
supplémentaires
Standards et Ce domaine est suffisant pour des applications de gestion et offre
règles à suivre
un gain déterminant en terme de simplicité
La convergence
La convergence GUI-Web est-elle une solution pour combler

Introduction
les handicaps ?
Le Web reste attaché à son modèle de page peu événementiel
Métaphores
Le GUI n’est pas encore prêt à se transformer en un navigateur
Fondamentaux intégré
Changements Convergence Web GUI
Conception et
Malgré les applets Java ou les contrôles activeX, une page Web
ergonomie conserve son découpage monolithique et les objets encapsulés
ne permettent pas de retrouver toutes les possibilités d’un
Cinématique de
navigation
comportement GUI ”natif ”
Convergence GUI Web
Conception et
mise en œuvre Intégrer un navigateur dans un environnement graphique n’est
pas une solution efficace
Conseils
La différence majeure de gestion de l’interface utilisateur
Standards et subsiste en fonction de la nature du document manipulé (page
règles à suivre
HTML interface Web, autre type de document interface
graphique)
Internet ou Intranet ?
L’intérêt principal du Web repose sur sa facilité de déploiement, le

Introduction
navigateur est le client ultime, unique et universel
Métaphores
Fondamentaux C’est un atout lourd mais fragile pour la choix de l’architecture Web
Changements
Conception et Il suffit de peu pour dériver des standards du Web

ergonomie
Cinématique de
navigation Le choix de tel ou tel navigateur pour son Intranet implique de
développer ses applications Web en fonction de ce client et de lui
Conception et
mise en œuvre seul, mais ce choix entraîne des conséquences gênantes :
Ensemble des utilisateurs = totalité du parc coûts de maintenance
Conseils
élevés
Standards et Potentiel d’ouverture vers l’extérieur limité
règles à suivre
Les applications développées sont dépendantes du navigateur choisi
Internet ou Intranet ?
Il est indispensable de se poser les deux questions suivantes

Introduction
lors du choix technique :
Métaphores 1. Est-il possible de standardiser un navigateur particulier pour
Fondamentaux l’ensemble des utilisateurs (sans exception), cela sans durée et
avec certitude ?
Changements
2. Les applications Intranet seront-elles seulement à usage
Conception et interne ou susceptible d’être offertes aux partenaires ?
ergonomie
Cinématique de
navigation
C’est toute la différence entre l’Intranet et l’Internet, il ne s’agit
plus de servir une poignée d’utilisateurs locaux, mais une
Conception et
mise en œuvre
myriade d’utilisateurs inconnus, dispersés et ne répondant pas
forcément au même profil technique
Conseils
Standards et
règles à suivre Est-il absurde d’appliquer une différence de traitement entre les
applications Intranet et Internet car, fondamentalement, ce sont
les mêmes ?
Les utilisateurs du Web
Introduction
L’automatisation des SI va toucher une population de plus en
plus importante dans l’entreprise :
Métaphores
Il est réducteur de limiter le Web à des utilisations occasionnelles
Fondamentaux
Il est abusif de proclamer que le Web est inadapté pour des
Changements utilisations intensives
Conception et Il est plus facile d’adapter une interface prévue pour des
ergonomie utilisations ponctuelles pour des usages fréquents que le
Cinématique de contraire
navigation
Le réussite d’une application Web repose sur un principe
Conception et simple : l’adaptation aux utilisateurs
mise en œuvre
les novices vont parcourir le site étapes par étapes tandis que
Conseils
des raccourcis permettent aux avertis de sauter les étapes
Standards et connues
règles à suivre
Il faut préserver la simplicité de l’interface Web et s’appuyer
sue la notion de client universel
Les utilisateurs du Web
Introduction
En conséquence :
Métaphores
Il faut préserver la simplicité de l’interface Web et
Fondamentaux
s’appuyer sue la notion de client universel
Changements
Il est nécessaire de prévoir la conduite des utilisateurs
Conception et
ergonomie selon la règle du PIP : Pressés, Ignorants et Paresseux
Cinématique de Le but est de présenter dès le début un déroulement
navigation
fluide et sans mystère
Conception et
mise en œuvre
Si vous mettez une application dans une situation où
l’effet PIP rebute les utilisateurs , il n’y aura pas de
Conseils
seconde chance
Standards et
règles à suivre
Le Web et son interface s’articulent autour de quelques principes

Introduction fondamentaux :
Métaphores Le Web fonctionne en mode page et déconnecté :
Fondamentaux La page est l’élément principal et le granule de base du Web, de
plus ce composant est monolithique
Changements
Il n’y a pas de rafraîchissement possible une fois la page
Conception et chargée dans le navigateur, sauf en changeant de page
ergonomie
Le protocole HTTP fonctionne en mode non connecté, pas de
Cinématique de
navigation
dialogue permanent entre le client et le serveur
Conception et
mise en œuvre
Peu de traitements coté client :
Conseils
L’essentiel des traitements d’une application Web sont exécutés
Standards et sur le serveur
règles à suivre
Les traitements coté client sont limités aux contrôles de niveau
syntaxique (contrôle de saisie), voire à de petites animations à
l’aide de langage comme Javascript ou Flash
Le Web et son interface s’articulent autour de quelques principes

Introduction
fondamentaux (suite) :
Métaphores
L’ergonomie doit participer à la navigation
Fondamentaux
Le navigateur Web offre des fonctions dédiées et utiles (retour
arrière, gestion des signets, etc.)
Changements
Mais une application Web doit se suffire à elle-même en évitant
Conception et l’utilisation intensive des boutons ”Back” et ”Forward” du
ergonomie navigateur
Cinématique de on parlera alors de navigation fluide (ensemble des choix du
navigation
site, repère dans le site, etc.)
Conception et
mise en œuvre
Conseils Le respect impératif des standards

Standards et Le respect des standards est une condition sine qua non d’une
règles à suivre application Web
Le principe est d’offrir l’accès à un ensemble de ressources
(pages HTML, fichiers, images, etc.) à partir d’un navigateur
générique
Les changements
Les éléments de l’interface graphique qui disparaissent :
Introduction
Le multi-contextes : une page = un contexte
Métaphores
Le Multiple Documents Interface (MDI) : le recours aux ”frames” en
Fondamentaux
permet une simulation limitée
Changements
Le rafraîchissement partiel à l’intérieur d’une fenêtre ou d’un
Conception et dialogue : le recours à la programmation dynamique en permet une
ergonomie
simulation limitée
Cinématique de
navigation Le glisser/déplacer (drag & drop)
Conception et Le pointer/cliquer (processus objet/action)
mise en œuvre
Les dialogues et la disparition des situations strictement modales
Conseils
Les barres de menus, les barres d’outils et les barres d’icônes
Standards et
règles à suivre Le WYSIWIG (ce que l’on voit est ce que l’on obtiendra)
Les touches par défaut, les raccourcis clavier et les combinaisons
de touches (à partir de HTML 4 puis à l’aide d’AJAX)
Les changements
Les nouveautés apportées par le Web :

Introduction
Métaphores
La notion de site (ainsi que les notions de branche et
Fondamentaux portail)
Changements La page d’accueil ( ou home page)
Conception et La navigation (de type arborescente, pyramidale, en
ergonomie
réseau ou en râteau)
Cinématique de
navigation Le découpage en mode page
Conception et La notion de ”click & go” et d’intuitivité (ce que l’on voit est
mise en œuvre là où on ira)
Conseils
L’utilisation des images (compressées, fixes ou animées)
Standards et
règles à suivre Le navigateur comme élément fédérateur
Le drill-down (approfondissement)
L’interface intuitive
L’interface Web est intuitive et prévisible

Introduction
Peu de composants (liens hypertextes, boutons d’action et
Métaphores images sensibles) facile à utiliser une utilisation de
manière prévisible, la prévisibilité est un élément fondamental
Fondamentaux
du caractère de l’interface Web
Changements
Elle est l’élément principal du confort de l’utilisateur basé sur
Conception et
ergonomie la confiance qu’il a de l’interface
Cinématique de Bannir les interfaces hybrides
navigation
La prévisibilité peut-être inhibée par l’introduction de
Conception et composants propriétaires aux comportements non conformes
mise en œuvre aux standards
Conseils
Les raisons d’un design adapté au Web
Standards et Pour une utilisation conviviale, intuitive et facile
règles à suivre
d’apprentissage
Recommandations majeures
Introduction Les nouvelles règles d’or :

Métaphores
Fondamentaux Restez standard (pas de sophistication ou de solutions

propriétaires)
Changements
Conception et Restez simple (facile à comprendre)

ergonomie
Restez sobre (évitez de trop en faire)
Cinématique de
navigation
Respectez la page (et son contexte)
Conception et
mise en œuvre Utilisez ce qui marche (le Web fonctionne bien, il est
Conseils
éprouvé)
Standards et Respectez l’effet PIP (Pressés, Ignorants et Paresseux)

règles à suivre
Définition des contraintes
Introduction
Identification de la cible des utilisateurs
Métaphores
Identifier les utilisateurs potentiels de façon à déterminer
Fondamentaux le choix des normes et standards à respecter ainsi que
Changements
l’ergonomie globale à mettre en œuvre
Conception et
ergonomie
Étude de l’architecture technique du coté serveur et réseau
Cinématique de
navigation L’architecture retenue a pour but d’obtenir les
performances nécessaires pour satisfaire les utilisateurs,
Conception et
mise en œuvre
de réduire les coûts de communication, d’être facilement
administrable et évolutive
Conseils
Standards et
règles à suivre
Définition des contraintes
Introduction Identification des standards à respecter

Métaphores
Le choix des standards peut être différent si :
Fondamentaux
Le poste client n’est pas clairement identifié et maîtrisé
Changements il est impératif de se conformer aux standards supportés
par la quasi-totalité des environnements clients
Conception et
ergonomie Le poste client est connu, identifié et maîtrisé
Cinématique de
il est possible de dépasser les standards de base (Java,
navigation DHTML, feuilles de styles, …)
Conception et
mise en œuvre
Attention, la décision de dépasser les normes de base n’est pas anodine.
Conseils
Si l’application doit s’ouvrir un jour à des utilisateurs dont on ne maîtrise
Standards et pas l’environnement, cette ouverture ne sera que partielle et profitera
règles à suivre uniquement aux utilisateurs les mieux équipés
La notion de SITE
Le site institutionnel
Introduction C’est le Web public, il doit être attrayant, riche et convivial
Métaphores La cible est inconnue, il doit donc s’appuyer sur les standards et avoir
des pages de poids raisonnable
Fondamentaux
Changements
Le site intranet
Conception et
ergonomie Le site intranet est constitué par :
Une collection de domaines (regroupements d’applications ou
Cinématique de d’informations par métiers et processus)
navigation
Des informations générales (page d’accueil, plan du site, un
Conception et glossaire, etc.)
mise en œuvre
Conseils Le site intranet est défini par :

Standards et Une charte graphique à laquelle se conforme la totalité de
règles à suivre l’intranet
Un système de navigation intuitif et cohérent
La charte graphique Intranet
Introduction Sur un site Intranet, l’efficacité prime sur le spectaculaire, il faut

trouver un compromis entre le côté performance/temps de
Métaphores
réponse et d’autre part l’aspect graphique du site
Fondamentaux
La charte graphique définit les tailles, les couleurs et aspects
Changements
des bandeaux, des boutons ainsi que le positionnement des
Conception et objets dans une page
ergonomie
Elle spécifie tous les types d’objets d’une page (liste, champs de
Cinématique de
navigation
saisie) ainsi que les polices utilisées pour tous les styles de
texte
Conception et
mise en œuvre Établir une charte graphique est un projet en soi, il fait intervenir
Conseils des informaticiens, des infographistes ainsi que les services de
la communication et du marketing (par exemple)
Standards et
règles à suivre
La charte graphique Intranet
Style des bandeaux de

navigation
Introduction
Métaphores Aspect et emplacement

des logos
Fondamentaux
Changements
Aspect des éléments en
Conception et avant-plan
ergonomie
Cinématique de Couleur de fond du

navigation bandeau et de la page
Conception et
mise en œuvre
Dimensions de la page
Conseils (bandeau, corps de
page, pieds de page, ...)
Standards et
règles à suivre
Police de caractères
pour les textes et les
titres (taille, gras, …)
Définition d'un modèle de page
L’entête de page
Il comprend le titre de la page et le bandeau de navigation
Introduction
Le titre est rédigé de manière concise (court et précis) et est placé en
Métaphores haut de la page ainsi que dans la barre de titre du navigateur (référence
Fondamentaux
des signets)
La bandeau de navigation est généralement placé en haut ou à gauche
Changements
de la page
Conception et
ergonomie Titre de la fenêtre Titre de la page et fil d’Ariane
Cinématique de
navigation
Conception et
mise en œuvre
Conseils
Standards et
règles à suivre
Lien vers l'accueil

Bandeau de
navigation
Le corps de page
Introduction Le corps de page est la zone de contenu (prévoir la place d'intégration
d'autres objets)
Métaphores
Fondamentaux
Le pied de page
Il concentre les informations utiles (date de dernière mise à jour, adresse
Changements émail du Webmaster et éventuellement un bandeau de navigation
Conception et principal sous forme textuelle)
ergonomie
Cinématique de Bandeau de navigation textuel

navigation dernière mise à jour
Conception et
Adresse du Webmaster
mise en œuvre
Conseils
Standards et
règles à suivre
Lien juridique
Le modèle de page doit respecter la charte graphique définie

Introduction
Métaphores
Quelques règles appliquées dans toutes les pages offrent un
Fondamentaux
confort supplémentaire à l'utilisateur :
Changements
Pour les bandeaux de navigation principaux et secondaires,
Conception et le domaine ou le thème dans lequel se trouve la page affichée
ergonomie
doit être mis en valeur à l'aide d'un effet graphique
Cinématique de (changement de couleur ou présence d'un indicateur)
navigation
Les polices utilisées doivent suivre un style défini pour
Conception et
mise en œuvre
l'ensemble du site, il est conseillé de limiter le nombre de
polices (une pour les titres et les bandeaux de navigation et
Conseils une autre pour le corps de page)
Standards et
règles à suivre
Un modèle type de page

Introduction
Une zone appelée MENU contenant un sommaire ou un menu permettant
Métaphores
une navigation aisée dans le site
Fondamentaux
Une zone principale appelée CONTENU contenant le corps de l’information
Changements
Une zone appelée ENTETE où
Conception et sont inscrites les informations ENTETE
ergonomie
nécessaires à la présentation de
Cinématique de la page
navigation
Une zone appelée BASDEPAGE
Conception et où sont inscrites les informations
mise en œuvre CORPS DE LA PAGE
propres à l’auteur avec le cas SOMMAIRE
ou
ou
Conseils échéant des messages MENU
CONTENU
d’indication (une aide en ligne par
Standards et
règles à suivre exemple), ainsi que peut-être
quelques liens complémentaires
NOTE DE BAS DE PAGE
Règles générales de navigation
Afin de concevoir une navigation la plus transparente possible,

Introduction
il est nécessaire de se poser ces question :
Métaphores
Comment définir l'épine dorsale du site ?
Fondamentaux
Définir les axes principaux du site, les raccourcis souhaitables et
Changements éviter de ramifier trop en profondeur le site
Conception et
ergonomie
Quelle barre de navigation ?
Cinématique de
navigation Définir les méthodes et les moyens utiles à la navigation (menus,
images sensibles, listes, boutons , etc...)
Conception et
mise en œuvre
Quel sommaire ?
Conseils
Faut-il des outils de navigation locale ?
Standards et
règles à suivre Quelles sont les manières de naviguer ?
Il faut donner au site une logique compatible avec celle des
utilisateurs
Les types d'arborescence
Il existe plusieurs types d'arborescence :

Introduction L’arborescence linéaire simple ou à double circulation,
Métaphores chaque écran s’enchaîne au suivant et éventuellement au
précédent par un lien aller et un lien retour
Fondamentaux
L’arborescence simple ou en étoile où l’utilisateur entre par
Changements un écran qui est le “menu central”
Conception et L’arborescence à niveaux hiérarchiques multiples, organisée
ergonomie à partir d’un écran de départ où viennent se raccorder des
Cinématique de structures linéaires ou en étoile
navigation L’arborescence maillée où tous les écrans sont reliés les uns
Conception et aux autres
mise en œuvre
Conseils
Il peut y avoir un nombre infini de niveau, mais pour des raisons
Standards et de lisibilité et plus généralement d'organisation et de
règles à suivre
maintenance, il est recommandé de ne pas descendre dans le
plan général de l’arborescence en dessous des niveaux 4 ou 5
Les types de navigation
Introduction
Métaphores Un site Web est de nature arborescente, et deux type de

Fondamentaux
navigation permettent de se déplacer entre les noeuds
Changements La navigation horizontale pour un déplacement de même
Conception et niveau (entre les domaines ou entre les thèmes d'un même
ergonomie domaine)
Cinématique de
navigation La navigation verticale pour descendre ou monter d'un
Conception et ou plusieurs niveaux dans un domaine ou un thème
mise en œuvre
Conseils
Cette navigation est structurée par des bandeaux de
navigation
Standards et
règles à suivre
Schéma d'arborescence d'un site Web
Accueil
Introduction
Métaphores
Fondamentaux
Domaine A Domaine B Domaine C
Changements
Conception et
ergonomie
Cinématique de
navigation
Objet A1 Objet A2 Objet A3
Objet C1 Objet C2 Objet C3
Conception et
mise en œuvre
Objet B1 Objet B2
Conseils
Standards et
règles à suivre
Navigation verticale
Navigation horizontale
Les différents niveaux de navigation
L ’accueil du site
La page d’accueil générale La navigation dans le
est le point d’entrée unique du site
site vers tous les domaines
Il est indispensable de mettre La navigation dans un
Le site doit contenir une carte
un ou plusieurs bandeaux de
du site (sitemap) accessible domaine
navigation sur toutes les pages
depuis la page d ’accueil et
du site de façon uniforme et
permettant une recherche Comme pour le site, Il doit
invariante
d’information rapide exister un ou plusieurs
Un lien vers la page d’accueil bandeaux de navigation sur
Il peut exister une aide ou un toutes les pages du domaine
doit être présent sur toutes les
glossaire pour l’ensemble du de façon à permettre la
pages du site
site navigation inter-thème
La page d’accueil de chaque
domaine contient des liens vers Toutes les pages du domaine
les thèmes de celui-ci ainsi que ont un lien vers la page
vers les autres domaines du d'accueil du domaine
site
Les différents niveaux de navigation
Schéma exemple de navigation dans un site Web
Introduction
Page d'accueil
Métaphores
Fondamentaux
Domaine A Sitemap
Domaine B
Changements Domaine C
Conception et
ergonomie Aide
Accueil Domaine A
Cinématique de
navigation Bandeau de Thème 1 Lien vers
liens vers les l'accueil du
Conception et domaines
Thème 2 site
Actualité
mise en œuvre Thème 3
Conseils
Standards et
règles à suivre
Thème 2
Bandeau de Thème 1
liens vers les
thèmes
Conception et mise en œuvre
Introduction
Métaphores Un site Web est un ensemble de pages de natures

Fondamentaux différentes mais regroupées en plusieurs catégories :
Changements Les pages d'accueil ou page d'aiguillage
Conception et Les pages de formulaire
ergonomie
Les pages de liste
Cinématique de
navigation Les pages de contenu
Conception et
Les pages de résultat
mise en œuvre Les pages de présentation
Conseils
Standards et
règles à suivre
La page d’accueil
Introduction
La page d'accueil est la première à être vue par l'utilisateur
et qui, à travers elle, se fera une opinion du site. Cette page
Métaphores
(appelée aussi "home-page") n'a pas le droit de décevoir
Fondamentaux
Changements Le rôle de la page d'accueil est

Conception et
double :
ergonomie Faire passer un message
Cinématique de fort par le texte ou le
navigation graphisme
Conception et Aiguiller l'utilisateur dans la
mise en œuvre
navigation vers les
Conseils domaines
Standards et
règles à suivre
Les éléments de la page d’accueil
Introduction
La page d'accueil du site contient des liens vers :
Métaphores
Chaque domaine du site
Les pages globales du site (carte du site, glossaire,
Fondamentaux
actualité, moteur de recherche, etc...)
Changements
Conception et
La page d'accueil d'un domaine contient des liens vers :
ergonomie Chaque thème ou objet majeur du domaine
Cinématique de Les autres domaines du site
navigation
La page d'accueil du site
Conception et
mise en œuvre
La page d'accueil doit contenir :
Conseils La date de dernière mise à jour
Standards et L'adresse émail de la personne à contacter (en général le
règles à suivre
webmaster)
Contraintes à respecter sur la page d'accueil
Visualisation de la page par tous

Introduction
Maîtriser l'environnement en jouant sur le format de la
Métaphores page (640x480, 800x600, 1200x1180, …)
Fondamentaux en fonction de la technologie du moment
Changements Proscrire l'emploi de plugins et de composants clients
(Java ou activeX)
Conception et
ergonomie
Téléchargement rapide
Cinématique de
navigation
Attention au débit des liaisons réseaux
Conception et
La page d'accueil doit être légère (poids inférieur à 50 Ko
mise en œuvre avec les images)
Conseils
Ne pas provoquer de rejet
Standards et Éviter de générer un mécontentement pour l'utilisateur
règles à suivre
Attention à la surcharge d'images (surtout animées)
(effet sapin de Noël)
Exemple de page d’accueil de site
Liste de sélection
Introduction
Métaphores
Fondamentaux Moteur de recherche

Changements
Conception et Manchette
ergonomie principale
Cinématique de
navigation
Manchette
Conception et publicitaire
mise en œuvre
Conseils
Liens vers les
Standards et domaines
règles à suivre
Point de contact
Exemple de page d’accueil de domaine
Lien vers la page d'accueil
Introduction
Métaphores
Fondamentaux
Liens vers les
Changements thèmes du
Conception et
domaine
ergonomie
Cinématique de
navigation
Conception et
mise en œuvre Liens vers
les
Conseils
domaines
Standards et
règles à suivre
Bandeau de
navigation
Navigation et opération
Introduction
Dans une application Web, il existe trois moyens d'agir sur le
Métaphores comportement de l'application :
Fondamentaux Pour déclencher un traitement, ce qui engage la responsabilité
de l'utilisateur, il convient d'utiliser les boutons d'actions
Changements
Pour naviguer sans mémoriser le contexte, il convient d'utiliser
Conception et les liens hypertextes
ergonomie
Pour naviguer en mémorisant le contexte, il convient d'utiliser
Cinématique de les images sensibles
navigation
Conception et
mise en œuvre
En respectant le rôle de chaque objet, l'interface Web garde
Conseils son caractère intuitif qui permet à l'utilisateur d'utiliser l'application
Standards et sans y avoir été formé au préalable
règles à suivre
Les contrôles
Il est absolument nécessaire qu'une page contenant un

Introduction formulaire soit accompagné de scripts qui effectuent des
Métaphores contrôles de saisie :
Fondamentaux Vérification de la présence des champs obligatoires
Changements Contrôle si le type des informations saisies correspond eu
Conception et
type de données attendues (vérification de données
ergonomie numériques ou de dates valides par exemple)
Cinématique de Les contrôles d'intégrité n'ont lieu que sur le serveur :
navigation
Conception et
Le serveur renvoie au poste client une page avec un
mise en œuvre message explicite et un lien vers la page de formulaire à
Conseils
corriger
Standards et
Le serveur renvoie au poste client la page de formulaire
règles à suivre (avec les champs renseignés) , et un message en rouge
indiquant la liste des erreurs (il peut être accompagné d'un
indicateur devant chaque champ erroné)
Les contrôles de saisie simple
Page d'accueil de
On considère un objet simple lorsqu’il a : l'objet
Introduction
Peu de propriétés (20 en moyenne et
Création d'un Abandon
Métaphores 30 au maximum) objet
Fondamentaux
Pas de relations avec des objets
dépendants Page de saisie
des propriétés
Changements
Messages avec liste
des champs Enregistrer
Conception et manquants
ergonomie
Page avec liste
Vérification saisie
Cinématique de des erreurs
Non
navigation
Oui
Conception et
mise en œuvre
Dans ce cas on utilise une seule Contrôle Non
Conseils page de formulaire pour créer une entité, d'intégrité
Standards et contenant les champs de saisie pour Enregistrement

règles à suivre toutes les propriétés d'un objet
Page de
consultation de
l'objet
Les contrôles de saisie avec assistant
Plus de 30 propriétés il est nécessaire de découper la saisie en

plusieurs pages (mécanisme d’assistant) :
Introduction Page d'accueil de
l'objet
Création d'un objet
Métaphores
Abandon
Fondamentaux
Changements
Page de saisie 2 Suivant / Page de saisie n
Conception et Page de saisie 1 Suivant /
Précédent
ergonomie Précédent
Cinématique de
navigation Non Enregistrer
Conception et
mise en œuvre Page avec liste Non Vérification de saisie et
des erreurs contrôle d’intégrité
Conseils
Enregistrement
Standards et d'un objet
règles à suivre
Les propriétés essentielles sont dans la 1ere page
Page de
Les propriétés secondaires et les relations dans consultation de
les pages suivantes l'objet
Les contrôles de saisie avec assistant
Dans chaque page de saisie on trouve :

Introduction
Métaphores
Titre de la page
Fondamentaux
Formulaire de saisie
Changements un lien Abandon pour
abandonner la création Champ 1 :
Conception et de l’objet en cours
ergonomie Champ 2 :
Cinématique de Champ 3 :
les images sensibles
navigation
Suivant et Précédent
Conception et pour naviguer entre les Champ 4 : Champ 5 :
mise en œuvre
pages de saisie
Conseils
Standards et
le bouton Enregistrer
règles à suivre pour sauvegarder l’objet
Abandon Précédent Suivant Enregistrer
saisi
Pied de page
Quelques conseils
Introduction Attention à :
Métaphores
Fondamentaux
Éviter l’ergonomie à la Windows
Changements Au non respect du mode page
Conception et
ergonomie
A l’utilisation des « Frames »
Cinématique de Ignorer le format de la page
navigation
Conception et
Ignorer les limites du client universel
mise en œuvre
Ne pas organiser la navigation à l’intérieur du site
Conseils
Standards et
Éviter l’effet « sapin de Noël »
règles à suivre
Quelques conseils
Attention aux « Frames »

Introduction
Métaphores Les Frames permettent d’afficher plusieurs documents HTML en

une page. Elles ne contiennent pas de documents, mais des
Fondamentaux
références à ces documents
Changements
Les Frames sont en général utilisées comme aide à la navigation
Conception et sous formes de bandeaux contextuels (menu, titre, pied de page,
ergonomie etc…)
Cinématique de Il existe plusieurs types de griefs rencontrés lors de l’utilisation
navigation des Frames :
Conception et Incompatibilité entre les différents navigateurs
mise en œuvre
Difficulté d’impression
Conseils Mauvaise gestion de l’historique
Standards et Pas de signets
règles à suivre
Pas de rafraîchissement total de la page
Les pages orphelines
Quelques conseils
Introduction Comment construire un site sobre ?

Métaphores
Fondamentaux En respectant les règles suivantes :

Changements Éviter d’utiliser plus de trois couleurs différentes dans une
Conception et page
ergonomie
Choisir un échantillonnage de couleurs unique et limité pour
Cinématique de l’ensemble du site
navigation
Éviter d’utiliser de multiples polices de caractères
Conception et
mise en œuvre Ne pas surcharger une page avec des images dans tous les
Conseils
sens, surtout les images animées
Éviter de recourir à des images d’origines diverses et
Standards et
règles à suivre variées, et s’en tenir à une seule bibliothèque d’images
(images d'un même trait)
Le contre exemple de ce qu’il faut faire
Introduction
Métaphores
Fondamentaux
Changements
Conception et
ergonomie
Cinématique de
navigation
Conception et
mise en œuvre
Conseils
Standards et
règles à suivre
HTML 4.0
Introduction
La philosophie de HTML 4 est :
Métaphores
La séparation de la présentation et des données avec les
Fondamentaux feuilles de styles
Changements L'optimisation de l'affichage des pages
Conception et L'animation du document reposant sur les scripts et le DOM
ergonomie
Le support des langages internationaux
Cinématique de
navigation les nouveaux concepts
Conception et Les feuilles de styles
mise en œuvre
L'enrichissement des tableaux et des formulaires
Conseils
La normalisation des "Frames"
Standards et
règles à suivre L'internationalisation et version des documents
HTML 4.0
Introduction
Les feuilles de styles
Métaphores
Les principales caractéristiques des feuilles de style :
Fondamentaux
Emplacement flexible de la définition (dans l'entête, le corps du
Changements document, dans un fichier séparé)
Conception et Indépendance du langage de description (HTML 4 ou script)
ergonomie
Styles en cascade (définition d'un style à partir d'un autre style)
Cinématique de Alternance des styles (possibilités de définir plusieurs
navigation
présentation pour un même document : version d'écran, version
Conception et imprimée, personnes mal voyantes, etc...)
mise en œuvre
Positionnement au pixel près et superposition des éléments
Conseils
Standards et
règles à suivre Beaucoup de balises HTML 3.2 disparaissent au profit des feuilles de
styles (FONT, CENTER, I, B, U, BASEFONT, etc...)
HTML 4.0
L'enrichissement des formulaires et des tableaux

Introduction Avec HTML 4, les formulaires permettent de :
Métaphores Associer des libellés aux champs de formulaires ainsi que des
raccourcis clavier
Fondamentaux
Regrouper les libellés par thèmes avec une légende associée
Changements
Désactiver un champ ou lui donner accès en lecture seule
Conception et
ergonomie Gérer le cheminement entre les champs avec la touche de
tabulation
Cinématique de
navigation
Le nouveau modèle de tableau est basé sur la RFC 1942 et
Conception et
mise en œuvre
permet :
Un affichage plus rapide de manière incrémentale
Conseils
La possibilité de définir une ligne d'entête et/ou de pied de
Standards et
règles à suivre tableau
L'impression du tableau sur plusieurs pages (avec la légende
correspondante)
La possibilité de "zoomer" sur un tableau
XML
Introduction XML (eXtented Markup Language) est un sous-ensemble

Métaphores de SGML, il réintroduit la séparation du contenu (DTD puis
schémas) et de la présentation (XSL), ainsi qu'une
Fondamentaux
flexibilité nouvelle dans la répartition des traitements client-
Changements
serveur
Conception et
ergonomie Les nouveaux concepts :
Cinématique de Des recherches plus efficaces
navigation
Le développement d'applications Web plus flexibles
Conception et
mise en œuvre L'intégration des données de sources variées
Conseils
Les données en provenance d'applications multiples
La manipulation et le calcul sur les données coté client
Standards et
règles à suivre Les mises-à-jours sélectives
XHTML
XHTML est le premier pas vers un langage Web modulaire et

Introduction
extensible basé sur XML (Extensible Markup Language). Il est en fait
Métaphores une passerelle pour le concepteur Web qui souhaite entrer dans le
Fondamentaux Web du futur tout en gardant la compatibilité avec les navigateurs
Web de 4ième génération.
Changements
Conception et
ergonomie XHTML est une reformulation d’Html en tant qu’application d’XML.
Malgré quelques différences notables, ce langage reste très proche
Cinématique de
navigation d’Html 4. Un document XHTML est en pratique, un document Html 4.0
mis en conformité avec la norme Xml. Ainsi un développeur familier
Conception et
mise en œuvre avec Html 4 n’aura aucun problème pour apprendre et utiliser
XHTML.
Conseils
Standards et
règles à suivre XHTML a été entériné le 26 janvier 2000 comme un recommandation
du W3C. XHTML offre une transition en douceur vers le monde XML.
Les langages
Introduction
ECMA Script : ECMA (European Computer Manufacturer
Association) a spécifié un langage "politiquement correct" à partir
Métaphores de Javascript et Jscript
Fondamentaux
JAVA : Java (couplé avec XML) permet de réaliser des traitements
Changements
du coté serveur (programmes appelés servlets)
Conception et
ergonomie Active X : Il s'agit d'une norme développée par Microsoft pour
Cinématique de permettre l'exécution de logiciels tournant sous Windows à travers
navigation le réseau. Active X (couplé au middleware DCOM) permet l'écriture
Conception et d'un code partiellement réutilisable
mise en œuvre
ASP & PHP : Langages interprétés permettant des traitements et
Conseils
des accès aux ressources du coté serveur
Standards et
règles à suivre
Attention, AJAX n’est pas un langage de programmation
Le Document Model Object
Introduction Le DOM est la représentation hiérarchique du modèle dans

Métaphores
lequel les objets d'une page HTML peuvent être manipulés
Le niveau 0 correspond aux possibilités des navigateurs
Fondamentaux
Le niveau 1 couvre les manipulations et la navigation dans
Changements
les documents HTML et XML
Conception et
ergonomie
Le niveau 2 comprend les manipulations des feuilles de
styles attachés aux documents HTML et XML
Cinématique de
navigation
Le DOM identifie
Conception et
mise en œuvre
Les interfaces et les objets utilisés pour représenter et
manipuler le document
Conseils
La sémantique des interfaces et des objets
Standards et
règles à suivre
La relation entre les interfaces et les objets
Exemple de Document Model Object
La copie d'écran ci-dessous montre une page HTML contenant juste

une table. Le DMO correspondant est représenté sous le forme d'un
Introduction
arbre
Métaphores
Fondamentaux
Changements
<TABLE>
Conception et
ergonomie
Cinématique de <TBODY>
navigation
Conception et
mise en œuvre
<TR> <TR>
Conseils
Standards et
règles à suivre <TD> <TD> <TD> <TD>
Producteur Robert Réalisateur Charles
Le DHTML ou HTML dynamique
Introduction
Le DHTML n'est ni un langage ni une norme, il s'agit d'une
Métaphores
dénomination pour la combinaison du HTML 4, du DOM et des
Fondamentaux
feuilles de style afin de rendre les pages HTML interactives et
Changements dynamiques
Conception et
ergonomie Le DHTML apporte :
Cinématique de Plus d'interactivité pour faciliter l'utilisation de l'application par
navigation les utilisateurs
Conception et Une simplification de la cinématique d'enchaînement des pages
mise en œuvre
(balises DIV et LAYER)
Conseils La réalisation d'une aide en ligne
Standards et La réduction du nombre de page
règles à suivre
Élaboration de règles
Introduction
Synthèse
Métaphores
Fondamentaux
Il est nécessaire d’élaborer une synthèse en un ensemble
des règles applicables pour le développement de toute
Changements réalisation dépendant des technologies du domaine
Conception et "Internet". Chaque règle fait l’objet d’un descriptif
ergonomie comportant le libellé de la règle, une justification, et un
Cinématique de niveau de recommandation. Cet ensemble de règles est
navigation découpé en plusieurs parties :
Conception et
mise en œuvre
les règles générales
Conseils
les règles relatives à la navigation
Standards et les règles relatives à la présentation
règles à suivre
les règles relatives au graphisme
les règles relatives au développement
les règles relatives à la pédagogie
Introduction Tableau générique de

Métaphores présentation d’une règle
Fondamentaux
Changements
Conception et Règle n°….

ergonomie
Cinématique de
navigation Enoncé Enoncé descriptif de la règle
Conception et
mise en œuvre
Justification Explication de la règle
Conseils
Standards et
règles à suivre Niveau Impératif, recommandé, conseillé ou interdit
Exemple d’une règle

Introduction
Métaphores
Règle n°23
Fondamentaux
Changements Le titre du document associé à la page doit reprendre

Enoncé
une partie du texte du titre de la page.
Conception et
ergonomie C’est le titre de la page qui est pris automatiquement en
Justification
Cinématique de compte lors de la création d’un signet. La taille du titre
navigation du document doit être limité au maximum à 45
caractères. Cette limite est due à la place disponible
Conception et
mise en œuvre dans le carnet d’adresse de Netscape Communicator et
Internet Explorer. Au delà le texte est tronqué et n’est
Conseils
plus représentatif .
Standards et
règles à suivre Niveau Impératif
En résumé
Le Web est adapté aussi bien à la publication de documents

qu’aux applications de gestion transactionnelles
Introduction
Métaphores La navigation est l’élément fondamental. Ne pas la concevoir

de façon cohérente, homogène et intuitive est un facteur
Fondamentaux
d’échec assuré
Changements
Le respect des standards est le gage de déploiement
Conception et
ergonomie universel, d’élargissement potentiel et de pérennité
Cinématique de L’interface Web doit être simple, soignée et facile
navigation
d’apprentissage
Conception et
mise en œuvre Une application Web doit favoriser l’utilisateur occasionnel, et
Conseils s’adapter aux utilisateurs intensifs
Standards et
règles à suivre
Une application Web utilise le couple HTML/HTTP et repose
sur le client-serveur de présentation : la partie cliente gère
l’aspect et le comportement face à l’utilisateur, et n’envoie au
serveur que des appels de traitements

Ergonomie Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ergonomie Web

Transféré par

Droits d'auteur :

Formats disponibles

LES INTERFACES HOMME-MACHINE

Introduction Jusqu’aux années 1980, interfaces de type lignes de

Le volume d’informations accessibles est aujourd’hui quasi-illimité,

Métaphores La définition d’une interface utilisateur pour un application

Introduction Les interfaces graphiques

Les interfaces Web

Métaphores Métaphores GUI WEB

Changements 1 - Manipulation Forte Faible

Conseils Potentiel global : 1+2+3 Etendu Restreint

Introduction Cette métaphore est essentielle pour les environnements

Ce mode est très important pour les environnements graphiques

Emploi de la technologie AJAX

Introduction Les environnements graphiques sont particulièrement bien

La convergence GUI-Web est-elle une solution pour combler

L’intérêt principal du Web repose sur sa facilité de déploiement, le

Conception et Il suffit de peu pour dériver des standards du Web

Il est indispensable de se poser les deux questions suivantes

Le Web et son interface s’articulent autour de quelques principes

Le Web et son interface s’articulent autour de quelques principes

Conseils Le respect impératif des standards

Les éléments de l’interface graphique qui disparaissent :

Les nouveautés apportées par le Web :

L’interface Web est intuitive et prévisible

Introduction Les nouvelles règles d’or :

Fondamentaux Restez standard (pas de sophistication ou de solutions

Conception et Restez simple (facile à comprendre)

Standards et Respectez l’effet PIP (Pressés, Ignorants et Paresseux)

Introduction Identification des standards à respecter

Conseils Le site intranet est défini par :

Introduction Sur un site Intranet, l’efficacité prime sur le spectaculaire, il faut

Style des bandeaux de

Métaphores Aspect et emplacement

Cinématique de Couleur de fond du

Lien vers l'accueil

Cinématique de Bandeau de navigation textuel

Le modèle de page doit respecter la charte graphique définie

Un modèle type de page

NOTE DE BAS DE PAGE

Afin de concevoir une navigation la plus transparente possible,

Il existe plusieurs types d'arborescence :

Métaphores Un site Web est de nature arborescente, et deux type de

Métaphores Un site Web est un ensemble de pages de natures

Changements Le rôle de la page d'accueil est

Visualisation de la page par tous

Fondamentaux Moteur de recherche

Il est absolument nécessaire qu'une page contenant un

Standards et contenant les champs de saisie pour Enregistrement

Plus de 30 propriétés il est nécessaire de découper la saisie en

Dans chaque page de saisie on trouve :

Attention aux « Frames »

Métaphores Les Frames permettent d’afficher plusieurs documents HTML en

Introduction Comment construire un site sobre ?

Fondamentaux En respectant les règles suivantes :

L'enrichissement des formulaires et des tableaux

Introduction XML (eXtented Markup Language) est un sous-ensemble

XHTML est le premier pas vers un langage Web modulaire et

Attention, AJAX n’est pas un langage de programmation

Introduction Le DOM est la représentation hiérarchique du modèle dans

La copie d'écran ci-dessous montre une page HTML contenant juste

Producteur Robert Réalisateur Charles

Introduction Tableau générique de

Conception et Règle n°….

Exemple d’une règle