Conception d'un site web

CCoonncceeppttiioonn dd’’uunn ssiittee WWeebb
dd’’uunnee bbiibblliiootthhèèqquuee oouu dd’’uunn cceennttrree
ddee ddooccuummeennttaattiioonn
Mohamed BEN ROMDHANE
Institut Supérieur de Documentation
mbromdhane@yahoo.fr
Février 2008
Séminaire : Sites Web et portails documentaires
Mastère BD ISD/2007-2008

ISD Février
Conception de site web de bibliothèque ou
2
Plan de la présentation
 Introduction
 Architecture d’un site web
 Cibler le public
 Structures des sites
 Structures à éviter
 Conception modèle d’un site Web
 La charte graphique
 Conception de l’interface de navigation
 Découpage et mise en page du texte

ISD Février
3
SSiittee WWeebb ddeess bbiibblliiootthhèèqquueess??
• La vitrine de l’organisation administrative de la
bibliothèque physique
• La porte d’accès au catalogue, informations sur les
horaires d’ouverture, les conditions de prêt, les
collections …
• Les sites Web des bibliothèques deviennent
progressivement des portails documentaires
intégrant, en premier lieu, les accès à la documentation
électronique. Ils fédèrent de plus en plus la recherche
entre sources multiples internes comme externes.
Anne Dujol, Les sites web des bibliothèques BBF 2006 - Paris, t. 51, n° 3

ISD Février
4
Introduction
Publication Web ≠ publication papier
• L'internaute n'a pas la sensation physique du livre,
• Risque d'être rapidement perdu dans le dédale
d'écrans qui se présentent à lui.
Il faut bien structurer l‘information et offrir des
outils de navigation

ISD Février
5
Introduction
Publication Web ≠ publication papier
• Communication basé sur l'écran et non plus sur la
page (feuille) papier d'un format déterminé,
• Sur le Web, vous n'avez pas la maîtrise de votre
document comme dans une feuille de traitement de
texte.
Il faut passer une information par écran et donner des
repères visuels pour l’internaute

ISD Février
6
Architecture d’un site web
Cibler le public
• Avant tout fixer les objectifs
• Être présent sur le web,
• Faire des visiteurs, nouveaux lecteurs à la
bibliothèque
• Faire un site de promotion de votre bibliothèque
• Faire un site commercial, …
 Connaître nos objectifs  connaître notre public

ISD Février
7
Cibler le public
• Connaître notre public (visiteurs potentiels de
notre site)
• Internautes novices
• Internautes expérimentés
Contenu rédactionnel
Présentation visuelle
fonctionnement

ISD Février
8
Cibler le public
fonctionnement
 Le Web est par essence textuel voir même hypertextuel
 Choisir le contenu qui attire le visiteur
 Il faut savoir fidéliser le visiteur

ISD Février
9
Cibler le public
Fonctionnement
 Penser à dynamiser votre site par des graphiques
 Sans graphisme, le Web ne serait pas ce qu’il est
 Le visuel est bien lié au contenu et au fonctionnel

ISD Février
10
Cibler le public
Fonctionnement
 Réfléchir au temps de chargement de vos pages
 Faites attention aux images et aux applications lourdes sur votre
site
 Mettre en place des mécanismes d’interaction (avec l’auteur ou le
responsable du site par exemple)

ISD Février
11
Architecture d’un site Web
Structurer le site
• Sans une structure fonctionnelle, votre site sera
un échec même si le contenu est pertinent et bien rédigé
• Fournir à l'usager l'information qu'il souhaite en
un minimum d'étapes et donc un minimum de
temps
 Appliquer la "règle des 3 clics" selon laquelle
toute information de votre site doit être
disponible en maximum 3 clics de souris.

ISD Février
12
Structurer le site
• Structure séquentielle
 Groupes d’information ordonnés (logique, chronologie, du général au
spécifique, alphabétique)
 Plutôt pour petits sites ou pour sous-sites à l’intérieur d’un grand site
