La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1997-2000 J.Vanderdonckt 31 mars 2000 1 Jean Vanderdonckt Institut dAdmistration et de Gestion Universite catholique de Louvain Informatique interactive.

Présentations similaires


Présentation au sujet: "1997-2000 J.Vanderdonckt 31 mars 2000 1 Jean Vanderdonckt Institut dAdmistration et de Gestion Universite catholique de Louvain Informatique interactive."— Transcription de la présentation:

1 J.Vanderdonckt 31 mars Jean Vanderdonckt Institut dAdmistration et de Gestion Universite catholique de Louvain Informatique interactive de Gestion

2 J.Vanderdonckt 31 mars Organisation du cours n 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 n Mode dévaluation »Choix dun sujet de travail »Analyse ergonomique n par les critères ergonomiques n par les techniques visuelles

3 J.Vanderdonckt 31 mars 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 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n 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 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n 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 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n 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 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n 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 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n 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 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n 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 n Certains logiciels sont riches en fonctions (utilité), mais difficiles à exploiter (utilisabilité)

10 J.Vanderdonckt 31 mars Objectifs et rôles de l'ergonomie logicielle n Utilité : –les utilisateurs intensifs préfèrent parfois utiliser un outil riche, mais difficile à utiliser plutôt qu'un outil facile à utiliser, mais pauvre n 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 J.Vanderdonckt 31 mars Critères ergonomiques n Critères ergonomiques –pour l'utilisabilité –8 critères –taxonomie avec sous-critères –avec ordonnancement –servent a priori, a posteriori

12 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n 1. Compatibilité –Exemple de métaphore incompatible

14 J.Vanderdonckt 31 mars Compatibilité n Compatibilité comportementale n Compatibilité sémantique n Compatibilité syntaxique n Compatibilité lexicale –de support –grammaticale –linguistique –de standard

15 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Cohérence n Cohérence inter-application n Cohérence intra-application –coh. pragmatique –coh. sémantique –coh. syntaxique –coh. lexicale »coh. spatiale »coh. grammaticale, linguistique –coh. alphabétique

17 J.Vanderdonckt 31 mars Cohérence n 2. Cohérence : –Exemple dincohérence comportementale

18 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n Charge de travail –Performance –Charge mentale –Brièveté »concision »actions minimales –Charge symbolique –Respect cognitif –Respect physique

20 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n Contrôle du dialogue n Contrôle dans la conversation –actions explicites –actions implicites –actions mixtes n Contrôle dans la présentation –présentation manuelle –présentation automatique

23 J.Vanderdonckt 31 mars Critères ergonomiques n Contrôle du dialogue : –Exemple de mauvaises actions explicites

24 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n Représentativité dans la conversation –raccourci »mnémonique »accélérateur n représentativité dans la présentation –abréviation –codification

26 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n Guidage dans la conversation –invitation –progression –feed-back immédiat n Guidage dans la présentation –groupement/distinction entre les objets »par le placement »par le format –guidage visuel, clarté

28 J.Vanderdonckt 31 mars Critères ergonomiques n Guidage : –Exemple de guidage dans la conversation

29 J.Vanderdonckt 31 mars Critères egonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n 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 J.Vanderdonckt 31 mars Critères ergonomiques n Protection vis-à-vis des erreurs n Identification des erreurs –Cause de l'erreur –Lieu de l'erreur n Explicitation des erreurs n Correction des erreurs

32 J.Vanderdonckt 31 mars 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 J.Vanderdonckt 31 mars Règles ergonomiques n 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 J.Vanderdonckt 31 mars Règles ergonomiques n RE pour le graphisme : –utiliser une hiérarchie de concepts PeuPlusEncore plusDavantage

35 J.Vanderdonckt 31 mars Règles ergonomiques n 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,N mag ] Densité-FL = faible : bouton radio + boîte de regroupement Densité-FL = élevée : boîte à options

