Gestion de projet site web

1. Gestion de projet de site webLe 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…

7. Objectifs du site:Permettre un accès rapide aux services proposés par les bibliothèques de l’UPSValoriser la production de l’établissement : thèses, archives ouvertes, cours enlignePermettre un accès rapide aux services proposés par les bibliothèques de l’UPS, ycompris des services nouveaux ou innovants : chat, web-confs, rendez-vousbibliographiques individualisés, réservation de salle de travail en groupeDonner un maximum de visibilité aux actualitésConstituer 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 à nimporte quel moment et surnimporte quel sujetPermettre 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 desbibliothèques

8. Objectifs du site:Faciliter laccès nomade aux ressources électroniques pour lesquelles lUniversité asouscrit un abonnementProposer un accompagnement individualisé interactif via des accès thématiquesprofilés selon l’internauteProposer un site traduit en plusieurs languesOffrir un accès qui soit ouvert à tous et en même temps personnalisé et ciblé enfonction des besoins des étudiants et personnels de létablissement

9. Notions-clés: la bibliothèque hybride et les servicesCaractère hybride des bibliothèques: les services articulent toujours deuxniveaux: physique/numérique, local/globalLe site web doit être orienté vers les services et non pas simplement vers lesdocumentsLe site web doit présenter comme un tout homogène l’ensemble des services,qu’ils soient physiques ou numériquesQu’il s’agisse de services physiques ou numériques, il s’agit de mettre l’usagerau cœur du dispositif

10. Quelle méthode de travail ?

11. Méthode de travail…1. Evaluer le site actuel pour établir une cartographie de l’existant2. Recenser et synthétiser les besoins3. Benchmarking4. Modélisation5. Rédaction d’un cahier des charges6. Phases ultimes avant la mise en ligne

12. 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/

13. Cartographie de l’existant – Au plan de lergonomieLe 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...)•

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

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

16. 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

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

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

19. Le SCD Université Lyon 2Mise envaleurefficace desservicesproposés parlabibliothèque

20. La BNUSLesdifférentsformulairesde contactsontregroupéssur unemême page

21. La Boston UniversityPlaceconsidérablelaissée à l’imagefixe ou vidéo+Menu « scrolldown »

22. La Cornell University LibraryL’image de fond se modifie àchaque rafraîchissement de lapage

23. La Bibliothèque de lUniversité dAmsterdam L’image de fond est changeante + Caractère volontairement dépouillé du site : esprit « zen »

24. La NCSU Library

25. La NCSU LibraryPlusieurs qualités listées par J. Sicot et A. Marois :•« Carte interactive et en temps réel des postes informatiques disponibles ou nondans la bibliothèque•Système de réservation de salles de travail•Le système principal de navigation (megadropdown menus) permet une très bonnevisibilité de lensemble des rubriques/services du site (le tout sans un seul clic,simplement au survol)•Système de chat disponible dès la page daccueil, par un simple clic•Tableau des horaires douverture pour toutes les bibliothèques et pour toutes lespériodes de lannée•Page présentant les différentes modalités disponibles pour demander de laide à unbibliothé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 »

26. La mise en valeur des bases de données: lexemple inspirant de la BUA

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

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

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

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

31. Offrir la possibilité de partager nimporte quelle page... Est-ce bien utile ?• Exemple : University of Saskatchewan Permettre de partager les actualités, cest peut-être bien suffisant...

32. 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

33. Computer availability• Ball State University Library

34. Computer availability•NCSU Library

35. Computer availability• Oregon Sate University Library

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

37. Par induction à partir de tous ces exemples: un site doit paraître dès le premier coup doeil 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

38. 4. Modélisation

39. Un peu de carton et de colle…

40. Des tentatives avec un éditeur de texte

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

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

43. 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

44. Structure du plan-projetI) Cartographie de l’existantA) Faiblesses du site actuel 1. Au plan de lergonomie 2. Au plan fonctionnel 3. Au plan techniqueB) Volumétrie indicativeII) ObjectifsIII) Public cibleIV) Exigences techniques particulièresV) Acteurs (MOA et MOE)VI) Plan d’assurance-qualitéA) Pilotage du projet 1. Participants 2. Ordre du jour typeB) ReportingC) CommunicationVII) Calendrier provisoire et phases du projet

45. Un projet qui mobilise 4 types d’acteurs

46. Maîtrise d’Œuvre et Maîtrise d’OuvrageEquipe 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)

47. Maîtrise d’Œuvre et Maîtrise d’Ouvrage MOE : Le Département TIC/TICE et multimédiaMissions:• 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 DrupalMembres:• Chef de projet : Gilles de Berranger• Philippe Baqué• Philippe Gil

48. 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 risquesMembres:• Pierre Naegelen (SCD)• Hervé Charpentier (SCD)• Gilles de Berranger (PSN-DTICE)• Philippe Baqué (PSN-DTICE)• Philippe Gil (PSN-DTICE)

49. Maîtrise d’Œuvre et Maîtrise d’Ouvrage Comité de pilotageMissions: 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)

50. Prestataires GraphisteVincent Fleury (société c’tookom) a élaboré lamaquette graphique et la charte graphique Intégrateur DrupalLa société Makina Corpus, chargée de réaliserlintégration graphique de la maquette dans leCMS Drupal. Makina Corpus a également apportéson expertise et son appui technique pour leparamétrage de Drupal.

51. 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 !)

52. Chaîne éditoriale

53. Chaîne éditoriale

54. Charte éditoriale

55. Le calendrier…De mars 2011 à juin 2011: réunions hebdomadaires Groupe projet site web + DTICEpour déterminer les spécifications fonctionnelles et techniquesDe novembre 2011 à avril 2012: élaboration/validation des maquettes avec legraphiste Vincent FleuryDe janvier 2012 à octobre 2012: paramétrage du CMS Drupal par la dTICEDe fin août 2012 à mi-octobre 2012: intégration graphique par Makina Corpus15 octobre: site disponible pour tout le personnel des bibliothèques de l’UPS12 novembre : site ouvert au public

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

57. 1. Les usability tests« Usability tests » : procéder à des tests auprès des usagers afin de dégager les points forts et surtout lespoints faibles d’un site, afin de l’améliorer.L’utilisabilité, usabilité ou encore aptitude à lutilisation est définie par la norme ISO 9241-11 comme « ledegré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définisavec 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

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

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

60. Usual Suspects1. Clutter / Noise2. Dated look3. Too subtle design4. Unclear terms / library jargon5. Redundant or unnecessary content6. Bad writing7. Design against convention8. Unintuitive navigation Bohyun Kim & Marissa Ball - 3/23/2011 Computers in Libraries 2011

61. 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

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

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

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

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

66. 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

67. 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

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

69. ABC LibraryBohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011

70. 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

71. 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

72. Bohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011

73. 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

74. 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

77. ABC LibraryBohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011

78. 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

79. 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

80. 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

81. Un excellent exemple d’ usability test : le blog de la NCSU LibraryMé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

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

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

84. 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

85. Autres exemples damélioration de lergonomie de l’outil de découverte CSU San Marcos Libraries Emory Libraries Duke University Libraries NCSU Libraries

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

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

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

89. 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

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

91. Quelques conseils de lecture...

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

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