Ex: tour guidé, présentation historique, tutoriel, long formulaire
d’enregistrement (ex: recruitsoft)

ISD Février
13
Structurer le site
• Structure hiérarchique
 Veut refléter la structure d’une organisation
 en rayon lorsque tout se rapporte à une même chose (objet,
personne, etc.)

ISD Février
14
Structurer le site
• Structure en réseau
ou en toile
 Veut poser peu de restrictions sur l’utilisation de l’information et la
navigation,
 favorise l’exploration, la découverte, interfaces ludiques
Veut favoriser une densité très élevée de liens
Peu pratique pour les internautes novices

ISD Février
15
Structures à éviter
• Structures trop large : page
d’accueil surchargée de liens
souvent peu reliés entre eux
• Structure trop profonde,
nécessite beaucoup de
clics pour la parcourir et
trouver l’information
requise.

ISD Février
16
Conception d’un site Web
Charte graphique
• Un internaute a besoin de se faire une image
mentale du site et de comprendre sa structuration.
• Tout concepteur d'un site Web doit donner une
identité visuelle à son site à travers la charte
graphique, les polices et les couleurs de caractères
utilisés
Page d’accueil
 Le logo de l’établissement ou de votre site
 Les icônes des différentes rubriques.
Autres pages
 Un repère identifiant votre site et son appartenance
 Des icônes envoyant à la page d’accueil et aux rubriques du site

ISD Février
17
Charte graphique
• Un internaute a besoin de se faire une image
mentale du site et de comprendre sa structuration.
• Tout concepteur d'un site Web doit donner une
identité visuelle à son site à travers la charte
graphique, les polices et les couleurs de caractères
utilisés
Toutes les pages du site
 Choix de la police utilisée, de sa taille, …
 Choix de la ou des couleurs des textes (titres, contenu, …)
 Choix de la couleur ou des couleurs de fonds d’écran
…..

ISD Février
18
Interface de navigation
• C’est la suite indispensable d'une bonne structuration du
site.
• Simple à comprendre,
• Facile à mémoriser,
• Offre une orientation vers l'information cherchée
 barre de navigation sur chaque page

ISD Février
19
• Icônes
• Mots clés
Permettant d’accéder aux principales rubriques et
services du site
Barre de navigation (rubriques)
 ensemble de rubriques spécifiques au site
 contact
 Recherche
 Carte du site

ISD Février
20
Mise en page du texte
• Puisque vous disposez d'une énorme quantité de
couleurs et de polices de caractères, vous serez
tenté de les utiliser.
• Vous risquez de frustrer le lecteur et de manquer
votre objectif qui consiste avant tout à transmettre
un message et attirer l’attention sur le contenu et
présenter une page facile à lire
Typographie
 Choix de la police
 Utilisation des majuscules minuscules
Type et taille des caractères
 Soulignement (à éviter au maximum)
 Utilisez les niveaux de titres

ISD Février
21
• Puisque vous disposez d'une énorme quantité de
couleurs et de polices de caractères, vous serez
tenté de les utiliser.
• Vous risquez de frustrer le lecteur et de manquer
votre objectif qui consiste avant tout à transmettre
un message et attirer l’attention sur le contenu et
présenter une page facile à lire
Couleur du texte
 Contraster avec le fonds
 Texte foncé sur fonds clair (recommandé pour une meilleure
lisibilité)
 Pensez à l’impression de vos pages

ISD Février
22
• Découpage du texte en unités de taille raisonnable
• Règle des 3 écrans : la longueur d’une page ne doit
pas dépasser les 3 pages écrans pour limiter le
défilement vertical.
• Certains concepteurs recommandent de fixer
l’information sur une seule page écran pas plus
Quelques conseils de mise en page
 les premières lignes (ou la première page écran) doivent
rassembler le maximum d’information
 à éviter le recours au défilement horizontal

Conception d'un site web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (13)

Similaire à Conception d'un site web

Similaire à Conception d'un site web (20)

Dernier

Dernier (16)

Conception d'un site web