36 J.Vanderdonckt 31 mars Règles ergonomiques n RE pour le placement d'objets interactifs : –placer les boutons de commande de manière uniformisée totalement

37 J.Vanderdonckt 31 mars Règles ergonomiques n Lincrustation

38 J.Vanderdonckt 31 mars Règles ergonomiques n L'incrustation

39 J.Vanderdonckt 31 mars Règles ergonomiques n Carnet d'adresse : première version

40 J.Vanderdonckt 31 mars Règles ergonomiques n Carnet d'adresse : deuxième version

41 J.Vanderdonckt 31 mars Règles ergonomiques n Carnet d'adresse : troisième version

42 J.Vanderdonckt 31 mars Règles ergonomiques n Carnet d'adresse : quatrième version

43 J.Vanderdonckt 31 mars Règles ergonomiques n Carnet d'adresse : cinquième version

44 J.Vanderdonckt 31 mars Règles ergonomiques n Conception des menus déroulants

45 J.Vanderdonckt 31 mars Règles ergonomiques n Ordonnancement des menus –Fréquence –Alphabétique –Numérique –Physique –Chronologique –...

46 J.Vanderdonckt 31 mars Règles ergonomiques n Menu "Fichier"

47 J.Vanderdonckt 31 mars Règles ergonomiques n Menu "Edition"

48 J.Vanderdonckt 31 mars Règles ergonomiques n Menu "Vue"

49 J.Vanderdonckt 31 mars Règles ergonomiques n Menu "Options"

50 J.Vanderdonckt 31 mars Règles ergonomiques n Menu "Aide"

51 J.Vanderdonckt 31 mars Règles ergonomiques n Solution possible

52 J.Vanderdonckt 31 mars Règles ergonomiques n Sélection des objets interactifs

53 J.Vanderdonckt 31 mars Règles ergonomiques n Solution possible

54 J.Vanderdonckt 31 mars Choix simple Domaine mixte : Dom. inconnu : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles ]8,50] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]50,+ [ Domaine connu : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]8,50] Nbre-valeurs- possibles ]50,+ [

55 J.Vanderdonckt 31 mars Choix multiple Domaine inconnu : Domaine mixte :Domaine connu : Nbre-valeurs- possibles [4,7] Nbre- valeurs- possibles ]8,50] Nbre- valeurs- possibles ]50,+ [ Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]8,50] Nbre- valeurs- possibles ]50,+ [ Nbre-valeurs- possibles [2,3]

56 J.Vanderdonckt 31 mars Règles ergonomiques n Conception dune boîte de dialogue

57 J.Vanderdonckt 31 mars Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 1. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 2. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 3. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ Règles ergonomiques n Alignement des libellés : possibilités

58 J.Vanderdonckt 31 mars Division : _ _ _ _ _ _ _ _ Départ. : _ _ _ Titre : _ _ _ _ _ Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 1.3 Règles ergonomiques n Alignement des libellés : solutions s il y a une différence de plus de 6 caractères entre le libellé le plus long et le plus court

59 J.Vanderdonckt 31 mars Règles ergonomiques n Localisation des boutons de commande : arrangement vertical sans (Options), (Aide)

60 J.Vanderdonckt 31 mars Règles ergonomiques n Localisation des boutons de commande : arrangement vertical complet

61 J.Vanderdonckt 31 mars Règles ergonomiques n Localisation des boutons de commande : arrangement horizontal sans (Options), (Aide)

62 J.Vanderdonckt 31 mars Règles ergonomiques n Localisation des boutons de commande : arrangement horizontal complet

63 J.Vanderdonckt 31 mars Règles ergonomiques n Localisation des boutons de commande : arrangement horizontal avec un long texte

64 J.Vanderdonckt 31 mars Règles ergonomiques n Formattage dun paragraphe : première proposition de solution

65 J.Vanderdonckt 31 mars Règles ergonomiques n Formattage dun paragraphe: deuxième proposition de solution

66 J.Vanderdonckt 31 mars Règles ergonomiques n Concep- tion des icônes

67 J.Vanderdonckt 31 mars Règles ergonomiques n Conception des fenêtres

68 J.Vanderdonckt 31 mars 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 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... n Concep- tion des messages

69 J.Vanderdonckt 31 mars Règles ergonomiques 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 n Proposi- tion de solution

70 J.Vanderdonckt 31 mars Règles ergonomiques n Conception de la mise en évidence

71 J.Vanderdonckt 31 mars Règles ergonomiques n Mise en évidence par la taille (maximum 3) gggggggggggggggggggggggggggggggggggggggggggggggggggggggg Taille 1 (petit) Taille 2 (normal) Taille 3 (mis en évidence)

72 J.Vanderdonckt 31 mars Règles ergonomiques n Mise en évidence par les symboles ( max. 5 )

73 J.Vanderdonckt 31 mars Règles ergonomiques n Mise en évidence par le contraste (maximum 3) Video normalVideo inversé

74 J.Vanderdonckt 31 mars Règles ergonomiques n Mise en évidence par la texture (max. 4)

75 J.Vanderdonckt 31 mars Règles ergonomiques n Eviter les vibrations

76 J.Vanderdonckt 31 mars Règles ergonomiques n Mise en évidence par la couleur (de 6 à 8)

77 J.Vanderdonckt 31 mars Règles ergonomiques n Synthèses additives et soustractive n Utiliser des couleurs opposées Jaune sur fond bleuJaune sur fond rougeBleu sur fond blanc Rouge sur magentaCyan sur fond vertBleu sur fond noir

78 J.Vanderdonckt 31 mars Règles ergonomiques n 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%)

