Design et Ergonomie des Sites Web

 découper l'information pour mieux l’assimiler  un texte d'accroche et un lien vers la suite de l'article

Facilitation des échanges

 a minima, contact via email ou formulaire de contact

20

Adaptabilité et Adaptativité

L'adaptabilité

 caractérise la possibilité de personnaliser le site sur intervention de

l'utilisateur(ex: redimensionner les tailles des textes)

L'adaptativité  caractérise

la

possibilité

site web automatiquement sans intervention de l'utilisateur (ex: langage en fonction de la provenance)

personnaliser

de

le

21

Accessibilité (1/3)

Universalité de l'accès

 l'accessibilité est la capacité du site à être consulté universellement, par tout type d'utilisateurs, y compris les malvoyants et non voyants, quelque soit la configuration logicielle et matérielle ou le handicap

Interopérabilité

 le respect de standards (W3C) permet de garantir la la consultation du

site par différents navigateurs

22

Accessibilité (2/3)

Transparence des formats

 les formats utilisés doivent préférentiellement être en mode texte. Ainsi le

HTML sera utilisé préférentiellement au Flash

 les images ou animation ne doivent pas se soustraire aux informations

textuelles (complément visuel)

Légende

 une légende ou un texte de remplacement doivent être prévus en lieu et place des images (attribut alt), pour permettre aux déficients visuels de comprendre le sens de l'image.

23

Accessibilité (3/3)

Choix des couleurs

 les couleurs doivent laisser l'information lisible aux personnes ne

distinguant pas les couleurs correctement

Usage sain des feuilles de style

 l'information doit être accessible sans feuille de style

Contraste adapté

 contraste entre couleur de fond et texte

Taille des polices modifiable

 taille des polices adaptable par l’utilisateur

24

Autres sources de critères ergonomiques

Il existe d'autres ensembles de critères reconnus

 Heuristiques de Nielsen. Keith Instone en a préparé une version

commentée, dédiée au web.

 La norme ISO 9241-10 s'intéresse aussi à l'ergonomie, mais ne semble

pas aussi efficace que les Critères Ergonomiques

 D'autres normes ISO concernent aussi l'utilisabilité en général.

Il existe aussi de nombreuses recommandations concernant spécifiquement le web.

25

Partie 2 :Les méthodologies d’évaluation ergonomique

L’évaluation experte

Les tests d’utilisabilité

comparaison et choix de la méthode d’évaluation

26

L’évaluation ergonomique

Schéma d’évaluation

Utilité Utilité capacité fonctionnelle performances du système qualité d'assistance

Utilisabilité

Utilité

facilités d'apprentissage d'utilisation de documentation

Il existe deux grands types de méthodologies pour réaliser l’évaluation ergonomique des interfaces Web :

27

1) l’évaluation experte 2) les tests d’utilisabilité.

L’évaluation experte(1/3)

 L’évaluation experte, aussi appelée« inspection ergonomique »,est une évaluation de la conformité d’une interface en regard de principes ergonomiques de base (ou principes d’utilisabilité), que l’on appelle des critères ergonomiques

 L’évaluation experte est idéalement réalisée par plus d’un évaluateur, qui sont des experts en ergonomie des interfaces ou en utilisabilité de sites Web.

28

L’évaluation experte(2/3)

 L’utilisation de listes de critères ergonomiques permet d’éviter les pièges de la subjectivité et des goûts personnels en donnant un cadre de travail objectif. Des références sont fournies en annexe sur des listes de critères ergonomiques.

 Il peut

s’avérer utile d’effectuer des évaluations ergonomiques comparatives entre plusieurs sites, soit pour valider des choix de conception soit pour évaluer la qualité ergonomique d’un site par rapport aux sites concurrents.

29

L’évaluation experte(3/ 3)

les problèmes très efficace pour L’évaluation experte est ergonomiques majeurs d’un site Web, par exemple les problèmes de lisibilité (caractères trop petits, mauvais contraste des couleurs, etc.), les problèmes de navigation (pages orphelines, niveaux de profondeur trop nombreux, etc.), ou d’organisation des contenus (noms des boutons inappropriés, mauvais découpage de l’information, etc.).

repérer

30

