Vous êtes ici : Page Principale > structure et navigation
Structure et navigation du site Tela Botanica version 4
Ergonomie générale
Principes généraux :
- Le site doit rester compatible avec un affichage de 800x600 pixels.
- l'internaute doit pouvoir se repérer et s'orienter à chaque instant.
- la navigation doit être autonome et propre au site. Elle ne doit pas dépendre des boutons du navigateur.
- l'omniprésence du logo : plus gros sur la page d'accueil et présent dans toutes les pages intérieures.
- sobriété, clarté et fonctionnalité.
Lien : 153 bonnes pratiques pour des sites Internet de meilleure qualité
Structure de la page d'accueil
- La page d'accueil permet d'accéder à tous les sites (mondes). Chacun sera présenté par un court résumé permettant au visiteur de mieux apréhender son contenu.
- On trouvera le logo et le slogan de TB en haut de la page.
- Les logos des partenaires seront situés en bas de page et renverront vers leur site :
- Yves Rocher avec la mention "1er partenaire de Tela Botanica"
- Université Montepellier II
- Ministère de l'environnement et du développement durable
- Conseil Régional LR
- Conseil Général Hérault
Elle devrait aussi contenir :
- Un lien menant à la page d'inscription
- Un moteur de recherche sur tout les sites : moteur de recherche sur l'ensemble des données des sites.
- Aide à la navigation : lien menant à une page expliquant les raccourcis clavier et du mode de navigation dans les sites.
- Contacts : lien menant vers une page où se trouvent les informations pour contacter le webmaster et les personnes ressources de Tela Botanica.
Squelette de la page dÂ’accueil
La page d'accueil doit impérativement :
- être lisible par tous les navigateurs même textuel
- comporter toutes les informations nécessaires à un bon référencement par les moteurs de recherche
Pour les navigateurs graphiques, la page d'accueil doit être rendu esthétique et attractive uniquement par les CSS.
Le graphisme de la page d'accueil a été choisi. Il est constitué d'une ellipse (rappelant celle du logo) et placée au centre de la page. Sur celle-ci sont placé des boules vertes symbolisant chacune un monde de Tela Botanica. Autour de l'ellipse et à proximité des boules sont répartis les noms des mondes.
En survolant le nom d'un monde (et peut être sa boule) un texte expliquant le contenu du monde apparaîtra au centre de l'ellipse.
Ce système sera géré avec des CSS ou à défaut du Javascript, si le problème de compatibilité avec Internet Explorer n'est pas résolu.
Si le Javascript n'est pas géré par le navigateur les attributs "title" des images des logos seront renseignés sur le contenu du monde.
Structure des pages internes
Dans chaque monde, on peut revenir à la page d'accueil via le logo de Tela Botanica situé en haut de page ou un lien "accueil" présent en bas de page.
Un menu déroulant présent dans le bandeau de toutes les pages d'un site permetra de naviguer entre les mondes.
Les menus sont gérés uniquement dans un bandeau situé à gauche de l'écran.
Les menus seront construits sur le principe des "expand-collapse" c'est à dire qu'en cliquant (ou en survolant, à définir) sur un menu le contenu de celui ci se déroulera dessous, et pourra se replier soit par un nouveau clic, soit par la selection d'un nouveau menu.
Squelette de base d'une page intérieure : définition des zones
L'utilisation de feuilles de style devrait permettre d'imiter les frames ou de transformer les sous-menu de troisième niveau en onglets. Elles permetront en outre de placer les différentes zones définie ci-dessous de façon que l'on souhaite.
Le site sans feuille de style devra rester lisible. Voici l'ordre dans lequel les zones de la page devrait s'afficher sans feuille de style :
1 - Bandeau : entête identique sur toutes les pages des sites
Il contiendra :- Logo Tela Botanica : lien menant à la page d'accueil de l'ensemble des mondes de Tela Botanica.
- Menu de changement de monde : menu déroulant contenant la liste des mondes. La première valeur (non sélectionable) de cette liste sera "Changer de monde", la seconde sera "Retour à l'accueil"... Une simple sélection dans la liste devra mener sur la page d'accueil du monde en question. Il faudra au niveau graphique insérer cette liste dans le menu de gauche.
- Fenêtre d'identification et/ou d'inscription
- Moteur de rechercher : zone de texte contenant la valeur "rechercher" correspondant à un moteur de recherche sur l'ensemble des données du site courant. La page d'affichage des résultats devra permettre de retourner à l'emplacement précédent et permettre de lancer une recherche sur l'ensemble des sites.
- Plan du site : lien menant au plan du site courant.
- Aide à la navigation : lien menant à une page expliquant les raccourcis clavier pour naviguer dans les sites.
- Contacts : lien menant vers une page où se trouvent les informations pour contacter le webmaster et les personnes ressources de Tela Botanica.
2 - Contenu bandeau : zone contenant le bandeau du contenu
Zone non utilisée, mais qui pourrait permettre d'afficher :- le titre du document
- le public visé ou le niveau de compétence du document
- un bref résumé du contenu
- table des matières avec des ancres internes au document
3 -Contenu corps : zone contenant l'information
L'information devra être répartie dans des pages courtes, avec un renvoi vers le haut, en bas de page. Chaque page devra utiliser uniquement des balises xhtml ayant un sens. Par exemple, il faudra utiliser une balise <h1> pour le titre principal de la page, des balises <p>, <strong> ou <em> mais en aucun cas des balises servant à la mise en page comme <b> ou <i>. La mise en page devra uniquement se faire via des styles présant dans la feuille de style externe du site. Chaque site pourra avoir une ou plusieurs feuilles de style que l'utilisateur pourra sélectionner.4 - Contenu pied : zone contenant le pied du contenu
Zone située sous le contenu, elle devrait contenir des informations liées à celui-ci. Nous pourrions y noter :- le nom de la personne à contacter en cas de problème ou d'erreur.
5 - Menus : zone de menus spécifiques à un monde
Située sous le logo de Tela Botanica, elle contient les différents niveaux de menu.6 - Pied : zone contenant le pied de page
Zone située en bas de page, elle devrait contenir des informations générales. Nous pourrions y noter :- le copyright.
- un lien vers l'accueil
Les sous-rubriques
Les sous-rubriques d'accès aux contenus
- par moteur de recherche :
Description de l'interface d'un moteur de recherche
- par thésaurus :
Description de l'interface d'un thésaurus
- par liste :
Description de l'interface d'une liste
Les autres sous-rubriques
- aide générale
- sources
- notes
Compléments de navigation : Les pop-up
Les pop-up ne devraient pas servir à l'ouverture de fenêtre c'est-à -dire à un document de notre site dans lequel on peut naviguer ( TelaV3 : forums, articles biblio...)
Les pop-up devraient servir à l'affichage :
- d'aide (non naviguable),
- de légendes,
- de photos...
Malgré cela une utilisation parsimonieuse des pop-up peut améliorer la lisibilité du site. Voici une page présentant comment écrire proprement l'ouverture d'un pop-up :
http://www.openweb.eu.org/articles/popup/