Conception d'un site web

Conception d’un site Web Conception d’un site Web d’une bibliothèque ou d’un centre d’une bibliothèque ou d’un centre

de documentationde documentation

Mohamed BEN ROMDHANEInstitut Supérieur de Documentation

[email protected]évrier 2008

Séminaire : Sites Web et portails documentaires

Mastère BD ISD/2007-2008

mailto:[email protected]



ISD Février 2008

Conception de site web de bibliothèque ou d’un centre de documentation

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 2008


3

Site Web des bibliothèques?Site Web des bibliothèques?

• 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 2008


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 2008


5

IntroductionPublication 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 2008


6


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 2008


7


Cibler le public

• Connaître notre public (visiteurs potentiels de notre site)• Internautes novices• Internautes expérimentés

Contenu rédactionnelPrésentation visuelle fonctionnement

ISD Février 2008


8


Cibler le public

Contenu rédactionnelPrésentation visuelle 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 2008


9


Cibler le public

Contenu rédactionnel

Présentation visuelleFonctionnement

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 2008


10


Cibler le public

Contenu rédactionnelPrésentation visuelle

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 2008


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 2008


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 2008


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 2008


14

Architecture d’un site WebStructurer 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 liensPeu pratique pour les internautes novices

ISD Février 2008


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 2008


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 2008


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 2008


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 2008


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 2008


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 2008


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 2008


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

Education

Conception d'un site web