Les tests d’utilisabilité

 Cette méthode consiste à faire tester l’interface à des utilisateurs actuels ou futurs auxquels on soumet des scénarios de consultation qui sont directement liés à leur tâche. Les utilisateurs sélectionnés vont donc utiliser le site Web (ou un prototype du site) et réaliser des tâches précises.

 Ces tâches leur seront présentées sous la forme de consignes. Le nombre de participants aux tests varie selon l’ampleur du site à évaluer et la diversité des profils d’utilisateurs visés.

31

Exemple

Voici un exemple de scénario pouvant servir à tester le site Web du Centre de formation Khawarizmi : « Vous désirez suivre un cours sur la création de pages Web. Vous êtes disponibles en décembre et souhaitez prendre ce cours à Tunis ».

L’analyse porte sur les résultats aux tests (pourcentage de réussite, durée d’exécution, etc.), les réponses à des questionnaires et, le cas échéant, l’analyse de l’enregistrement vidéo des séquences de tests.

32

Avantages et inconvénients de l’évaluation experte et des tests d’utilisabilité

33

Conclusion

Les deux méthodes permettent de détecter des problèmes de type différent.

 Les tests d’utilisabilité réalisés auprès d’un échantillon représentatif d’utilisateurs sont aussi très efficaces pour repérer les défauts du site sur le plan ergonomique mais leur avantage essentiel est qu’ils permettent de vérifier la conformité du site Web avec la tâche et les besoins des utilisateurs.

 l’évaluation experte détecte les problèmes ergonomiques généraux d’un site Web tandis que les tests d’utilisabilité mettent à jour des problèmes plus précis et plus spécifiques qui sont directement liés à la tâche des utilisateurs .

34

Les deux méthodes sont complémentaires et on recommande de réaliser les deux.

Partie 3:Règles et principes d’utilisabilité

Les fonctions de La page d’accueil

Le contenu de la page d’accueil

La présentation des pages

35

Les fonctions de la page d’accueil(1/ 3)

Fonction de « menu » : forme la plus courante qui présente essentiellement la liste des options de navigation à la manière d’une table des matières, le nom et le logo du site et, le plus souvent, une illustration visuelle.

Fonction d’« annonce de nouvelles » : assure une fonction d’annonce de nouvelles comparable à la Une dans un journal imprimé; ce type de page d’accueil est conseillé pour fidéliser les visiteurs en assurant une consultation régulière du site.

36/34

Les fonctions de la page d’accueil(2/3)

Fonction d’« aiguillage » ou de « filtre » : dans le cas de sites très volumineux, la fonction d’aiguillage permet de diriger les visiteurs dans les sections du site en fonction de leur catégorie d’appartenance (par ex. : Professeurs; Étudiants;Personnel administratif; etc.). Ce type de page d’accueil permet également de filtrer les visiteurs dans le cas d’accès réservés avec l’utilisation de mots de passe par exemple.

37/34

Les fonctions de la page d’accueil(3/3)

Fonction de « couverture » : à la manière d’une couverture de livre, ce type de page d’accueil présente une illustration (éventuellement une animation) et de brèves indications sur le contenu du site. Cette page possède une valeur surtout esthétique et faiblement informative. Elle pourra être recommandée dans certains cas, par exemple un site qui présente des œuvres d’art, mais elle sera fortement déconseillée dans le cas de sites qui sont fréquemment consultés, par exemple un moteur de recherche ou un répertoire, car elle ajoute un niveau intermédiaire inutile.

38/34

Contenu de la page d’accueil

RÈGLE :Le logo et le nom de la compagnie doivent constituer les éléments graphiques les plus visibles de la page d’accueil, et la page doit présenter de façon claire la liste des sections du site (sous la forme d’options de navigation) de façon à ce que l’utilisateur puisse se diriger dans la section la plus probable de contenir l’information qu’il recherche.

CONSEIL :La page d’accueil constitue l’entrée du site et donne le ton sur le plan visuel, d’où l’importance de travailler l’aspect graphique de cette page en particulier. Un compromis doit être trouvé entre une page d’accueil attrayante visuellement mais longue à afficher et une page peu travaillée sur le plan visuel mais rapide à afficher.

39/34

Contenu de la page d’accueil

ERREUR À ÉVITER: Une page d’accueil avec des graphiques et/ou des animations en grand nombre sera trop longue à afficher voire elle sera inaccessible pour les utilisateurs dont l’équipement ne permet pas la visualisation de pages trop « lourdes ».

Style de la page d’accueil RÈGLE: L’aspect visuel de la page d’accueil doit être cohérent avec celui des autres pages afin d’assurer une unité graphique dans l’ensemble du site Web. Pour cela, la page doit respecter la charte graphique définie préalablement lors de la conception.

