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 1997-2000 J.Vanderdonckt 31 mars 2000 1 Jean Vanderdonckt Institut dAdmistration et de Gestion Universite catholique de Louvain Informatique interactive de Gestion

2 1997-2000 J.Vanderdonckt 31 mars 2000 2 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 1997-2000 J.Vanderdonckt 31 mars 2000 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 1997-2000 J.Vanderdonckt 31 mars 2000 4 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 5 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 6 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 7 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 8 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 9 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 10 1.1 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 1997-2000 J.Vanderdonckt 31 mars 2000 11 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 12 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 13 1.2 Critères ergonomiques n 1. Compatibilité –Exemple de métaphore incompatible

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

15 1997-2000 J.Vanderdonckt 31 mars 2000 15 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 16 1.2.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 17 1.2.2 Cohérence n 2. Cohérence : –Exemple dincohérence comportementale

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

20 1997-2000 J.Vanderdonckt 31 mars 2000 20 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 21 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 22 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 23 1.2 Critères ergonomiques n Contrôle du dialogue : –Exemple de mauvaises actions explicites

24 1997-2000 J.Vanderdonckt 31 mars 2000 24 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 25 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 26 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 27 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 28 1.2 Critères ergonomiques n Guidage : –Exemple de guidage dans la conversation

29 1997-2000 J.Vanderdonckt 31 mars 2000 29 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 30 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 31 1.2 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 1997-2000 J.Vanderdonckt 31 mars 2000 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 1997-2000 J.Vanderdonckt 31 mars 2000 33 1.3 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 1997-2000 J.Vanderdonckt 31 mars 2000 34 1.3 Règles ergonomiques n RE pour le graphisme : –utiliser une hiérarchie de concepts PeuPlusEncore plusDavantage

35 1997-2000 J.Vanderdonckt 31 mars 2000 35 1.3 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 1997-2000 J.Vanderdonckt 31 mars 2000 36 1.3 Règles ergonomiques n RE pour le placement d'objets interactifs : –placer les boutons de commande de manière uniformisée totalement

37 1997-2000 J.Vanderdonckt 31 mars 2000 37 1.3 Règles ergonomiques n Lincrustation

38 1997-2000 J.Vanderdonckt 31 mars 2000 38 1.3 Règles ergonomiques n L'incrustation

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

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

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

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

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

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

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

46 1997-2000 J.Vanderdonckt 31 mars 2000 46 1.3 Règles ergonomiques n Menu "Fichier"

47 1997-2000 J.Vanderdonckt 31 mars 2000 47 1.3 Règles ergonomiques n Menu "Edition"

48 1997-2000 J.Vanderdonckt 31 mars 2000 48 1.3 Règles ergonomiques n Menu "Vue"

49 1997-2000 J.Vanderdonckt 31 mars 2000 49 1.3 Règles ergonomiques n Menu "Options"

50 1997-2000 J.Vanderdonckt 31 mars 2000 50 1.3 Règles ergonomiques n Menu "Aide"

51 1997-2000 J.Vanderdonckt 31 mars 2000 51 1.3 Règles ergonomiques n Solution possible

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

53 1997-2000 J.Vanderdonckt 31 mars 2000 53 1.3 Règles ergonomiques n Solution possible

54 1997-2000 J.Vanderdonckt 31 mars 2000 54 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 1997-2000 J.Vanderdonckt 31 mars 2000 55 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 1997-2000 J.Vanderdonckt 31 mars 2000 56 1.3 Règles ergonomiques n Conception dune boîte de dialogue

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

58 1997-2000 J.Vanderdonckt 31 mars 2000 58 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 1997-2000 J.Vanderdonckt 31 mars 2000 59 1.3 Règles ergonomiques n Localisation des boutons de commande : arrangement vertical sans (Options), (Aide)

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

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

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

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

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

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

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

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

68 1997-2000 J.Vanderdonckt 31 mars 2000 68 1.3 Règles ergonomiques -- Système d'expédition de messages -- SYSTEME #22 - TdT 27 mars 1984 * * * * AVERTISSEMENT * * * * LES UTILISATEURS DE TdT SONT PRIES DE NE PAS 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 1997-2000 J.Vanderdonckt 31 mars 2000 69 1.3 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 1997-2000 J.Vanderdonckt 31 mars 2000 70 1.3 Règles ergonomiques n Conception de la mise en évidence

71 1997-2000 J.Vanderdonckt 31 mars 2000 71 1.3 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 1997-2000 J.Vanderdonckt 31 mars 2000 72 1.3 Règles ergonomiques n Mise en évidence par les symboles ( max. 5 )

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

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

