des sites Web de l Université Laval

Transcription

1 Les Normes d harmonisation des sites Web de l Université Laval AIDE MÉMOIRE Ce document s adresse à tous les intervenants impliqués dans la production d un site Web. Martin Boucher Responsable des communications Web Direction des affaires publiques martin.boucher@scom.ulaval.ca , poste Avril 2005

2 LES NORMES OBLIGATOIRES Le rythme d application des normes Nous alignons le processus d harmonisation avec le rythme naturel de refonte des sites. Les normes s appliquent donc aux nouveaux sites et aux sites qui font l objet d une refonte. Les sites concernés par les présentes normes Les normes d harmonisation des sites concernent les unités suivantes : Les Facultés, départements et écoles Les Services Les vice-rectorats Sont donc exclus des normes, les sites des centres de recherche et les organismes indépendants. Cela dit, on permet l application des normes pour ces unités. Les sites d associations étudiantes ou syndicales ne peuvent appliquer les normes d harmonisation des sites Web de l Université Laval. Nous nous pencherons dans une deuxième phase sur les centres de recherche, les systèmes informatiques ayant une interface Web, sur les sites des cours et sur les lettres d information envoyées par courriel

3 A BANDEAU INSTITUTIONNEL (on peut trouver les mesures exactes des bandeaux en annexe) Bandeau utilisé pour le site principal de l université Laval (Ulaval.ca) Les bandeaux d unités Relation entre les deux bandeaux - 3 -

4 Contenu des rubriques du bandeau À propos Information essentielle Une brève description de l unité et de ses activités. Compléter la section au besoin en proposant un lien vers une section du site consacrée à la description du service s il y en a une. Information optionnelle Si l unité n a pas de section spécifique dédiée à sa description, vous pouvez ajouter ce type d information : Mandat Mission / objectifs / vision Historique de l unité Mot du doyen / recteur / directeur Personnel de l unité Politiques et réglementation Politique de confidentialité Code d éthique Nous joindre Information essentielle Renseignements généraux Nom de l unité Coordonnées postales Téléphone Télécopieur - 4 -

5 Courriel générique de l unité Localisation sur le plan du campus Information optionnelle Renseignements spécifiques Équipe de direction Coordonnées des unités affiliées / secteurs et comptoirs de service / départements, écoles / etc. Répertoire des membres / Bottin du personnel Assistance informatique Commentaires et suggestions Visite virtuelle Etc. Plan du site Information essentielle Plan du site en html. Plan exhaustif de la structure du site permettant un accès direct au plus grand nombre de contenus possibles. Autres modes d affichage possible de la structure du site Index alphabétique du site, Index des contenus / sujets Chercher Contenu essentiel Champs texte vide (pour entrée de mots-clés) et menu déroulant pour cibler la recherche : - 5 -

6 «Dans ce site» (par défaut haut de la liste du menu) «Tous les sites de l Université Laval» (sur tout le domaine de ulaval.ca) «Bottin des étudiants» «Bottin des employés» «Facultés, départements et écoles» «Cours, programmes et horaires» «Services et administration» Nom du bouton pour déclencher l action : «Chercher» et non «Rechercher» Contactez Richard Vaillancourt pour la configuration du moteur de recherche SWISH pour votre site (richard.vaillacourt@sit.ulaval.ca) - 6 -

7 Exemples d application du bandeau Les exemples qui suivent illustrent clairement que la conformité aux normes est loin d empêcher une personnalisation des sites. Le bandeau de chaque site joue un rôle très efficace et crée une parenté visuelle qui s inscrit harmonieusement dans le programme d identification visuelle de l Université Laval. On remarque également que les zones de navigation sont claires (rubriques du bandeau vs rubriques principales). Selon les tests utilisateur que nous avons réalisés. L emplacement et le traitement graphique plutôt sobre des rubriques du bandeau font en sorte que les utilisateurs considèrent spontanément les rubriques du bandeau comme étant utilitaires ou générales

