Méthode suivie pour concevoir et créer un nouveau site web pour les bibliothèques de l'Université Paul Sabatier - Toulouse 3.

1. Gestion de projet de site web
Le cas du nouveau site web du SCD de
l’Université Toulouse III…
Pierre Naegelen, chef de projet MOA
FIBE- enssib – 12 février 2013

2. L’humanité évolue…
Human evolution scheme. Par M. Garde (Self work (Original by: José-Manuel Benitos)) [GFDL
(http://www.gnu.org/copyleft/fdl.html) ou CC-BY-SA-3.0
(http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons

3. Les sites web aussi…

4. Premier site web du SCD…
Source: Internet Archive. Version du 19 juillet 2005
http://web.archive.org/web/20050719080109/http://www.scd.ups-tlse.fr/

5. Deuxième site web…
Source: Internet Archive. Version du 18 janvier 2006
http://web.archive.org/web/20050719080109/http://www.scd.ups-tlse.fr/

6. Et maintenant…

8. Objectifs du site:
Permettre un accès rapide aux services proposés par les bibliothèques de l’UPS
Valoriser la production de l’établissement : thèses, archives ouvertes, cours en
ligne
Permettre un accès rapide aux services proposés par les bibliothèques de l’UPS, y
compris des services nouveaux ou innovants : chat, web-confs, rendez-vous
bibliographiques individualisés, réservation de salle de travail en groupe
Donner un maximum de visibilité aux actualités
Constituer un espace ouvert interactif, c’est-à-dire:
- Mise en valeur du service « Une question ? »
- Les actualités sont ouvertes aux commentaires
- Présence de la bibliothèque sur des réseaux sociaux
-Permettre aux usagers de nous contacter à n'importe quel moment et sur
n'importe quel sujet
Permettre un accès facile et rapide aux informations pratiques :
notamment les horaires des bibliothèques visibles dès la page d’accueil,
ou bien accéder facilement aux infos détaillées concernant chacune des
bibliothèques

9. Objectifs du site:
Faciliter l'accès nomade aux ressources électroniques pour lesquelles l'Université a
souscrit un abonnement
Proposer un accompagnement individualisé interactif via des accès thématiques
profilés selon l’internaute
Proposer un site traduit en plusieurs langues
Offrir un accès qui soit ouvert à tous et en même temps personnalisé et ciblé en
fonction des besoins des étudiants et personnels de l'établissement

10. Notions-clés: la bibliothèque hybride et les services
Caractère hybride des bibliothèques: les services articulent toujours deux
niveaux: physique/numérique, local/global
Le site web doit être orienté vers les services et non pas simplement vers les
documents
Le site web doit présenter comme un tout homogène l’ensemble des services,
qu’ils soient physiques ou numériques
Qu’il s’agisse de services physiques ou numériques, il s’agit de mettre l’usager
au cœur du dispositif

11. Quelle méthode de travail ?

12. Méthode de travail…
1. Evaluer le site actuel pour établir une
cartographie de l’existant
2. Recenser et synthétiser les besoins
3. Benchmarking
4. Modélisation
5. Rédaction d’un cahier des charges
6. Phases ultimes avant la mise en ligne

13. 1. Evaluation du site web…
Source: Internet Archive. Version du 18 janvier 2006
http://web.archive.org/web/20050719080109/http://www.scd.ups-tlse.fr/

14. Cartographie de l’existant
– Au plan de l'ergonomie
Le site web du SCD (http://www.scd.ups-tlse.fr) présentait notamment les
défauts suivants :
- Problèmes de navigation au sein du site et difficultés de repérage : pas de fil
d’Ariane, pas de plan du site, pas de moteur de recherche pour l’ensemble
du site
- Les informations sur un même point étaient disséminées dans plusieurs
rubriques qu’il faut toutes consulter pour reconstituer le message complet.
Exemples :
 Les informations sur les services étaient éparpillées dans 3 rubriques : bibliothèques, services en ligne,
besoin d’aide.
 Formation : pas de rubrique dédiée, très difficile à trouver. On ne percevait pas bien la logique de
l’organisation.
 Service de référence virtuel : manque de cohérence : désigné parfois par « Eurêk@ », parfois par
« questions BU ».
- Le site ne permettait pas de mettre en valeur les actualités (expositions,
nouvelles ressources documentaires…)
- Le site était inadapté à la présentation de nouveaux services au public
(tutoriels, formations, messagerie instantanée...)
•

15. – Au plan fonctionnel
- Site qui ne sollicitait pas de participation active des usagers: modèle
d'information descendante
- Site orienté vers le document et pas assez vers les services

16. 2. Expression des besoins…
• Pour recueillir et formaliser les besoins, on a eu
recours à la technique du « brown paper »

17. Elément-clé de la méthode de travail:
l’écoute de l’autre…
Domestic Quarrel. Par zubrow. CC BY-NC 2.0. Source: Flickr

18. 3. Le benchmarking…
Autrement dit regarder ce qui se fait ailleurs.

19. SCD Université Versailles Saint-Quentin
Formulation claire et simple…que
nous avons reprise

20. Le SCD Université Lyon 2
Mise en
valeur
efficace des
services
proposés par
la
bibliothèque

21. La BNUS
Les
différents
formulaires
de contact
sont
regroupés
sur une
même page

22. La Boston University
Place
considérable
laissée à l’image
fixe ou vidéo
+
Menu « scroll
down »

23. La Cornell University Library
L’image de fond se modifie à
chaque rafraîchissement de la
page

24. La Bibliothèque de l'Université d'Amsterdam
L’image de
fond est
changeante
+
Caractère
volontairement
dépouillé du
site :
esprit « zen »

25. La NCSU Library

26. La NCSU Library
Plusieurs qualités listées par J. Sicot et A. Marois :
•« Carte interactive et en temps réel des postes informatiques disponibles ou non
dans la bibliothèque
•Système de réservation de salles de travail
•Le système principal de navigation (megadropdown menus) permet une très bonne
visibilité de l'ensemble des rubriques/services du site (le tout sans un seul clic,
simplement au survol)
•Système de chat disponible dès la page d'accueil, par un simple clic
•Tableau des horaires d'ouverture pour toutes les bibliothèques et pour toutes les
périodes de l'année
•Page présentant les différentes modalités disponibles pour demander de l'aide à un
bibliothécaire (tel, sms, RDV, chat, email)
•Consultation des ressources électroniques par discipline ou par liste alphabétique
•Annuaire dynamique du personnel
•Visite guidée et illustrée de la bibliothèque
•Page listant tous les screencasts réalisés par la bibliothèque »

27. La mise en valeur des bases de données:
l'exemple inspirant de la BUA

28. La question des accès disciplinaires...
• SCD Université Lyon 1 (ancien site)
• BULCO Bibliothèque de l'Université du Littoral
Côte d'Opale
• SCD de l'Université de Reims Champagne-
Ardennes
• SCD de Limoges
• SCD de l'Université Méditerranée Aix-Marseille II
Aucun de ces exemples n'est convaincant...
Manque de lisibilité... Aspect fourre-tout...

29. SCD Pau : la page de premier niveau est très convaincante…

30. La page de second niveau est pas mal, mais on peut mieux faire…

31. Heureusement, on a finalement trouvé ce site !
Lucy Scribner Library (ancienne version du site)

32. Offrir la possibilité de partager n'importe quelle page... Est-ce bien utile ?
• Exemple : University of Saskatchewan
Permettre de partager les
actualités,
c'est peut-être bien
suffisant...

33. Autre idée (que nous n’avons pas reprise) : la carte interactive indiquant la disponibilité
en temps réel des ordinateurs en libre accès
• Georgia Tech Library

34. Computer availability
• Ball State University Library

35. Computer availability
•NCSU Library

36. Computer availability
• Oregon Sate University Library

37. Que pensez-vous du nouveau site de la BUA (Angers) ?

38. Par induction à partir de tous ces exemples: un site doit paraître dès le premier coup
d'oeil simple, familier et beau...
Source : "
Users love simple and familiar designs – Why websites need to
make a great first impression". Research Blog
http://googleresearch.blogspot.fr/2012/08/users-love-simple-and-
familiar-designs.html

39. 4. Modélisation

40. Un peu de carton et de colle…

41. Des tentatives avec un éditeur de texte

42. Et beaucoup de maquettes sous forme de
diaporamas plus ou moins affreuses…

44. Ce défilé d’horreurs nous a conduits
à tirer la conclusion qui s’imposait:
nous avions besoin d’un
graphiste…

46. 5 -La rédaction d’un cahier des charges
• Cahier des clauses techniques particulières
Travail minutieux permettant de dégager les
spécifications techniques, page par page
• Plan-projet
Surtout axé sur la gestion de projet (organisation,
répartition des rôles)
• Plan de tests
Permet d’évaluer le travail du prestataire (« recette »)
Il découle des spécifications techniques

47. Structure du plan-projet
I) Cartographie de l’existant
A) Faiblesses du site actuel
1. Au plan de l'ergonomie
2. Au plan fonctionnel
3. Au plan technique
B) Volumétrie indicative
II) Objectifs
III) Public cible
IV) Exigences techniques particulières
V) Acteurs (MOA et MOE)
VI) Plan d’assurance-qualité
A) Pilotage du projet
1. Participants
2. Ordre du jour type
B) Reporting
C) Communication
VII) Calendrier provisoire et phases du projet

