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

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

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

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é

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

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)

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

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

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é)

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

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

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.

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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é

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

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

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)

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

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

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é

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

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

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

1.3 Règles ergonomiques L’incrustation

1.3 Règles ergonomiques L'incrustation

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

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

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

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

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

1.3 Règles ergonomiques Conception des menus déroulants

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

1.3 Règles ergonomiques Menu "Fichier"

1.3 Règles ergonomiques Menu "Edition"

1.3 Règles ergonomiques Menu "Vue"

1.3 Règles ergonomiques Menu "Options"

1.3 Règles ergonomiques Menu "Aide"

1.3 Règles ergonomiques Solution possible

1.3 Règles ergonomiques Sélection des objets interactifs

1.3 Règles ergonomiques Solution possible

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,+[

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,+[

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

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.

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 : _ _ _ _ _

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

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

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

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

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

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

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

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

1.3 Règles ergonomiques Conception des fenêtres

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 ...

1.3 Règles ergonomiques Proposi- tion de solution 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

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

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)

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

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

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

1.3 Règles ergonomiques Eviter les vibrations

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

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

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%)

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%)

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%)

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%)

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

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

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é

Cette page est-elle ergonomique?

Vocabulaire Concepts site = ensemble de pages liens intra-page : http://www.x.com/.../#signet extra-page : http://www.x.com/source.html intra-site : http://www.x.com/dest.html extra-site : http://www.y.com/dest.html vaguemestre = webmaster  auteur = author navigateur = browser visiteur = reader

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

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

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é

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

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

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

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

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

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

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

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

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

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

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)

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

Conception globale d'un site (113) Adopter une logique de dénomination du site Eviter http://www.kl98.com.my/gamesex Kuala Lumpur 1998 Malaysie Games Exposition Préférer http://www.dcs.cam.ac.uk/smith/publications Dept. of Computer Science Univ. of Manchester Academic United Kingdom Smith Publications

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

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

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

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

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

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="...">

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

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é

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

Navigation (219) 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

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é

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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é

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

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

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,+[

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,+ [

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

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

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

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

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

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

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

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

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

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é

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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é

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

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

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

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

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

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

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

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

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

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

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

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

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

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%)

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%)

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%)

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%)

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

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

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

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

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 #996600 = orange moyen

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

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

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

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

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

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

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

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

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

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

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)

Eléments multimédia (721) 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

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

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é

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

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

Merci de votre attention!