8 - 8 -

9 - 9 -

10 - 10 -

11 - 11 -

12 B LE SCHÉMA DE NAVIGATION OFFICIEL Le schéma de navigation proposé comme norme suggère de disposer les éléments du premier niveau de rubriques de façon horizontale. Quand on choisi un élément de contenu dans le menu horizontal, un sous-menu s affiche sous la barre de menu principal, ce menu est composé de rubriques disposées également de façon horizontale à la manière d un système d onglets. Quand on choisit un élément du niveau 2, les rubriques de niveau 3 sont disposées à gauche et alignées à la verticale. Une fois dans le niveau 3, on a le choix, soit d inclure un 4 e niveau de menu à même le menu vertical ou de présenter une autre navigation de 4 e niveau directement dans la zone de contenu. Il est recommandé pour de longues pages de contenu de proposer une «table des matières» de la page composée de liens intrapages. Beaucoup de sites présentent leurs rubriques principales à la verticale à la droite de l interface. Bien que populaire, cette façon de faire pose certains problèmes d orientation puisque l affichage simultané de plusieurs niveaux de rubriques est pratiquement impossible. Le schéma de navigation proposé (qui est aussi très populaire) a l avantage de toujours indiquer clairement au visiteur où il est, d où il vient et où il peut se rendre, ce qui est le principe de base de la navigation des sites Web. Bien sûr, ce schéma a des limites et il peut arriver qu il soit difficilement applicable. Mais de façon globale, on peut penser que si le travail d architecture d information d un site a été fait correctement, les normes concernant la navigation devraient être applicables sans trop de problèmes. D ailleurs, des conseils en architecture de contenu seront au coeur des services offerts par l équipe de soutien Web du Service des communications. Le service des communications offre également des formations (en collaboration avec le Service des ressources humaines) en efficacité des documents Web institutionnels

13 Illustration du schéma de navigation Page d accueil du nouvel Ulaval.ca (phase2) On remarque la disposition des rubriques principales d information qui sont disposées à l horizontale

14 Page de 3 e niveau de navigation On voit clairement sur cette interface le «chemin» qu on a parcouru pour se rendre à la page actuelle. On a d abord cliqué sur «La vie universitaire», sur «Actualités et médias», et sur «Au fil des événements». De cette page, on a toujours accès directement et d un seul clic aux rubriques principales de ulaval.ca ainsi qu à un maximum de rubriques de 2 e, et 3 e niveau

15 Illustration schématique des niveaux de navigation

16 Le principe d «onglets» Cette image illustre bien le principe d «onglets» qui est la base du schéma de navigation proposé. On constate l affichage du 2 e niveau de rubriques quand on choisit une rubrique principale. Dans notre exemple, «La recherche»