48. Un projet qui mobilise 4 types d’acteurs

49. Maîtrise d’Œuvre et Maîtrise d’Ouvrage
Equipe projet MOA: Membres:
• Chef de projet : Pierre Naegelen
Missions: (Affaires Générales)
• Étude de l’existant • Charpentier Hervé (Affaires
• Définition des besoins Générales)
• Comaills Tania (BU Santé)
fonctionnels
• Daudé Vincent (BU Sciences)
• Modélisation d’une
• De Daran Henriette (BU Sciences)
maquette PPT • Marty Laurent (BU Santé)
• Validation des travaux du • Piani Dominique (BU Sciences)
graphiste • Rosier Fabienne (Santé/Affaires
Générales)
• Viguier Philippe (BU Sciences)

50. Maîtrise d’Œuvre et Maîtrise d’Ouvrage
MOE : Le Département TIC/TICE et
multimédia
Missions:
• Apporter au MOA son concours pour l’expression des besoins,
l’étude d’opportunité et l’élaboration de la note de lancement d’un
projet
• Effectuer le choix du CMS
• Sélectionner et paramétrer les modules dans Drupal
Membres:
• Chef de projet : Gilles de Berranger
• Philippe Baqué
• Philippe Gil

51. Maîtrise d’Œuvre et Maîtrise d’Ouvrage
Comité Technique:
Missions:
• pour le développement de la solution, il arbitre les priorités des besoins
détaillés, valide les documents de conception, suite les actions de sous-
traitance
• réceptionne les travaux
• pour le management du projet, il suit la gestion des risques
Membres:
• Pierre Naegelen (SCD)
• Hervé Charpentier (SCD)
• Gilles de Berranger (PSN-DTICE)
• Philippe Baqué (PSN-DTICE)
• Philippe Gil (PSN-DTICE)

