Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Informatique interactive de Gestion
Jean Vanderdonckt Institut d’Admistration et de Gestion Universite catholique de Louvain
2
Organisation du cours 4 parties : Mode d’évaluation
1. Introduction à l’ergonomie logicielle 2. Ergonomie visuelle de la présentation multimédia 3. Etudes de cas multimédia 4. Ergonomie des sites World Wide Web Mode d’évaluation Choix d’un sujet de travail Analyse ergonomique par les critères ergonomiques par les techniques visuelles
3
Séance 1: Introduction à l’ergonomie logicielle
1.1 Objectifs et rôles de l ’ergonomie logicielle 1.2 Critères ergonomiques de conception et d’évaluation 1.3 Règles ergonomiques
4
1.1 Objectifs et rôles de l'ergonomie logicielle
Ergonomie physiologique : impacts physiologiques de l'environnement physique et des caractéristiques physiologiques de l'utilisateur sur la tâche musculature ossature respiration luminosité
5
1.1 Objectifs et rôles de l'ergonomie logicielle
Ergonomie cognitive : impacts cognitifs de l'environnement et des caractéristiques cognitives de l'utilisateur sur la tâche environnement stressant contraintes niveau d'expérience charge de travail
6
1.1 Objectifs et rôles de l'ergonomie logicielle
Ergonomie en général : concevoir tout système en vue de son utilisation adéquate, optimale par une population d'utilisateurs tournée vers les moyens de travail efficaces, respectant la santé, le bien-être des utilisateurs ergonomie logicielle : branche de l'ergonomie dédie aux interfaces homme-machine (IHM)
7
1.1 Objectifs et rôles de l'ergonomie logicielle
Deux dimensions : utilité : adéquation de l'IHM par rapport aux objectifs fonctionnels de l'application indépendante de l'utilisateur utilisabilité : adéquation de l'IHM par rapport aux besoins de l'utilisateur dépendante de l'utilisateur
8
1.1 Objectifs et rôles de l'ergonomie logicielle
Utilité : assure un grand nombre de fonctions utiles pour l'utilisateur, pour un traitement de texte : créer une table des matières avoir un correcteur orthographique déplacer des blocs d'un endroit à un autre
9
1.1 Objectifs et rôles de l'ergonomie logicielle
Utilisabilité : facilité d'usage accepte les erreurs de l'utilisateur offre la possibilité de les corriger ne bloque pas en cas d'erreur facilité d'accès aux fonctions commandes, messages, icônes compréhensibles Certains logiciels sont riches en fonctions (utilité), mais difficiles à exploiter (utilisabilité)
10
1.1 Objectifs et rôles de l'ergonomie logicielle
Utilité : les utilisateurs intensifs préfèrent parfois utiliser un outil riche, mais difficile à utiliser plutôt qu'un outil facile à utiliser, mais pauvre Utilisabilité : pour les utilisateurs novices ou épisodiques, la facilité d'emploi est un critère prioritaire l'attitude de l'utilisateur vis-à-vis de l'outil dépend des interactions utilisateur-outil de l'IHM
11
1.2 Critères ergonomiques
pour l'utilisabilité 8 critères taxonomie avec sous-critères avec ordonnancement servent a priori, a posteriori
12
1.2 Critères ergonomiques
1. Compatibilité : ssi et seulement si le (re)codage d'informations et de tâches du monde réel en données et actions du système est réduit IHM d'autant meilleure qu'elle est compatible car le transfert d'informations est d'autant plus rapide que le (re)codage en données est réduit, l'accomplissement de tâche est d'autant plus rapide que son interprétation en actions est courte.
13
1.2 Critères ergonomiques
1. Compatibilité Exemple de métaphore incompatible
14
1.2.1 Compatibilité Compatibilité comportementale
Compatibilité sémantique Compatibilité syntaxique Compatibilité lexicale de support grammaticale linguistique de standard
15
1.2 Critères ergonomiques
2. Cohérence : ssi les données et les actions sont facilement identifiables, reconnaissables et utilisables les données sont d'autant mieux perçues et les actions d'autant mieux accomplies qu'elles sont présentées de manière stable et uniformisée
16
1.2.2 Cohérence Cohérence inter-application
Cohérence intra-application coh. pragmatique coh. sémantique coh. syntaxique coh. lexicale coh. spatiale coh. grammaticale, linguistique coh. alphabétique
17
1.2.2 Cohérence 2. Cohérence : Exemple d’incohérence comportementale
18
1.2 Critères ergonomiques
3. Charge de travail ssi le volume de données à manipuler et d'actions à accomplir par unité de tâche est réduit l'interaction est d'autant plus rapide que les actions de l'utilisateur portant sur un nombre limité de données sont courtes
19
1.2 Critères ergonomiques
Charge de travail Performance Charge mentale Brièveté concision actions minimales Charge symbolique Respect cognitif Respect physique
20
1.2 Critères ergonomiques
4. Adaptation : ssi elle possède la faculté de mimétisme comportemental vis-à-vis de son utilisateur l'utilisateur est d'autant moins dérouté et acquerra d'autant plus d'expérience que l'interface peut s'adapter aux différents contextes de travail Rappelons qu’elle peut être adaptable adaptative
21
1.2 Critères ergonomiques
5. Contrôle du dialogue explicite ssi l'utilisateur la place sous son contrôle et ses actions s'exécutent suite à des demandes explicitement formulées par l'utilisateur implicite ssi elle place l’utilisateur sous son contrôle mixte lorsqu’elle est tour à tour à contrôle explicite et implicite.
22
1.2 Critères ergonomiques
Contrôle du dialogue Contrôle dans la conversation actions explicites actions implicites actions mixtes Contrôle dans la présentation présentation manuelle présentation automatique
23
1.2 Critères ergonomiques
Contrôle du dialogue : Exemple de mauvaises actions explicites
24
1.2 Critères ergonomiques
6. Représentativité : si et seulement si les codes utilisés, les items de menu, les libellés facilitent l'encodage, la rétention
25
1.2 Critères ergonomiques
Représentativité dans la conversation raccourci mnémonique accélérateur représentativité dans la présentation abréviation codification
26
1.2 Critères ergonomiques
7. Guidage ssi elle informe de manière constante l'utilisateur sur l'issue de ses actions et sur sa position dans l'accomplissement de sa tâche l'utilisateur réalise sa tâche d'autant mieux qu'il est guidé à travers toutes les étapes néces-saires pour la mener à bien
27
1.2 Critères ergonomiques
Guidage dans la conversation invitation progression feed-back immédiat Guidage dans la présentation groupement/distinction entre les objets par le placement par le format guidage visuel, clarté
28
1.2 Critères ergonomiques
Guidage : Exemple de guidage dans la conversation
29
1.2 Critères egonomiques 8. Gestion des erreurs :
ssi elle s'avère robuste vis-à-vis erreurs commises par l'utilisateur et se montre conviviale dans la manière de les corriger la performance de réalisation d'une tâche est d'autant meilleure que les occasions d'erreurs sont réduites
30
1.2 Critères ergonomiques
8. Gestion des erreurs : Exemple de gestion des erreurs GUICHET AUTOMATIQUE EN SERVICE Insérer votre carte Entrer votre code d'identification : 1234 Sélectionner une opération : retrait Donner le montant du retrait : 7500 F Le montant doit être un multiple de 1000 F (La machine éjecte la carte) GUICHET AUTOMATIQUE EN SERVICE... (L'utilisateur doit tout recommencer)
31
1.2 Critères ergonomiques
Protection vis-à-vis des erreurs Identification des erreurs Cause de l'erreur Lieu de l'erreur Explicitation des erreurs Correction des erreurs
32
1.2 Critères ergonomiques
1. Compatibilité 2. Cohérence 3. Charge de travail 4. Contrôle du dialogue 5. Adaptativité 6. Représentativité 7. Guidage 8. Gestion des erreurs
33
1.3 Règles ergonomiques C'est un principe de conception et/ou d'évaluation à observer en vue d'obtenir et/ou de garantir une IHM ergonomique pour une tâche interactive donnée pour une population d'utilisateurs donnée dans un contexte donné
34
1.3 Règles ergonomiques RE pour le graphisme :
utiliser une hiérarchie de concepts Peu Plus Encore plus Davantage
35
1.3 Règles ergonomiques RE pour les diagrammes :
utiliser un arbre de décision pour guider l'utilisateur pour donner une réponse approprié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
36
1.3 Règles ergonomiques RE pour le placement d'objets interactifs :
placer les boutons de commande de manière uniformisée totalement
37
1.3 Règles ergonomiques L’incrustation
38
1.3 Règles ergonomiques L'incrustation
39
1.3 Règles ergonomiques Carnet d'adresse : première version
40
1.3 Règles ergonomiques Carnet d'adresse : deuxième version
41
1.3 Règles ergonomiques Carnet d'adresse : troisième version
42
1.3 Règles ergonomiques Carnet d'adresse : quatrième version
43
1.3 Règles ergonomiques Carnet d'adresse : cinquième version
44
1.3 Règles ergonomiques Conception des menus déroulants
45
1.3 Règles ergonomiques Ordonnancement des menus Fréquence
Alphabétique Numérique Physique Chronologique ...
46
1.3 Règles ergonomiques Menu "Fichier"
47
1.3 Règles ergonomiques Menu "Edition"
48
1.3 Règles ergonomiques Menu "Vue"
49
1.3 Règles ergonomiques Menu "Options"
50
1.3 Règles ergonomiques Menu "Aide"
51
1.3 Règles ergonomiques Solution possible
52
1.3 Règles ergonomiques Sélection des objets interactifs
53
1.3 Règles ergonomiques Solution possible
54
Choix simple [2,3] [2,3] [4,7] [4,7] ]8,50] ]8,50] ]50,+[
Dom. inconnu : Domaine connu : Nbre-valeurs- possibles [2,3] Domaine mixte : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]8,50] Nbre-valeurs- possibles ]8,50] Nbre-valeurs- possibles ]50,+[ Nbre-valeurs- possibles ]50,+[
55
Choix multiple [2,3] [2,3] [4,7] [4,7] ]8,50] ]8,50] ]50,+[
Domaine inconnu : Domaine connu : Domaine mixte : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]8,50] Nbre- valeurs- possibles ]8,50] Nbre-valeurs- possibles ]50,+[ Nbre-valeurs-possibles ]50,+[
56
1.3 Règles ergonomiques Conception d’une boîte de dialogue
57
1.3 Règles ergonomiques Alignement des libellés : possibilités
Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 1. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 2. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 3. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 4.
58
1.3 Règles ergonomiques Alignement des libellés : solutions
Division : _ _ _ _ _ _ _ _ Départ. : _ _ _ Titre : _ _ _ _ _ s ’il y a une différence de plus de 6 caractères entre le libellé le plus long et le plus court Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _
59
1.3 Règles ergonomiques Localisation des boutons de commande : arrangement vertical sans (Options), (Aide)
60
1.3 Règles ergonomiques Localisation des boutons de commande : arrangement vertical complet
61
1.3 Règles ergonomiques Localisation des boutons de commande : arrangement horizontal sans (Options), (Aide)
62
1.3 Règles ergonomiques Localisation des boutons de commande : arrangement horizontal complet
63
1.3 Règles ergonomiques Localisation des boutons de commande : arrangement horizontal avec un long texte
64
1.3 Règles ergonomiques Formattage d’un paragraphe : première proposition de solution
65
1.3 Règles ergonomiques Formattage d’un paragraphe: deuxième proposition de solution
66
1.3 Règles ergonomiques Concep- tion des icônes
67
1.3 Règles ergonomiques Conception des fenêtres
68
1.3 Règles ergonomiques Concep- tion des messages
-- Système d'expédition de messages -- Concep- tion des messages SYSTEME #22 - TdT 27 mars 1984 * * * * AVERTISSEMENT * * * * LES UTILISATEURS DE TdT SONT PRIES DE NE PAS IMPRIMER DES 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 A 16H30. MERCI. * * * * * * UTILISATEURS DU RESEAU -- Veuillez rapporter tout problème relatif 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 ...
69
1.3 Règles ergonomiques Proposi- tion de solution
SYSTEME D'EXPEDITION DES MESSAGES mars 1984 Utilisateurs du traitement de texte : Veuillez NE PAS imprimer des copies multiples de documents importants (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, soumettez votre 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 des applications
70
1.3 Règles ergonomiques Conception de la mise en évidence
71
1.3 Règles ergonomiques Mise en évidence par la taille (maximum 3)
gggggggggggggggggggggggggggg Taille 1 (petit) Taille 2 (normal) Taille 3 (mis en évidence)
72
1.3 Règles ergonomiques Mise en évidence par les symboles (max. 5)
73
1.3 Règles ergonomiques Mise en évidence par le contraste (maximum 3)
Video normal Video inversé
74
1.3 Règles ergonomiques Mise en évidence par la texture (max. 4)
75
1.3 Règles ergonomiques Eviter les vibrations
76
1.3 Règles ergonomiques Mise en évidence par la couleur (de 6 à 8)
77
1.3 Règles ergonomiques Synthèses additives et soustractive
Utiliser des couleurs opposées Jaune sur fond bleu Jaune sur fond rouge Bleu sur fond blanc Rouge sur magenta Cyan sur fond vert Bleu sur fond noir
78
1.3 Règles ergonomiques Les meilleures combinaisons de couleurs Blanc
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%)
79
1.3 Règles ergonomiques Les meilleures combinaisons de couleurs Blanc
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%)
80
1.3 Règles ergonomiques Les 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%)
81
1.3 Règles ergonomiques Les plus mauvaises combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait épais et panneaux Jaune (95%) Cyan (75%) Bleu (81%) Magenta (31%) Magenta (69%) Bleu (50%) Vert (37%) 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%)
82
1.3 Règles ergonomiques Les meilleurs contrastes à deux :
Rouge-turquoise Rouge-Cyan Bleu-Jaune Vert-Rose Vert-Magenta
83
1.3 Règles ergonomiques La meilleure combinaison à trois :
Rouge-Bleu-Vert La meilleure combinaison à quatre : Rouge-Bleu-Vert-Blanc
84
Séance 4. L’ergonomie du Web
Vocabulaire 1. Conception d'un site Web 2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
85
Cette page est-elle ergonomique?
86
Vocabulaire Concepts site = ensemble de pages liens
intra-page : extra-page : intra-site : extra-site : vaguemestre = webmaster auteur = author navigateur = browser visiteur = reader
87
Vocabulaire Règle ergonomique définition motif critère ergonomique
exemple positif exemple négatif exception
88
Vocabulaire 8 Critères ergonomiques compatibilité cohérence
charge de travail adaptativité contrôle du dialogue représentativité guidage gestion des erreurs
89
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
90
Conception d'un site Web (11)
Le contenu informationnel d'un site doit être représentatif Pages sans but Pages de style "famille" Table des matières Informations pertinentes
91
Conception globale d'un site (12)
Inviter le visiteur à ajouter un signet Page statique Page avec des informations mises à jour périodiquement Page de référence
92
Conception globale d'un site (13)
La 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
93
Conception globale d'un site (14)
Penser à une structuration appropriée du site Sites de première génération Sites de deuxième génération Sites de troisième génération
94
Conception globale d'un site (15)
Utiliser la hiérarchie avec soin
95
Conception globale d'un site (16)
Utiliser la clôture transitive Page sans titre, sans sous-titre Titre de la page Sous-titre pour les grandes catégories Sous-sous-titre pour les paragraphes
96
Conception globale d'un site (17)
Utiliser des sous-menus pour les sites volumineux Menu complet Menu avec sous-menu
97
Conception globale d'un site (18)
Pré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 Page d'accueil Page B Page A Page C
98
Conception globale d'un site (19)
Prévoir éventuellement une page d'invitation Une hiérarchie est simple, mais banale Page d'accueil Page B Page A d'entrée n°2 n°1 d'invi- tation Porte frontale Page furtive Page d'invitation suivie de deux pages d'entrée
99
Conception globale d'un site (110)
Prévoir similairement une page de clôture Utiliser le même mécanisme que pour la page d'invitation Page d'accueil Page B Page A d'entrée n°2 n°1 d'invi- tation Page C de sortie de clôture
100
Conception globale d'un site (111)
Prévoir une option d'impression pour les grands sites Prévoir deux versions : - une version écran - une version papier Documents générés par HTML Transit - un ensemble de pages - un fichier unique (PS, PDF, DOC)
101
Conception globale d'un site (112)
Prévoir une section « Nouveautés » évidente Lien vers "Quoi de neuf?" est insuffisant Mettre une partie des nouveautés dans la page d'accueil
102
Conception globale d'un site (113)
Adopter une logique de dénomination du site Eviter Kuala Lumpur 1998 Malaysie Games Exposition Préférer Dept. of Computer Science Univ. of Manchester Academic United Kingdom Smith Publications
103
Conception globale d'un site (114)
Adopter une logique de dénomination des fichiers du site Incohérence linguistique : Bouton_Print.gif Incohérence syntaxique : Bouton_Imprimer_FR.gif avec PrintUK.gif Manque de représentativité : Menu.html Manque de précision : Photo1.jpg, Photo2.jpg, Photo3.jpg BoutonImprimer.gif ButtonPrint.gif MenuPrincipalGestion.html TokyoCiel.jpg, TokyoAéroport.jpg
104
Conception globale d'un site (115)
Adopter une logique d'organisation des fichiers 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
105
Conception globale d'un site (116)
La conception du site doit être appropriée au contexte Le site Horta [poss. min., poss. max.]
106
Conception globale d'un site (117)
La conception d'un site doit supporter plusieurs 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
107
Conception globale d'un site (118)
La conception d'un site doit viser prioritaire-ment l'ergonomie Refuser les pages inutiles Refuser les pages utiles, mais pas utilisables Refuser les pages sophistiquées technologiquement Evaluateur Bobby
108
Conception globale d'un site (119)
Préparer les pages pour les moteurs de recherche 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 identifiants Manières invisibles : - balises cachées : ALT="..." - méta-balises : <META NAME="Description" Content="...">
109
Conception globale d'un site (120)
Ajouter un moteur de recherche interne Scanneur ASCII Harvest Indexeur générique pour serveur HTTP : HTGREP Moteur de recherche interne pour un petit site : DIG
110
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
111
Navigation (21) L'accès à l'information doit être rapide
Trop de niveaux dans la hiérarchie Règle des 3 clics
112
Navigation (22) Considérer le temps d'accès à chaque page
Mettre toute l'information d'une fois VRML trop gros Réduire à [30 Ko,50 Ko], quelques une à 70 Ko Avertir le visiteur si le temps sera long
113
Navigation (23) Utiliser une carte du site pour dénoter les relations entre les informations Pas de carte passive Pas de carte complexe Description d'un cirque HotSauce WebTOC Ptolemaeus
114
Navigation (24) Utiliser une image réactive comme carte graphique de navigation Pas de carte sans rapport Carte +/- méta- phorique
115
Navigation (25) Ne pas restreindre la navigation aux graphiques
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
116
Navigation (26) Inclure des repères de navigation Barre de navigation
Point de ralliement Diagramme global ou local
117
Navigation (27) L'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'abord Vue panoramique + zoom avant + détails à la demande
118
Navigation (28) Les repères de navigation doivent être cohé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
119
Navigation (29) Les liens doivent pointer vers un contenu informationnel substanciel Pas de lien vers une page incomplète Vérifier que les liens extra-site sont représentatifs, significatifs
120
Navigation (210) Fournir des liens textuels pour chaque page
Pas seulement une carte graphique Liens textuels pour utilisateurs à besoins spéciaux
121
Navigation (211) Les 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 ListeDisques.txt Liste des disques
122
Navigation (212) Les liens textuels doivent être courts
Placer des liens dans un paragraphe suggère le contenu des liens au visiteur ainsi que le contexte dans lequel il 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.
123
Navigation (213) Utiliser "Précédent/Suivant", "Avant/Arrière" avec précaution Confusion entre et Mettre à jour les liens en cas de modification Page n°3 n°2 n°1 Page n°3 n°2 n°1 Page n°3 n°1
124
Navigation (214) Bannir les liens "Cliquez ici"
Cliquez ici pour aller à la page des publications Cliquez ici pour aller à la page de l'IAG Cliquez ici pour aller à la page de l ’UCL Aller à : UCL / IAG / Publications
125
Navigation (215) Interdire les liens "Retourner à..." Bouton
Page d'accueil Page A Page B Page C Page D Page E Premier site Bouton Eviter : revenir, retourner, repartir, annuler, défaire, rebrancher Aller à :... Page 1 Page 2 Page 3 Page 4 Page 5 Deuxième site
126
Navigation (216) Tout visiteur doit distinguer un lien visité d'un lien nouveau Ne pas utiliser jaune et orange Lien visité Lien non visité Lien visité Lien non visité Utiliser les couleurs standards Utiliser des couleurs opposées
127
Navigation (217) Informer le visiteur de la teneur du lien
La 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 remplacement Lien de note en bas de page Lien de référence Lien de commande
128
Navigation (218) Utiliser des liens intra-page dans les longues pages
Page "Formation" sans lien Page "Formation" avec lien
129
Navigation (219) Veiller à la maintenance des liens
Liens obsolètes ( , machine,...) Maintenir les liens intra-site corrects Vérifier et corriger les liens extra-site régulièrement
130
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
131
Présentation (31) L'information la plus importante doit être placée en premier lieu Pas de grand logo Pas trop d'informations signalétiques au début Les liens importants doivent apparaître au début de la page
132
Présentation (32) La présentation de toute page doit être cohérente
Un titre de page dans la barre de titre Lien vers les informations du site Lien vers les informations signalétiques Lien vers la page d'accueil Lien vers le moteur de recherche interne Lien vers page de copyright Lien mél. à destination de l'auteur, du vaguemestre
133
Présentation (33) La page d'accueil doit tenir sur un seul écran
Pas de page trop grande : JVDD Page limitée à 640 x 480: CIGER
134
Présentation (34) Ne pas contraindre physiquement la page d'accueil
Pas de fond d'écran trop étroit Utiliser une table centrée 30 30 30
135
Présentation (35) L'information doit être complète sur le même écran
Pas de message réparti sur deux écrans Indiquer que la page continue Tester la présentation sur des configurations différentes
136
Présentation (36) Trancher entre des pages courtes, longues
Utiliser le tableau
137
Présentation (37) Utiliser une grille de présentation
Dessiner la grille sur une recopie d'écran
138
Présentation (38) Utiliser les techniques visuelles Balance
Instabilité Symétrie Asymétrie
139
Présentation (39) Utiliser au maximum les tables WebElements
Mettre BORDER=0 Utiliser les tables de longueur fixe
140
Présentation (310) Les lignes textuelles du contenu informa-tionnel doivent être courtes, structurées Vérifier ce que donne le texte quand le visiteur change de police
141
Présentation (311) Penser 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
142
Présentation (312) Utiliser de l'espacement blanc
Pas de page encombrée Remplir une page avec 30% de texte Utiliser de l'espacement blanc comme alinéa
143
Présentation (313) Etre draconien avec le défilement
Ne pas utiliser de graphique excédant 640 x 480 ou 800 x 600 pixels Eviter les défilements tant horizontaux que verticaux
144
Présentation (314) Les informations liées sémantiquement doivent être présentées conjointement Texte associé le décrivant Texte associé
145
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
146
Formulaires, titres et en-têtes (41)
Les informations à acquérir doivent être présentées dans un formulaire Utiliser une table pour contrôler l'alignement - des champs d'édition - des libellés identificatifs
147
Formulaires, titres et en-têtes (42)
Sélectionner les objets interactifs de maniè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
148
Choix simple [2,3] [2,3] [4,7] [4,7] [8,50] [8,50] ]50,+[
Dom. inconnu : Domaine connu : Nbre-valeurs- possibles [2,3] Domaine mixte : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [8,50] Nbre-valeurs- possibles [8,50] Nbre-valeurs- possibles ]50,+[ Nbre-valeurs- possibles ]50,+[
149
Choix multiple [2,3] [2,3] [4,7] [4,7] [8,50] [8,50] ]50,+ [
Domaine inconnu : Domaine connu : Domaine mixte : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [8,50] Nbre- valeurs- possibles [8,50] Nbre-valeurs- possibles ]50,+ [ Nbre-valeurs-possibles ]50,+ [
150
Formulaires, titres et en-têtes (43)
Toute page doit comporter un titre identifiant Page d'accueil IESN Utiliser <H1> Titre identifiant </H1> Utiliser la balise TITLE
151
Formulaires, titres et en-têtes (44)
Utiliser des en-têtes pour accélérer le parcours des informations L'en-tête doit refléter précisément le contenu de l'agrégat
152
Formulaires, titres et en-têtes (45)
Pour les documents structurés, communiquer la structure au visiteur En dessous du titre, indiquer la où la page s'insère Inclure - le nom du document - le titre du chapitre - le titre de la section courante
153
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia
154
Cadres et fenêtres (51) Utiliser les cadres avec parcimonie
Ne pas oublier la clause TARGET=...
155
Cadres et fenêtres (52) Utiliser les fenêtres seulement si nécessaire
Utiliser une carte Fenêtre secondaire pour une vue détaillée, une illustration 7 usages fonctionnels possibles
156
Cadres et fenêtres (53) Le nombre de cadres, de fenêtres doit être limité Effet "lorgnette" Max. 2 fenêtres Max. 3 cadres
157
Cadres et fenêtres (54) Utiliser les cadres, les fenêtres de manière appropriée Eléments globaux, persistants Nom du site + lien vers la page d'accueil dans chaque cadre Cadres pour sur-affichage de texte
158
Cadres et fenêtres (55) Veiller à la taille des cadres et fenêtres
159
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
160
Graphiques (61) Utiliser les graphiques de manière appropriée
Pas de logo d'outils sur la page d'accueil Dans un but spécifique Pour favoriser la navigation Pour dénoter les zones de contenu
161
Graphiques (62) Adjoindre du texte à chaque graphique
Utiliser du texte pour s'assurer que le graphique véhicule bien l'information prévue
162
Graphiques (63) Utiliser le texte alternatif
Attention pour les bulles d'aide OK pour Explorer KO pour Navigator Balise ALT : <IMG SRC="news.gif" ALT="What's new?"> Pour l'indexation par les moteurs externes
163
Graphiques (64) Réutiliser les mêmes graphiques
Utiliser les mêmes icônes, les mêmes logos,...
164
Graphiques (65) Utiliser les graphiques pour représenter les zones du site Utiliser les mêmes graphiques pour les mêmes zones
165
Graphiques (66) Recourir aux graphiques pour les en-têtes
Utiliser les polices de caractères artistiques Garder le texte de l'en-tête dans une couche séparée Recourir à l'anti-aliasing
166
Graphiques (67) Utiliser les graphiques pour les listes
Page d'accueil de CircusWare
167
Graphiques (68) Garder en tête les limites des graphiques
168
Graphiques (69) Utiliser les miniatures
Ne pas redimensionner le graphique dans le code HTML - 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
169
Graphiques (610) Les dimensions des graphiques doivent être appropriées N'utiliser le redimensionnement avec % qu'après test Largeur (graphique) < 600 pixels
170
Graphiques (611) Les graphiques doivent être simplifiés
Ne pas utiliser une photo d'ordinateur, une image suffit Lien vers un graphique plus détaillé Cherger un graphique réduit d'abord
171
Graphiques (612) Utiliser les GIF entrelacés, les images fractales
Image non entrelacée Image entrelacée GIF89a Interlaced Entrelacer à partir de 200 x 200
172
Graphiques (613) Ne pas ajouter de bords aux graphiques
Attention aux effets 3D Ne pas enregistrer les graphiques avec bordure Utiliser la balise BORDER=0
173
Graphiques (614) Utiliser des graphiques transparents sur un fond d'écran tramé Rendre les icônes rondes transparentes Soumettre au convertisseur en ligne
174
Graphiques (615) Spécifier les dimensions d'un graphique en HTML
Utiliser les balises HEIGHT="50" WIDTH="70" BBEdit calcule les dimensions automatiquement
175
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
176
Eléments multimédia (71)
Le type de fond d'écran doit être approprié Utiliser les lignes de l'horizon suivantes Ligne de l'horizon Exemple Signification 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ée Suggère dynamisme, changement, voire violence
177
Eléments multimédia Fond d'écran bas
178
Eléments multimédia Fond d'écran haut
179
Eléments multimédia Fond d'écran médian
180
Eléments multimédia Fond d'écran diagonal
181
Eléments multimédia Fond d'écran découpé
182
Eléments multimédia (72)
Préférer les fonds d'écran clairs, de basse intensité Pas de blanc sur fond noir
183
Eléments multimédia (73)
Eviter les fonds d'écran avec motifs Pages construites avec un mauvais fond d'écran Motifs pâles, clairs Soumettre au test
184
Eléments multimédia (74)
Sélectionner un fond d'écran aléatoire Pages construites avec un motif pas aléatoire Pages construites avec un motif aléatoire
185
Eléments multimédia (75)
Eviter le texte en fond d'écran Même des petits textes rendent la lecture difficile Texte en fond d'écran Texte en fond d'écran Texte en fond d'écran Texte en fond d'écran
186
Eléments multimédia (76)
Utiliser une couleur de fond avec le fond d'écran Pas suivre l'hypothèse : le visiteur garde les couleurs de la page Utiliser une couleur compatible avec la dominante
187
Eléments multimédia (77)
Tester en vraie grandeur les fonds d'écran
188
Eléments multimédia (78)
Maintenir un haut contraste entre les éléments Ecarter les plus mauvaises combinaisons de couleurs Garder les meilleures combinaisons de couleurs Recourir aux meilleurs contrastes à 2 Recourir à la meilleure combinaison à 3 Recourir à la meilleure combinaison à 4
189
Eléments multimédia Garder les 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%)
190
Eléments multimédia Garder les 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%)
191
Eléments multimédia Ecarter les 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%)
192
Eléments multimédia Ecarter les mauvaises combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait épais et panneaux Jaune (95%) Cyan (75%) Bleu (81%) Magenta (31%) Magenta (69%) Bleu (50%) Vert (37%) 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%)
193
Eléments multimédia Recourir aux meilleurs contrastes à deux
Rouge-Turquoise Rouge-Cyan Bleu-Jaune Vert-Rose Vert-Magenta
194
Eléments multimédia Recourir à la meilleure combinaison à 3
Rouge Bleu Vert Recourir à la meilleure combinaison à 4 Rouge Bleu Vert Blanc
195
Eléments multimédia (79)
Les zones de couleur peuvent être larges Ajuster les couleurs d'une image scannée à quelques couleurs
196
Eléments multimédia (710)
Réduire la profondeur des couleurs Réduire les GIF en-dessous de 8 bits (256 coul.) Dégrader les JPG Entre 15 et 35 couleurs dans l'histogramme
197
Eléments multimédia (711)
Utiliser les 216 couleurs principales Utiliser la Color Look-Up Table (CLUT) Utiliser le cube des couleurs Utiliser la même palette pour chaque page Balise HEAD dans {00,33,66,99,CC,FF} P. ex. #CCCCFF = bleu clair # = orange moyen
198
Eléments multimédia (712)
Eviter le dithering Ne pas utiliser trop le dithering pour les GIF Utiliser le dithering pour les JPG
199
Eléments multimédia (713)
Tester les couleurs
200
Eléments multimédia (714)
Utiliser les polices sans sérif pour la lecture en ligne Utiliser Arial, Helvetica pour les § Réserver les polices de fantaisie pour les grands titres
201
Eléments multimédia (715)
Prêter attention à la typographie Ne pas utiliser le soulignement N'utiliser l'italique que dans des cas précis Ne pas mettre le texte en MAJUSCULES Utiliser la mise en gras uniquement pour la mise en évidence
202
Eléments multimédia (716)
Prévoir les variations de taille de police Polices sur deux navigateurs Table avec police de taille fixe Libellés au-dessus des champs
203
Eléments multimédia (717)
Recourir à des ressources multimédia de maniè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
204
Eléments multimédia Pour une audience internationale (1)
205
Eléments multimédia Pour une audience internationale (2)
206
Eléments multimédia (718)
Penser à une présentation assistée par ordinateur Pas de longue suite de pages Utiliser la balise REFRESH Utiliser PowerPoint Animation File Utiliser Shockwave for Director 6
207
Eléments multimédia (719)
Considérer des animations simples en GIF animé Pas plus de 7 images dans la suite Utiliser GifBuilder
208
Eléments multimédia (720)
Eviter les animations répétitives La boussole Montrer la continuité dans les transitions (Pythagore) Indiquer la dimensin dans les transitions Illustrer le changement dans le temps (déforestation)
209
Eléments multimédia (721)
Implémenter un système de désactivation des animations, du son Arrêter les publicités sur Arrêter le son
210
Eléments multimédia (722)
La page courante doit demeurer le centre d'intérêt Ne pas faire figurer conjointement plusieurs éléments multimédia ensemble Office du Tourisme Ecossais
211
Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité
212
Accessibilité (81) Rendre accessibles aux visiteurs handicapés tous les éléments du site Ne pas utiliser de table There is 30% chance that this event will occur Wheater temperature is still increasing tomorrow There is 30% chance that weather temperature this event is still increasing will occur tomorrow
213
Accessibilité (82) Rendre accessibles les caractères et le fond d’écran Ne pas utiliser le rouge et le vert pour des daltoniens Utiliser un codage de couleurs redondant avec des symboles Ecrire en noir sur fond blanc
214
Merci de votre attention!
Présentations similaires
© 2024 SlidePlayer.fr Inc.
All rights reserved.