1997-2000 j.vanderdonckt 31 mars 2000 1 jean vanderdonckt institut dadmistration et de gestion...

1997-2000 J.Vanderdonckt 31 mars 2000 1

Jean VanderdoncktInstitut d’Admistration et de Gestion

Universite catholique de Louvain

Informatique interactive de Informatique interactive de GestionGestion


Organisation du coursOrganisation du cours

4 parties :4 parties :1. Introduction à l’ergonomie logicielle1. Introduction à l’ergonomie logicielle

2. Ergonomie visuelle de la présentation multimédia2. Ergonomie visuelle de la présentation multimédia

3. Etudes de cas multimédia3. Etudes de cas multimédia

4. Ergonomie des sites World Wide Web4. Ergonomie des sites World Wide Web

Mode d’évaluationMode d’évaluation» Choix d’un sujet de travailChoix d’un sujet de travail» Analyse ergonomiqueAnalyse ergonomique

par les critères ergonomiquespar les critères ergonomiques par les techniques visuellespar les techniques visuelles


Séance 1: Introduction à Séance 1: Introduction à l’ergonomie logiciellel’ergonomie logicielle

1.1 Objectifs et rôles de l ’ergonomie logicielle1.1 Objectifs et rôles de l ’ergonomie logicielle

1.2 Critères ergonomiques de conception et 1.2 Critères ergonomiques de conception et d’évaluationd’évaluation

1.3 Règles ergonomiques1.3 Règles ergonomiques


1.1 Objectifs et rôles de 1.1 Objectifs et rôles de l'ergonomie logiciellel'ergonomie logicielle

Ergonomie physiologique :Ergonomie physiologique :impacts physiologiques de l'environnement impacts physiologiques de l'environnement physique et des caractéristiques physique et des caractéristiques physiologiques de l'utilisateur sur la tâchephysiologiques de l'utilisateur sur la tâche– musculaturemusculature– ossatureossature– respirationrespiration– luminositéluminosité



Ergonomie cognitive :Ergonomie cognitive :impacts cognitifs de l'environnement et des impacts cognitifs de l'environnement et des caractéristiques cognitives de l'utilisateur caractéristiques cognitives de l'utilisateur sur la tâchesur la tâche– environnement stressantenvironnement stressant– contraintescontraintes– niveau d'expérienceniveau d'expérience– charge de travailcharge de travail



Ergonomie en général :Ergonomie en général :– concevoir tout système en vue de son concevoir tout système en vue de son

utilisation adéquate, optimale par une utilisation adéquate, optimale par une population d'utilisateurspopulation d'utilisateurs

– tournée vers les moyens de travail efficaces, tournée vers les moyens de travail efficaces, respectant la santé, le bien-être des respectant la santé, le bien-être des utilisateursutilisateurs

– ergonomie logicielle : branche de l'ergonomie ergonomie logicielle : branche de l'ergonomie dédie aux interfaces homme-machine (IHM)dédie aux interfaces homme-machine (IHM)



Deux dimensions :Deux dimensions :– utilité :utilité :

» adéquation de l'IHM par rapport aux objectifs adéquation de l'IHM par rapport aux objectifs fonctionnels de l'applicationfonctionnels de l'application

» indépendante de l'utilisateurindépendante de l'utilisateur

– utilisabilité :utilisabilité :» adéquation de l'IHM par rapport aux besoins de adéquation de l'IHM par rapport aux besoins de

l'utilisateurl'utilisateur» dépendante de l'utilisateurdépendante de l'utilisateur



Utilité :Utilité :– assure un grand nombre de fonctions utiles assure un grand nombre de fonctions utiles

pour l'utilisateur, pour un traitement de texte :pour l'utilisateur, pour un traitement de texte :» créer une table des matièrescréer une table des matières» avoir un correcteur orthographiqueavoir un correcteur orthographique» déplacer des blocs d'un endroit à un autredéplacer des blocs d'un endroit à un autre



Utilisabilité :Utilisabilité :– facilité d'usagefacilité d'usage

» accepte les erreurs de l'utilisateuraccepte les erreurs de l'utilisateur

» offre la possibilité de les corrigeroffre la possibilité de les corriger

» ne bloque pas en cas d'erreurne bloque pas en cas d'erreur

» facilité d'accès aux fonctionsfacilité d'accès aux fonctions

» commandes, messages, icônes compréhensiblescommandes, messages, icônes compréhensibles

Certains logiciels sont riches en fonctions Certains logiciels sont riches en fonctions (utilité), mais difficiles à exploiter (utilité), mais difficiles à exploiter (utilisabilité)(utilisabilité)



Utilité :Utilité :– les utilisateurs intensifs préfèrent parfois utiliser les utilisateurs intensifs préfèrent parfois utiliser

un outil riche, mais difficile à utiliser plutôt qu'un un outil riche, mais difficile à utiliser plutôt qu'un outil facile à utiliser, mais pauvreoutil facile à utiliser, mais pauvre

Utilisabilité :Utilisabilité :– pour les utilisateurs novices ou épisodiques, la pour les utilisateurs novices ou épisodiques, la

facilité d'emploi est un critère prioritairefacilité d'emploi est un critère prioritaire– l'attitude de l'utilisateur vis-à-vis de l'outil l'attitude de l'utilisateur vis-à-vis de l'outil

dépend des interactions utilisateur-outil de l'IHMdépend des interactions utilisateur-outil de l'IHM


1.2 Critères ergonomiques1.2 Critères ergonomiques

Critères ergonomiquesCritères ergonomiques– pour l'utilisabilitépour l'utilisabilité– 8 critères8 critères– taxonomie avec sous-critèrestaxonomie avec sous-critères– avec ordonnancementavec ordonnancement– servent a priori, a posterioriservent a priori, a posteriori



1. Compatibilité :1. Compatibilité :– ssi et seulement si le (re)codage d'informations et ssi et seulement si le (re)codage d'informations et

de tâches du monde réel en données et actions du de tâches du monde réel en données et actions du système est réduitsystème est réduit

– IHM d'autant meilleure qu'elle est compatible car le IHM d'autant meilleure qu'elle est compatible car le transfert d'informations est d'autant plus rapide que transfert d'informations est d'autant plus rapide que le (re)codage en données est réduit,le (re)codage en données est réduit,

– l'accomplissement de tâche est d'autant plus l'accomplissement de tâche est d'autant plus rapide que son interprétation en actions est courte. rapide que son interprétation en actions est courte.



1. Compatibilité1. Compatibilité– Exemple de métaphore incompatibleExemple de métaphore incompatible


1.2.1 Compatibilité1.2.1 Compatibilité

Compatibilité comportementaleCompatibilité comportementale Compatibilité sémantiqueCompatibilité sémantique Compatibilité syntaxiqueCompatibilité syntaxique Compatibilité lexicaleCompatibilité lexicale

