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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Conception d'un site web

Ähnlich wie Conception d'un site web (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (16)

Conception d'un site web