52. Maîtrise d’Œuvre et Maîtrise d’Ouvrage
Comité de pilotage
Missions: Instance de décision et de pilotage stratégique du
projet
• Lancement du projet: finalités, objectifs, facteurs qualité et arbitrage
des moyens du projet
• Management du projet correspondant au suivi des échéances, des
risques et du contrôle qualité
Membres:
• Eric Marchadier (PSN)
• Pierre Chourreu (SCD)
• Michel Jacob (PSN-DTICE)

53. Prestataires
Graphiste
Vincent Fleury (société c’tookom) a élaboré la
maquette graphique et la charte graphique
Intégrateur Drupal
La société Makina Corpus, chargée de réaliser
l'intégration graphique de la maquette dans le
CMS Drupal. Makina Corpus a également apporté
son expertise et son appui technique pour le
paramétrage de Drupal.

54. 6. Phases ultimes avant la mise en ligne
• Rédaction d’une chaîne éditoriale
• Rédaction d’une charte éditoriale
• Formation des personnels (en présentiel et via
des tutoriels vidéos)
• Familiarisation des personnels avec l’outil (très
important !)

55. Chaîne éditoriale

56. Chaîne éditoriale

57. Charte éditoriale

58. Le calendrier…
De mars 2011 à juin 2011: réunions hebdomadaires Groupe projet site web + DTICE
pour déterminer les spécifications fonctionnelles et techniques
De novembre 2011 à avril 2012: élaboration/validation des maquettes avec le
graphiste Vincent Fleury
De janvier 2012 à octobre 2012: paramétrage du CMS Drupal par la dTICE
De fin août 2012 à mi-octobre 2012: intégration graphique par Makina Corpus
15 octobre: site disponible pour tout le personnel des bibliothèques de l’UPS
12 novembre : site ouvert au public

59. Les projets pour les mois à venir :
1. Usability tests sur le site
2. Amélioration de l’ergonomie du site et de l’outil de
découverte
3. Développement d’une version mobile du site

60. 1. Les usability tests
« Usability tests » : procéder à des tests auprès des usagers afin de dégager les points forts et surtout les
points faibles d’un site, afin de l’améliorer.
L’utilisabilité, usabilité ou encore aptitude à l'utilisation est définie par la norme ISO 9241-11 comme « le
degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis
avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié ». [Source : Wikipedia]
Vitesse
Vitesse “ Usability means that people who
et use the [site] can do so quickly testing
et
rapidité
rapidité and easily to accomplish their own
tasks” (Dumas et Redish)
Petit
“It takes only five users to uncover redesign
échantillon 80 percent of high-level usability
problems”. (Jakob Nielsen)
“Usability is an iterative process of retesting
Processus
itératif testing/redesign, retesting/redesign,
& retesting/redesign.” (Luther) Source : Bohyun Kim & Marissa Ball - Florida
International University

61. From Don't make me think! : a common sense approach to Web usability by Steve Krug.
Bohyun Kim & Marissa Ball - 3/23/2011 Computers in Libraries 2011
http://fr.slideshare.net/bohyunkim/usability-express-recipe-for-libraries