– de supportde support– grammaticalegrammaticale– linguistiquelinguistique– de standardde standard



2. Cohérence :2. Cohérence :– ssi les données et les actions sont facilement ssi les données et les actions sont facilement

identifiables, reconnaissables et utilisablesidentifiables, reconnaissables et utilisables– les données sont d'autant mieux perçues et les les données sont d'autant mieux perçues et les

actions d'autant mieux accomplies qu'elles actions d'autant mieux accomplies qu'elles sont présentées de manière stable et sont présentées de manière stable et uniformiséeuniformisée


1.2.2 Cohérence1.2.2 Cohérence

Cohérence inter-applicationCohérence inter-application Cohérence intra-applicationCohérence intra-application

– coh. pragmatiquecoh. pragmatique– coh. sémantiquecoh. sémantique– coh. syntaxiquecoh. syntaxique– coh. lexicalecoh. lexicale

» coh. spatialecoh. spatiale» coh. grammaticale, linguistiquecoh. grammaticale, linguistique

– coh. alphabétiquecoh. alphabétique


1.2.2 Cohérence1.2.2 Cohérence

2. Cohérence :2. Cohérence :– Exemple d’incohérence comportementaleExemple d’incohérence comportementale



3. Charge de travail3. Charge de travail– ssi le volume de données à manipuler et ssi le volume de données à manipuler et

d'actions à accomplir par unité de tâche est d'actions à accomplir par unité de tâche est réduitréduit

– l'interaction est d'autant plus rapide que les l'interaction est d'autant plus rapide que les actions de l'utilisateur portant sur un nombre actions de l'utilisateur portant sur un nombre limité de données sont courteslimité de données sont courtes



Charge de travailCharge de travail– PerformancePerformance– Charge mentaleCharge mentale– BrièvetéBrièveté

» concisionconcision» actions minimalesactions minimales

– Charge symboliqueCharge symbolique– Respect cognitifRespect cognitif– Respect physiqueRespect physique



4. Adaptation :4. Adaptation :– ssi elle possède la faculté de mimétisme ssi elle possède la faculté de mimétisme

comportemental vis-à-vis de son utilisateurcomportemental vis-à-vis de son utilisateur– l'utilisateur est d'autant moins dérouté et l'utilisateur est d'autant moins dérouté et

acquerra d'autant plus d'expérience que acquerra d'autant plus d'expérience que l'interface peut s'adapter aux différents l'interface peut s'adapter aux différents contextes de travailcontextes de travail

– Rappelons qu’elle peut êtreRappelons qu’elle peut être» adaptableadaptable» adaptativeadaptative



5. Contrôle du dialogue5. Contrôle du dialogue– explicite ssi l'utilisateur la place sous son explicite ssi l'utilisateur la place sous son

contrôle et ses actions s'exécutent suite à des contrôle et ses actions s'exécutent suite à des demandes explicitement formulées par demandes explicitement formulées par l'utilisateurl'utilisateur

– implicite ssi elle place l’utilisateur sous son implicite ssi elle place l’utilisateur sous son contrôlecontrôle

– mixte lorsqu’elle est tour à tour à contrôle mixte lorsqu’elle est tour à tour à contrôle explicite et implicite.explicite et implicite.



Contrôle du dialogueContrôle du dialogue Contrôle dans la conversationContrôle dans la conversation

– actions explicitesactions explicites– actions implicitesactions implicites– actions mixtesactions mixtes

Contrôle dans la présentationContrôle dans la présentation– présentation manuelleprésentation manuelle– présentation automatiqueprésentation automatique



Contrôle du dialogue :Contrôle du dialogue :– Exemple de mauvaises actions explicitesExemple de mauvaises actions explicites



6. Représentativité :6. Représentativité :– si et seulement si les codes utilisés, les items si et seulement si les codes utilisés, les items

de menu, les libellés facilitent l'encodage, la de menu, les libellés facilitent l'encodage, la rétentionrétention



Représentativité dans la conversationReprésentativité dans la conversation– raccourciraccourci

» mnémoniquemnémonique» accélérateuraccélérateur

représentativité dans la présentationreprésentativité dans la présentation– abréviationabréviation– codificationcodification



7. Guidage7. Guidage– ssi elle informe de manière constante ssi elle informe de manière constante

l'utilisateur sur l'issue de ses actions et sur sa l'utilisateur sur l'issue de ses actions et sur sa position dans l'accomplissement de sa tâcheposition dans l'accomplissement de sa tâche

– l'utilisateur réalise sa tâche d'autant mieux qu'il l'utilisateur réalise sa tâche d'autant mieux qu'il est guidé à travers toutes les étapes néces-est guidé à travers toutes les étapes néces-saires pour la mener à biensaires pour la mener à bien



Guidage dans la conversationGuidage dans la conversation– invitationinvitation– progressionprogression– feed-back immédiatfeed-back immédiat

Guidage dans la présentationGuidage dans la présentation– groupement/distinction entre les objetsgroupement/distinction entre les objets

» par le placementpar le placement» par le formatpar le format

– guidage visuel, clartéguidage visuel, clarté



Guidage :Guidage :– Exemple de guidage dans la conversationExemple de guidage dans la conversation


1.2 Critères egonomiques1.2 Critères egonomiques

8. Gestion des erreurs :8. Gestion des erreurs :– ssi elle s'avère robuste vis-à-vis erreurs ssi elle s'avère robuste vis-à-vis erreurs

commises par l'utilisateur et se montre commises par l'utilisateur et se montre conviviale dans la manière de les corrigerconviviale dans la manière de les corriger

– la performance de réalisation d'une tâche est la performance de réalisation d'une tâche est d'autant meilleure que les occasions d'erreurs d'autant meilleure que les occasions d'erreurs sont réduitessont réduites



8. Gestion des erreurs :8. Gestion des erreurs :– Exemple de gestion des erreursExemple de gestion des erreurs

GUICHET AUTOMATIQUE EN SERVICEInsérer votre carteEntrer votre code d'identification : 1234Sélectionner une opération : retraitDonner le montant du retrait : 7500 FLe montant doit être un multiple de 1000 F(La machine éjecte la carte)GUICHET AUTOMATIQUE EN SERVICE...

