( INTERNET / INTRANET ) - Principes d'ergonomie des interfaces WEB - INTERFACE WEB
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
INTERFACE WEB
Principes d’ergonomie
des interfaces WEB
( INTERNET / INTRANET )
© CNAM - Interaction Homme-Machine Interface Web Diapositive 1 / 67 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
© CNAM - Interaction Homme-Machine Interface Web Diapositive 2 / 67 Jean-Marc PUJOSIntroduction (1)
♦ Jusqu’aux années 1980, interfaces de type lignes de
commandes (systèmes Ms-Dos ou Unix) avec des
applications alphanumériques
♦ 10 ans pour voir s’imposer les interfaces graphiques
(Graphical User Interface)
Le but était de simplifier la gestion de quelques Mo de ressources locales.
C’est la période client-serveur où l’assimilation de l’ergonomie des
applications graphiques ne s’est pas faite facilement.
♦ Aujourd’hui, nous sommes entrés dans une nouvelle ère
La plupart des utilisateurs sont connectés à un réseau (local ou global).
L'échelle des ressources à représenter a fortement grandi et l’influence du
Web permet aux utilisateurs d’exiger plus de simplicité.
© CNAM - Interaction Homme-Machine Interface Web Diapositive 3 / 67 Jean-Marc PUJOSIntroduction (2)
Le volume d’informations accessibles est aujourd’hui quasi-
illimité, il devient indispensable d’en faciliter l’accès
La définition d’une interface utilisateur pour un application Web
est tout aussi difficile à réaliser que pour une application dans
un environnement graphique traditionnel
Faire table rase de tous les acquis, Il est nécessaire de remettre
en cause nos réflexes vis-à-vis de l’ergonomie des interfaces
graphiques
© CNAM - Interaction Homme-Machine Interface Web Diapositive 4 / 67 Jean-Marc PUJOSIntroduction (3)
En bref :
Nous allons progressivement passer de la
notion de
Graphical User Interface (GUI)
à la notion de
Network User Interface (NUI)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 5 / 67 Jean-Marc PUJOSDu GUI au Web (1)
Les interfaces graphiques
♦ Les interfaces graphiques reposent sur une gestion
événementielle fine des actions de l’utilisateur
♦ L’important n’est pas ce qui est visible, mais la manière
et le comportement
♦ Cette finesse de gestion événementielle fait toute la
richesse des applications en environnement graphique
♦ Le potentiel de possibilité presque illimité de réalisation
des interfaces graphiques peut être un handicap lors de
leur conception
© CNAM - Interaction Homme-Machine Interface Web Diapositive 6 / 67 Jean-Marc PUJOSDu GUI au Web (2)
Les interfaces Web
♦ Le modèle événementiel du Web est plus pauvre même avec
l’association DHTML – DOM
(Dynamic HyperText Markup Language – Document Object Model)
♦ Ceci est lourd de conséquences sur le potentiel des
interfaces utilisateur du Web
♦ Mais ce handicap peut se révéler un avantage (simplicité de
conception et d’utilisation) en particulier pour les applications
de gestion
• des champs de saisie
• des boutons d’action pour lancer des opérations
• des liens hypertextes pour naviguer entre les pages
© CNAM - Interaction Homme-Machine Interface Web Diapositive 7 / 67 Jean-Marc PUJOSDu GUI au Web (3)
En résumé :
L’important n’est pas de plagier l’environnement graphique
mais d’appréhender les spécificités de l’interface hypertexte
Il y a un monde de différence entre les deux types
d’applications :
! les applications graphiques se manipulent alors que les application
Web se parcourent
! Similitude de présentation et d’utilisation des applications Web (à
l’exemple des suites bureautiques)
! les applications graphiques nécessitent un certain apprentissage
alors que les applications Web sont comprises dès le début
© CNAM - Interaction Homme-Machine Interface Web Diapositive 8 / 67 Jean-Marc PUJOSLes différences de métaphores
Métaphores GUI WEB
1 - Manipulation Forte Faible
2 - Navigation Faible Forte
3 - Mode évènementiel Riche Pauvre
Potentiel global : 1+2+3 Etendu Restreint
© CNAM - Interaction Homme-Machine Interface Web Diapositive 9 / 67 Jean-Marc PUJOSLa métaphore de manipulation
♦ Cette métaphore est très forte pour les environnements
graphiques et les gestes possibles sont très nombreux
! clic et double-clic
! glisser/déplacer avec ou sans combinaison de touche
! processus objet-action
♦ Métaphore bien faible pour les environnements Web
! simple clic et manipulation au clavier
! utilisation limitée de la souris (pas de glisser/déplacer)
♦ Les possibilités sont réduites mais suffisantes
! objets graphiques courants (boite à cocher, bouton radio, liste
déroulante, etc.)
! boutons d’action et liens provoques un changement majeur de
contexte
© CNAM - Interaction Homme-Machine Interface Web Diapositive 10 / 67 Jean-Marc PUJOSLa métaphore de navigation
♦ Cette métaphore est essentielle pour les environnements
Web
! l’hypertexte est centré sur le façon de naviguer ou de parcourir les
entités disponibles (la page est le granule de base)
! les navigateurs proposent des fonctions avancées facilitant le
parcours (boutons avant et arrière, liste des pages vues, bookmarks,
etc.)
♦ C’est la plus grande faiblesse des environnements
graphiques
! la notion de parcours et de navigation n’existent pas
! le seul élément d’orientation réside dans la barre de menu, il n’y a
que cette barre comme point de départ et comme point d’aiguillage
tout au long de la session
© CNAM - Interaction Homme-Machine Interface Web Diapositive 11 / 67 Jean-Marc PUJOSLe modèle événementiel
♦ Ce mode est très important pour les environnements
graphiques
! 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
♦ Ce mode est quasi inexistant pour le Web
! il ne se passe rien à l’intérieur d’une page tant que l’utilisateur ne
clique sur un lien ou sur un bouton
! l’ergonomie Web ne multiplie pas les échanges entre client et serveur,
mais découpe le processus en unité atomique sous forme de pages
! réduction au minimum avec la combinaison HTML + HTTP
(remplacement d’une page par une nouvelle à chaque appel HTTP)
♦ Il existe des possibilités pour réduire cette placidité
! enrichir la page HTML avec du code script (Jscript ou JavaScript), pas
d’enrichissement partiel avec HTML 3.2 mais possible avec HTML 4
! le HTML dynamique (DHTML) peut être une réponse adaptée à ce
problème
© CNAM - Interaction Homme-Machine Interface Web Diapositive 12 / 67 Jean-Marc PUJOSLe potentiel global
♦ Les environnements graphiques sont particulièrement bien
adapté pour les applications nécessitant une interaction
importante avec l’utilisateur et une grande richesse de
manipulation directe
! On peut presque tout faire avec un environnement graphique
♦ Le Web est plus adapté aux applications découpables en
processus élémentaires, il offre un potentiel plus limités par
ses différents handicaps
! presque pas de possibilités de manipulation
! pas de gestion événementielle sans script ou développements
supplémentaires
! ce domaine est suffisant pour des applications de gestion et offre
un gain déterminant en terme de simplicité
© CNAM - Interaction Homme-Machine Interface Web Diapositive 13 / 67 Jean-Marc PUJOSLa convergence
♦ La convergence GUI-Web est-elle une solution pour combler
les handicaps ?
! le Web reste attaché à son modèle de page peu événementiel
! le GUI n’est pas encore prêt à se transformer en un navigateur intégré
♦ Convergence Web " GUI
! malgré les applets Java ou les contrôles activeX, une page Web
conserve son découpage monolithique et les objets encapsulés ne
permettent pas de retrouver toutes les possibilités d’un comportement
GUI ”natif ”
♦ Convergence GUI " Web
! intégrer un navigateur dans un environnement graphique n’est pas une
solution efficace
! la différence majeure de gestion de l’interface utilisateur subsiste en
fonction de la nature du document manipulé (page HTML " interface
Web, autre type de document " interface graphique)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 14 / 67 Jean-Marc PUJOSInternet ou Intranet ? (1)
♦ L’intérêt principal du Web repose sur sa facilité de déploiement, le
navigateur est le client ultime, unique et universel
♦ C’est un atout lourd mais fragile pour la choix de l’architecture Web
♦ Il suffit de peu pour dériver des standards du Web
♦ 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
seul, mais ce choix entraîne des conséquences gênantes :
! ensemble des utilisateurs = totalité du parc " coûts de maintenance
élevés
! potentiel d’ouverture vers l’extérieur limité
! les applications développées sont dépendantes du navigateur choisi
© CNAM - Interaction Homme-Machine Interface Web Diapositive 15 / 67 Jean-Marc PUJOSInternet ou Intranet ? (2)
♦ Il est indispensable de se poser les deux questions
suivantes lors du choix technique :
1. Est-il possible de standardiser un navigateur particulier pour
l’ensemble des utilisateurs (sans exception), cela sans durée et
avec certitude ?
2. Les applications Intranet seront-elles seulement à usage interne ou
susceptible d’être offertes aux partenaires ?
♦ 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 myriade d’utilisateurs inconnus, dispersés et ne
répondant pas forcément au même profil technique
Est-il absurde d’appliquer une différence de traitement entre
les applications Intranet et Internet car, fondamentalement,
ce sont les mêmes ?
© CNAM - Interaction Homme-Machine Interface Web Diapositive 16 / 67 Jean-Marc PUJOSLes utilisateurs du Web (1)
L’automatisation des SI va toucher une population de plus en plus
importante dans l’entreprise
♦ Il est réducteur de limiter le Web à des utilisations occasionnelles
♦ Il est abusif de proclamer que le Web est inadapté pour des
utilisations intensives
Il est plus facile d’adapter une interface prévue pour des utilisations
ponctuelles pour des usages fréquents que le contraire
♦ Le réussite d’une application Web repose sur un principe simple :
l’adaptation aux utilisateurs
les novices vont parcourir le site étapes par étapes tandis que des
raccourcis permettent aux avertis de sauter les étapes connues
♦ Il faut préserver la simplicité de l’interface Web et s’appuyer sue la
notion de client universel
© CNAM - Interaction Homme-Machine Interface Web Diapositive 17 / 67 Jean-Marc PUJOSLes utilisateurs du Web (2)
En conséquence :
♦ Il faut préserver la simplicité de l’interface Web et s’appuyer
sue la notion de client universel
♦ Il est nécessaire de prévoir la conduite des utilisateurs selon
la règle du PIP : Pressés, Ignorants et Paresseux
♦ Le but est de présenter dès le début un déroulement fluide et
sans mystère
" Si vous mettez une application dans une situation où
l’effet PIP rebute les utilisateurs , il n’y aura pas de seconde
chance
© CNAM - Interaction Homme-Machine Interface Web Diapositive 18 / 67 Jean-Marc PUJOSLes fondamentaux du Web (1)
Le Web et son interface s’articulent autour de quelques principes
fondamentaux :
Le Web fonctionne en mode page et déconnecté
! La page est l’élément principal et le granule de base du Web, de plus ce
composant est monolithique
! Il n’y a pas de rafraîchissement possible une fois la page chargée dans
le navigateur, sauf en changeant de page
! Le protocole HTTP fonctionne en mode non connecté, pas de dialogue
permanent entre le client et le serveur
Peu de traitements coté client
! L’essentiel des traitements d’une application Web sont exécutés sur le
serveur
! 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
© CNAM - Interaction Homme-Machine Interface Web Diapositive 19 / 67 Jean-Marc PUJOSLes fondamentaux du Web (2)
Le Web et son interface s’articulent autour de quelques principes
fondamentaux (suite) :
L’ergonomie doit participer à la navigation
! Le navigateur Web offre des fonctions dédiées et utiles (retour arrière,
gestion des signets, etc.)
! Mais une application Web doit se suffire à elle-même en évitant
l’utilisation intensive des boutons ”Back” et ”Forward” du navigateur
" on parlera alors de navigation fluide (ensemble des choix du site,
repère dans le site, etc.)
Le respect impératif des standards
! Le respect des standards est une condition sine qua non d’une 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
© CNAM - Interaction Homme-Machine Interface Web Diapositive 20 / 67 Jean-Marc PUJOSLes changements (1)
Les éléments de l’interface graphique qui disparaissent :
! Le multi-contextes : une page = un contexte
! Le Multiple Documents Interface (MDI) : le recours aux ”frames” en permet
une simulation limitée
! Le rafraîchissement partiel à l’intérieur d’une fenêtre ou d’un dialogue : le
recours à la programmation dynamique en permet une simulation limitée
! Le glisser/déplacer (drag & drop)
! Le pointer/cliquer (processus objet/action)
! Les dialogues et la disparition des situations strictement modales
! Les barres de menus, les barres d’outils et les barres d’icônes
! 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)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 21 / 67 Jean-Marc PUJOSLes changements (2)
Les nouveautés apportées par le Web :
! La notion de site (ainsi que les notions de branche et portail)
! La page d’accueil ( ou home page)
! La navigation (de type arborescente, pyramidale, en réseau ou en
râteau)
! Le découpage en mode page
! La notion de ”click & go” et d’intuitivité (ce que l’on voit est là
où on ira)
! L’utilisation des images (compressées, fixes ou animées)
! Le navigateur comme élément fédérateur
! Le drill-down (approfondissement)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 22 / 67 Jean-Marc PUJOSL’interface intuitive
! L’interface Web est intuitive et prévisible
Peu de composants (liens hypertextes, boutons d’action et images
sensibles) facile à utiliser " une utilisation de manière prévisible, la
prévisibilité est un élément fondamental du caractère de l’interface Web
Elle est l’élément principal du confort de l’utilisateur basé
sur la confiance qu’il a de l’interface
! Bannir les interfaces hybrides
La prévisibilité peut-être inhibée par l’introduction de composants
propriétaires aux comportements non conformes aux standards
! Les raisons d’un design adapté au Web
Pour une utilisation conviviale, intuitive et facile d’apprentissage
© CNAM - Interaction Homme-Machine Interface Web Diapositive 23 / 67 Jean-Marc PUJOSRecommandations majeures
Les nouvelles règles d’or :
! restez standard (pas de sophistication ou de solutions
propriétaires)
! restez simple (facile à comprendre)
! restez sobre (évitez de trop en faire)
! respectez la page (et son contexte)
! utilisez ce qui marche (le Web fonctionne bien, il est
éprouvé)
! respectez l’effet PIP (Pressés, Ignorants et Paresseux)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 24 / 67 Jean-Marc PUJOSDéfinition des contraintes (1)
Identification de la cible des utilisateurs
! Identifier les utilisateurs potentiels de façon à déterminer le choix des
normes et standards à respecter ainsi que l’ergonomie globale à
mettre en œuvre
Etude de l’architecture technique du coté serveur et réseau
! L’architecture retenue a pour but d’obtenir les performances
nécessaires pour satisfaire les utilisateurs, de réduire les coûts de
communication, d’être facilement administrable et évolutive
© CNAM - Interaction Homme-Machine Interface Web Diapositive 25 / 67 Jean-Marc PUJOSDéfinition des contraintes (2)
Identification des standards à respecter
Le choix des standards peut être différent si :
! le poste client n’est pas clairement identifié et maîtrisé " il est
impératif de se conformer aux standards supportés par la quasi-
totalité des environnements clients
! le poste client est connu, identifié et maîtrisé " il est possible de
dépasser les standards de base (HTML 4, DHTML et feuilles de
styles)
Attention, la décision de dépasser les normes de base n’est pas
anodine. Si l’application doit s’ouvrir un jour à des utilisateurs dont
on ne maîtrise pas l’environnement, cette ouverture ne sera que
partielle et profitera uniquement aux utilisateurs les mieux équipés
© CNAM - Interaction Homme-Machine Interface Web Diapositive 26 / 67 Jean-Marc PUJOSLa notion de SITE (3)
Le site institutionnel
! C’est le Web public, il doit être attrayant, riche et convivial
! La cible est inconnue, il doit donc s’appuyer sur les standards et avoir des
pages de poids raisonnable
Le site intranet
Le site intranet est constitué par :
! une collection de domaines (regroupements d’applications ou
d’informations par métiers et processus)
! des informations générales (page d’accueil, plan du site, un glossaire,
etc.)
Le site intranet est défini par :
! une charte graphique à laquelle se conforme la totalité de l’intranet
! un système de navigation intuitif et cohérent
© CNAM - Interaction Homme-Machine Interface Web Diapositive 27 / 67 Jean-Marc PUJOSLa charte graphique Intranet (1)
♦ Sur un site Intranet, l’efficacité prime sur le spectaculaire, il
faut trouver un compromis entre le côté performance/temps de
réponse et d’autre part l’aspect graphique du site
♦ La charte graphique définit les tailles, les couleurs et aspects
des bandeaux, des boutons ainsi que le positionnement des
objets dans une page
♦ Elle spécifie tous les types d’objets d’une page (liste, champs
de saisie) ainsi que les polices utilisées pour tous les styles de
texte
♦ Etablir une charte graphique est un projet en soi, il fait
intervenir des informaticiens, des infographistes ainsi que les
services de la communication et du marketing (par exemple)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 28 / 67 Jean-Marc PUJOSLa charte graphique Intranet (2)
Style des bandeaux de
navigation
Aspect et emplacement
des logos
Aspect des éléments en
avant-plan
Couleur de fond du
bandeau et de la page
Dimensions de la page
(bandeau, corps de
page, pieds de page, ...)
Police de caractères
pour les textes et les
titres (taille, gras, …)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 29 / 67 Jean-Marc PUJOSDéfinition d'un modèle de page (1)
L’entête de page
! Il comprend le titre de la page et le bandeau de navigation
! Le titre est rédigé de manière concise (court et précis) et est placé en haut de
la page ainsi que dans la barre de titre du navigateur (référence des signets)
! La bandeau de navigation est généralement placé en haut ou à gauche de la
page
Titre de la fenêtre
Titre de la page
Lien vers l'accueil
Bandeau de
navigation
© CNAM - Interaction Homme-Machine Interface Web Diapositive 30 / 67 Jean-Marc PUJOSDéfinition d'un modèle de page (2)
Le corps de page
! Le corps de page est la zone de contenu (prévoir la place d'intégration
d'autres objets)
Le pied de page
! Il concentre les informations utiles (date de dernière mise à jour,
adresse émail du webmaster et éventuellement un bandeau de
navigation principal sous forme textuelle)
Bandeau de navigation textuel
dernière mise à jour Adresse du webmaster
Lien juridique
© CNAM - Interaction Homme-Machine Interface Web Diapositive 31 / 67 Jean-Marc PUJOSDéfinition d'un modèle de page (3)
♦ Le modèle de page doit respecter la charte graphique définie
♦ Quelques règles appliquées dans toutes les pages offrent un
confort supplémentaire à l'utilisateur :
! Pour les bandeaux de navigation principaux et secondaires, le
domaine ou le thème dans lequel se trouve la page affichée doit être
mis en valeur à l'aide d'un effet graphique (changement de couleur
ou présence d'un indicateur)
! Les polices utilisées doivent suivre un style défini pour l'ensemble du
site, il est conseillé de limiter le nombre de polices (une pour les
titres et les bandeaux de navigation et une autre pour le corps de
page)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 32 / 67 Jean-Marc PUJOSDéfinition d'un modèle de page (4)
Un modèle type de page
! une zone appelée MENU contenant un
sommaire ou un menu permettant une ENTETE
navigation aisée dans le site
! une zone principale appelée CONTENU
contenant le corps de l’information
! une zone appelée ENTETE où sont CORPS DE LA PAGE
SOMMAIRE
inscrites les informations nécessaires à la ou
ou
CONTENU
présentation de la page MENU
! une zone appelée BASDEPAGE où sont
inscrites les informations propres à
l’auteur avec le cas échéant des messages
NOTE DE BAS DE PAGE
d’indication (une aide en ligne par
exemple), ainsi que peut-être quelques liens
complémentaires
© CNAM - Interaction Homme-Machine Interface Web Diapositive 33 / 67 Jean-Marc PUJOSCinématique de navigation (1)
Règles générales de navigation
Afin de concevoir une navigation la plus transparente
possible, il est nécessaire de se poser ces question :
! Comment définir l'épine dorsale du site ?
Définir les axes principaux du site, les raccourcis souhaitables et éviter de
ramifier trop en profondeur le site
! Quelle barre de navigation ?
Définir les méthodes et les moyens utiles à la navigation (menus, images
sensibles, listes, boutons , etc...)
! Quel sommaire ?
! Faut-il des outils de navigation locale ?
! Quelles sont les manières de naviguer ?
Il faut donner au site une logique compatible avec celle des utilisateurs
© CNAM - Interaction Homme-Machine Interface Web Diapositive 34 / 67 Jean-Marc PUJOSCinématique de navigation (2)
Les types d'arborescence
Il existe plusieurs types d'arborescence :
! l’arborescence linéaire simple ou à double circulation, chaque écran
s’enchaîne au suivant et éventuellement au précédent par un lien aller
et un lien retour
! l’arborescence simple ou en étoile où l’utilisateur entre par un écran qui
est le “menu central”
! l’arborescence à niveaux hiérarchiques multiples, organisée à partir
d’un écran de départ où viennent se raccorder des structures linéaires
ou en étoile
! l’arborescence maillée où tous les écrans sont reliés les uns aux autres
Il peut y avoir un nombre infini de niveau, mais pour des raisons de
lisibilité et plus généralement d'organisation et de maintenance, il est
recommandé de ne pas descendre dans le plan général de l’arborescence
en dessous des niveaux 4 ou 5
© CNAM - Interaction Homme-Machine Interface Web Diapositive 35 / 67 Jean-Marc PUJOSCinématique de navigation (3)
Les types de navigation
Un site Web est de nature arborescente, et deux type de
navigation permettent de se déplacer entre les noeuds
! La navigation horizontale pour un déplacement de même
niveau (entre les domaines ou entre les thèmes d'un même
domaine)
! La navigation verticale pour descendre ou monter d'un ou
plusieurs niveaux dans un domaine ou un thème
Cette navigation est structurée par des bandeaux de
navigation
© CNAM - Interaction Homme-Machine Interface Web Diapositive 36 / 67 Jean-Marc PUJOSCinématique de navigation (4)
Schéma d'arborescence d'un site Web
Accueil
Domaine A Domaine B Domaine C
Objet A1 Objet A2 Objet A3 Objet C1 Objet C2 Objet C3
Objet B1 Objet B2
Navigation verticale
Navigation horizontale
© CNAM - Interaction Homme-Machine Interface Web Diapositive 37 / 67 Jean-Marc PUJOSCinématique de navigation (5)
Les différents niveaux de navigation
L ’accueil du site La navigation dans le site La navigation dans
un domaine
La page d’accueil générale Il est indispensable de mettre un
est le point d’entrée unique ou plusieurs bandeaux de Comme pour le site, Il
du site vers tous les domaines navigation sur toutes les pages doit exister un ou
du site de façon uniforme et plusieurs bandeaux de
Le site doit contenir une invariante navigation sur toutes les
carte du site (sitemap) pages du domaine de
accessible depuis la page Un lien vers la page d’accueil façon à permettre la
d ’accueil et permettant une doit être présent sur toutes les navigation inter-thème
recherche d’information pages du site
rapide Toutes les pages du
La page d’accueil de chaque domaine ont un lien vers
Il peut exister une aide ou un domaine contient des liens vers la page d'accueil du
glossaire pour l’ensemble du les thèmes de celui-ci ainsi que domaine
site vers les autres domaines du site
© CNAM - Interaction Homme-Machine Interface Web Diapositive 38 / 67 Jean-Marc PUJOSCinématique de navigation (6)
Schéma exemple de navigation dans un site Web
Page d'accueil
Sitemap
Domaine A
Domaine B
Domaine C
Aide
Bandeau de Accueil Domaine A
liens vers les
domaines Thème 1
Thème 2 Lien vers
l'accueil du Actualité
Thème 3
site
Bandeau de Thème 1 Thème 2
liens vers les
thèmes
© CNAM - Interaction Homme-Machine Interface Web Diapositive 39 / 67 Jean-Marc PUJOSConception et mise en œuvre
Un site Web est un ensemble de pages de natures
différentes mais regroupées en plusieurs catégories :
! les pages d'accueil ou page d'aiguillage
! les pages de formulaire
! les pages de liste
! les pages de contenu
! les pages de résultat
! les pages de présentation
© CNAM - Interaction Homme-Machine Interface Web Diapositive 40 / 67 Jean-Marc PUJOSConception : La page d’accueil (1)
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 (appelée aussi "home-page") n'a
pas le droit de décevoir
Le rôle de la page d'accueil est double :
! faire passer un message fort par le texte ou le graphisme
! aiguiller l'utilisateur dans la navigation vers les domaines
© CNAM - Interaction Homme-Machine Interface Web Diapositive 41 / 67 Jean-Marc PUJOSConception : La page d’accueil (2)
Les éléments de la page d’accueil
La page d'accueil du site contient des liens vers :
! chaque domaine du site
! les pages globales du site (carte du site, glossaire, actualité,
moteur de recherche, etc...)
La page d'accueil d'un domaine contient des liens vers :
! chaque thème ou objet majeur du domaine
! les autres domaines du site
! la page d'accueil du site
La page d'accueil doit contenir :
! la date de dernière mise à jour
! l'adresse émail de la personne à contacter (en général le
webmaster)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 42 / 67 Jean-Marc PUJOSConception : La page d’accueil (3)
Les contraintes à respecter sur la page d'accueil
Visualisation de la page par tous
! maîtriser l'environnement en jouant sur le format de la page
(640x480)
! proscrire l'emploi de plugins et de composants clients (Java ou
activeX)
Téléchargement rapide
! attention au débit des liaisons réseaux
! la page d'accueil doit être légère (poids inférieur à 20 Ko avec les
images)
Ne pas provoquer de rejet
! Eviter de générer un mécontentement pour l'utilisateur
! Attention à la surcharge d'images (surtout animées)
(effet sapin de Noël)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 43 / 67 Jean-Marc PUJOSExemple de page d’accueil de site
Liste de sélection
Moteur de recherche
Liens vers les domaines
Point de contact
© CNAM - Interaction Homme-Machine Interface Web Diapositive 44 / 67 Jean-Marc PUJOSExemple de page d’accueil de domaine
Lien vers la page d'accueil
Liens vers les thèmes du
domaine
Liens vers les domaines
Bandeau de navigation
© CNAM - Interaction Homme-Machine Interface Web Diapositive 45 / 67 Jean-Marc PUJOSNavigation et opération
Dans une application Web, il existe trois moyens d'agir sur le
comportement de l'application :
! pour déclencher un traitement, ce qui engage la responsabilité de
l'utilisateur, il convient d'utiliser les boutons d'actions
! pour naviguer sans mémoriser le contexte, il convient d'utiliser les liens
hypertextes
! pour naviguer en mémorisant le contexte, il convient d'utiliser les
images sensibles
En respectant le rôle de chaque objet, l'interface Web garde son
caractère intuitif qui permet à l'utilisateur d'utiliser l'application
sans y avoir été formé au préalable
© CNAM - Interaction Homme-Machine Interface Web Diapositive 46 / 67 Jean-Marc PUJOSLes contrôles
Il est absolument nécessaire qu'une page contenant un
formulaire soit accompagné de scripts qui effectuent des
contrôles de saisie :
! vérification de la présence des champs obligatoires
! contrôle si le type des informations saisies correspond eu type de
données attendues (vérification de données numériques ou de dates
valides par exemple)
Les contrôles d'intégrité n'ont lieu que sur le serveur :
! le serveur renvoie au poste client une page avec un message explicite
et un lien vers la page de formulaire à corriger
! le serveur renvoie au poste client la page de formulaire (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é)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 47 / 67 Jean-Marc PUJOSLes contrôles de saisie simple
Page d'accueil
de l'objet
On considère un objet simple
lorsqu’il a : Création d'un
objet
Abandon
! peu de propriétés (20 en
Page de saisie
moyenne et 30 au maximum) des propriétés
! pas de relations avec des Messages avec
liste des champs Enregistrer
manquants
objets dépendants
Vérification Page avec liste
Non saisie des erreurs
Dans ce cas on utilise une Oui
seule page de formulaire pour Contrôle Non
d'intégrité
créer une entité, contenant
les champs de saisie pour Enregistrement
d'un objet
toutes les propriétés Page de
consultation de
l'objet
© CNAM - Interaction Homme-Machine Interface Web Diapositive 48 / 67 Jean-Marc PUJOSLes contrôles de saisie avec assistant (1)
Plus de 30 propriétés il est nécessaire de découper la saisie en
plusieurs pages (mécanisme d’assistant):
Page d'accueil
Création d'un objet de l'objet
Abandon
Page de saisie Suivant / Page de saisie
Page de saisie Suivant /
2 Précédent n
1 Précédent
Non Enregistrer
Page avec liste Non Vérification de saisie
des erreurs et contrôle d’intégrité
Enregistrement
d'un objet
! les propriétés essentielles sont dans la 1ere page
! les propriétés secondaires et les relations dans les Page de
consultation de
pages suivantes l'objet
© CNAM - Interaction Homme-Machine Interface Web Diapositive 49 / 67 Jean-Marc PUJOSLes contrôles de saisie avec assistant (2)
Dans chaque page de saisie
on trouve :
! un lien Abandon pour Titre de la page
abandonner la création de
Formulaire de saisie
l’objet en cours
! les images sensibles Suivant Champ 1 :
et précédent pour naviguer Champ 2 :
entre les pages de saisie Champ 3 :
! le bouton Enregistrer pour
sauvegarder l’objet saisi Champ 4 : Champ 5 :
Abandon Précédent Suivant Enregistrer
Pied de page
© CNAM - Interaction Homme-Machine Interface Web Diapositive 50 / 67 Jean-Marc PUJOSQuelques conseils (1)
Attention à :
! Eviter l’ergonomie à la Windows
! Au non respect du mode page
! A l’utilisation des « Frames »
! Ignorer le format de la page
! Ignorer les limites du client universel
! Ne pas organiser la navigation à l’intérieur du site
! Eviter l’effet « sapin de Noël »
© CNAM - Interaction Homme-Machine Interface Web Diapositive 51 / 67 Jean-Marc PUJOSQuelques conseils (2)
Attention aux « Frames »
Les Frames permettent d’afficher plusieurs documents HTML en
une page. Elles ne contiennent pas de documents, mais des
références à ces documents
Les Frames sont en général utilisées comme aide à la navigation
sous formes de bandeaux contextuels (menu, titre, pied de page,
etc…)
Il existe plusieurs types de griefs rencontrés lors de l’utilisation
des Frames :
! incompatibilité entre les différents navigateurs
! difficulté d’impression
! mauvaise gestion de l’historique
! pas de signets
! pas de rafraîchissement total de la page
! les pages orphelines
© CNAM - Interaction Homme-Machine Interface Web Diapositive 52 / 67 Jean-Marc PUJOSQuelques conseils (3)
Comment construire un site sobre ?
En respectant les règles suivantes :
! Eviter d’utiliser plus de trois couleurs différentes dans une page
! Choisir un échantillonnage de couleurs unique et limité pour
l’ensemble du site
! Eviter d’utiliser de multiples polices de caractères
! Ne pas surcharger une page avec des images dans tous les
sens, surtout les images animées
! Eviter de recourir à des images d’origines diverses et variées, et
s’en tenir à une seule bibliothèque d’images (images d'un même
trait)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 53 / 67 Jean-Marc PUJOSQuelques conseils (4) Le contre exemple de ce qu’il faut faire © CNAM - Interaction Homme-Machine Interface Web Diapositive 54 / 67 Jean-Marc PUJOS
Les standards (1)
HTML 4.0
La philosophie de HTML 4 est :
! la séparation de la présentation et des données avec les feuilles
de styles
! l'optimisation de l'affichage des pages
! l'animation du document reposant sur les scripts et le DOM
! le support des langages internationaux
les nouveaux concepts
! les feuilles de styles
! l'enrichissement des tableaux et des formulaires
! la normalisation des "Frames"
! l'internationalisation et version des documents
© CNAM - Interaction Homme-Machine Interface Web Diapositive 55 / 67 Jean-Marc PUJOSLes standards (2)
Les feuilles de styles
Les principales caractéristiques des feuilles de style :
! emplacement flexible de la définition (dans l'entête, le corps du
document, dans un fichier séparé)
! indépendance du langage de description (HTML 4 ou script)
! styles en cascade (définition d'un style à partir d'un autre style)
! alternance des styles (possibilités de définir plusieurs présentation
pour un même document : version d'écran, version imprimée,
personnes mal voyantes, etc...)
! positionnement au pixel près et superposition des éléments
Beaucoup de balises HTML 3.2 disparaissent au profit des feuilles de
styles (FONT, CENTER, I, B, U, BASEFONT, etc...)
© CNAM - Interaction Homme-Machine Interface Web Diapositive 56 / 67 Jean-Marc PUJOSLes standards (3)
L'enrichissement des formulaires et des tableaux
Avec HTML 4, les formulaires permettent de :
! associer des libellés aux champs de formulaires ainsi que des raccourcis
clavier
! regrouper les libellés par thèmes avec une légende associée
! désactiver un champ ou lui donner accès en lecture seule
! gérer le cheminement entre les champs avec la touche de tabulation
Le nouveau modèle de tableau est basé sur la RFC 1942 et permet :
! un affichage plus rapide de manière incrémentale
! la possibilité de définir une ligne d'entête et/ou de pied de tableau
! l'impression du tableau sur plusieurs pages (avec la légende
correspondante)
! la possibilité de "zoomer" sur un tableau
© CNAM - Interaction Homme-Machine Interface Web Diapositive 57 / 67 Jean-Marc PUJOSLes standards (4)
XML
♦ XML (eXtented Markup Language) est un sous-ensemble de
SGML, il réintroduit la séparation du contenu (DTD) et de la
présentation (XSL), ainsi qu'une flexibilité nouvelle dans la
répartition des traitements client-serveur
♦ les nouveaux concepts
! des recherches plus efficaces
! le développement d'applications Web plus flexibles
! l'intégration des données de sources variées
! les données en provenance d'applications multiples
! la manipulation et le calcul sur les données coté client
!les mises-à-jours sélectives
© CNAM - Interaction Homme-Machine Interface Web Diapositive 58 / 67 Jean-Marc PUJOSLes standards (5)
Le XHTML
Xhtml est le premier pas vers un langage Web modulaire et extensible
basé sur XML (Extensible Markup Language). Il est en fait une passerelle
pour le concepteur Web qui souhaite entrer dans le Web du futur tout en
gardant la compatibilité avec les navigateurs Web de 4ième génération.
Xhtml est une reformulation d’Html en tant qu’application d’XML.
Malgré quelques différences notables, ce langage reste très proche 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 avec Html 4
n’aura aucun problème pour apprendre et utiliser Xhtml.
Xhtml a été entériné le 26 janvier 2000 comme un recommandation du
W3C. Xhtml offre une transition en douceur vers le monde XML.
© CNAM - Interaction Homme-Machine Interface Web Diapositive 59 / 67 Jean-Marc PUJOSLes standards (6)
Les langages
! ECMA Script : ECMA (European Computer Manufacturer
Association) a spécifié un langage "politiquement correct" à
partir de Javascript et Jscript
! JAVA : Java (couplé avec XML) permet de réaliser des
traitements du coté serveur (programmes appelés servlets)
! Active X : Il s'agit d'une norme développée par Microsoft pour
permettre l'exécution de logiciels tournant sous Windows à
travers le réseau. Active X (couplé au middleware DCOM) permet
l'écriture d'un code partiellement réutilisable
! ASP & PHP : Langages interprétés permettant des traitements et
des accès aux ressources du coté serveur
© CNAM - Interaction Homme-Machine Interface Web Diapositive 60 / 67 Jean-Marc PUJOSLes standards (7)
Le Document Model Object
Le DOM est la représentation hiérarchique du modèle dans lequel
les objets d'une page HTML peuvent être manipulés
! le niveau 0 correspond aux possibilités des navigateurs
! le niveau 1 couvre les manipulations et la navigation dans les
documents HTML et XML
! le niveau 2 comprend les manipulations des feuilles de styles attachés
aux documents HTML et XML
Le DOM identifie
! les interfaces et les objets utilisés pour représenter et manipuler le
document
! la sémantique des interfaces et des objets
! la relation entre les interfaces et les objets
© CNAM - Interaction Homme-Machine Interface Web Diapositive 61 / 67 Jean-Marc PUJOSLes standards (7)
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 arbre
Producteur Robert Réalisateur Charles
© CNAM - Interaction Homme-Machine Interface Web Diapositive 62 / 67 Jean-Marc PUJOSLes standards (8)
Le DHTML ou HTML dynamique
• Le DHTML n'est ni un langage ni une norme, il s'agit d'une
dénomination pour la combinaison du HTML 4, du DOM et des
feuilles de style afin de rendre les pages HTML interactives et
dynamiques
• Le DHTML apporte :
! plus d'interactivité pour faciliter l'utilisation de l'application par les
utilisateurs
! une simplification de la cinématique d'enchaînement des pages
(balises DIV et LAYER)
! la réalisation d'une aide en ligne
! la réduction du nombre de page
© CNAM - Interaction Homme-Machine Interface Web Diapositive 63 / 67 Jean-Marc PUJOSElaboration de règles (1)
Synthèse
Il est nécessaire d’élaborer une synthèse en un ensemble des
règles applicables pour le développement de toute réalisation
dépendant des technologies du domaine "Internet". Chaque
règle fait l’objet d’un descriptif comportant le libellé de la
règle, une justification, et un niveau de recommandation. Cet
ensemble de règles est découpé en plusieurs parties :
! les règles générales
! les règles relatives à la navigation
! les règles relatives à la présentation
! les règles relatives au graphisme
! les règles relatives au développement
! les règles relatives à la pédagogie
© CNAM - Interaction Homme-Machine Interface Web Diapositive 64 / 67 Jean-Marc PUJOSElaboration de règles (2)
Tableau générique de présentation d’une règle
Règle n° ….
Enoncé Enoncé descriptif de la règle
Justification Explication de la règle
Niveau Impératif ou conseillé
© CNAM - Interaction Homme-Machine Interface Web Diapositive 65 / 67 Jean-Marc PUJOSElaboration de règles (3)
Exemple d’une règle
Règle n° 23
Le titre du document associé à la page doit reprendre une
Enoncé
partie du texte du titre de la page.
C’est le titre de la page qui est pris automatiquement en
Justification
compte lors de la création d’un signet. La taille du titre du
document doit être limité au maximum à 45 caractères. Cette
limite est due à la place disponible dans le carnet d’adresse
de Netscape Communicator et Internet Explorer. Au delà le
texte est tronqué et n’est plus représentatif .
Niveau Impératif
© CNAM - Interaction Homme-Machine Interface Web Diapositive 66 / 67 Jean-Marc PUJOSCONCLUSION ! Le Web est adapté aussi bien à la publication de documents qu’aux applications de gestion transactionnelles ! La navigation est l’élément fondamental. Ne pas la concevoir de façon cohérente, homogène et intuitive est un facteur d’échec assuré ! Le respect des standards est le gage de déploiement universel, d’élargissement potentiel et de pérennité ! L’interface Web doit être simple, soignée et facile d’apprentissage ! Une application Web doit favoriser l’utilisateur occasionnel, et s’adapter aux utilisateurs intensifs ! 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 © CNAM - Interaction Homme-Machine Interface Web Diapositive 67 / 67 Jean-Marc PUJOS
Vous pouvez aussi lire