17 NORMES GENERALES Certaines normes sont décrites en tant que principes plutôt que de normes détaillées. Par exemple, il est difficile de proposer que le site soit compatible avec telle ou telle version de navigateur Web parce qu en l espace de quelques mois, les versions de navigateurs Web les plus populaires peuvent varier passablement. Nous exprimons donc dans ce document le principe et nous référons le lecteur à notre site de statistique de fréquentation afin d obtenir des données plus précises, comme le classement des versions de navigateurs Web les plus populaires par exemple. Consultez le site de statistiques à : Pour information supplémentaire ou pour demander un répertoire spécifique à votre site, contactez Richard Vaillancourt (richard.vaillancourt@sit.ulaval.ca) Notes de bas de page Une note de bas de page devrait contenir des rubriques comme un politique d utilisation incluant un avis légal et une déclaration de coypyright, un avis technique» qui rassemble des informations quant à la compatibilité avec les navigateurs et une façon claire de joindre les responsables du site. Date de la dernière mise à jour Nous recommandons de ne pas placer de date de dernière mise à jour des pages du site. Cette information est de moins en moins utile parce qu il est de plus en plus implicite de considérer les informations sur le site comme étant à jour. Liens de navigation 1. Tout hyperlien pointant vers un fichier non-html ou qui fait sortir l internaute du site actuel devrait être identifié - par exemple «consultez la liste des professeurs émérites (fichier PDF)» -, et un lien vers le téléchargement du plugiciel requis devrait, s il y a lieu, être prévu à proximité. (Il est frustrant pour l internaute de constater trop tard qu il a déclenché une action qu il ne souhaitait pas en cliquant sur un lien qui

18 nécessite l utilisation d un plugiciel. Il n est pas nécessaire de placer un lien vers la page de téléchargement du logiciel Acrobat à côté de chaque lien pointant vers un fichier PDF, mais il faut placer un lien pour télécharger le logiciel requis bien en évidence dans votre site). 2. Précisez toujours la taille du fichier attaché à un lien. 3. Votre site doit contenir une carte du site non-graphique (c est-à-dire constituée seulement d hyperliens textuels). 4. Les hyperliens textuels doivent être soulignés, autrement, vous vous éloignez des standards auxquels les internautes sont habitués et vous risquez que certains visiteurs de votre site ne perçoivent pas la présence des liens ; dans la même logique, évitez tout texte souligné s il ne s agit pas d un hyperlien cliquable. 5. Dans leurs outils de navigation, les sites des unités doivent toujours utiliser les mêmes libellés que le site institutionnel quand il s agit de désigner les mêmes contenus. La bonne gestion des sites 1. L information publiée doit être exacte, à jour et la qualité de la langue doit être soignée. 2. On doit toujours publier les coordonnées de la personne responsable du site. 3. La duplication d information à partir des bases de données est interdite (c est-à-dire qu il ne faut pas extraire des contenus de ces bases de données pour les présenter dans un site «local» et risquer ainsi de ne pas refléter les mises à jour qui sont constamment faites des informations contenues dans ces bases de données, par exemple celles des programmes et des cours, ou le répertoire téléphonique). Il peut cependant être acceptable de copier l information provenant de bases de données institutionnelles si ces copies sont renouvelées quotidiennement pour éviter le risque d incohérence entre les informations diffusées au niveau institutionnel et au niveau «local»

19 4. Si vous utilisez des fichiers témoins (cookies), prévenez-en les internautes et publiez dans votre site une politique sur la gestion de ces «cookies». Normes d ordre graphique 1. Le bandeau approprié doit être affiché dans toutes les pages du site sans être altéré. 2. Les sites Web de l Université Laval sont présentés sur un fond blanc et pour des raisons de lisibilité, les polices de caractères utilisées pour le texte sont de la catégorie «sans sérif» ou sans empattement (Arial, Verdana, Tahoma). On peut utiliser la police officielle (Interstate) de l Université pour des menus mais à condition que ces menus soient convertis en images. (on peut acheter la police Intersate en contactant le SIT) 4. Pour éviter des distorsions d images, il faut éviter de changer les dimensions d une image placée dans une page HTML en changeant ses propriétés dans l éditeur ou en attribuant à l image des dimensions exprimées en pourcentage. Normes d ordre technique 1. Assurez-vous que votre site est compatible avec les fureteurs et les systèmes d exploitation les plus courants selon votre public cible. (des statistiques sont disponibles à l adresse : où l on peut prendre connaissance du profil détaillé des visiteurs des sites de l Université Laval) 2. Les sites Web de l Université Laval doivent êtres développés pour les internautes utilisant la résolution d écran la plus populaire. On peut également consulter statweb pour connaître la dimension d écran la plus populaire. 3. Utilisez les éléments de l en-tête HTML «header» pour définir la structure de la page et assurer sa bonne indexation par les moteurs de recherche interne et externe. Toujours dans une optique d indexation, il faut utiliser judicieusement la partie des métas données qui servent au repérage des engins de recherche. Ces balises sont : meta name et meta