40/34

Longueur de la page d’accueil

RÈGLE: Les informations principales de la page d’accueil doivent pouvoir être vues sur un écran sans qu’il soit nécessaire de faire défiler la page. Il s’agit des informations qui permettent d’identifier le site, c’est-à-dire le logo ou le nom de la compagnie, et des informations qui permettent à l’utilisateur d’utiliser le site, c’est-à-dire les éléments de navigation.

41/34

Présentation des pages

L’information doit être présentée de façon claire, simple et cohérente sur toutes les pages du site, et la mise en page doit faciliter le décodage rapide de l’information par l’utilisateur. Toutefois, il faut garder en tête que la présentation des pages Web varie selon la plate-forme, la taille et la définition de l’écran, le navigateur, la version du navigateur, et enfin, les équipements des utilisateurs.

42/34

Présentation conforme à une charte graphique

RÈGLE: Les pages doivent être présentées de façon cohérente conformément à une charte graphique définie préalablement lors de l’étape de conception. La charte graphique permet d’uniformiser la présentation visuelle des pages dans tout le site en définissant des choix fixes de styles, de polices de caractères, de couleurs, etc.

CONSEIL :L’utilisation des feuilles de style (cascading style sheet) permet d’obtenir une présentation homogène du texte dans tout le site en plus d’optimiser considérablement le travail de mise à jour.

43/34

Choix d’une métaphore

RÈGLE :La métaphore utilisée doit être pertinente en regard du contenu du site. L’utilisation d’une métaphore remplit deux fonctions : elle sert à fournir un cadre graphique unifié dans tout le site et elle peut favoriser, si elle est pertinente, la compréhension du contenu du site par l’utilisateur. À titre d’exemple, l’utilisation du dessin d’un chariot de supermarché pour la fonction du choix d’articles est en passe de devenir une convention dans les sites de commerce électronique.

44/34

Polices de caractères

RÈGLE :Le nombre de polices de caractères utilisées dans le site ne doit pas dépasser quatre; on choisira de préférence de s’en tenir à trois polices différentes. Chaque police doit remplir une fonction distincte : une pour les titres, l’autre pour les boutons, etc. Par ailleurs, il convient de choisir les plates-formes des polices disponibles en standard sur (PC,Macintosh, Sun, etc.). sans recommandé de privilégier Il CONSEIL: empattement comme Arial,Helvetica ou Verdana qui offrent une bonne visibilité. Attention à vérifier l’effet visuel des polices choisies sur différentes plates-formes, car une même police peut produire des affichages différents selon les équipements.

les polices

toutes

est

45/34

Taille des caractères

RÈGLE: La taille des caractères du texte principal doit être de douze points. Les petites tailles, de dix points ou moins, doivent être réservées aux notes de bas de page, à certains éléments de navigation ou à d’autres informations comme la mention des droits d’auteur, de la date de mise à jour, etc.

CONSEIL :Il est recommandé ne pas utiliser de taille absolue de façon à toujours laisser la possibilité l’utilisateur d’augmenter ou de diminuer la taille des caractères.

46/34

Attributs et styles

le cas d’une énumération ou pour

RÈGLE: L’utilisation des majuscules doit être évitée pour du plein texte car elles nuisent à la lisibilité. La majuscule est réservée à la première lettre signaler un d’une phrase, dans avertissement. Par ailleurs, le soulignement doit être réservé aux liens hypertextes. CONSEIL :Il est recommandé d’utiliser les variations de polices, de taille de caractère, d’attribut (ex. : majuscule) et de style (ex. : gras) pour attirer l’attention et non pas seulement par souci esthétique. À ne pas oublier : l’utilisateur a toujours le dernier mot concernant la sélection des polices et des tailles de caractère.

47/34

Fonctions des couleurs

RÈGLE :En plus d’améliorer l’aspect visuel des pages, l’utilisation des couleurs doit permettre de faciliter la lecture et le décodage des pages par l’utilisateur. Les couleurs doivent être utilisées soit pour associer des éléments, c’est-à-dire que deux éléments de même couleur seront perçus comme de même type, soit pour les dissocier, c’est-à-dire qu’un élément de couleur différente attirera l’attention des utilisateurs et sera perçu comme différent des autres. CONSEIL: Dans la mesure où 10 à 12 % des utilisateurs ont des troubles variés dans la perception des couleurs17, la couleur ne peut être le seul système de codage de l’information. On peut utiliser en revanche la forme, la taille, la disposition, etc.

