Informatique interactive de Gestion

Présentation au sujet: "Informatique interactive de Gestion"— Transcription de la présentation:

1 Informatique interactive de Gestion
Jean Vanderdonckt Institut d’Admistration et de Gestion Universite catholique de Louvain

2 Organisation du cours 4 parties : Mode d’évaluation
1. Introduction à l’ergonomie logicielle 2. Ergonomie visuelle de la présentation multimédia 3. Etudes de cas multimédia 4. Ergonomie des sites World Wide Web Mode d’évaluation Choix d’un sujet de travail Analyse ergonomique par les critères ergonomiques par les techniques visuelles

3 Séance 1: Introduction à l’ergonomie logicielle
1.1 Objectifs et rôles de l ’ergonomie logicielle 1.2 Critères ergonomiques de conception et d’évaluation 1.3 Règles ergonomiques

4 1.1 Objectifs et rôles de l'ergonomie logicielle
Ergonomie physiologique : impacts physiologiques de l'environnement physique et des caractéristiques physiologiques de l'utilisateur sur la tâche musculature ossature respiration luminosité

5 1.1 Objectifs et rôles de l'ergonomie logicielle
Ergonomie cognitive : impacts cognitifs de l'environnement et des caractéristiques cognitives de l'utilisateur sur la tâche environnement stressant contraintes niveau d'expérience charge de travail

6 1.1 Objectifs et rôles de l'ergonomie logicielle
Ergonomie en général : concevoir tout système en vue de son utilisation adéquate, optimale par une population d'utilisateurs tournée vers les moyens de travail efficaces, respectant la santé, le bien-être des utilisateurs ergonomie logicielle : branche de l'ergonomie dédie aux interfaces homme-machine (IHM)

7 1.1 Objectifs et rôles de l'ergonomie logicielle
Deux dimensions : utilité : adéquation de l'IHM par rapport aux objectifs fonctionnels de l'application indépendante de l'utilisateur utilisabilité : adéquation de l'IHM par rapport aux besoins de l'utilisateur dépendante de l'utilisateur

8 1.1 Objectifs et rôles de l'ergonomie logicielle
Utilité : assure un grand nombre de fonctions utiles pour l'utilisateur, pour un traitement de texte : créer une table des matières avoir un correcteur orthographique déplacer des blocs d'un endroit à un autre

9 1.1 Objectifs et rôles de l'ergonomie logicielle
Utilisabilité : facilité d'usage accepte les erreurs de l'utilisateur offre la possibilité de les corriger ne bloque pas en cas d'erreur facilité d'accès aux fonctions commandes, messages, icônes compréhensibles Certains logiciels sont riches en fonctions (utilité), mais difficiles à exploiter (utilisabilité)

10 1.1 Objectifs et rôles de l'ergonomie logicielle
Utilité : les utilisateurs intensifs préfèrent parfois utiliser un outil riche, mais difficile à utiliser plutôt qu'un outil facile à utiliser, mais pauvre Utilisabilité : pour les utilisateurs novices ou épisodiques, la facilité d'emploi est un critère prioritaire l'attitude de l'utilisateur vis-à-vis de l'outil dépend des interactions utilisateur-outil de l'IHM

11 1.2 Critères ergonomiques
pour l'utilisabilité 8 critères taxonomie avec sous-critères avec ordonnancement servent a priori, a posteriori

12 1.2 Critères ergonomiques
1. Compatibilité : ssi et seulement si le (re)codage d'informations et de tâches du monde réel en données et actions du système est réduit IHM d'autant meilleure qu'elle est compatible car le transfert d'informations est d'autant plus rapide que le (re)codage en données est réduit, l'accomplissement de tâche est d'autant plus rapide que son interprétation en actions est courte.

13 1.2 Critères ergonomiques
1. Compatibilité Exemple de métaphore incompatible

14 1.2.1 Compatibilité Compatibilité comportementale
Compatibilité sémantique Compatibilité syntaxique Compatibilité lexicale de support grammaticale linguistique de standard

15 1.2 Critères ergonomiques
2. Cohérence : ssi les données et les actions sont facilement identifiables, reconnaissables et utilisables les données sont d'autant mieux perçues et les actions d'autant mieux accomplies qu'elles sont présentées de manière stable et uniformisée

16 1.2.2 Cohérence Cohérence inter-application
Cohérence intra-application coh. pragmatique coh. sémantique coh. syntaxique coh. lexicale coh. spatiale coh. grammaticale, linguistique coh. alphabétique

17 1.2.2 Cohérence 2. Cohérence : Exemple d’incohérence comportementale

18 1.2 Critères ergonomiques
3. Charge de travail ssi le volume de données à manipuler et d'actions à accomplir par unité de tâche est réduit l'interaction est d'autant plus rapide que les actions de l'utilisateur portant sur un nombre limité de données sont courtes