62. From Don't make me think! : a common sense approach to Web usability by Steve Krug.
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

63. Usual Suspects
1. Clutter / Noise
2. Dated look
3. Too subtle design
4. Unclear terms / library jargon
5. Redundant or unnecessary content
6. Bad writing
7. Design against convention
8. Unintuitive navigation
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

64. 1. Clutter / Noise
• Promote all things
→ Nothing stands out.
• Users have no idea where to focus/start.
• Information overload
→ Stress
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

65. ABC Library
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

66. 2. Dated Look
• Lowers the credibility of the site.
• Users suspect outdated content.
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in

67. 2
ABC
ABC Library
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

68. ABC Library
2
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

69. 3. Too Subtle Design
• Users scan web pages like a billboard
while driving a car at 60 miles/hr.
• Subtlety in web design often backfires.
• Good web design ≠ Good print design
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

70. 4. Unclear Terms/Library Jargon
• Test your site with new users.
– Card sorting method
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

71. ABC Library
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

72. ABC Library
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

73. 4. Unclear Terms/Library Jargon
• Replace all jargons with plain terms.
• Do not use the product names that the
vendors picked on your library website!
• Use a short description if necessary.
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

74. 5. Redundant/unnecessary
Content
• Redundant content creeps in as time goes by.
– Welcome, Introduction, etc.
• Unnecessary content = Small talk
– Users have no interest in small talk.
• Answer users’ questions, not yours.
• Serve content that users can grab and go.
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

75. Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

76. 5. Redundant/unnecessary
Content
• Make a content inventory.
• Review content by category & purpose.
• Remove overlapping, redundant, unnecessary
content.
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

77. 6. Bad Writing
• Rewrite a page to be the half of its length.
• Then cut more!
• Do:
– Use clear headings.
– Make paragraphs short.
– Start with the key point.
– Make content easy to scan (*bullets)
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

78. Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

79. Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

80. ABC Library
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

81. 7. Design against Convention
• The best ally of usability is convention.
• Anything that prompts a pause and thinking
is bad.
Surprise
Confusion
Agony over choice
Stress
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

82. 7. Design against Convention
• Don’t underestimate the value of convention.
• Be creative without sacrificing usability.
• Convention implies:
– Obvious & predictable = familiarity
– No need to learn how to use
– No need for explanation/description
→ User satisfaction
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

83. 8. Unintuitive Navigation
• Is it an information architecture issue?
• If so, use usability testing methods to find out
what navigation structure / organization of
content makes sense to users.
Bohyun Kim & Marissa Ball -
3/23/2011 Computers in
Libraries 2011

84. Un excellent exemple d’ usability test :
le blog de la NCSU Library
Méthode :
• une trentaine d’usagers pris au hasard dans le hall
de la bibliothèque est sollicitée pour tester la
navigation sur le site
• Une liste de 15 tâches leur est proposée. Ils
doivent effectuer 4 des 15 tâches et indiquer dans
un questionnaire par quel chemin ils sont passés

85. Les usability tests pratiqués par la NCSU Library
Ce qui permet de
lister les points
forts et les points
faibles.

86. Les usability tests pratiqués par la NCSU Library

87. Amélioration de l’ergonomie de l’outil de
découverte
Idée : les lecteurs sont perdus par l’abondance des résultats proposés et
n’utilisent pas les facettes en aval. Il faut donc proposer des facettes en
amont…
Exemple : Queensland University of Technology Library

88. Autres exemples d'amélioration de l'ergonomie de l’outil de découverte
CSU San Marcos Libraries Emory Libraries
Duke University Libraries NCSU Libraries

89. 3. Dernier grand projet : développement d’un site web mobile...
Version mobile [en cours, pas encore de deadline]
• Bordeaux 3 • BUA (Angers)

90. Dernier grand projet : développement d’un site
web mobile...
• University of Arizona Library • University of Michigan Library

91. Dernier grand projet : développement d’un site web mobile...
• Ball State University Libraries • Oregon State Universities
Libraries
Pour voir d'autres réalisations, se reporter
à http://www.libsuccess.org/index.php?title=M-Libraries

92. Dernier grand projet : développement d’un site
web mobile...
• Faut-il signaler les bases de données (version mobile ?)
 un grand nombre d'éditeurs proposent des versions mobiles
(voir article dans Bibliopedia)
• Le forfait est-il un problème ?
- les smartphones permettent de se connecter au WiFi
- La plupart des nouveaux forfaits de smartphones ne sont plus
basés sur une durée de connexion

93. Voici à quoi ça pourrait ressembler pour Toulouse 3...

96. Quelques conseils de lecture...

97. Des questions ?
Question Mark. Par Winged Wolf. CC BY-NC-ND 2.0. Source: Flickr

98. Merci de votre attention !
pierre.naegelen@univ-tlse3.fr
Blog : Numeribib