48/34

Choix des codes couleurs

RÈGLE: Les conventions en matière de codes couleurs doivent être respectées. Par exemple, pour l’Amérique du Nord, le rouge signifie « arrêt » ou « danger », le vert, « départ »ou « repos », etc.

CONSEIL :Il est recommandé de réserver les couleurs vives pour attirer et capter l’attention, par exemple, le rouge est utile pour signaler des champs de saisie obligatoires.

49/34

Nombre de couleurs

RÈGLE :Le nombre de couleurs maximal par page ne doit pas dépasser six couleurs car au-delà elles peuvent ralentir le repérage de l’information et causer une plus grande fatigue visuelle chez l’utilisateur. CONSEIL: Dans la mesure du possible, on recommande de s’en tenir à quatre couleurs en plus du noir et du blanc dans un siteWeb. ERREUR À ÉVITER :Un site Web trop coloré ou dans lequel les couleurs sans cohérence risque de nuire considérablement à sa sont utilisées consultation par les utilisateurs qui y verront soit un défaut de conception soit une source d’irritation.

50/34

Contraste entre les couleurs

RÈGLE: Une différence de contraste de 90 % est requise entre le premier plan (le texte) et :l’arrière plan (le fond) pour garantir une bonne lisibilité. CONSEIL: Certaines combinaisons de couleurs sont à éviter comme les lettres jaunes sur fond blanc, les lettres rouges ou bleues sur fond noir, etc.; par exemple, un message d’erreur en rouge pur sur fond noir sera difficile à lire. CONSEIL: Un test pratique pour évaluer la qualité du contraste consiste à visualiser les pages sur un écran monochrome. Les couleurs seront alors transformées en niveaux de gris. Par ailleurs, il est recommandé de toujours vérifier le résultat de l’impression d’une page avant d’arrêter les choix de couleurs.

51/34

Fonds texturés ou avec motifs

RÈGLE :L’utilisation de fonds texturés ou avec des motifs doit être évitée car ils peuvent nuire à la lisibilité du texte. Le cas échéant, les fonds peuvent comporter des textures ou des motifs subtils.

CONSEIL :On recommande d’éviter une couleur de fond foncée car elle fatigue l’oeil et peut mal il est recommandé de vérifier le résultat de l’impression d’un fond avant d’en arrêter le choix.

s’imprimer. Par ailleurs,

52/34

Présentation conforme aux règles de mise en page sur le Web

RÈGLE: Les pages doivent être présentées clairement et de la même façon sur toutes les pages de façon à ce que l’utilisateur repère rapidement les différents types d’information présentés dans la page et qu’il identifie en un coup d’oeil le site ou les sections du site dans lesquelles il se trouve.

CONSEIL: Il est recommandé de définir les règles de mise en page au préalable lors de l’étape de la conception et de tester la mise en page choisie avec un utilisateur. Celui-ci doit pouvoir distinguer en un coup d’oeil les éléments de navigation du contenu informationnel ou de la publicité.

53/34

Utilisation d’une grille de présentation(1/3)

RÈGLE: L’information doit être présentée de façon structurée, c’est-à- sur les axes dire qu’elle doit être séparée visuellement en blocs horizontaux et verticaux. Par exemple, les informations de navigation sont disposées sur un bandeau vertical dans la partie gauche de la page, le texte occupe la partie centrale de la page et il se distingue des éléments de navigation par son fond blanc. CONSEIL: Il est recommandé de positionner le logo en haut à gauche de la barre de navigation soit verticalement à gauche, soit la page et horizontalement en haut. Placer la barre de navigation en bas peut entraîner des erreurs de navigation chez les utilisateurs.

54/34

Utilisation d’une grille de présentation(2/ 3)

En revanche, on pourra répéter les principales fonctions de navigation sous forme de liens en bas de la page. Ceci s’applique tout particulièrement dans le cas de longues pages d’information. CONSEIL :Utiliser les tableaux pour organiser l’information à l’écran (en rendant les bordures transparentes). CONSEIL: Éviter l’utilisation de cadres car ils posent plusieurs problèmes : pour problème l’enregistrement de signet car l’URL affichée n’est pas toujours celle de la page dans le cadre; problème de perte d’espace dû à la présence de barres de défilement; difficulté d’impression car un seul cadre peut être imprimé à la fois; etc.