19 1.2 Critères ergonomiques
Charge de travail Performance Charge mentale Brièveté concision actions minimales Charge symbolique Respect cognitif Respect physique

20 1.2 Critères ergonomiques
4. Adaptation : ssi elle possède la faculté de mimétisme comportemental vis-à-vis de son utilisateur l'utilisateur est d'autant moins dérouté et acquerra d'autant plus d'expérience que l'interface peut s'adapter aux différents contextes de travail Rappelons qu’elle peut être adaptable adaptative

21 1.2 Critères ergonomiques
5. Contrôle du dialogue explicite ssi l'utilisateur la place sous son contrôle et ses actions s'exécutent suite à des demandes explicitement formulées par l'utilisateur implicite ssi elle place l’utilisateur sous son contrôle mixte lorsqu’elle est tour à tour à contrôle explicite et implicite.

22 1.2 Critères ergonomiques
Contrôle du dialogue Contrôle dans la conversation actions explicites actions implicites actions mixtes Contrôle dans la présentation présentation manuelle présentation automatique

23 1.2 Critères ergonomiques
Contrôle du dialogue : Exemple de mauvaises actions explicites

24 1.2 Critères ergonomiques
6. Représentativité : si et seulement si les codes utilisés, les items de menu, les libellés facilitent l'encodage, la rétention

25 1.2 Critères ergonomiques
Représentativité dans la conversation raccourci mnémonique accélérateur représentativité dans la présentation abréviation codification

26 1.2 Critères ergonomiques
7. Guidage ssi elle informe de manière constante l'utilisateur sur l'issue de ses actions et sur sa position dans l'accomplissement de sa tâche l'utilisateur réalise sa tâche d'autant mieux qu'il est guidé à travers toutes les étapes néces-saires pour la mener à bien

27 1.2 Critères ergonomiques
Guidage dans la conversation invitation progression feed-back immédiat Guidage dans la présentation groupement/distinction entre les objets par le placement par le format guidage visuel, clarté

28 1.2 Critères ergonomiques
Guidage : Exemple de guidage dans la conversation

29 1.2 Critères egonomiques 8. Gestion des erreurs :
ssi elle s'avère robuste vis-à-vis erreurs commises par l'utilisateur et se montre conviviale dans la manière de les corriger la performance de réalisation d'une tâche est d'autant meilleure que les occasions d'erreurs sont réduites

30 1.2 Critères ergonomiques
8. Gestion des erreurs : Exemple de gestion des erreurs GUICHET AUTOMATIQUE EN SERVICE Insérer votre carte Entrer votre code d'identification : 1234 Sélectionner une opération : retrait Donner le montant du retrait : 7500 F Le montant doit être un multiple de 1000 F (La machine éjecte la carte) GUICHET AUTOMATIQUE EN SERVICE... (L'utilisateur doit tout recommencer)

31 1.2 Critères ergonomiques
Protection vis-à-vis des erreurs Identification des erreurs Cause de l'erreur Lieu de l'erreur Explicitation des erreurs Correction des erreurs

32 1.2 Critères ergonomiques
1. Compatibilité 2. Cohérence 3. Charge de travail 4. Contrôle du dialogue 5. Adaptativité 6. Représentativité 7. Guidage 8. Gestion des erreurs

33 1.3 Règles ergonomiques C'est un principe de conception et/ou d'évaluation à observer en vue d'obtenir et/ou de garantir une IHM ergonomique pour une tâche interactive donnée pour une population d'utilisateurs donnée dans un contexte donné

34 1.3 Règles ergonomiques RE pour le graphisme :
utiliser une hiérarchie de concepts Peu Plus Encore plus Davantage

35 1.3 Règles ergonomiques RE pour les diagrammes :
utiliser un arbre de décision pour guider l'utilisateur pour donner une réponse appropriée dans des conditions diverses Nbre-valeurs-choisir = 1 Type-dom = inconnu : champ d'édition uni-linéaire profilé Type-dom = connu Nbre-valeurs-possibles [2,3] Densité-FL = faible : bouton radio Densité-FL = élevée : boîte à options Nbre-valeurs-possibles [4,Nmag] Densité-FL = faible : bouton radio + boîte de regroupement

36 1.3 Règles ergonomiques RE pour le placement d'objets interactifs :
placer les boutons de commande de manière uniformisée totalement

37 1.3 Règles ergonomiques L’incrustation

38 1.3 Règles ergonomiques L'incrustation

39 1.3 Règles ergonomiques Carnet d'adresse : première version

40 1.3 Règles ergonomiques Carnet d'adresse : deuxième version

41 1.3 Règles ergonomiques Carnet d'adresse : troisième version

42 1.3 Règles ergonomiques Carnet d'adresse : quatrième version

43 1.3 Règles ergonomiques Carnet d'adresse : cinquième version

44 1.3 Règles ergonomiques Conception des menus déroulants