(L'utilisateur doit tout recommencer)



Protection vis-à-vis des erreursProtection vis-à-vis des erreurs Identification des erreursIdentification des erreurs

– Cause de l'erreurCause de l'erreur– Lieu de l'erreurLieu de l'erreur

Explicitation des erreursExplicitation des erreurs Correction des erreursCorrection des erreurs



1. Compatibilité1. Compatibilité

2. Cohérence2. Cohérence

3. Charge de travail3. Charge de travail

4. Contrôle du dialogue4. Contrôle du dialogue

5. Adaptativité5. Adaptativité

6. Représentativité6. Représentativité

7. Guidage7. Guidage

8. Gestion des erreurs8. Gestion des erreurs



C'est un principe de conception et/ou C'est un principe de conception et/ou d'évaluation à observer en vue d'obtenir d'évaluation à observer en vue d'obtenir et/ou de garantir une IHM ergonomiqueet/ou de garantir une IHM ergonomique– pour une tâche interactive donnéepour une tâche interactive donnée– pour une population d'utilisateurs donnéepour une population d'utilisateurs donnée– dans un contexte donnédans un contexte donné



RE pour le graphisme :RE pour le graphisme :– utiliser une hiérarchie de conceptsutiliser une hiérarchie de concepts

Peu

Plus

Encore plus

Davantage


1.3 Règles ergonomiques1.3 Règles ergonomiques RE pour les diagrammes :RE pour les diagrammes :

– utiliser un arbre de décision pour guider utiliser un arbre de décision pour guider l'utilisateur pour donner une réponse l'utilisateur pour donner une réponse appropriée dans des conditions diversesappropriée dans des conditions diverses

Nbre-valeurs-choisir = 1 Type-dom = inconnu : champ d'édition uni-linéaire profilé Type-dom = connu Nbre-valeurs-possibles [2,3] Densité-FL = faible : bouton radio

Densité-FL = élevée : boîte à options Nbre-valeurs-possibles [4,Nmag]

Densité-FL = faible : bouton radio + boîte de regroupement Densité-FL = élevée : boîte à options



RE pour le placement d'objets interactifs :RE pour le placement d'objets interactifs :– placer les boutons de commande de manière placer les boutons de commande de manière

uniformisée totalementuniformisée totalement



L’incrustationL’incrustation



L'incrustationL'incrustation



Carnet d'adresse : première versionCarnet d'adresse : première version



Carnet d'adresse : deuxième versionCarnet d'adresse : deuxième version



Carnet d'adresse : troisième versionCarnet d'adresse : troisième version



Carnet d'adresse : quatrième versionCarnet d'adresse : quatrième version



Carnet d'adresse : cinquième versionCarnet d'adresse : cinquième version



Conception des menus déroulantsConception des menus déroulants



Ordonnancement des menusOrdonnancement des menus– FréquenceFréquence– AlphabétiqueAlphabétique– NumériqueNumérique– PhysiquePhysique– ChronologiqueChronologique– ......



Menu "Fichier"Menu "Fichier"



Menu "Edition"Menu "Edition"



Menu "Vue"Menu "Vue"



Menu "Options"Menu "Options"



Menu "Aide"Menu "Aide"



Solution possibleSolution possible



Sélection des objets interactifsSélection des objets interactifs



Solution possibleSolution possible


Choix simpleChoix simpleDomainemixte :

Dom. inconnu :

Nbre-valeurs-possibles

[2,3]


]8,50]