compatibilité

navigateurs;

problème

avec

les

de

55/34

Utilisation d’une grille de présentation(3/3)

CONSEIL :En cas d’utilisation des cadres, vérifier leur bonne impression et suivre les recommandations suivantes : rendre la bordure invisible pour libérer des pixels; s’assurer que l’URL affichée est la bonne; prévoir une version alternative du site sans cadre.

ERREUR À ÉVITER :Placer la barre de navigation uniquement en bas de la page, en dehors du champ de vision pour les utilisateurs ayant de petits écrans.

56/34

Longueur des pages(1/2)

imprimées(incluant

RÈGLE: Les pages doivent avoir une longueur moyenne équivalente à deux les cas les graphiques et pages particuliers. Les pages doivent être courtes pour minimiser le besoin de défilement, maximiser la visibilité des contenus et minimiser les temps de téléchargement. De plus, les pages doivent pouvoir être vues – en largeur – entièrement à l’écran sans qu’il faire défiler horizontalement.

soit nécessaire de les

tableaux), hormis

57/34

Longueur des pages(2/2)

CONSEIL :Dans certains cas, une page longue plutôt qu’une succession de pages courtes sera préférée, par exemple dans le cas d’un document fréquemment consulté ou voué à être fréquemment imprimé. Dans le dernier cas, l’utilisation de fichiers PDF peut constituer une alternative à la page HTML.

CONSEIL :Les pages qui doivent impérativement être courtes sont la page d’accueil, les autres pages de menus ou sous-menus, et les pages qui contiennent des graphiques de grande taille car celles-ci sont généralement plus « lourdes » donc plus longues à télécharger.

58/34

Présentation des textes(1/3)

RÈGLE :Le texte doit être présenté de façon claire et aérée. Il doit être découpé en petites unités, c’est-à-dire en paragraphes courts qui sont séparés par des titres et sous-titres. La règle est de scinder un texte en deux ou trois niveaux d’emboîtement sous-section). Par ailleurs, le texte doit être aligné à gauche.