45 1.3 Règles ergonomiques Ordonnancement des menus Fréquence
Alphabétique Numérique Physique Chronologique ...

46 1.3 Règles ergonomiques Menu "Fichier"

47 1.3 Règles ergonomiques Menu "Edition"

48 1.3 Règles ergonomiques Menu "Vue"

49 1.3 Règles ergonomiques Menu "Options"

50 1.3 Règles ergonomiques Menu "Aide"

51 1.3 Règles ergonomiques Solution possible

52 1.3 Règles ergonomiques Sélection des objets interactifs

53 1.3 Règles ergonomiques Solution possible

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

55 Choix multiple [2,3] [2,3] [4,7] [4,7] ]8,50] ]8,50] ]50,+[
Domaine inconnu : Domaine connu : Domaine mixte : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles ]8,50] Nbre- valeurs- possibles ]8,50] Nbre-valeurs- possibles ]50,+[ Nbre-valeurs-possibles ]50,+[

56 1.3 Règles ergonomiques Conception d’une boîte de dialogue

57 1.3 Règles ergonomiques Alignement des libellés : possibilités
Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 1. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 2. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 3. Division : _ _ _ _ _ _ _ _ Département : _ _ _ Titre : _ _ _ _ _ 4.

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

59 1.3 Règles ergonomiques Localisation des boutons de commande : arrangement vertical sans (Options), (Aide)

60 1.3 Règles ergonomiques Localisation des boutons de commande : arrangement vertical complet

61 1.3 Règles ergonomiques Localisation des boutons de commande : arrangement horizontal sans (Options), (Aide)

62 1.3 Règles ergonomiques Localisation des boutons de commande : arrangement horizontal complet

63 1.3 Règles ergonomiques Localisation des boutons de commande : arrangement horizontal avec un long texte

64 1.3 Règles ergonomiques Formattage d’un paragraphe : première proposition de solution

65 1.3 Règles ergonomiques Formattage d’un paragraphe: deuxième proposition de solution

66 1.3 Règles ergonomiques Concep- tion des icônes

67 1.3 Règles ergonomiques Conception des fenêtres

68 1.3 Règles ergonomiques Concep- tion des messages
-- Système d'expédition de messages -- Concep- tion des messages SYSTEME #22 - TdT 27 mars 1984 * * * * AVERTISSEMENT * * * * LES UTILISATEURS DE TdT SONT PRIES DE NE PAS IMPRIMER DES COPIES MULTIPLES DE DOCUMENTS DE GRANDE TAILLE (100 PAGES OU PLUS) SUR L'IMPRIMANTE 6670 OU SUR L'IMPRIMANTE LIGNE CAR CELA CAUSE UN RETARD SUR CES IMPRIMANTES/// SI VOUS AVEZ BESOIN DE COPIES MULTIPLES, VEUIL- LEZ QUITTER APRES AVOIR SOUMIS VOTRE REQUETE A 16H30. MERCI. * * * * * * UTILISATEURS DU RESEAU -- Veuillez rapporter tout problème relatif au réseau au Centre de Calcul X222. Les questions et problèmes doivent être adressés au CC, X222. Appuyez sur RETURN pour venir au menu des ...

69 1.3 Règles ergonomiques Proposi- tion de solution
SYSTEME D'EXPEDITION DES MESSAGES mars 1984 Utilisateurs du traitement de texte : Veuillez NE PAS imprimer des copies multiples de documents importants (plus de 100 pages imprimées) durant l'horaire de travail normal. De telles impressions ralentissent le service pour tous les utilisateurs. Si vous avez besoin d'une impression volumineuse, soumettez votre requête à 16h30 avant de quitter. Vos états imprimés seront prêts pour le lendemain. Utilisateurs du réseau : toute question relative au réseau doit être adressée au Centre de Calcul, bureau x222. * Appuyer sur [Barre d'espace] pour afficher le menu des applications

70 1.3 Règles ergonomiques Conception de la mise en évidence

71 1.3 Règles ergonomiques Mise en évidence par la taille (maximum 3)
gggggggggggggggggggggggggggg Taille 1 (petit) Taille 2 (normal) Taille 3 (mis en évidence)

72 1.3 Règles ergonomiques Mise en évidence par les symboles (max. 5)

73 1.3 Règles ergonomiques Mise en évidence par le contraste (maximum 3)
Video normal Video inversé

74 1.3 Règles ergonomiques Mise en évidence par la texture (max. 4)

75 1.3 Règles ergonomiques Eviter les vibrations

76 1.3 Règles ergonomiques Mise en évidence par la couleur (de 6 à 8)

77 1.3 Règles ergonomiques Synthèses additives et soustractive
Utiliser des couleurs opposées Jaune sur fond bleu Jaune sur fond rouge Bleu sur fond blanc Rouge sur magenta Cyan sur fond vert Bleu sur fond noir