75 1997-2000 J.Vanderdonckt 31 mars 2000 75 1.3 Règles ergonomiques n Eviter les vibrations

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

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

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

84 1997-2000 J.Vanderdonckt 31 mars 2000 84 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 1997-2000 J.Vanderdonckt 31 mars 2000 85 Cette page est-elle ergonomique?

86 1997-2000 J.Vanderdonckt 31 mars 2000 86 Vocabulaire n Concepts – site = ensemble de pages – liens » intra-page : http://www.x.com/.../#signet » extra-page : http://www.x.com/source.html n intra-site : http://www.x.com/dest.html n extra-site : http://www.y.com/dest.html – vaguemestre = webmaster auteur = author – navigateur = browser – visiteur = reader

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

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

89 1997-2000 J.Vanderdonckt 31 mars 2000 89 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 1997-2000 J.Vanderdonckt 31 mars 2000 90 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 1997-2000 J.Vanderdonckt 31 mars 2000 91 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 1997-2000 J.Vanderdonckt 31 mars 2000 92 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 1997-2000 J.Vanderdonckt 31 mars 2000 93 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 1997-2000 J.Vanderdonckt 31 mars 2000 94 Conception globale d'un site (1 5) n Utiliser la hiérarchie avec soin

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

97 1997-2000 J.Vanderdonckt 31 mars 2000 97 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 1997-2000 J.Vanderdonckt 31 mars 2000 98 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 1997-2000 J.Vanderdonckt 31 mars 2000 99 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 1997-2000 J.Vanderdonckt 31 mars 2000 100 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 1997-2000 J.Vanderdonckt 31 mars 2000 101 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 1997-2000 J.Vanderdonckt 31 mars 2000 102 Conception globale d'un site (1 13) n Adopter une logique de dénomination du site Eviter http://www.kl98.com.my/gamesex Préférer http://www.dcs.cam.ac.uk/smith/publications Kuala Lumpur 1998 Malaysie Games Exposition Dept. of Computer Science Univ. of Manchester AcademicUnited Kingdom Smith Publications

103 1997-2000 J.Vanderdonckt 31 mars 2000 103 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 1997-2000 J.Vanderdonckt 31 mars 2000 104 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 1997-2000 J.Vanderdonckt 31 mars 2000 105 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 1997-2000 J.Vanderdonckt 31 mars 2000 106 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 1997-2000 J.Vanderdonckt 31 mars 2000 107 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 1997-2000 J.Vanderdonckt 31 mars 2000 108 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 1997-2000 J.Vanderdonckt 31 mars 2000 109 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 1997-2000 J.Vanderdonckt 31 mars 2000 110 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 1997-2000 J.Vanderdonckt 31 mars 2000 111 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 1997-2000 J.Vanderdonckt 31 mars 2000 112 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 1997-2000 J.Vanderdonckt 31 mars 2000 113 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 1997-2000 J.Vanderdonckt 31 mars 2000 114 Navigation (2 4) n Utiliser une image réactive comme carte graphique de navigation Pas de carte sans rapport Carte +/- méta- phorique

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

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

121 1997-2000 J.Vanderdonckt 31 mars 2000 121 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 1997-2000 J.Vanderdonckt 31 mars 2000 122 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 1997-2000 J.Vanderdonckt 31 mars 2000 123 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 1997-2000 J.Vanderdonckt 31 mars 2000 124 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 1997-2000 J.Vanderdonckt 31 mars 2000 125 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 1997-2000 J.Vanderdonckt 31 mars 2000 126 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 1997-2000 J.Vanderdonckt 31 mars 2000 127 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 1997-2000 J.Vanderdonckt 31 mars 2000 128 Navigation (2 18) n Utiliser des liens intra-page dans les longues pages Page "Formation" sans lien Page "Formation" avec lien

129 1997-2000 J.Vanderdonckt 31 mars 2000 129 Navigation (2 19) n Veiller à la maintenance des liens Liens obsolètes (E-mail, machine,...) Maintenir les liens intra-site corrects Vérifier et corriger les liens extra-site régulièrement

130 1997-2000 J.Vanderdonckt 31 mars 2000 130 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 1997-2000 J.Vanderdonckt 31 mars 2000 131 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 1997-2000 J.Vanderdonckt 31 mars 2000 132 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 1997-2000 J.Vanderdonckt 31 mars 2000 133 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 1997-2000 J.Vanderdonckt 31 mars 2000 134 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 1997-2000 J.Vanderdonckt 31 mars 2000 135 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 1997-2000 J.Vanderdonckt 31 mars 2000 136 Présentation (3 6) n Trancher entre des pages courtes, longues Utiliser le tableau

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

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

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