79 J.Vanderdonckt 31 mars Règles ergonomiques n 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%)

80 J.Vanderdonckt 31 mars Règles ergonomiques n 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 J.Vanderdonckt 31 mars Règles ergonomiques n 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 J.Vanderdonckt 31 mars Règles ergonomiques n Les meilleurs contrastes à deux : –Rouge-turquoise –Rouge-Cyan –Bleu-Jaune –Vert-Rose –Vert-Magenta

83 J.Vanderdonckt 31 mars Règles ergonomiques n La meilleure combinaison à trois : –Rouge-Bleu-Vert n La meilleure combinaison à quatre : –Rouge-Bleu-Vert-Blanc

84 J.Vanderdonckt 31 mars Séance 4. Lergonomie du Web n 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 J.Vanderdonckt 31 mars Cette page est-elle ergonomique?

86 J.Vanderdonckt 31 mars Vocabulaire n Concepts – site = ensemble de pages – liens » intra-page : » extra-page : n intra-site : n extra-site : – vaguemestre = webmaster auteur = author – navigateur = browser – visiteur = reader

87 J.Vanderdonckt 31 mars Vocabulaire n Règle ergonomique – définition – motif – critère ergonomique – exemple positif – exemple négatif – exception

88 J.Vanderdonckt 31 mars Vocabulaire n 8 Critères ergonomiques – compatibilité – cohérence – charge de travail – adaptativité – contrôle du dialogue – représentativité – guidage – gestion des erreurs

89 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Conception d'un site Web (1 1) n Le contenu informationnel d'un site doit être représentatif Pages sans but Pages de style "famille" Table des matières Informations pertinentes

91 J.Vanderdonckt 31 mars Conception globale d'un site (1 2) n Inviter le visiteur à ajouter un signet Page statique Page avec des informations mises à jour périodiquement Page de référence

92 J.Vanderdonckt 31 mars Conception globale d'un site (1 3) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 4) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 5) n Utiliser la hiérarchie avec soin

95 J.Vanderdonckt 31 mars Conception globale d'un site (1 6) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 7) n Utiliser des sous-menus pour les sites volumineux Menu complet Menu avec sous-menu

97 J.Vanderdonckt 31 mars Conception globale d'un site (1 8) n 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 APage C