[4,7]


]50,+[

Domaineconnu :


[2,3]


[4,7]


]8,50]


]50,+[


Choix multipleChoix multipleDomaineinconnu :

Domaine mixte :Domaine connu :


[4,7]


]8,50]


]50,+[


[2,3]


[4,7]


]8,50]


]50,+[


[2,3]



Conception d’une boîte de dialogueConception d’une boîte de dialogue


Division : _ _ _ _ _ _ _ _Département : _ _ _Titre : _ _ _ _ _

1.


2.


3.

Division : _ _ _ _ _ _ _ _Département : _ _ _ Titre : _ _ _ _ _

4.

1.3 Règles ergonomiques1.3 Règles ergonomiques Alignement des libellés : possibilitésAlignement des libellés : possibilités


Division : _ _ _ _ _ _ _ _Départ. : _ _ _Titre : _ _ _ _ _

Division : _ _ _ _ _ _ _ _Département : _ _ _ Titre : _ _ _ _ _


Alignement des libellés : solutionsAlignement des libellés : solutions

s ’il y a une différencede plus de 6 caractèresentre le libellé le pluslong et le plus court



Localisation des boutons de commande : Localisation des boutons de commande : arrangement vertical sans (Options), (Aide)arrangement vertical sans (Options), (Aide)



Localisation des boutons de commande : Localisation des boutons de commande : arrangement vertical completarrangement vertical complet



Localisation des boutons de commande : Localisation des boutons de commande : arrangement horizontal sans (Options), arrangement horizontal sans (Options), (Aide)(Aide)



Localisation des boutons de commande : Localisation des boutons de commande : arrangement horizontal completarrangement horizontal complet



Localisation des boutons de commande : Localisation des boutons de commande : arrangement horizontal avec un long textearrangement horizontal avec un long texte



Formattage d’un paragraphe : première Formattage d’un paragraphe : première proposition de solutionproposition de solution



Formattage d’un paragraphe: deuxième Formattage d’un paragraphe: deuxième proposition de solutionproposition de solution



Concep-Concep-tion destion desicônesicônes



Conception des fenêtresConception des fenêtres


1.3 Règles ergonomiques1.3 Règles ergonomiques-- Système d'expédition de messages --

SYSTEME #22 - TdT 27 mars 1984

* * * * AVERTISSEMENT * * * *

LES UTILISATEURS DE TdT SONT PRIES DE NE PAS IMPRIMERDES COPIES MULTIPLES DE DOCUMENTS DE GRANDE TAILLE

(100 PAGES OU PLUS) SUR L'IMPRIMANTE 6670 OU SUR L'IMPRIMANTE LIGNE CAR CELA CAUSE UN RETARD SUR CES

IMPRIMANTES/// SI VOUS AVEZ BESOIN DE COPIES MULTIPLES, VEUIL-LEZ QUITTER APRES AVOIR SOUMIS VOTRE REQUETE A16H30. MERCI.

* * * * * *

UTILISATEURS DU RESEAU -- Veuillez rapporter tout problèmerelatif au réseau au Centre de Calcul X222.

Les questions et problèmes doivent être adressés au CC, X222.

Appuyez sur RETURN pour venir au menu des ...

Concep-Concep-tiontiondesdesmessagesmessages


1.3 Règles ergonomiques1.3 Règles ergonomiquesSYSTEME D'EXPEDITION DES MESSAGES 27 mars 1984

Utilisateurs du traitement de texte :

Veuillez NE PAS imprimer des copies multiples de documentsimportants (plus de 100 pages imprimées) durant l'horaire de

travail normal.De telles impressions ralentissent le service pour tous les

utilisateurs.

Si vous avez besoin d'une impression volumineuse, soumettezvotre requête à 16h30 avant de quitter. Vos états imprimés

seront prêts pour le lendemain.

Utilisateurs du réseau :

toute question relative au réseau doit être adressée au Centre de Calcul, bureau x222.

* Appuyer sur [Barre d'espace] pour afficher le menu desapplications

Proposi-Proposi-tion detion desolutionsolution



LECTEUR: A TRAITEMENT DE TEXTE DATE: 12/1/88

FICHIERS***********************************************

TEST.DOCCHAPITRE2MEMO

CHAPITRE3FIGURESLETTRE.PRN

CHAPITRE4CHAPITRE5REF.LST

CONTROLES**********************************************

COMMANDES

[CTRL]+[I] pour Insérer[CTRL]+[C] pour Rechercher[CTRL]+[R] pour Remplacer[CTRL]+[C] pour Couper[CTRL]+[F] pour Formater

SELECTIONNER UN FICHIERPUIS UTILISERLES TOUCHES DE CONTROLEOULES TOUCHES DE FONCTION

IMPRIMER CHERCHER REMPLACER COUPER COLLER

AIDE TABULATION FORMATER MARGES INSERER

Conception de la mise en évidenceConception de la mise en évidence



Mise en évidence par la taille (maximum 3)Mise en évidence par la taille (maximum 3)

ggggggggggggggggggggggggggggTaille 1 (petit)Taille 2 (normal)Taille 3 (mis en évidence)



Mise en évidence par les symboles (Mise en évidence par les symboles (max. 5max. 5))



Mise en évidence par le contraste Mise en évidence par le contraste (maximum 3)(maximum 3)

Video normal Video inversé



Mise en évidence par la texture (max. 4)Mise en évidence par la texture (max. 4)

0102030405060708090

1er trim.

2e trim.3e trim.4e trim.

Est

Ouest

Nord



Eviter les vibrationsEviter les vibrations



Mise en évidence par la couleur (de 6 à 8)Mise en évidence par la couleur (de 6 à 8)



Synthèses additives et soustractiveSynthèses additives et soustractive

Utiliser des couleurs opposéesUtiliser des couleurs opposéesJaune sur fond bleu Jaune sur fond rouge Bleu sur fond blanc

Rouge sur magenta Cyan sur fond vert Bleu sur fond noir


1.3 Règles ergonomiques1.3 Règles ergonomiques Les meilleures combinaisons de couleursLes meilleures combinaisons de couleurs

Arrière-plan

Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune

Trait fin et texte

Bleu (94%) Noir (63%) Rouge (25%)

Blanc (75%) Jaune (63%)

Jaune (75%) Blanc (56%) Noir (44%)

Noir (100%) Bleu (56%) Rouge (25%)

Blanc (75%) Jaune (63%) Cyan (25%)

Bleu (69%) Noir (56%) Rouge (37%)

Noir (63%) Blanc (56%) Bleu (44%)

Rouge (63%) Bleu (63%) Noir (56%)


1.3 Règles ergonomiques1.3 Règles ergonomiques Les meilleures combinaisons de couleursLes meilleures combinaisons de couleurs

Arrière-plan

Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune

Trait épais et panneaux

Noir (69%) Bleu (63%) Rouge (31%)

Jaune (69%) Blanc (50%) Vert (25%)

Noir (50%) Jaune (44%) Blanc (44%)

Noir (69%) Rouge (63%) Bleu (31%)

Jaune (38%) Magenta (31%) Noir (31%)

Rouge (56%) Bleu (50%) Noir (44%)

Bleu (50%) Noir (44%) Jaune (25%)

Rouge (75%) Bleu (63%) Noir (50%)


1.3 Règles ergonomiques1.3 Règles ergonomiques Les plus mauvaises combinaisons de couleursLes plus mauvaises combinaisons de couleurs

Arrière-plan

Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune

Trait fin et texte

Jaune (100%) Cyan (94%)

Bleu (87%) Rouge (37%) Magenta (25%)

Magenta (81%) Bleu (44%) Vert (25%)

Cyan (81%) Magenta (50%) Jaune (37%)

Vert (62%) Rouge (37%) Noir (37%)

Vert (81%) Jaune (75%) Blanc (31%)

Vert (75%) Rouge (56%) Cyan (44%)

Blanc (81%) Cyan (81%)


1.3 Règles ergonomiques1.3 Règles ergonomiques Les plus mauvaises combinaisons de couleursLes plus mauvaises combinaisons de couleurs

Arrière-plan

Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune


Jaune (95%) Cyan (75%)

Bleu (81%) Magenta (31%)


Cyan (81%)Magenta (44%) Jaune (44%)

Vert (44%) Rouge (31%) Noir (31%)

Jaune (69%) Vert (62%) Blanc (56%)

Cyan (81%) Vert (69%) Rouge (44%)

Blanc (81%) Cyan (56%) Vert (25%)



Les meilleurs contrastes à deux :Les meilleurs contrastes à deux :– Rouge-turquoiseRouge-turquoise– Rouge-CyanRouge-Cyan– Bleu-JauneBleu-Jaune– Vert-RoseVert-Rose– Vert-MagentaVert-Magenta



La meilleure combinaison à trois :La meilleure combinaison à trois :– Rouge-Bleu-VertRouge-Bleu-Vert

La meilleure combinaison à quatre :La meilleure combinaison à quatre :– Rouge-Bleu-Vert-BlancRouge-Bleu-Vert-Blanc


Séance 4. L’ergonomie du WebSéance 4. L’ergonomie du Web

VocabulaireVocabulaire

1.1. Conception d'un site WebConception d'un site Web

2. Navigation2. Navigation

3. Présentation3. Présentation

4. Formulaires, titres et en-têtes4. Formulaires, titres et en-têtes

5. Cadres et fenêtres5. Cadres et fenêtres

6. Graphiques6. Graphiques

7. Eléments multimédia7. Eléments multimédia

8. Accessibilité8. Accessibilité


Cette page est-elle ergonomique?Cette page est-elle ergonomique?



ConceptsConcepts– site = ensemble de pagessite = ensemble de pages– liensliens

» intra-page : intra-page : http://www.x.com/.../#signethttp://www.x.com/.../#signet

» extra-page : extra-page : http://www.x.com/source.htmlhttp://www.x.com/source.html intra-site : intra-site : http://www.x.com/dest.htmlhttp://www.x.com/dest.html extra-site : extra-site : http://www.y.com/dest.htmlhttp://www.y.com/dest.html

– vaguemestre = vaguemestre = webmasterwebmaster auteur = auteur = authorauthor– navigateur = navigateur = browserbrowser– visiteur = visiteur = readerreader



Règle ergonomiqueRègle ergonomique– définitiondéfinition– motifmotif– critère ergonomiquecritère ergonomique– exemple positifexemple positif– exemple négatifexemple négatif– exceptionexception



8 Critères ergonomiques8 Critères ergonomiques– compatibilitécompatibilité– cohérencecohérence– charge de travailcharge de travail– adaptativitéadaptativité– contrôle du dialogue contrôle du dialogue – représentativitéreprésentativité– guidageguidage– gestion des erreursgestion des erreurs


Table des matièresTable des matières











Conception d'un site Web Conception d'un site Web (1(11)1)

Le contenu informationnel d'un site doit Le contenu informationnel d'un site doit être représentatifêtre représentatif

Pages sans butPages de style "famille"

Table des matièresInformations pertinentes


Conception globale d'un site Conception globale d'un site (1(12)2)

Inviter le visiteur à ajouter un signetInviter le visiteur à ajouter un signet

Page statique

Page avec des informations mises à jour périodiquementPage de référence



La conception d'un site doit être cohérenteLa conception d'un site doit être cohérente

Les mêmes éléments à différents endroits, différents éléments pour le même objet

Les mêmes éléments aux mêmes endroits dans la page



Penser à une structuration appropriée du Penser à une structuration appropriée du sitesite

Sites de première générationSites de deuxième génération

Sites de troisième génération



Utiliser la hiérarchie avec soinUtiliser la hiérarchie avec soin



Utiliser la clôture transitiveUtiliser la clôture transitive

Page sans titre, sans sous-titre

Titre de la pageSous-titre pour les grandes catégoriesSous-sous-titre pour les paragraphes



Utiliser des sous-menus pour les sites Utiliser des sous-menus pour les sites volumineuxvolumineux

Menu complet

Menu avec sous-menu



Prévoir nécessairement une page d'accueilPrévoir nécessairement une page d'accueil

Pas de page d'accueil exagérée

La page d'accueil doit- servir de menu principal- autoriser des accès multiples

Paged'accueil

Page BPage A Page C



Prévoir éventuellement une page Prévoir éventuellement une page d'invitationd'invitation

Une hiérarchie est simple, mais banale

Porte frontalePage furtivePage d'invitation suivie de deux pages d'entrée

Paged'accueil

Page BPage A

Paged'entrée

n°2

Paged'entrée

n°1

Paged'invi-tation



Prévoir similairement une page de clôturePrévoir similairement une page de clôture

Paged'accueil

Page BPage A

Paged'entrée

n°2

Paged'entrée

n°1

Paged'invi-tation

Page C

Pagede sortie

n°1

Pagede

clôture

Pagede sortie

n°2

Utiliser le même mécanisme que pour la page d'invitation



Prévoir une option d'impression pour les Prévoir une option d'impression pour les grands sitesgrands sites

Prévoir deux versions :- une version écran- une version papierDocuments générés par HTML Transit- un ensemble de pages- un fichier unique (PS, PDF, DOC)



Prévoir une section « Nouveautés » Prévoir une section « Nouveautés » évidenteévidente

Lien vers "Quoi de neuf?" est insuffisant

Mettre une partie des nouveautés dans la page d'accueil



Adopter une logique de dénomination du Adopter une logique de dénomination du sitesite

Eviter http://www.kl98.com.my/gamesex

Préférer http://www.dcs.cam.ac.uk/smith/publications

Kuala Lumpur

1998 MalaysieGames Exposition

Dept. of Computer Science

Univ. of Manchester

Academic United Kingdom

Smith

Publications



Adopter une logique de dénomination des Adopter une logique de dénomination des fichiers du sitefichiers du site

Incohérence linguistique : Bouton_Print.gifIncohérence syntaxique : Bouton_Imprimer_FR.gifavec PrintUK.gifManque de représentativité : Menu.htmlManque de précision : Photo1.jpg, Photo2.jpg, Photo3.jpg

BoutonImprimer.gifButtonPrint.gifMenuPrincipalGestion.htmlTokyoCiel.jpg, TokyoAéroport.jpg



Adopter une logique d'organisation des Adopter une logique d'organisation des fichiers du sitefichiers du site

Ne pas aller au-delà d'un niveau de hiérarchie

Si on a 5 ensembles de pages reliées par une thématique, prévoir 5 répertoires + Images + Transfert



La conception du site doit être appropriée La conception du site doit être appropriée au contexteau contexte

Le site Horta

[poss. min.,poss. max.]



La conception d'un site doit supporter La conception d'un site doit supporter plusieurs navigateursplusieurs navigateurs

Ne pas utiliser des fonctionnalités supportées par un navigateur et qui ne le sont pas par un autre

Détecter le navigateur en JavaScript



La conception d'un site doit viser prioritaire-La conception d'un site doit viser prioritaire-ment l'ergonomiement l'ergonomie

Refuser les pages inutilesRefuser les pages utiles, mais pas utilisablesRefuser les pages sophistiquées technologiquement

Evaluateur Bobby



Préparer les pages pour les moteurs de Préparer les pages pour les moteurs de recherche externesrecherche externes

Page sans titre, sans indicateur de structure

Manières visibles :- <TITLE> ... </TITLE>- <H1>...</H1>, <H2>...</H2>, <H3>...</H3>- Indicateur de structure : Aller à UCL/IAG/Jean Vdd/- Résumé des activités- Noms de fichiers identifiantsManières invisibles :- balises cachées : ALT="..."- méta-balises : <META NAME="Description" Content="...">



Ajouter un moteur de recherche interneAjouter un moteur de recherche interne

Scanneur ASCII HarvestIndexeur générique pour serveur HTTP : HTGREPMoteur de recherche interne pour un petit site : DIG


Navigation Navigation (2(21)1)

L'accès à l'information doit être rapideL'accès à l'information doit être rapide

Trop de niveaux dans la hiérarchie

Règle des 3 clics



Considérer le temps d'accès à chaque Considérer le temps d'accès à chaque pagepage

Mettre toute l'information d'une foisVRML trop gros

Réduire à [30 Ko,50 Ko], quelques une à 70 KoAvertir le visiteur si le temps sera long



Utiliser une carte du site pour dénoter les Utiliser une carte du site pour dénoter les relations entre les informationsrelations entre les informations

Pas de carte passivePas de carte complexe

Description d'un cirqueHotSauceWebTOCPtolemaeus



Utiliser une image réactive comme carte Utiliser une image réactive comme carte graphique de navigationgraphique de navigation

Pas de carte sans rapport

Carte+/- méta-phorique



Ne pas restreindre la navigation aux Ne pas restreindre la navigation aux graphiquesgraphiques

Pas de liens différents pour accéder à une même information

Prévoir des accès multiples- ALT pour les images- menu textuel en fin d'écran- accès transversaux multiples



Inclure des repères de navigationInclure des repères de navigation

Barre denavigation

Point deralliement

Diagrammeglobalou local



L'accès à l'information doit être rapideL'accès à l'information doit être rapide

Ne pas donner le dernier niveau de détail d'emblée

L'information la plus importante d'abordVue panoramique + zoom avant + détails à la demande



Les repères de navigation doivent être Les repères de navigation doivent être cohérentscohérents

Incohérence entre la barre et le menu

Utiliser les mêmes repères pour les mêmes buts, en les plaçant au même endroit



Les liens doivent pointer vers un contenu Les liens doivent pointer vers un contenu informationnel substancielinformationnel substanciel

Pas de lien vers une page incomplète

Vérifier que les liens extra-site sont représentatifs, significatifs



Fournir des liens textuels pour chaque Fournir des liens textuels pour chaque pagepage

Pas seulement unecarte graphique

Liens textuelspour utilisateursà besoins spéciaux



Les liens textuels doivent être clairsLes liens textuels doivent être clairs

Texte du lien représentatif- texte du lien = nom du fichier pointé Voici la liste des disques

- texte du lien = titre de la page pointée Voici la liste des disques Liste

desdisques

ListeDisques.txt



Les liens textuels doivent être courtsLes liens textuels doivent être courts

Placer des liens dans un paragraphe suggère le contenudes liens au visiteur ainsi que le contexte dans lequelil peut être parcouru.

Placer des liens dans un paragraphe suggère le contenu des liens au visiteur ainsi que le contexte dans lequel il peut être parcouru.



Utiliser "Précédent/Suivant", "Avant/Arrière" Utiliser "Précédent/Suivant", "Avant/Arrière" avec précautionavec précaution

Mettre à jour les liens en cas de modification

Confusion entre et

Pagen°3

Pagen°2

Pagen°1

Pagen°3

Pagen°1

Pagen°3

Pagen°2

Pagen°1



Bannir les liens "Cliquez ici"Bannir les liens "Cliquez ici"

Cliquez ici pour aller à la page des publicationsCliquez ici pour aller à la page de l'IAGCliquez ici pour aller à la page de l ’UCL

Aller à : UCL / IAG / Publications



Interdire les liens "Retourner à..."Interdire les liens "Retourner à..."

Aller à :...

BoutonEviter : revenir,retourner, repartir,annuler, défaire,rebrancher

Paged'accueil

Page A Page B Page C Page D Page E

Premiersite

Page 1 Page 2 Page 3 Page 4 Page 5

Deuxième site



Tout visiteur doit distinguer un lien visité Tout visiteur doit distinguer un lien visité d'un lien nouveaud'un lien nouveau

Lien visitéLien non visité

Utiliser les couleurs standardsUtiliser des couleurs opposées

Ne pas utiliser jaune et orange Lien visitéLien non visité



Informer le visiteur de la teneur du lienInformer le visiteur de la teneur du lienLa cuisine de l'Hôtel de Groesbeeck de Croix

La cuisine de l'Hôtel de Groesbeeck de ... (QuickTime VR, 230 Ko, +/- 35 sec. de téléch.)- Indispensable pour le téléchargement de fichiers (WinSite)- Indiquer le type de lien

Lien de note en bas de pageLien de remplacement

Lien de référenceLien de commande



Utiliser des liens intra-page dans les Utiliser des liens intra-page dans les longues pageslongues pages

Page "Formation" sans lien

Page "Formation" avec lien



Veiller à la maintenance des liensVeiller à la maintenance des liens

Liens obsolètes (E-mail, machine,...)

Maintenir les liens intra-site correctsVérifier et corriger les liens extra-site régulièrement


Présentation Présentation (3(31)1)

L'information la plus importante doit être L'information la plus importante doit être placée en premier lieuplacée en premier lieu

Pas de grand logoPas trop d'informations signalétiques au début

Les liens importants doivent apparaître au début de la page



La présentation de toute page doit être La présentation de toute page doit être cohérentecohérente

Un titre de page dans la barre de titreLien vers les informations du siteLien vers les informations signalétiquesLien vers la page d'accueilLien vers le moteur de recherche interneLien vers page de copyrightLien mél. à destination de l'auteur, du vaguemestre



La page d'accueil doit tenir sur un seul écranLa page d'accueil doit tenir sur un seul écranPas de page trop grande : JVDD

Page limitéeà 640 x 480:CIGER



Ne pas contraindre physiquement la page Ne pas contraindre physiquement la page d'accueild'accueil

Pas de fond d'écran trop étroit

Utiliser une table centrée

30

30 3030 30



L'information doit être complète sur le L'information doit être complète sur le même écranmême écran

Pas de message réparti sur deux écrans

Indiquer que la page continueTester la présentation sur des configurations différentes



Trancher entre des pages courtes, longuesTrancher entre des pages courtes, longuesUtiliser le tableau



Utiliser une grille de présentationUtiliser une grille de présentation

Dessiner la grille sur une recopie d'écran



Utiliser les techniques visuellesUtiliser les techniques visuelles

Balance

Symétrie

Instabilité

Asymétrie



Utiliser au maximum les tablesUtiliser au maximum les tables

WebElementsMettre BORDER=0Utiliser les tables de longueur fixe



Les lignes textuelles du contenu informa-Les lignes textuelles du contenu informa-tionnel doivent être courtes, structuréestionnel doivent être courtes, structurées

Vérifier ce que donne le texte quand le visiteur change de police



Penser aux feuilles de stylePenser aux feuilles de style

Ne pas utiliser les feuilles de style comme si c'était pour un document écrit

Cascading Style Sheets pour MS Explorer



Utiliser de l'espacement blancUtiliser de l'espacement blanc

Pas de page encombrée

Remplir une page avec 30% de texteUtiliser de l'espacement blanc comme alinéa



Etre draconien avec le défilementEtre draconien avec le défilement

Ne pas utiliser de graphique excédant 640 x 480 ou800 x 600 pixels

Eviter les défilements tant horizontaux que verticaux



Les informations liées sémantiquement Les informations liées sémantiquement doivent être présentées conjointementdoivent être présentées conjointement

Texte associé le décrivant

Texte associé


Formulaires, titres et en-têtes Formulaires, titres et en-têtes (4(41)1)

Les informations à acquérir doivent être Les informations à acquérir doivent être présentées dans un formulaireprésentées dans un formulaire

Utiliser une table pour contrôler l'alignement- des champs d'édition- des libellés identificatifs



Sélectionner les objets interactifs de Sélectionner les objets interactifs de manière appropriéemanière appropriée

Ne pas utiliser un bouton de variation pour une valeur booléenne, une liste défilante pour beaucoup de valeurs

Utiliser les chartes graphiques


Choix simpleChoix simpleDomainemixte :

Dom. inconnu :


[2,3]


[8,50]


[4,7]


]50,+[

Domaineconnu :


[2,3]


[4,7]


[8,50]


]50,+[


Choix multipleChoix multipleDomaineinconnu :

Domaine mixte :Domaine connu :


[4,7]


[8,50]


]50,+ [


[2,3]


[4,7]


[8,50]


]50,+ [


[2,3]



Toute page doit comporter un titre Toute page doit comporter un titre identifiantidentifiant

Page d'accueil IESN

Utiliser <H1> Titre identifiant </H1>Utiliser la balise TITLE



Utiliser des en-têtes pour accélérer le Utiliser des en-têtes pour accélérer le parcours des informationsparcours des informations

L'en-tête doit refléter précisément le contenu de l'agrégat



Pour les documents structurés, Pour les documents structurés, communiquer la structure au visiteurcommuniquer la structure au visiteur

En dessous du titre, indiquer la où la page s'insèreInclure- le nom du document- le titre du chapitre- le titre de la section courante



VocabulaireVocabulaire1.1.Conception d'un site WebConception d'un site Web2. Navigation2. Navigation3. Présentation3. Présentation4. Formulaires, titres et en-têtes4. Formulaires, titres et en-têtes5. Cadres et fenêtres5. Cadres et fenêtres6. Graphiques6. Graphiques7. Eléments multimédia7. Eléments multimédia


Cadres et fenêtres Cadres et fenêtres (5(51)1)

Utiliser les cadres avec parcimonieUtiliser les cadres avec parcimonie

Ne pas oublier la clause TARGET=...



Utiliser les fenêtres seulement si Utiliser les fenêtres seulement si nécessairenécessaire

Utiliser une carteFenêtre secondaire pour une vue détaillée, une illustration7 usages fonctionnels possibles



Le nombre de cadres, de fenêtres doit être Le nombre de cadres, de fenêtres doit être limitélimité

Effet "lorgnette"

Max. 2 fenêtresMax. 3 cadres



Utiliser les cadres, les fenêtres de manière Utiliser les cadres, les fenêtres de manière appropriéeappropriée

Eléments globaux, persistantsNom du site + lien vers la page d'accueil dans chaque cadreCadres pour sur-affichage de texte



Veiller à la taille des cadres et fenêtresVeiller à la taille des cadres et fenêtres


Graphiques Graphiques (6(61)1)

Utiliser les graphiques de manière Utiliser les graphiques de manière appropriéeappropriée

Pas de logo d'outils sur la page d'accueil

Dans un but spécifiquePour favoriser la navigationPour dénoter les zones de contenu



Adjoindre du texte à chaque graphiqueAdjoindre du texte à chaque graphique

Utiliser du texte pour s'assurer que le graphique véhicule bien l'information prévue



Utiliser le texte alternatifUtiliser le texte alternatif

Balise ALT : <IMG SRC="news.gif" ALT="What's new?">Pour l'indexation par les moteurs externes

Attention pour les bulles d'aideOK pour ExplorerKO pour Navigator



Réutiliser les mêmes graphiquesRéutiliser les mêmes graphiques

Utiliser les mêmes icônes, les mêmes logos,...



Utiliser les graphiques pour représenter les Utiliser les graphiques pour représenter les zones du sitezones du site

Utiliser les mêmes graphiques pour les mêmes zones



Recourir aux graphiques pour les en-têtesRecourir aux graphiques pour les en-têtes

Utiliser les polices de caractères artistiquesGarder le texte de l'en-tête dans une couche séparéeRecourir à l'anti-aliasing



Utiliser les graphiques pour les listesUtiliser les graphiques pour les listes

Page d'accueil de CircusWare



Garder en tête les limites des graphiquesGarder en tête les limites des graphiques



Utiliser les miniaturesUtiliser les miniatures

- Sauver l'original sous un nom représentatif : Hotel.jpg- Créer une version réduite en taille- Effectuer un dithering- Enregistrer en GIF de qualité minimale : HotelMin.gif- Lier les 2

Ne pas redimensionner le graphique dans le code HTML



Les dimensions des graphiques doivent Les dimensions des graphiques doivent être appropriéesêtre appropriées

Largeur (graphique) < 600 pixels

N'utiliser le redimensionnement avec % qu'après test



Les graphiques doivent être simplifiésLes graphiques doivent être simplifiés

Lien vers un graphique plus détailléCherger un graphique réduit d'abord

Ne pas utiliser une photo d'ordinateur, une image suffit



Utiliser les GIF entrelacés, les images Utiliser les GIF entrelacés, les images fractalesfractales

Image entrelacéeGIF89a InterlacedEntrelacer à partir de 200 x 200

Image nonentrelacée



Ne pas ajouter de bords aux graphiquesNe pas ajouter de bords aux graphiques

Utiliser la balise BORDER=0

Attention aux effets 3DNe pas enregistrer les graphiques avec bordure



Utiliser des graphiques transparents sur un Utiliser des graphiques transparents sur un fond d'écran traméfond d'écran tramé

Rendre les icônes rondes transparentesSoumettre au convertisseur en ligne



Spécifier les dimensions d'un graphique en Spécifier les dimensions d'un graphique en HTMLHTML

Utiliser les balises HEIGHT="50" WIDTH="70"BBEdit calcule les dimensions automatiquement


Eléments multimédia Eléments multimédia (7(71)1)

Le type de fond d'écran doit être appropriéLe type de fond d'écran doit être approprié

Ligne de l'horizon Exemple Signification

Utiliser les lignes de l'horizon suivantes

Basse Attire l'attention vers le ciel, l'abstrait,les valeurs hautes

Haute Accentue les problèmes concrets, immédiats

Médiane Suggère l'équilibre, la paix, la balance

Diagonale Crée une instabilité, un sentiment de mouvement

DécoupéeSuggère dynamisme, changement, voire violence

Eléments multimédia

Fond d'écran basFond d'écran bas

Eléments multimédiaEléments multimédia

Fond d'écran hautFond d'écran haut


Fond d'écran médianFond d'écran médian



Fond d'écran diagonalFond d'écran diagonal


Fond d'écran découpéFond d'écran découpé



Préférer les fonds d'écran clairs, de basse Préférer les fonds d'écran clairs, de basse intensitéintensité

Pas de blancsur fond noir



Eviter les fonds d'écran avec motifsEviter les fonds d'écran avec motifs

Motifs pâles, clairsSoumettre au test

Pages construites avec un mauvais fond d'écran



Sélectionner un fond d'écran aléatoireSélectionner un fond d'écran aléatoire

Pages construites avec un motif aléatoire

Pages construites avec un motif pas aléatoire



Eviter le texte en fond d'écranEviter le texte en fond d'écran

Même des petits textes rendent la lecture difficile

Texte en fond d'écran






Utiliser une couleur de fond avec le fond Utiliser une couleur de fond avec le fond d'écrand'écran

Utiliser une couleur compatible avec la dominante

Pas suivre l'hypothèse : le visiteur garde les couleurs de la page



Tester en vraie grandeur les fonds d'écranTester en vraie grandeur les fonds d'écran



Maintenir un haut contraste entre les Maintenir un haut contraste entre les élémentséléments

Garder les meilleures combinaisons de couleursRecourir aux meilleurs contrastes à 2Recourir à la meilleure combinaison à 3Recourir à la meilleure combinaison à 4

Ecarter les plus mauvaises combinaisons de couleurs


Eléments multimédiaEléments multimédia Garder les meilleures combinaisons de Garder les meilleures combinaisons de

couleurscouleursArrière-plan

Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune

Trait fin et texte

Bleu (94%) Noir (63%) Rouge (25%)

Blanc (75%) Jaune (63%)

Jaune (75%) Blanc (56%) Noir (44%)

Noir (100%) Bleu (56%) Rouge (25%)

Blanc (75%) Jaune (63%) Cyan (25%)

Bleu (69%) Noir (56%) Rouge (37%)

Noir (63%) Blanc (56%) Bleu (44%)

Rouge (63%) Bleu (63%) Noir (56%)


Eléments multimédiaEléments multimédia Garder les meilleures combinaisons de Garder les meilleures combinaisons de


Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune


Noir (69%) Bleu (63%) Rouge (31%)

Jaune (69%) Blanc (50%) Vert (25%)

Noir (50%) Jaune (44%) Blanc (44%)

Noir (69%) Rouge (63%) Bleu (31%)

Jaune (38%) Magenta (31%) Noir (31%)

Rouge (56%) Bleu (50%) Noir (44%)

Bleu (50%) Noir (44%) Jaune (25%)

Rouge (75%) Bleu (63%) Noir (50%)


Eléments multimédiaEléments multimédia Ecarter les mauvaises combinaisons de Ecarter les mauvaises combinaisons de


Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune

Trait fin et texte

Jaune (100%) Cyan (94%)

Bleu (87%) Rouge (37%) Magenta (25%)



Vert (62%) Rouge (37%) Noir (37%)

Vert (81%) Jaune (75%) Blanc (31%)

Vert (75%) Rouge (56%) Cyan (44%)

Blanc (81%) Cyan (81%)


Eléments multimédiaEléments multimédia Ecarter les mauvaises combinaisons de Ecarter les mauvaises combinaisons de


Blanc

Noir

Rouge

Vert

Bleu

Cyan

Magenta

Jaune


Jaune (95%) Cyan (75%)

Bleu (81%) Magenta (31%)



Vert (44%) Rouge (31%) Noir (31%)

Jaune (69%) Vert (62%) Blanc (56%)

Cyan (81%) Vert (69%) Rouge (44%)

Blanc (81%) Cyan (56%) Vert (25%)



Recourir aux meilleurs contrastes à deuxRecourir aux meilleurs contrastes à deux– Rouge-TurquoiseRouge-Turquoise

– Rouge-CyanRouge-Cyan

– Bleu-JauneBleu-Jaune

– Vert-RoseVert-Rose

– Vert-MagentaVert-Magenta



Recourir à la meilleure combinaison à 3Recourir à la meilleure combinaison à 3– Rouge Bleu VertRouge Bleu Vert

Recourir à la meilleure combinaison à 4Recourir à la meilleure combinaison à 4– Rouge Bleu Vert BlancRouge Bleu Vert Blanc



Les zones de couleur peuvent être largesLes zones de couleur peuvent être larges

Ajuster les couleurs d'une image scannée à quelques couleurs



Réduire la profondeur des couleursRéduire la profondeur des couleurs

Réduire les GIF en-dessous de 8 bits (256 coul.)Dégrader les JPGEntre 15 et 35 couleurs dans l'histogramme



Utiliser les 216 couleurs principalesUtiliser les 216 couleurs principales

Utiliser la Color Look-Up Table (CLUT)Utiliser le cube des couleurs

Utiliser la même palette pour chaque pageBalise HEAD dans {00,33,66,99,CC,FF}P. ex. #CCCCFF = bleu clair #996600 = orange moyen



Eviter le ditheringEviter le dithering

Utiliser le dithering pour les JPG

Ne pas utiliser trop le dithering pour les GIF



Tester les couleursTester les couleurs



Utiliser les polices sans sérif pour la lecture Utiliser les polices sans sérif pour la lecture en ligneen ligne

Utiliser Arial, Helvetica pour les §Réserver les polices de fantaisie pour les grands titres



Prêter attention à la typographiePrêter attention à la typographie

Utiliser la mise en gras uniquement pour la mise en évidence

Ne pas utiliser le soulignementN'utiliser l'italique que dans des cas précisNe pas mettre le texte en MAJUSCULES



Prévoir les variations de taille de policePrévoir les variations de taille de police

Table avec policede taille fixeLibellés au-dessusdes champs

Polices sur deuxnavigateurs



Recourir à des ressources multimédia de Recourir à des ressources multimédia de manière appropriéemanière appropriée

- Quand un medium non verbal convient naturellement- Pour toucher un public dont la lecture ne constitue pas la forme privilégiée d'apprentissage- Pour une audience internationale- Pour renforcer l'attention et favoriser la rétention- Pour mettre en évidence un élément sur une page- Pour assurer un retour d'information- Pour dénoter un processus



Pour une audience internationale (1)Pour une audience internationale (1)



Pour une audience internationale (2)Pour une audience internationale (2)



Penser à une présentation assistée par Penser à une présentation assistée par ordinateurordinateur

Utiliser la balise REFRESHUtiliser PowerPoint Animation FileUtiliser Shockwave for Director 6

Pas de longue suite de pages



Considérer des animations simples en GIF Considérer des animations simples en GIF animéanimé

Utiliser GifBuilder

Pas plus de 7 images dans la suite



Eviter les animations répétitivesEviter les animations répétitives

Montrer la continuité dans les transitions (Pythagore)Indiquer la dimensin dans les transitionsIllustrer le changement dans le temps (déforestation)

La boussole



Implémenter un système de désactivation Implémenter un système de désactivation des animations, du sondes animations, du son

Arrêter les publicités sur www.hotwired.comArrêter le son



La page courante doit demeurer le centre La page courante doit demeurer le centre d'intérêtd'intérêt

Ne pas faire figurer conjointement plusieurs éléments multimédia ensembleOffice du Tourisme Ecossais


Accessibilité Accessibilité (8(81)1)

Rendre accessibles aux visiteurs Rendre accessibles aux visiteurs handicapés tous les éléments du sitehandicapés tous les éléments du site

Ne pas utiliser de table

There is 30% chance thatthis eventwill occur

Wheater temperatureis still increasingtomorrow

There is 30% chance that weather temperaturethis event is still increasingwill occur tomorrow


Accessibilité Accessibilité (8(82)2)

Rendre accessibles les caractères et le Rendre accessibles les caractères et le fond d’écranfond d’écran

Ne pas utiliser le rouge et le vert pour des daltoniens

Utiliser un codage de couleurs redondantavec des symboles

Ecrire en noir sur fond blanc


Merci de votre attention!