Dessine moi un site web

Un site web est tout sauf un flyer. Il a son langage, ses usages et demande une discipline à part de son concepteur.

Les bases de la construction d’une page Web

Il existe évidemment des tas de façons de construire une page web, mais on peut distinguer souvent une même structure générale en 3 parties.

Nous les commenterons dans le sens de la lecture (de haut en bas et de gauche à droite).

structure page web

LE HEADER : L’ENTETE

l’élément d’en-tête de la page, dissocié du corps du texte.
Le header, contrairement au corps de page qui change d’une page à l’autre, est un élément fixe qui reste le même quelque soit la page où l’on se trouve.

D’ailleurs lorsqu’on développe un site web, le header sera créé sur un fichier distinct ( header.php )
Le header se compose (le plus souvent) :

> du logo et de sa baseline ( repère identitaire de la marque )

la baseline étant le slogan ou la phrase qui anime la marque

, exemple pour Nike Just do it et pour SNCF : A nous de vous faire préférer le train

> d’une navigation web qui permet de se repérer et d’accéder aux différentes pages du site.

Elle est en général placée dans le header en haut de page ou à gauche du site afin que le visiteur puisque y avoir accès très facilement.

Le header est donc l’élément visuel le plus important de la structure d’une page web grâce à son positionnement dans la page (tout en haut) et par ce qui le constitue (le logo et la baseline : identité visuelle et textuelle de la marque ainsi que la navigation principale.)

LE CONTENT / CORPS DE PAGE :

C’est la partie où l’on intégrera tout le contenu, il sera constitué du titre, sous-titre (si nécessaire) et des paragraphes, images qui constituent la page sur laquelle on est.

A la différence du header, celui-ci varie d’une page à l’autre.

On veillera tout de même à préserver un style et une structure de contenu, homogène sur toutes les pages.

LE FOOTER :

Le pied de page qui se trouve en bas du site. Comme le header, il restera le même quelque soit la page du site que l’on visite.

Il sera constitué généralement de la signature du site web et aussi d’unenavigation, beaucoup moins essentielle que celle du header mais qui présente l’avantage d’être présente sur toutes les pages (on y trouve principalement les mentions légales, les conditions générales de vente et le plan du site. )

Structure de l'information

Une information bien structurée.

Si votre site web n'est pas bien organisé et que l'internaute ne trouve pas ce qu'il veut, il suppose que l'information n'existe pas. Il risque d'abandonner sa recherche et se tourner vers un autre site.

Pour éviter cela, les informations doivent être bien rangées de telle sorte que les internautes les trouvent facilement. C'est comme dans la vie réelle, les affaires mal rangées se retrouvent difficilement. Mais si les informations ne sont pas présentes l'utilisateur doit aussi pouvoir s'en rendre compte rapidement.

Lorsque des internautes s'expriment de la façon suivante : "Je ne trouve rien sur ce site", "je suis perdu", Où est-ce que je peux trouver cela", c'est qu'aucune structuration sérieuse des contenus n'a été faite. Il faut donc aider les internautes à trouver ce qu'ils cherchent.

Structurer l'information s'effectue en général en 4 étapes :

Lister tous les contenus d'un site web
Organiser les contenus par catégories
Structurer l'information
Réaliser un plan de site appelé aussi arborescence d'un site web

1. Lister tous les contenus d'un site web.

Il faut se placer du côté utilisateur du site. Il s'agit d'une évidence, mais il est important de le rappeler. Avant de commencer la réalisation d'un site Internet, il est primordial de lister l'ensemble des contenus que l'on veut voir apparaître.

Se placer uniquement du côté fournisseur d'information est une erreur car c'est le meilleur moyen de présenter des contenus web, certe intéressants pour le concepteur du site mais parfois sans intérêt pour l'utilisateur.

Bien souvent on s'attache à la réalisation du design graphique avant même d'avoir imaginé les contenus d'une page web, c'est comme si l'on souhaitait poser les papiers peints sur des murs qui n'ont pas été encore construits.

2. Organiser les contenus par catégories.

La meilleure organisation des contenus web consiste à regrouper les informations et à les agencer afin de faciliter la navigation, toujours d'un point de vue utilisateur.

Cela consiste à ranger les éléments dans des catégories : ranger ensemble ce qui se ressemble, séparer ce qui est différent.

Cette organisation est faite pour simplifier les choses.

Une approche intéressante pour bien organiser le contenu d'un site consiste à prévoir les actions et cerner le comportement des internautes, comprendre comment ils vont aller chercher l'information en fonction de leurs besoins.

Plusieurs critères peuvent permettre de regrouper les informations dans des catégories comme par exemple :