98 J.Vanderdonckt 31 mars Conception globale d'un site (1 9) n Prévoir éventuellement une page d'invitation Une hiérarchie est simple, mais banale Porte frontale Page furtive Page d'invitation suivie de deux pages d'entrée Page d'accueil Page B Page A Page d'entrée n°2 Page d'entrée n°1 Page d'invi- tation

99 J.Vanderdonckt 31 mars Conception globale d'un site (1 10) n Prévoir similairement une page de clôture Page d'accueil Page B Page A Page d'entrée n°2 Page d'entrée n°1 Page d'invi- tation Page C Page de sortie n°1 Page de clôture Page de sortie n°2 Utiliser le même mécanisme que pour la page d'invitation

100 J.Vanderdonckt 31 mars Conception globale d'un site (1 11) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 12) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 13) n Adopter une logique de dénomination du site Eviter Préférer Kuala Lumpur 1998 Malaysie Games Exposition Dept. of Computer Science Univ. of Manchester AcademicUnited Kingdom Smith Publications

103 J.Vanderdonckt 31 mars Conception globale d'un site (1 14) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 15) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 16) n La conception du site doit être appropriée au contexte Le site Horta [poss. min., poss. max.]

106 J.Vanderdonckt 31 mars Conception globale d'un site (1 17) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 18) n 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 J.Vanderdonckt 31 mars Conception globale d'un site (1 19) n Préparer les pages pour les moteurs de recherche externes Page sans titre, sans indicateur de structure Manières visibles : ,...,... - 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 :

109 J.Vanderdonckt 31 mars Conception globale d'un site (1 20) n 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 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Navigation (2 1) n L'accès à l'information doit être rapide Trop de niveaux dans la hiérarchie Règle des 3 clics

112 J.Vanderdonckt 31 mars Navigation (2 2) n 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 J.Vanderdonckt 31 mars Navigation (2 3) n 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 J.Vanderdonckt 31 mars Navigation (2 4) n Utiliser une image réactive comme carte graphique de navigation Pas de carte sans rapport Carte +/- méta- phorique

115 J.Vanderdonckt 31 mars Navigation (2 5) n 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 J.Vanderdonckt 31 mars Navigation (2 6) n Inclure des repères de navigation Barre de navigation Point de ralliement Diagramme global ou local

117 J.Vanderdonckt 31 mars Navigation (2 7) n 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 J.Vanderdonckt 31 mars Navigation (2 8) n 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 J.Vanderdonckt 31 mars Navigation (2 9) n 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 J.Vanderdonckt 31 mars Navigation (2 10) n Fournir des liens textuels pour chaque page Pas seulement une carte graphique Liens textuels pour utilisateurs à besoins spéciaux

121 J.Vanderdonckt 31 mars Navigation (2 11) n 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 Voici la liste des disques Liste des disques ListeDisques.txt

122 J.Vanderdonckt 31 mars Navigation (2 12) n 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 J.Vanderdonckt 31 mars Navigation (2 13) n Utiliser "Précédent/Suivant", "Avant/Arrière" avec précaution Mettre à jour les liens en cas de modification Confusion entre et Page n°3 Page n°2 Page n°1 Page n°3 Page n°1 Page n°3 Page n°2 Page n°1

124 J.Vanderdonckt 31 mars Navigation (2 14) n 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 J.Vanderdonckt 31 mars Navigation (2 15) n Interdire les liens "Retourner à..." Aller à :... Bouton Eviter : revenir, retourner, repartir, annuler, défaire, rebrancher Page d'accueil Page A Page BPage CPage DPage E Premier site Page 1 Page 2Page 3Page 4Page 5 Deuxième site

126 J.Vanderdonckt 31 mars Navigation (2 16) n Tout visiteur doit distinguer un lien visité d'un lien nouveau Lien visité Lien non visité Utiliser les couleurs standards Utiliser des couleurs opposées Ne pas utiliser jaune et orangeLien visité Lien non visité

127 J.Vanderdonckt 31 mars Navigation (2 17) n 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 note en bas de page Lien de remplacement Lien de référence Lien de commande