(section, sous-section, sous

CONSEIL: La présentation des éléments d’information en listes, par exemple en ordre alphabétique et en colonnes, ou en tableaux est recommandée pour en faciliter la lecture.

59/34

Présentation des textes(2/3)

CONSEIL :Dans le cas de textes préexistants, on doit penser que la lecture à l’écran requiert une réécriture pour adapter le texte au médium électronique (phrases courtes, petits paragraphes, etc.).

CONSEIL :En cas de textes denses, il est préférable d’utiliser des fichiers téléchargeables en format PDF plutôt que des pages HTML. Si les documents à télécharger sont volumineux, il est recommandé d’indiquer des mots clés ou d’ajouter un bref résumé afin que l’utilisateur se fasse une idée claire du contenu du document qu’il s’apprête à télécharger.

60/34

Présentation des textes(3/3)

ERREUR À ÉVITER: L’utilisation de fichiers PDF doit être réservée à des documents qui sont destinés à être lus en version imprimée uniquement car la lecture de fichiers PDF à l’écran pose divers problèmes (fenêtre trop petite, taille de caractère trop petite, fichier long à s’afficher, etc.).

ERREUR À ÉVITER: Un texte justifié à droite ou centré sera lu moins rapidement qu’un texte justifié à gauche (pour les pays dans lesquels la lecture se fait de gauche à droite).

61/34

Présentation des images (1/2)

RÈGLE: Les images et les graphiques doivent pouvoir être vus en totalité à l’intérieur d’une fenêtre d’écran. De plus, les noms ou titres des images et graphiques doivent être explicites et chaque élément doit avoir un équivalent texte, surtout lorsque son contenu informationnel est capital pour la bonne compréhension du contenu de la page.

CONSEIL :Dans le cas d’images ou de graphiques de grande taille, il est préférable d’utiliser des fichiers téléchargeables en format PDF ou bien de prévoir leur affichage sur une nouvelle page.

62/34

Présentation des images(2/2)

CONSEIL :Dans le cas d’un grand nombre d’images, il est préférable de les présenter sous la forme de détail ou en format réduit plutôt qu’en taille réelle afin de minimiser le délais d’affichage de la page tout en offrant à l’utilisateur la possibilité de faire des sélections. il est conseillé de le cas d’images de grande taille, CONSEIL: Dans mentionner pour chacune d’elle le format, la taille voire le temps d’affichage estimé en fonction du type d’équipement des utilisateurs visés. ERREUR À ÉVITER :La présence d’images en grand nombre et/ou d’images de grande taille sur un site risque d’augmenter la durée d’affichage des pages, ce qui peut nuire considérablement à sa consultation par les utilisateurs.

63/34

Identification des pages

RÈGLE: Chaque page doit comporter une signature, c’est-à-dire des éléments informationnels qui permettent d’identifier rapidement le site consulté.

CONSEIL: La signature peut contenir : le nom du site ou de la compagnie ou encore de l’auteur du contenu; l’URL de la page (ou l’URL de la page d’accueil); la date de création ou de mise à jour du contenu de la page; la mention des droits réservés (copyrights).

64/34

Répartition des contenus dans la page

RÈGLE :Le contenu informationnel doit occuper entre 50 % (au minimum) et 80 % de l’espace total de la page. Les éléments de navigation doivent occuper au plus 20 % sauf dans le cas de la page d’accueil où ces informations peuvent occuper 50 % de l’espace. La publicité doit être considérée comme partie prenante de l’espace réservé à la navigation .

CONSEIL: Un site répondra d’autant mieux aux besoins des utilisateurs qu’il accordera la priorité au contenu informationnel sur les informations de navigation ou sur la publicité.

65/34

Hiérarchisation de l’information

RÈGLE :L’information la plus importante de la page, incluant les liens hypertextes principaux, doit être visible en premier, et sans qu’il soit nécessaire de faire défiler la page. CONSEIL :Dans la mesure du possible, disposer les informations par ordre d’importance et dans le sens de la lecture, par exemple de gauche à droite pour les pays occidentaux. CONSEIL: Dans le cas où les utilisateurs sont équipés de moniteurs de 15 pouces, il est préférable de placer les informations importantes dans un bandeau de 4 pouces (10 cm) en partant du haut car le haut de la page s’affichera en premier.

66/34

Partie 4: La charte graphique du site Web

Définition Intérêts de la charte graphique Les règles de la charte Le contenu d’une charte graphique papier Les éléments de la charte Internet

67

Définition de la charte graphique

La charte graphique est un document de travail qui contient l'ensemble signes graphiques qui règles des fondamentales d'utilisation des constituent l'identité visuelle d'une organisation, d'un projet, d'une entreprise.

Le but de la charte graphique est de conserver une cohérence dans les réalisations d'une même organisation, projet ou entreprise.

68/24

Intérêts de la charte graphique

au récepteur d'identifier

charte graphique permet

L'identité graphique reste intacte quelles que soient les réalisations graphiques, afin que l'organisation, le projet ou l'entreprise - qui sont une somme d'individualités - parle « d'une seule voix ». facilement La l'émetteur et, par habitude si la cohérence est respectée, de se repérer visuellement dans les différentes réalisations graphiques, et au sein d'un même support graphique (ce qui facilite la lecture). N.B. : Une charte graphique bien conçue doit laisser suffisamment de liberté en constituant des règles souples, c'est-à dire en évitant les interdictions, et en envisageant le maximum de contextes où ces règles doivent s'appliquer.

69/24

Intérêts de la charte graphique

Charte graphique internet = règles (accessibilité, lisibilité, ergonomie) + identité graphique

L'identité graphique doit prendre en considération :

 la sémantique des couleurs : le blanc qui symbolise la pureté pour les

occidentaux, évoque le deuil pour les asiatiques.

 le vécu collectif, les références historiques.  l'imaginaire populaire lié à la culture d’appartenance : en occident, l'araignée peut porter malheur ; en Inde, elle est symbole de liberté car elle peut descendre, mais surtout s'élever le long de son fil.

70/24

Les règles de la charte

a) Accessibilité choix du nom de domaine, compatibilité des navigateurs, choix des applications, standards W3C (ensemble des standards web dans lequel on retrouve, entre autres, le WAI qui est le standard d'accessibilité au public handicapé)… Au départ de votre projet, se posent 3 questions qui vont construire les bases de votre site :

- "A quoi sert le site ?" - "Quels sont les contenus proposés?" - "Comment faire en sorte qu'ils soient

accessibles à tous ? »

71/24

A) Accessibilité

Le simple fait de se poser ces questions conduit à analyser et à hiérarchiser les contenus, à les trier, à soigner leur expression et leur compréhension.

le plus