140 1997-2000 J.Vanderdonckt 31 mars 2000 140 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 1997-2000 J.Vanderdonckt 31 mars 2000 141 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 1997-2000 J.Vanderdonckt 31 mars 2000 142 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 1997-2000 J.Vanderdonckt 31 mars 2000 143 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 1997-2000 J.Vanderdonckt 31 mars 2000 144 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 1997-2000 J.Vanderdonckt 31 mars 2000 145 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 1997-2000 J.Vanderdonckt 31 mars 2000 146 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 1997-2000 J.Vanderdonckt 31 mars 2000 147 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 1997-2000 J.Vanderdonckt 31 mars 2000 148 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 1997-2000 J.Vanderdonckt 31 mars 2000 149 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 1997-2000 J.Vanderdonckt 31 mars 2000 150 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 1997-2000 J.Vanderdonckt 31 mars 2000 151 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 1997-2000 J.Vanderdonckt 31 mars 2000 152 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 1997-2000 J.Vanderdonckt 31 mars 2000 153 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 1997-2000 J.Vanderdonckt 31 mars 2000 154 Cadres et fenêtres (5 1) n Utiliser les cadres avec parcimonie Ne pas oublier la clause TARGET=...

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

159 1997-2000 J.Vanderdonckt 31 mars 2000 159 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 1997-2000 J.Vanderdonckt 31 mars 2000 160 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 1997-2000 J.Vanderdonckt 31 mars 2000 161 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 1997-2000 J.Vanderdonckt 31 mars 2000 162 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 1997-2000 J.Vanderdonckt 31 mars 2000 163 Graphiques (6 4) n Réutiliser les mêmes graphiques Utiliser les mêmes icônes, les mêmes logos,...

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

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

168 1997-2000 J.Vanderdonckt 31 mars 2000 168 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 1997-2000 J.Vanderdonckt 31 mars 2000 169 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 1997-2000 J.Vanderdonckt 31 mars 2000 170 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 1997-2000 J.Vanderdonckt 31 mars 2000 171 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 1997-2000 J.Vanderdonckt 31 mars 2000 172 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 1997-2000 J.Vanderdonckt 31 mars 2000 173 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 1997-2000 J.Vanderdonckt 31 mars 2000 174 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 1997-2000 J.Vanderdonckt 31 mars 2000 175 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 1997-2000 J.Vanderdonckt 31 mars 2000 176 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 1997-2000 J.Vanderdonckt 31 mars 2000 180 Eléments multimédia n Fond d'écran diagonal

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

182 1997-2000 J.Vanderdonckt 31 mars 2000 182 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 1997-2000 J.Vanderdonckt 31 mars 2000 183 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 1997-2000 J.Vanderdonckt 31 mars 2000 184 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 1997-2000 J.Vanderdonckt 31 mars 2000 185 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 1997-2000 J.Vanderdonckt 31 mars 2000 186 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 1997-2000 J.Vanderdonckt 31 mars 2000 187 Eléments multimédia (7 7) n Tester en vraie grandeur les fonds d'écran

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

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

195 1997-2000 J.Vanderdonckt 31 mars 2000 195 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 1997-2000 J.Vanderdonckt 31 mars 2000 196 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 1997-2000 J.Vanderdonckt 31 mars 2000 197 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 #996600 = orange moyen

198 1997-2000 J.Vanderdonckt 31 mars 2000 198 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 1997-2000 J.Vanderdonckt 31 mars 2000 199 Eléments multimédia (7 13) n Tester les couleurs

200 1997-2000 J.Vanderdonckt 31 mars 2000 200 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 1997-2000 J.Vanderdonckt 31 mars 2000 201 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 1997-2000 J.Vanderdonckt 31 mars 2000 202 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 1997-2000 J.Vanderdonckt 31 mars 2000 203 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 1997-2000 J.Vanderdonckt 31 mars 2000 204 Eléments multimédia n Pour une audience internationale (1)

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

206 1997-2000 J.Vanderdonckt 31 mars 2000 206 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 1997-2000 J.Vanderdonckt 31 mars 2000 207 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 1997-2000 J.Vanderdonckt 31 mars 2000 208 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 1997-2000 J.Vanderdonckt 31 mars 2000 209 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 www.hotwired.com Arrêter le son

210 1997-2000 J.Vanderdonckt 31 mars 2000 210 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 1997-2000 J.Vanderdonckt 31 mars 2000 211 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 1997-2000 J.Vanderdonckt 31 mars 2000 212 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 1997-2000 J.Vanderdonckt 31 mars 2000 213 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 1997-2000 J.Vanderdonckt 31 mars 2000 214 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