128 J.Vanderdonckt 31 mars Navigation (2 18) n Utiliser des liens intra-page dans les longues pages Page "Formation" sans lien Page "Formation" avec lien

129 J.Vanderdonckt 31 mars Navigation (2 19) n 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 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Présentation (3 1) n 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 J.Vanderdonckt 31 mars Présentation (3 2) n 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 J.Vanderdonckt 31 mars Présentation (3 3) n La page d'accueil doit tenir sur un seul écran Pas de page trop grande : JVDD Page limitée à 640 x 480: CIGER

134 J.Vanderdonckt 31 mars Présentation (3 4) n Ne pas contraindre physiquement la page d'accueil Pas de fond d'écran trop étroit Utiliser une table centrée 30

135 J.Vanderdonckt 31 mars Présentation (3 5) n 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 J.Vanderdonckt 31 mars Présentation (3 6) n Trancher entre des pages courtes, longues Utiliser le tableau

137 J.Vanderdonckt 31 mars Présentation (3 7) n Utiliser une grille de présentation Dessiner la grille sur une recopie d'écran

138 J.Vanderdonckt 31 mars Présentation (3 8) n Utiliser les techniques visuelles Balance Symétrie Instabilité Asymétrie

139 J.Vanderdonckt 31 mars Présentation (3 9) n Utiliser au maximum les tables WebElements Mettre BORDER=0 Utiliser les tables de longueur fixe

140 J.Vanderdonckt 31 mars Présentation (3 10) n 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 J.Vanderdonckt 31 mars Présentation (3 11) n 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 J.Vanderdonckt 31 mars Présentation (3 12) n 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 J.Vanderdonckt 31 mars Présentation (3 13) n 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 J.Vanderdonckt 31 mars Présentation (3 14) n Les informations liées sémantiquement doivent être présentées conjointement Texte associé le décrivant Texte associé