78 1.3 Règles ergonomiques Les meilleures combinaisons de couleurs Blanc
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait fin et texte Bleu (94%) Noir (63%) Rouge (25%) Blanc (75%) Jaune (63%) Jaune (75%) Blanc (56%) Noir (44%) Noir (100%) Bleu (56%) Rouge (25%) Blanc (75%) Jaune (63%) Cyan (25%) Bleu (69%) Noir (56%) Rouge (37%) Noir (63%) Blanc (56%) Bleu (44%) Rouge (63%) Bleu (63%) Noir (56%)

79 1.3 Règles ergonomiques Les meilleures combinaisons de couleurs Blanc
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait épais et panneaux Noir (69%) Bleu (63%) Rouge (31%) Jaune (69%) Blanc (50%) Vert (25%) Noir (50%) Jaune (44%) Blanc (44%) Noir (69%) Rouge (63%) Bleu (31%) Jaune (38%) Magenta (31%) Noir (31%) Rouge (56%) Bleu (50%) Noir (44%) Bleu (50%) Noir (44%) Jaune (25%) Rouge (75%) Bleu (63%) Noir (50%)

80 1.3 Règles ergonomiques Les plus mauvaises combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait fin et texte Jaune (100%) Cyan (94%) Bleu (87%) Rouge (37%) Magenta (25%) Magenta (81%) Bleu (44%) Vert (25%) Cyan (81%) Magenta (50%) Jaune (37%) Vert (62%) Rouge (37%) Noir (37%) Vert (81%) Jaune (75%) Blanc (31%) Vert (75%) Rouge (56%) Cyan (44%) Blanc (81%) Cyan (81%)

81 1.3 Règles ergonomiques Les plus mauvaises combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait épais et panneaux Jaune (95%) Cyan (75%) Bleu (81%) Magenta (31%) Magenta (69%) Bleu (50%) Vert (37%) Cyan (81%)Magenta (44%) Jaune (44%) Vert (44%) Rouge (31%) Noir (31%) Jaune (69%) Vert (62%) Blanc (56%) Cyan (81%) Vert (69%) Rouge (44%) Blanc (81%) Cyan (56%) Vert (25%)

82 1.3 Règles ergonomiques Les meilleurs contrastes à deux :
Rouge-turquoise Rouge-Cyan Bleu-Jaune Vert-Rose Vert-Magenta

83 1.3 Règles ergonomiques La meilleure combinaison à trois :
Rouge-Bleu-Vert La meilleure combinaison à quatre : Rouge-Bleu-Vert-Blanc

84 Séance 4. L’ergonomie du Web
Vocabulaire 1. Conception d'un site Web 2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

85 Cette page est-elle ergonomique?

86 Vocabulaire Concepts site = ensemble de pages liens
intra-page : extra-page : intra-site : extra-site : vaguemestre = webmaster  auteur = author navigateur = browser visiteur = reader

87 Vocabulaire Règle ergonomique définition motif critère ergonomique
exemple positif exemple négatif exception

88 Vocabulaire 8 Critères ergonomiques compatibilité cohérence
charge de travail adaptativité contrôle du dialogue représentativité guidage gestion des erreurs

89 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

90 Conception d'un site Web (11)
Le contenu informationnel d'un site doit être représentatif Pages sans but Pages de style "famille" Table des matières Informations pertinentes

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

92 Conception globale d'un site (13)
La conception d'un site doit être cohérente Les mêmes éléments à différents endroits, différents éléments pour le même objet Les mêmes éléments aux mêmes endroits dans la page

93 Conception globale d'un site (14)
Penser à une structuration appropriée du site Sites de première génération Sites de deuxième génération Sites de troisième génération

94 Conception globale d'un site (15)
Utiliser la hiérarchie avec soin

95 Conception globale d'un site (16)
Utiliser la clôture transitive Page sans titre, sans sous-titre Titre de la page Sous-titre pour les grandes catégories Sous-sous-titre pour les paragraphes

96 Conception globale d'un site (17)
Utiliser des sous-menus pour les sites volumineux Menu complet Menu avec sous-menu

97 Conception globale d'un site (18)
Prévoir nécessairement une page d'accueil Pas de page d'accueil exagérée La page d'accueil doit - servir de menu principal - autoriser des accès multiples Page d'accueil Page B Page A Page C

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

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

100 Conception globale d'un site (111)
Prévoir une option d'impression pour les grands sites Prévoir deux versions : - une version écran - une version papier Documents générés par HTML Transit - un ensemble de pages - un fichier unique (PS, PDF, DOC)

101 Conception globale d'un site (112)
Prévoir une section « Nouveautés » évidente Lien vers "Quoi de neuf?" est insuffisant Mettre une partie des nouveautés dans la page d'accueil

102 Conception globale d'un site (113)
Adopter une logique de dénomination du site Eviter Kuala Lumpur 1998 Malaysie Games Exposition Préférer Dept. of Computer Science Univ. of Manchester Academic United Kingdom Smith Publications

