Pr

1
Informatique interactive de Gestion
Jean Vanderdonckt Institut dAdmistration et de
Gestion Universite catholique de Louvain
2
Organisation du cours

• 4 parties
• 1. Introduction à lergonomie 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 dun sujet de travail
• Analyse ergonomique
• par les critères ergonomiques
• par les techniques visuelles

3
Séance 1 Introduction à lergonomie 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

• 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 dincohé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 quelle 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 lutilisateur sous son
  contrôle
• mixte lorsquelle 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

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 Densité-FL élevée boîte à
options
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

• Lincrustation

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
Domaine mixte
Domaine connu
55
Choix multiple
Domaine mixte
Domaine connu
56
1.3 Règles ergonomiques

• Conception dune boîte de dialogue

57
1.3 Règles ergonomiques

• Alignement des libellés possibilités

58
1.3 Règles ergonomiques

• Alignement des libellés solutions

Division _ _ _ _ _ _ _ _ Départ. _ _ _Titre
_ _ _ _ _
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 dun paragraphe première proposition
  de solution

65
1.3 Règles ergonomiques

• Formattage dun paragraphe deuxième proposition
  de solution

66
1.3 Règles ergonomiques

• Concep-tion desicônes

67
1.3 Règles ergonomiques

• Conception des fenêtres

68
1.3 Règles ergonomiques
-- Système d'expédition de messages --

• Concep-tiondesmessages

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 desolution

SYSTEME D'EXPEDITION DES MESSAGES
27 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

79
1.3 Règles ergonomiques

• Les meilleures combinaisons de couleurs

80
1.3 Règles ergonomiques

• Les plus mauvaises combinaisons de couleurs

81
1.3 Règles ergonomiques

• Les plus mauvaises combinaisons de couleurs

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. Lergonomie 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 http//www.x.com/.../signet
• extra-page http//www.x.com/source.html
• intra-site http//www.x.com/dest.html
• extra-site http//www.y.com/dest.html
• 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 (1?1)

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

91
Conception globale d'un site (1?2)

• Inviter le visiteur à ajouter un signet

92
Conception globale d'un site (1?3)

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

93
Conception globale d'un site (1?4)

• Penser à une structuration appropriée du site

94
Conception globale d'un site (1?5)

• Utiliser la hiérarchie avec soin

95
Conception globale d'un site (1?6)

• Utiliser la clôture transitive

96
Conception globale d'un site (1?7)

• Utiliser des sous-menus pour les sites volumineux

97
Conception globale d'un site (1?8)

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

Pas de page d'accueil exagérée
98
Conception globale d'un site (1?9)

• Prévoir éventuellement une page d'invitation

99
Conception globale d'un site (1?10)

• Prévoir similairement une page de clôture

100
Conception globale d'un site (1?11)

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

101
Conception globale d'un site (1?12)

• Prévoir une section  Nouveautés  évidente

102
Conception globale d'un site (1?13)

• Adopter une logique de dénomination du site

103
Conception globale d'un site (1?14)

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

104
Conception globale d'un site (1?15)

• Adopter une logique d'organisation des fichiers
  du site

105
Conception globale d'un site (1?16)

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

106
Conception globale d'un site (1?17)

• La conception d'un site doit supporter plusieurs
  navigateurs

107
Conception globale d'un site (1?18)

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

108
Conception globale d'un site (1?19)

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

109
Conception globale d'un site (1?20)

• Ajouter un moteur de recherche interne

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 (2?1)

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

112
Navigation (2?2)

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

113
Navigation (2?3)

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

114
Navigation (2?4)

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

115
Navigation (2?5)

• Ne pas restreindre la navigation aux graphiques

116
Navigation (2?6)

• Inclure des repères de navigation

117
Navigation (2?7)

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

118
Navigation (2?8)

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

119
Navigation (2?9)

• Les liens doivent pointer vers un contenu
  informationnel substanciel

120
Navigation (2?10)

• Fournir des liens textuels pour chaque page

121
Navigation (2?11)

• Les liens textuels doivent être clairs

ListeDisques.txt
122
Navigation (2?12)

• Les liens textuels doivent être courts

123
Navigation (2?13)

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

124
Navigation (2?14)

• Bannir les liens "Cliquez ici"

125
Navigation (2?15)

• Interdire les liens "Retourner à..."

126
Navigation (2?16)

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

127
Navigation (2?17)

• Informer le visiteur de la teneur du lien

128
Navigation (2?18)

• Utiliser des liens intra-page dans les longues
  pages

129
Navigation (2?19)

• Veiller à la maintenance des liens

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 (3?1)

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

132
Présentation (3?2)

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