20 description. Les autres métas donnés sont utiles pour la gestion des documents électroniques. On peut décider d inclure une multitude de méta donné, mais ce processus pourrait être assez laborieux pour des sites de grande envergure. 4. Il est primordial que toutes les pages de votre site soient accessibles à partir d un lien HTML. Si vous utilisez des liens en javascript, il est important d avoir dans votre site une section plan de site dans laquelle tous les liens sont en HTML. La raison est simple, les liens en javascript ne sont pas détectés par le moteur de recherche de l Université. 5. N utilisez pas les multifenêtres (frames). Les multifenêtres sont à éviter, car les contenus présentés dans des cadres sont répertoriés après les autres résultats par les moteurs de recherche. De plus, l utilisation des cadres peut poser des problèmes à l utilisateur s il veut imprimer la page, enfin comme on le note dans les normes Web des sites du gouvernement canadien («les cadres sont un exemple de texte non séquentiel, que les personnes qui utilisent des appareils fonctionnels ou des technologies non graphiques pourraient avoir de la difficulté à interpréter»). 6. Le poids des pages (taille des fichiers texte et images) d un site devrait toujours tenir compte de la vitesse des modems du public cible. 7. Il ne faut pas exiger le recours à des plugiciels (plugins) en page d accueil d un site; dans les autres pages, aucune contrainte n est imposée, toutefois, il est très fortement déconseillé d utiliser des applets Java (ne pas confondre avec des javascripts), Flash et Shockwave comme support à la navigation, par exemple pour générer l affichage de sousmenus. (L internaute qui n a pas installé les plugiciels requis pour utiliser des fichiers Flash ou Shockwave ne pourra pas naviguer adéquatement dans votre site si ces techniques sont utilisées pour l affichage de sous-menus de navigation ce qui limite sérieusement l accessibilité aux contenus que vous désirez diffuser). Si vous choisissez quand même d utiliser les technologies Flash ou Shockwave, il est d usage d en avertir les visiteurs et de fournir un lien vers un emplacement où ils peuvent aisément télécharger le plugiciel requis. Il est également d usage

21 de proposer une version HTML du site quand le site principal est entièrement conçu avec la technologie Flash ou Shockwave. 8. On doit utiliser prudemment les «splash screens» ou pré-pages d accueil sauf dans un cas de force majeure. Il devient frustrant pour le visiteur de se buter à une pré-page d accueil à chaque visite. 9. Le blanc est la couleur de fond des sites Web de l Université Laval ; toutefois, si vous désirez utiliser un fond d une autre couleur dans une partie de page ou dans un tableau, assurez-vous que le contraste entre la couleur de fond et la couleur du contenu est suffisant pour que ce contenu puisse être facilement consulté par toute personne, incluant les daltoniens. (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é. 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. 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. 10. N utilisez pas la fonction de clignotement : blinking, flickering. (La quasi-totalité des internautes sont indisposés lorsqu on leur impose ces clignotements). 11. Évitez d utiliser des compteurs commerciaux externes pour générer des statistiques de fréquentation de votre site ; utilisez plutôt le service gratuit offert par l Université et qui repose sur le logiciel Sawmill (utiliser un compteur commercial externe projette une image d amateurisme et peut rendre l accès à votre site beaucoup moins efficace si une panne touche le site commercial externe auquel vous êtes relié). Contactez Richard Vaillancourt (richard.vaillancourt@sit.ulaval.ca) pour savoir comment intégrer sawmill à votre site

22 Conclusion Avec l adoption des normes d harmonisation des sites Web, l Université Laval fait un grand pas dans l établissement d une image plus cohérente sur le Web. La publication des normes d harmonisation se veut également une main tendue destinée à toute la communauté universitaire. Nous souhaitons que le processus d harmonisation puisse être réalisé avec succès dans une ambiance de collégialité et d entraide. Nous souhaitons également que notre initiative réponde adéquatement aux attentes et aux besoins de chacun

23 Annexe A Les mesures exactes du bandeau «Unité»

24