103 Conception globale d'un site (114)
Adopter une logique de dénomination des fichiers du site Incohérence linguistique : Bouton_Print.gif Incohérence syntaxique : Bouton_Imprimer_FR.gif avec PrintUK.gif Manque de représentativité : Menu.html Manque de précision : Photo1.jpg, Photo2.jpg, Photo3.jpg BoutonImprimer.gif ButtonPrint.gif MenuPrincipalGestion.html TokyoCiel.jpg, TokyoAéroport.jpg

104 Conception globale d'un site (115)
Adopter une logique d'organisation des fichiers du site Ne pas aller au-delà d'un niveau de hiérarchie Si on a 5 ensembles de pages reliées par une thématique, prévoir 5 répertoires + Images + Transfert

105 Conception globale d'un site (116)
La conception du site doit être appropriée au contexte Le site Horta [poss. min., poss. max.]

106 Conception globale d'un site (117)
La conception d'un site doit supporter plusieurs navigateurs Ne pas utiliser des fonctionnalités supportées par un navigateur et qui ne le sont pas par un autre Détecter le navigateur en JavaScript

107 Conception globale d'un site (118)
La conception d'un site doit viser prioritaire-ment l'ergonomie Refuser les pages inutiles Refuser les pages utiles, mais pas utilisables Refuser les pages sophistiquées technologiquement Evaluateur Bobby

108 Conception globale d'un site (119)
Préparer les pages pour les moteurs de recherche externes Page sans titre, sans indicateur de structure Manières visibles : - <TITLE> ... </TITLE> - <H1>...</H1>, <H2>...</H2>, <H3>...</H3> - Indicateur de structure : Aller à UCL/IAG/Jean Vdd/ - Résumé des activités - Noms de fichiers identifiants Manières invisibles : - balises cachées : ALT="..." - méta-balises : <META NAME="Description" Content="...">

109 Conception globale d'un site (120)
Ajouter un moteur de recherche interne Scanneur ASCII Harvest Indexeur générique pour serveur HTTP : HTGREP Moteur de recherche interne pour un petit site : DIG

110 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

111 Navigation (21) L'accès à l'information doit être rapide
Trop de niveaux dans la hiérarchie Règle des 3 clics

112 Navigation (22) Considérer le temps d'accès à chaque page
Mettre toute l'information d'une fois VRML trop gros Réduire à [30 Ko,50 Ko], quelques une à 70 Ko Avertir le visiteur si le temps sera long

113 Navigation (23) Utiliser une carte du site pour dénoter les relations entre les informations Pas de carte passive Pas de carte complexe Description d'un cirque HotSauce WebTOC Ptolemaeus

114 Navigation (24) Utiliser une image réactive comme carte graphique de navigation Pas de carte sans rapport Carte +/- méta- phorique

115 Navigation (25) Ne pas restreindre la navigation aux graphiques
Pas de liens différents pour accéder à une même information Prévoir des accès multiples - ALT pour les images - menu textuel en fin d'écran - accès transversaux multiples

116 Navigation (26) Inclure des repères de navigation Barre de navigation
Point de ralliement Diagramme global ou local

117 Navigation (27) L'accès à l'information doit être rapide
Ne pas donner le dernier niveau de détail d'emblée L'information la plus importante d'abord Vue panoramique + zoom avant + détails à la demande

118 Navigation (28) Les repères de navigation doivent être cohérents
Incohérence entre la barre et le menu Utiliser les mêmes repères pour les mêmes buts, en les plaçant au même endroit

119 Navigation (29) Les liens doivent pointer vers un contenu informationnel substanciel Pas de lien vers une page incomplète Vérifier que les liens extra-site sont représentatifs, significatifs

120 Navigation (210) Fournir des liens textuels pour chaque page
Pas seulement une carte graphique Liens textuels pour utilisateurs à besoins spéciaux

121 Navigation (211) Les liens textuels doivent être clairs
Texte du lien représentatif - texte du lien = nom du fichier pointé Voici la liste des disques - texte du lien = titre de la page pointée ListeDisques.txt Liste des disques

122 Navigation (212) Les liens textuels doivent être courts
Placer des liens dans un paragraphe suggère le contenu des liens au visiteur ainsi que le contexte dans lequel il peut être parcouru. Placer des liens dans un paragraphe suggère le contenu des liens au visiteur ainsi que le contexte dans lequel il peut être parcouru.

123 Navigation (213) Utiliser "Précédent/Suivant", "Avant/Arrière" avec précaution Confusion entre et Mettre à jour les liens en cas de modification Page n°3 n°2 n°1 Page n°3 n°2 n°1 Page n°3 n°1

124 Navigation (214) Bannir les liens "Cliquez ici"
Cliquez ici pour aller à la page des publications Cliquez ici pour aller à la page de l'IAG Cliquez ici pour aller à la page de l ’UCL Aller à : UCL / IAG / Publications