133
Présentation (3?3)

• La page d'accueil doit tenir sur un seul écran

134
Présentation (3?4)

• Ne pas contraindre physiquement la page d'accueil

135
Présentation (3?5)

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

Indiquer que la page continue Tester la
présentation sur des configurations différentes
136
Présentation (3?6)

• Trancher entre des pages courtes, longues

137
Présentation (3?7)

• Utiliser une grille de présentation

138
Présentation (3?8)

• Utiliser les techniques visuelles

139
Présentation (3?9)

• Utiliser au maximum les tables

140
Présentation (3?10)

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

141
Présentation (3?11)

• Penser aux feuilles de style

142
Présentation (3?12)

• Utiliser de l'espacement blanc

143
Présentation (3?13)

• Etre draconien avec le défilement

144
Présentation (3?14)

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

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 (4?1)

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

147
Formulaires, titres et en-têtes (4?2)

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

148
Choix simple
Domaine mixte
Domaine connu
149
Choix multiple
Domaine mixte
Domaine connu
150
Formulaires, titres et en-têtes (4?3)

• Toute page doit comporter un titre identifiant

151
Formulaires, titres et en-têtes (4?4)

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

152
Formulaires, titres et en-têtes (4?5)

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

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 (5?1)

• Utiliser les cadres avec parcimonie

155
Cadres et fenêtres (5?2)

• Utiliser les fenêtres seulement si nécessaire

156
Cadres et fenêtres (5?3)

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

157
Cadres et fenêtres (5?4)

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

158
Cadres et fenêtres (5?5)

• 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 (6?1)

• Utiliser les graphiques de manière appropriée

161
Graphiques (6?2)

• Adjoindre du texte à chaque graphique

162
Graphiques (6?3)

• Utiliser le texte alternatif

163
Graphiques (6?4)

• Réutiliser les mêmes graphiques

164
Graphiques (6?5)

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

165
Graphiques (6?6)

• Recourir aux graphiques pour les en-têtes

166
Graphiques (6?7)

• Utiliser les graphiques pour les listes

167
Graphiques (6?8)

• Garder en tête les limites des graphiques

168
Graphiques (6?9)

• Utiliser 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
169
Graphiques (6?10)

• Les dimensions des graphiques doivent être
  appropriées

170
Graphiques (6?11)

• Les graphiques doivent être simplifiés

171
Graphiques (6?12)

• Utiliser les GIF entrelacés, les images fractales

172
Graphiques (6?13)

• Ne pas ajouter de bords aux graphiques

173
Graphiques (6?14)

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

174
Graphiques (6?15)

• Spécifier les dimensions d'un graphique en HTML

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 (7?1)

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

Utiliser les lignes de l'horizon suivantes
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 (7?2)

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

183
Eléments multimédia (7?3)

• Eviter les fonds d'écran avec motifs

184
Eléments multimédia (7?4)

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

185
Eléments multimédia (7?5)

• Eviter le texte en fond d'écran

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 (7?6)

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

187
Eléments multimédia (7?7)

• Tester en vraie grandeur les fonds d'écran

188
Eléments multimédia (7?8)

• Maintenir un haut contraste entre les éléments

Ecarter les plus mauvaises combinaisons de
couleurs
189
Eléments multimédia

• Garder les meilleures combinaisons de couleurs

190
Eléments multimédia

• Garder les meilleures combinaisons de couleurs

191
Eléments multimédia

• Ecarter les mauvaises combinaisons de couleurs

192
Eléments multimédia

• Ecarter les mauvaises combinaisons de couleurs

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 (7?9)

• Les zones de couleur peuvent être larges

196
Eléments multimédia (7?10)

• Réduire la profondeur des couleurs

197
Eléments multimédia (7?11)

• Utiliser les 216 couleurs principales

198
Eléments multimédia (7?12)

• Eviter le dithering

199
Eléments multimédia (7?13)

• Tester les couleurs

200
Eléments multimédia (7?14)

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

201
Eléments multimédia (7?15)

• Prêter attention à la typographie

202
Eléments multimédia (7?16)

• Prévoir les variations de taille de police

203
Eléments multimédia (7?17)

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

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 (7?18)

• Penser à une présentation assistée par ordinateur

207
Eléments multimédia (7?19)

• Considérer des animations simples en GIF animé

208
Eléments multimédia (7?20)

• Eviter les animations répétitives

209
Eléments multimédia (7?21)

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

210
Eléments multimédia (7?22)

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

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é (8?1)

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

There is 30 chance that weather temperature this
event is still increasing will occur tomorrow
213
Accessibilité (8?2)

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

Ecrire en noir sur fond blanc
214
Merci de votre attention!