alphabétique : liste d'artistes sur des sites de musique.
chronologique : calendrier d'une saison sportive pour un club de rugby.
géographique : localisation d'une destination de vacance sur des sites de voyages.
thématique : pièces ou billets pour un site de collectionneurs.
par tâches utilisateur : acheter, vendre pour un site immobilier.
par cible utilisateur : étudiants, chercheurs, entreprises... pour une université.

3. Structurer l'information.

Il reste ensuite à hiérarchiser ces catégories pour mettre en valeur certains contenus web, rendre prioritaire ou faciliter l'accès aux informations et établir des connexions entre-elles.

C'est une phase très importante qui permet de garantir une navigation optimisée pour les internautes.

Certains éléments sont plus importants que d'autres. Cette hiérarchie apparaît dans les menus de navigation qui en découlent.

Dans la hiérarchisation de l'information, il ne faut pas oublier les rubriques incontournables : l'accueil, le plan du site, les mentions légales, les contacts...

Pour ces rubriques, les internautes ont acquis une expérience utilisateur et comme sur l'ensemble des sites, le bouton d'accueil est le premier dans la liste du menu de navigation. Si vous le placez au milieu de la barre de navigation, les utilisateurs seront perdus, et il est fort à parier qu'ils ne le trouverons pas. Il faut capitaliser sur l'expérience des internautes, car en général, ils s'attendent à retrouver sur votre site les mêmes modèles de fonctionnement que sur les autres sites.

Il ne faut pas oublier qu'un site n'est pas statique. Il évolue au fil du temps. La structuration de l'information peut être modifiée en fonction de l'actualité, mais aussi en fonction des saisons comme dans l'exemple de Florajet.com, ci-dessus ou le menu indique : "1er mai : offrez du muguet".

4. Réaliser un plan de site appelé aussi arborescence d'un site web.

L'étape finale consiste à réaliser l'arborescence, sous forme de graphique.

Parfois elle est aussi schématisée sous la forme de dossier / répertoire comme les différents dossiers et fichiers en informatique présent dans l'explorateur d'un ordinateur.

Elle représente les différentes rubriques, les différentes pages et les relations existantes entre elles. A l'aide de rectangles pour les rubriques et de flèches pour les relations, l'arborescence décrit l'organisation et le contenu d'un site web.

Elle permet de bien comprendre les différents niveaux de navigation. On parle de largeur, pour le nombre de rubriques accessibles depuis la page d'accueil, et de profondeur pour le nombre de sous-rubriques accessibles depuis une rubrique.

Comment présenter la page d'accueil : utilisabilité et conventions web

Les recommandations sur la présentation d'une page d'accueil ne sont pas uniquement le reflet des choix optimaux pour faciliter l'utilisation du site. On recommande de suivre les conventions en usage dans le domaine du web (c'est à dire respecter ce qui se fait le plus fréquemment), ce qui permet de capitaliser sur les apprentissages antérieurs des utilisateurs.

Même si ces conventions ne sont pas toujours parfaites d'un point de vue théorique, elles le deviennent car elles sont susceptibles d'être connues des internautes.

Eléments et emplacements de ces éléments

La page d'accueil est LA page spéciale d'un site web. Elle doit donc se distinguer par une mise en page spécifique. Cependant, les éléments clés du site doivent être cohérents avec les autres pages. Les éléments conventionnels d'une page d'accueil et leurs emplacements les plus fréquents sont les suivants:

Un logo
> Emplacement recommandé : coin supérieur gauche
Une baseline, consistant en quelques mots descriptifs du thème du site
> Emplacement recommandé : sous / à droite du logo
Un champ de recherche lorsque le site fournit un moteur de recherche
> Emplacement recommandé : coin supérieur droit
La navigation principale, avec une mise en valeur de la rubrique courante. Cela permet d'introduire dès la première page le principe de mise en valeur. On recommande aussi que le bouton accueil ne soit pas cliquable, renforçant cette idée que l'on est déjà sur la page d'accueil.
> Emplacement recommandé : navigation horizontale : haut du site / navigation verticale : à gauche du site, sous le logo
Une présentation textuelle du site orientée objectif utilisateurs (elle doit mettre en avant l'intérêt du site pour les utilisateurs)
> Emplacement recommandé : corps de la page, premier contenu à présenter
Les liens dits "utilitaires" (plan du site, contact, à propos de, presse, changement de langue, etc.)
> Emplacement recommandé : coin supérieur droit
Des remontées de contenu : soit en utilisant un facteur chronologique (on présente des raccourcis vers les dernières infos parues, les derniers produits sortis, etc.), soit en utilisant un facteur mise en avant (on présente des raccourcis vers les contenus que l'on veut pousser)
> Emplacement recommandé : corps de la page
Un pied de page (ensemble de liens reprenant la navigation principale ainsi que des liens utilitaires : plan de site, contact, mentions légales, etc.).
> Emplacement recommandé : bas de la page

Un exemple

» Les points négatifs

1 - Le logo cliquable même sur la page d'accueil (Le logo est cliquable alors que l'on se trouve déjà sur la page d'accueil). On recommande en général de ne pas fournir de lien vers la page courante. Le logo Bokson devrait donc être cliquable partout sauf sur la page d'accueil.

2 - Pas de bouton "Accueil". Le lien "Accueil" n'apparaît en effet que dans les pages intérieures. Ce choix manque de cohérence. Les outils de navigation doivent rester homogènes quelque soit l'endroit où l'on se trouve dans le site. De plus, lorsqu'il n'existe pas de bouton "Accueil" sur la page d'accueil, on ne peut pas indiquer à l'utilisateur où il se trouve en mettant en valeur la rubrique consultée.

3 - Pas de baseline. Dans la même idée que le point précédent, l'absence de baseline descriptive manque pour accompagner le logo. Ce type d'élément permet de comprendre rapidement de quoi parle un site web et ce qu'il peut nous apporter.

4 - Le peu d'incitation sur l'image principale. La photo centrale est l'élément principal de la page d'accueil. Elle est cliquable et mène vers la chronique d'un disque. Cependant, l'utilisateur ne s'en rend compte qu'en cliquant sur l'image. On devrait préciser à quel événement ou à quel contenu correspond cette mise en avant (par exemple, chronique du dernier disque des Beastie Boys, 15.06.2004).

5 - Pas de présentation de l'objectif du site. Ce point est toutefois compensé par les autres éléments d'interface, très explicites et qui suggèrent que Bokson est un site traitant de musique (cf. les intitulés des rubriques, les noms des groupes, les photos des disques, les libellés des liens, etc.).

» Les points positifs

1 - La navigation qui s'installe dès la page d'accueil. Le fait que la barre de navigation (Rock, Electro, Hip Hop, World) soit présente dès la page d'accueil permet à l'internaute de l'utiliser en tant que référent, quelque soit l'endroit où il se trouve dans le site. On apprécie que cette barre de navigation ne change pas en fonction de la page où l'on se trouve.

2 - L'emplacement du moteur de recherche. Le moteur de recherche est placé de manière conventionnelle, en haut à droite de l'interface. De plus, il est présenté de façon optimale : on fournit directement un champ de recherche et non un simple lien vers la page de recherche, et on fournit aussi un lien direct vers les options de recherche avancée.

3 - Les liens textuels sur des contenus clés. On sait que les liens du type "tous les artistes" ou "les dernières chroniques" sont susceptibles d'intéresser les visiteurs du site Bokson. On fournit donc une zone spécifique où sont placés ces liens génériques. L'emplacement de cette zone est critique, puisqu'elle se situe juste en-dessous du moteur de recherche. C'est une zone qui a de grandes chances d'être parcourue du regard.

4 - Les dates, titres et liens vers les dernières news. Les news sont une des rubriques mises à jour régulièrement. A ce titre, il est intéressant de fournir dès la page d'accueil des raccourcis vers les dernières news. On supporte ainsi la fonction informative de la page d'accueil : si l'utilisateur voit qu'il a déjà lu la dernière news publiée, il n'a pas besoin d'aller consulter la rubrique news pour voir s'il en existe une nouvelle. On lui facilite donc la tâche de recherche de contenus ajoutés depuis sa dernière visite.

5 - Un lien vers la liste de toutes les news. Il paraît très intéressant de placer un lien vers la rubrique mère à côté des raccourcis liés à des contenus spécifiques. Cela permet à l'utilisateur de considérer la rubrique sous un autre angle que lorsqu'elle est uniquement présentée en barre de navigation. Il peut se faire une idée plus précise de son contenu.

6 - L'inscription à la newsletter sur la page d'accueil. Si l'inscription à la newsletter est une action clé sur le site, si on doit la mettre en avant, il est intéressant de laisser la possibilité d'accomplir l'action la plus courante (à savoir s'inscrire) dès la page d'accueil.

7 - La hiérarchisation des remontées de contenu. La page d'accueil de Bokson est conçue de sorte que l'on comprenne bien l'importance relative accordée à chacune des remontées de contenu. Il existe différents niveaux :

- Niveau 1 : Mise en avant d'une chronique, supportée par une grande image, actualité forte de la page d'accueil

- Niveau 2 : Pour chaque rubrique, mise en avant d'un disque avec facing

- Niveau 2 : Pour chaque rubrique, mise en avant d'une interview avec photo associée

- Niveau 3 : Pour chaque rubrique, mise en avant des dernières chroniques sous forme de liens texte

- Niveau 4 : Pour les 5 dernières news : Date, titre, rubrique, image et lien

8 - La place laissée aux photos et design. Le contenu de la page d'accueil de Boskon est accompagné par un design adapté : l'importance des visuels est à la hauteur des attentes des utilisateurs, mais ne mange pas l'information.

Tags

Structure du site Web