125 Navigation (215) Interdire les liens "Retourner à..." Bouton
Page d'accueil Page A Page B Page C Page D Page E Premier site Bouton Eviter : revenir, retourner, repartir, annuler, défaire, rebrancher Aller à :... Page 1 Page 2 Page 3 Page 4 Page 5 Deuxième site

126 Navigation (216) Tout visiteur doit distinguer un lien visité d'un lien nouveau Ne pas utiliser jaune et orange Lien visité Lien non visité Lien visité Lien non visité Utiliser les couleurs standards Utiliser des couleurs opposées

127 Navigation (217) Informer le visiteur de la teneur du lien
La cuisine de l'Hôtel de Groesbeeck de Croix La cuisine de l'Hôtel de Groesbeeck de ... (QuickTime VR, 230 Ko, +/- 35 sec. de téléch.) - Indispensable pour le téléchargement de fichiers (WinSite) - Indiquer le type de lien Lien de remplacement Lien de note en bas de page Lien de référence Lien de commande

128 Navigation (218) Utiliser des liens intra-page dans les longues pages
Page "Formation" sans lien Page "Formation" avec lien

129 Navigation (219) Veiller à la maintenance des liens
Liens obsolètes ( , machine,...) Maintenir les liens intra-site corrects Vérifier et corriger les liens extra-site régulièrement

130 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

131 Présentation (31) L'information la plus importante doit être placée en premier lieu Pas de grand logo Pas trop d'informations signalétiques au début Les liens importants doivent apparaître au début de la page

132 Présentation (32) La présentation de toute page doit être cohérente
Un titre de page dans la barre de titre Lien vers les informations du site Lien vers les informations signalétiques Lien vers la page d'accueil Lien vers le moteur de recherche interne Lien vers page de copyright Lien mél. à destination de l'auteur, du vaguemestre

133 Présentation (33) La page d'accueil doit tenir sur un seul écran
Pas de page trop grande : JVDD Page limitée à 640 x 480: CIGER

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

135 Présentation (35) L'information doit être complète sur le même écran
Pas de message réparti sur deux écrans Indiquer que la page continue Tester la présentation sur des configurations différentes

136 Présentation (36) Trancher entre des pages courtes, longues
Utiliser le tableau

137 Présentation (37) Utiliser une grille de présentation
Dessiner la grille sur une recopie d'écran

138 Présentation (38) Utiliser les techniques visuelles Balance
Instabilité Symétrie Asymétrie

139 Présentation (39) Utiliser au maximum les tables WebElements
Mettre BORDER=0 Utiliser les tables de longueur fixe

140 Présentation (310) Les lignes textuelles du contenu informa-tionnel doivent être courtes, structurées Vérifier ce que donne le texte quand le visiteur change de police

141 Présentation (311) Penser aux feuilles de style
Ne pas utiliser les feuilles de style comme si c'était pour un document écrit Cascading Style Sheets pour MS Explorer

142 Présentation (312) Utiliser de l'espacement blanc
Pas de page encombrée Remplir une page avec 30% de texte Utiliser de l'espacement blanc comme alinéa

143 Présentation (313) Etre draconien avec le défilement
Ne pas utiliser de graphique excédant 640 x 480 ou 800 x 600 pixels Eviter les défilements tant horizontaux que verticaux

144 Présentation (314) Les informations liées sémantiquement doivent être présentées conjointement Texte associé le décrivant Texte associé

145 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

146 Formulaires, titres et en-têtes (41)
Les informations à acquérir doivent être présentées dans un formulaire Utiliser une table pour contrôler l'alignement - des champs d'édition - des libellés identificatifs

147 Formulaires, titres et en-têtes (42)
Sélectionner les objets interactifs de manière appropriée Ne pas utiliser un bouton de variation pour une valeur booléenne, une liste défilante pour beaucoup de valeurs Utiliser les chartes graphiques