souvent à rationaliser les Cette réflexion conduit contenus au profit de tous et induit une séparation du fond et de la forme qui permet d'harmoniser les modes de navigation sur l'ensemble du site, même si ses contenus sont divers, procurant ainsi un net gain ergonomique.

72/24

B) Lisibilité

Votre nom, votre logo et l’objet de votre site , Taille du site : actuellement le standard est de 960 px de largeur , Taille des caractères de police et largeur des paragraphes : le conseil est de 100 caractères par ligne (espaces compris)

Choix des couleurs de fond et des textes; Densité des paragraphes : largeur, absence d'ancres ; lisibilité des titres sur fond bleu.

73/24

C) Ergonomie = facilité d’utilisation

Une arborescence logique adaptée à un internaute non-averti,

Le menu : rapidement repérable, mot clairs et concis,

Facilité de navigation d'une page à l'autre, possibilité de revenir sur une page précédente, possibilité de revenir au haut de page…

Conseil : l'internaute doit trouver en 3 clics l'information qu'il cherche.

74/24

Le contenu d’une charte graphique papier(1/2)

Il ne s'agit pas d'appliquer les codes dans leur intégralité mais d'en sélectionner quelques-uns afin que tout nouveau document émis par la structure participe à la construction de son image. La charte graphique s'applique à définir : 1) Le logotype : ses couleurs, sa position dans la page sur tous les supports (papier à en-tête, documents officiels, plaquettes, dossiers et chemises, véhicule, etc.), ses déclinaisons. 2) Les polices de caractères utilisées dans les documents afin de permettre de créer différents niveaux de textes et d'apporter un bon confort de lecture.

75/24

Le contenu d’une charte graphique papier(2/2)

3) Les jeux de couleurs déclinables sur les différents supports : on crée une palette de 5 couleurs de base par exemple. 4) L'utilisation des éléments graphiques tels que les filigranes, courbes et traits spécifiques à l'entreprise... 5) Les principes du choix des images et des illustrations. N.B. : Parmi les problèmes que doit prendre en considération la charte graphique, citons la photocopie et la télécopie :les documents doivent résister à ces traitements en restant lisibles et identifiables.

76/24

Le contenu d’une charte graphique internet/intranet

La charte graphique d’un site permet de définir la position des différents éléments qui constituent les principales pages d'un site avant la programmation de celles-ci.

Le but, en plus des éléments de la charte papier, est de valider les fondations de votre site internet : accessibilité, lisibilité, ergonomie

77/24

A) Le gabarit

Très important car c'est le format de votre site et notamment sa largeur qu'il sera difficile de le changer ultérieurement sans avoir à modifier de nombreux autres éléments qui en découlent : la largeur du bandeau, la largeur de vos contenus textes, la taille des icônes...

Conseil : actuellement, le standard est de 960px de largeur car la majorité de nos écrans sont des 21 pouces soit 1024 px de large. Pour vous aider, prenez une feuille papier et disposez les différents éléments de votre site en ayant en tête que vous fonctionnez comme si c'était un tableau dans lequel on remplit des cellules.

78/24

B)Les couleurs

Plaire est une affaire de goût, et votre site internet ne pourra pas plaire à tout le monde. L’important est de vous assurer que votre choix colorimétrique est lisible, pour cela, vous pouvez consulter des sites spécialisés de la couleur et accords chromatiques :

 www.morecrayons.com/palettes/webSmart/colorcube.php : palette

couleurs…

 www.pourpre.com : perception des couleurs, nuanciers…

Conseil : Les couleurs doivent être au service de la lisibilité et de la convivialité. Exemple : http://www.civam.org> Univers convivial, apaisant mais au détriment de la lisibilité du contenu.

79/24

C)Le bandeau

Il comportera votre logo, votre nom et l'objet de votre site. On peut aussi y trouver les menus rapides (Aide, Plan, contact...)

Conseil : un bandeau trop chargé ou comportant trop d'animations fait fuir l'internaute. Une image trop lourde ralentit l'ouverture des pages.

80/24

D) Les menus

Les menus commun se placent généralement en haut à gauche car c'est le seul endroit toujours visible peut importe la résolution de votre écran.

La clarté des mots et l'espacement entre les rubriques est un point essentiel à l'ergonomie de la navigation.

Conseil : un sous-menu maximum pour chaque rubrique. Attention au choix du déroulement des sous-menus, ils sont parfois mal gérés par certains navigateu