145 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Formulaires, titres et en-têtes (4 1) n 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 J.Vanderdonckt 31 mars Formulaires, titres et en-têtes (4 2) n 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 J.Vanderdonckt 31 mars Choix simple Domaine mixte : Dom. inconnu : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [8,50] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]50,+ [ Domaine connu : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [8,50] Nbre-valeurs- possibles ]50,+ [

149 J.Vanderdonckt 31 mars Choix multiple Domaine inconnu : Domaine mixte :Domaine connu : Nbre-valeurs- possibles [4,7] Nbre- valeurs- possibles [8,50] Nbre- valeurs- possibles ]50,+ [ Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [8,50 ] Nbre- valeurs- possibles ]50,+ [ Nbre-valeurs- possibles [2,3]

150 J.Vanderdonckt 31 mars Formulaires, titres et en-têtes (4 3) n Toute page doit comporter un titre identifiant Page d'accueil IESN Utiliser Titre identifiant Utiliser la balise TITLE

151 J.Vanderdonckt 31 mars Formulaires, titres et en-têtes (4 4) n 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 J.Vanderdonckt 31 mars Formulaires, titres et en-têtes (4 5) n 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 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Cadres et fenêtres (5 1) n Utiliser les cadres avec parcimonie Ne pas oublier la clause TARGET=...

155 J.Vanderdonckt 31 mars Cadres et fenêtres (5 2) n 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 J.Vanderdonckt 31 mars Cadres et fenêtres (5 3) n Le nombre de cadres, de fenêtres doit être limité Effet "lorgnette" Max. 2 fenêtres Max. 3 cadres

157 J.Vanderdonckt 31 mars Cadres et fenêtres (5 4) n 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 J.Vanderdonckt 31 mars Cadres et fenêtres (5 5) n Veiller à la taille des cadres et fenêtres

159 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Graphiques (6 1) n 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 J.Vanderdonckt 31 mars Graphiques (6 2) n Adjoindre du texte à chaque graphique Utiliser du texte pour s'assurer que le graphique véhicule bien l'information prévue

162 J.Vanderdonckt 31 mars Graphiques (6 3) n Utiliser le texte alternatif Balise ALT : Pour l'indexation par les moteurs externes Attention pour les bulles d'aide OK pour Explorer KO pour Navigator

163 J.Vanderdonckt 31 mars Graphiques (6 4) n Réutiliser les mêmes graphiques Utiliser les mêmes icônes, les mêmes logos,...

164 J.Vanderdonckt 31 mars Graphiques (6 5) n Utiliser les graphiques pour représenter les zones du site Utiliser les mêmes graphiques pour les mêmes zones

165 J.Vanderdonckt 31 mars Graphiques (6 6) n 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 J.Vanderdonckt 31 mars Graphiques (6 7) n Utiliser les graphiques pour les listes Page d'accueil de CircusWare

167 J.Vanderdonckt 31 mars Graphiques (6 8) n Garder en tête les limites des graphiques

168 J.Vanderdonckt 31 mars Graphiques (6 9) n 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 Ne pas redimensionner le graphique dans le code HTML

169 J.Vanderdonckt 31 mars Graphiques (6 10) n Les dimensions des graphiques doivent être appropriées Largeur (graphique) < 600 pixels N'utiliser le redimensionnement avec % qu'après test

170 J.Vanderdonckt 31 mars Graphiques (6 11) n Les 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

171 J.Vanderdonckt 31 mars Graphiques (6 12) n Utiliser les GIF entrelacés, les images fractales Image entrelacée GIF89a Interlaced Entrelacer à partir de 200 x 200 Image non entrelacée

172 J.Vanderdonckt 31 mars Graphiques (6 13) n Ne pas ajouter de bords aux graphiques Utiliser la balise BORDER=0 Attention aux effets 3D Ne pas enregistrer les graphiques avec bordure

173 J.Vanderdonckt 31 mars Graphiques (6 14) n Utiliser des graphiques transparents sur un fond d'écran tramé Rendre les icônes rondes transparentes Soumettre au convertisseur en ligne

174 J.Vanderdonckt 31 mars Graphiques (6 15) n Spécifier les dimensions d'un graphique en HTML Utiliser les balises HEIGHT="50" WIDTH="70" BBEdit calcule les dimensions automatiquement

175 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Eléments multimédia (7 1) n Le type de fond d'écran doit être approprié Ligne de l'horizonExempleSignification 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ée Suggère dynamisme, changement, voire violence

177 Eléments multimédia n Fond d'écran bas

178 Eléments multimédia n Fond d'écran haut

179 Eléments multimédia n Fond d'écran médian

180 J.Vanderdonckt 31 mars Eléments multimédia n Fond d'écran diagonal

181 Eléments multimédia n Fond d'écran découpé

182 J.Vanderdonckt 31 mars Eléments multimédia (7 2) n Préférer les fonds d'écran clairs, de basse intensité Pas de blanc sur fond noir

183 J.Vanderdonckt 31 mars Eléments multimédia (7 3) n Eviter les fonds d'écran avec motifs Motifs pâles, clairs Soumettre au test Pages construites avec un mauvais fond d'écran

184 J.Vanderdonckt 31 mars Eléments multimédia (7 4) n Sélectionner un fond d'écran aléatoire Pages construites avec un motif aléatoire Pages construites avec un motif pas aléatoire

185 J.Vanderdonckt 31 mars Eléments multimédia (7 5) n Eviter le texte en fond d'écran Même des petits textes rendent la lecture difficile Texte en fond d'écran

186 J.Vanderdonckt 31 mars Eléments multimédia (7 6) n Utiliser une couleur de fond avec le fond d'écran Utiliser une couleur compatible avec la dominante Pas suivre l'hypothèse : le visiteur garde les couleurs de la page

187 J.Vanderdonckt 31 mars Eléments multimédia (7 7) n Tester en vraie grandeur les fonds d'écran

188 J.Vanderdonckt 31 mars Eléments multimédia (7 8) n Maintenir un haut contraste entre les éléments Garder les meilleures combinaisons de couleurs Recourir aux meilleurs contrastes à 2 Recourir à la meilleure combinaison à 3 Recourir à la meilleure combinaison à 4 Ecarter les plus mauvaises combinaisons de couleurs

189 J.Vanderdonckt 31 mars Eléments multimédia n 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 J.Vanderdonckt 31 mars Eléments multimédia n 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 J.Vanderdonckt 31 mars Eléments multimédia n 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 J.Vanderdonckt 31 mars Eléments multimédia n 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 J.Vanderdonckt 31 mars Eléments multimédia n Recourir aux meilleurs contrastes à deux – Rouge-Turquoise – Rouge-Cyan – Bleu-Jaune – Vert-Rose – Vert-Magenta

194 J.Vanderdonckt 31 mars Eléments multimédia n Recourir à la meilleure combinaison à 3 – Rouge Bleu Vert n Recourir à la meilleure combinaison à 4 – Rouge Bleu Vert Blanc

195 J.Vanderdonckt 31 mars Eléments multimédia (7 9) n Les zones de couleur peuvent être larges Ajuster les couleurs d'une image scannée à quelques couleurs

196 J.Vanderdonckt 31 mars Eléments multimédia (7 10) n 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 J.Vanderdonckt 31 mars Eléments multimédia (7 11) n 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 J.Vanderdonckt 31 mars Eléments multimédia (7 12) n Eviter le dithering Utiliser le dithering pour les JPG Ne pas utiliser trop le dithering pour les GIF

199 J.Vanderdonckt 31 mars Eléments multimédia (7 13) n Tester les couleurs

200 J.Vanderdonckt 31 mars Eléments multimédia (7 14) n 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 J.Vanderdonckt 31 mars Eléments multimédia (7 15) n Prêter attention à la typographie Utiliser la mise en gras uniquement pour la mise en évidence Ne pas utiliser le soulignement N'utiliser l'italique que dans des cas précis Ne pas mettre le texte en MAJUSCULES

202 J.Vanderdonckt 31 mars Eléments multimédia (7 16) n Prévoir les variations de taille de police Table avec police de taille fixe Libellés au-dessus des champs Polices sur deux navigateurs

203 J.Vanderdonckt 31 mars Eléments multimédia (7 17) n 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 J.Vanderdonckt 31 mars Eléments multimédia n Pour une audience internationale (1)

205 J.Vanderdonckt 31 mars Eléments multimédia n Pour une audience internationale (2)

206 J.Vanderdonckt 31 mars Eléments multimédia (7 18) n Penser à une présentation assistée par ordinateur Utiliser la balise REFRESH Utiliser PowerPoint Animation File Utiliser Shockwave for Director 6 Pas de longue suite de pages

207 J.Vanderdonckt 31 mars Eléments multimédia (7 19) n Considérer des animations simples en GIF animé Utiliser GifBuilder Pas plus de 7 images dans la suite

208 J.Vanderdonckt 31 mars Eléments multimédia (7 20) n Eviter les animations répétitives Montrer la continuité dans les transitions (Pythagore) Indiquer la dimensin dans les transitions Illustrer le changement dans le temps (déforestation) La boussole

209 J.Vanderdonckt 31 mars Eléments multimédia (7 21) n Implémenter un système de désactivation des animations, du son Arrêter les publicités sur Arrêter le son

210 J.Vanderdonckt 31 mars Eléments multimédia (7 22) n 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 J.Vanderdonckt 31 mars Table des matières n 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 J.Vanderdonckt 31 mars Accessibilité (8 1) n 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 J.Vanderdonckt 31 mars Accessibilité (8 2) n 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 J.Vanderdonckt 31 mars Merci de votre attention!


Télécharger ppt "1997-2000 J.Vanderdonckt 31 mars 2000 1 Jean Vanderdonckt Institut dAdmistration et de Gestion Universite catholique de Louvain Informatique interactive."

Présentations similaires


Annonces Google