148 Choix simple [2,3]  [2,3] [4,7] [4,7]  [8,50]  [8,50]  ]50,+[
Dom. inconnu : Domaine connu : Nbre-valeurs- possibles [2,3] Domaine mixte : Nbre-valeurs- possibles  [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles  [8,50] Nbre-valeurs- possibles  [8,50] Nbre-valeurs- possibles  ]50,+[ Nbre-valeurs- possibles ]50,+[

149 Choix multiple [2,3] [2,3] [4,7] [4,7]  [8,50]  [8,50] ]50,+ [
Domaine inconnu : Domaine connu : Domaine mixte : Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [2,3] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles [4,7] Nbre-valeurs- possibles  [8,50] Nbre- valeurs- possibles  [8,50] Nbre-valeurs- possibles ]50,+ [ Nbre-valeurs-possibles ]50,+ [

150 Formulaires, titres et en-têtes (43)
Toute page doit comporter un titre identifiant Page d'accueil IESN Utiliser <H1> Titre identifiant </H1> Utiliser la balise TITLE

151 Formulaires, titres et en-têtes (44)
Utiliser des en-têtes pour accélérer le parcours des informations L'en-tête doit refléter précisément le contenu de l'agrégat

152 Formulaires, titres et en-têtes (45)
Pour les documents structurés, communiquer la structure au visiteur En dessous du titre, indiquer la où la page s'insère Inclure - le nom du document - le titre du chapitre - le titre de la section courante

153 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia

154 Cadres et fenêtres (51) Utiliser les cadres avec parcimonie
Ne pas oublier la clause TARGET=...

155 Cadres et fenêtres (52) Utiliser les fenêtres seulement si nécessaire
Utiliser une carte Fenêtre secondaire pour une vue détaillée, une illustration 7 usages fonctionnels possibles

156 Cadres et fenêtres (53) Le nombre de cadres, de fenêtres doit être limité Effet "lorgnette" Max. 2 fenêtres Max. 3 cadres

157 Cadres et fenêtres (54) Utiliser les cadres, les fenêtres de manière appropriée Eléments globaux, persistants Nom du site + lien vers la page d'accueil dans chaque cadre Cadres pour sur-affichage de texte

158 Cadres et fenêtres (55) Veiller à la taille des cadres et fenêtres

159 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

160 Graphiques (61) Utiliser les graphiques de manière appropriée
Pas de logo d'outils sur la page d'accueil Dans un but spécifique Pour favoriser la navigation Pour dénoter les zones de contenu

161 Graphiques (62) Adjoindre du texte à chaque graphique
Utiliser du texte pour s'assurer que le graphique véhicule bien l'information prévue

162 Graphiques (63) Utiliser le texte alternatif
Attention pour les bulles d'aide OK pour Explorer KO pour Navigator Balise ALT : <IMG SRC="news.gif" ALT="What's new?"> Pour l'indexation par les moteurs externes

163 Graphiques (64) Réutiliser les mêmes graphiques
Utiliser les mêmes icônes, les mêmes logos,...

164 Graphiques (65) Utiliser les graphiques pour représenter les zones du site Utiliser les mêmes graphiques pour les mêmes zones

165 Graphiques (66) Recourir aux graphiques pour les en-têtes
Utiliser les polices de caractères artistiques Garder le texte de l'en-tête dans une couche séparée Recourir à l'anti-aliasing

166 Graphiques (67) Utiliser les graphiques pour les listes
Page d'accueil de CircusWare

167 Graphiques (68) Garder en tête les limites des graphiques

168 Graphiques (69) Utiliser les miniatures
Ne pas redimensionner le graphique dans le code HTML - Sauver l'original sous un nom représentatif : Hotel.jpg - Créer une version réduite en taille - Effectuer un dithering - Enregistrer en GIF de qualité minimale : HotelMin.gif - Lier les 2

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

170 Graphiques (611) Les graphiques doivent être simplifiés
Ne pas utiliser une photo d'ordinateur, une image suffit Lien vers un graphique plus détaillé Cherger un graphique réduit d'abord

171 Graphiques (612) Utiliser les GIF entrelacés, les images fractales
Image non entrelacée Image entrelacée GIF89a Interlaced Entrelacer à partir de 200 x 200

172 Graphiques (613) Ne pas ajouter de bords aux graphiques
Attention aux effets 3D Ne pas enregistrer les graphiques avec bordure Utiliser la balise BORDER=0

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

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

175 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

176 Eléments multimédia (71)
Le type de fond d'écran doit être approprié Utiliser les lignes de l'horizon suivantes Ligne de l'horizon Exemple Signification Basse Attire l'attention vers le ciel, l'abstrait,les valeurs hautes Haute Accentue les problèmes concrets, immédiats Médiane Suggère l'équilibre, la paix, la balance Diagonale Crée une instabilité, un sentiment de mouvement Découpée Suggère dynamisme, changement, voire violence

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

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

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

180 Eléments multimédia Fond d'écran diagonal

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

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

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

184 Eléments multimédia (74)
Sélectionner un fond d'écran aléatoire Pages construites avec un motif pas aléatoire Pages construites avec un motif aléatoire

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

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

187 Eléments multimédia (77)
Tester en vraie grandeur les fonds d'écran

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

189 Eléments multimédia Garder les meilleures combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait fin et texte Bleu (94%) Noir (63%) Rouge (25%) Blanc (75%) Jaune (63%) Jaune (75%) Blanc (56%) Noir (44%) Noir (100%) Bleu (56%) Rouge (25%) Blanc (75%) Jaune (63%) Cyan (25%) Bleu (69%) Noir (56%) Rouge (37%) Noir (63%) Blanc (56%) Bleu (44%) Rouge (63%) Bleu (63%) Noir (56%)

190 Eléments multimédia Garder les meilleures combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait épais et panneaux Noir (69%) Bleu (63%) Rouge (31%) Jaune (69%) Blanc (50%) Vert (25%) Noir (50%) Jaune (44%) Blanc (44%) Noir (69%) Rouge (63%) Bleu (31%) Jaune (38%) Magenta (31%) Noir (31%) Rouge (56%) Bleu (50%) Noir (44%) Bleu (50%) Noir (44%) Jaune (25%) Rouge (75%) Bleu (63%) Noir (50%)

191 Eléments multimédia Ecarter les mauvaises combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait fin et texte Jaune (100%) Cyan (94%) Bleu (87%) Rouge (37%) Magenta (25%) Magenta (81%) Bleu (44%) Vert (25%) Cyan (81%) Magenta (50%) Jaune (37%) Vert (62%) Rouge (37%) Noir (37%) Vert (81%) Jaune (75%) Blanc (31%) Vert (75%) Rouge (56%) Cyan (44%) Blanc (81%) Cyan (81%)

192 Eléments multimédia Ecarter les mauvaises combinaisons de couleurs
Arrière-plan Blanc Noir Rouge Vert Bleu Cyan Magenta Jaune Trait épais et panneaux Jaune (95%) Cyan (75%) Bleu (81%) Magenta (31%) Magenta (69%) Bleu (50%) Vert (37%) Cyan (81%) Magenta (44%) Jaune (44%) Vert (44%) Rouge (31%) Noir (31%) Jaune (69%) Vert (62%) Blanc (56%) Cyan (81%) Vert (69%) Rouge (44%) Blanc (81%) Cyan (56%) Vert (25%)

193 Eléments multimédia Recourir aux meilleurs contrastes à deux
Rouge-Turquoise Rouge-Cyan Bleu-Jaune Vert-Rose Vert-Magenta

194 Eléments multimédia Recourir à la meilleure combinaison à 3
Rouge Bleu Vert Recourir à la meilleure combinaison à 4 Rouge Bleu Vert Blanc

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

196 Eléments multimédia (710)
Réduire la profondeur des couleurs Réduire les GIF en-dessous de 8 bits (256 coul.) Dégrader les JPG Entre 15 et 35 couleurs dans l'histogramme

197 Eléments multimédia (711)
Utiliser les 216 couleurs principales Utiliser la Color Look-Up Table (CLUT) Utiliser le cube des couleurs Utiliser la même palette pour chaque page Balise HEAD dans {00,33,66,99,CC,FF} P. ex. #CCCCFF = bleu clair # = orange moyen

198 Eléments multimédia (712)
Eviter le dithering Ne pas utiliser trop le dithering pour les GIF Utiliser le dithering pour les JPG

199 Eléments multimédia (713)
Tester les couleurs

200 Eléments multimédia (714)
Utiliser les polices sans sérif pour la lecture en ligne Utiliser Arial, Helvetica pour les § Réserver les polices de fantaisie pour les grands titres

201 Eléments multimédia (715)
Prêter attention à la typographie Ne pas utiliser le soulignement N'utiliser l'italique que dans des cas précis Ne pas mettre le texte en MAJUSCULES Utiliser la mise en gras uniquement pour la mise en évidence

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

203 Eléments multimédia (717)
Recourir à des ressources multimédia de manière appropriée - Quand un medium non verbal convient naturellement - Pour toucher un public dont la lecture ne constitue pas la forme privilégiée d'apprentissage - Pour une audience internationale - Pour renforcer l'attention et favoriser la rétention - Pour mettre en évidence un élément sur une page - Pour assurer un retour d'information - Pour dénoter un processus

204 Eléments multimédia Pour une audience internationale (1)

205 Eléments multimédia Pour une audience internationale (2)

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

207 Eléments multimédia (719)
Considérer des animations simples en GIF animé Pas plus de 7 images dans la suite Utiliser GifBuilder

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

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

210 Eléments multimédia (722)
La page courante doit demeurer le centre d'intérêt Ne pas faire figurer conjointement plusieurs éléments multimédia ensemble Office du Tourisme Ecossais

211 Table des matières Vocabulaire 1. Conception d'un site Web
2. Navigation 3. Présentation 4. Formulaires, titres et en-têtes 5. Cadres et fenêtres 6. Graphiques 7. Eléments multimédia 8. Accessibilité

212 Accessibilité (81) Rendre accessibles aux visiteurs handicapés tous les éléments du site Ne pas utiliser de table There is 30% chance that this event will occur Wheater temperature is still increasing tomorrow There is 30% chance that weather temperature this event is still increasing will occur tomorrow

213 Accessibilité (82) Rendre accessibles les caractères et le fond d’écran Ne pas utiliser le rouge et le vert pour des daltoniens Utiliser un codage de couleurs redondant avec des symboles Ecrire en noir sur fond blanc

214 Merci de votre attention!