Gestion de projet site web

6,600 views

Published on

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

Published in: Education
6 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
6,600
On SlideShare
0
From Embeds
0
Number of Embeds
736
Actions
Shares
0
Downloads
158
Comments
6
Likes
8
Embeds 0
No embeds

No notes for slide

Gestion de projet site web

  1. 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. 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. 3. Les sites web aussi…
  4. 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. 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. 6. Et maintenant…
  7. 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. 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. 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. 10. Quelle méthode de travail ?
  11. 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. 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. 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. 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. 15. 2. Expression des besoins…• Pour recueillir et formaliser les besoins, on a eu recours à la technique du « brown paper »
  16. 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. 17. 3. Le benchmarking…Autrement dit regarder ce qui se fait ailleurs.
  18. 18. SCD Université Versailles Saint-Quentin Formulation claire et simple…que nous avons reprise
  19. 19. Le SCD Université Lyon 2Mise envaleurefficace desservicesproposés parlabibliothèque
  20. 20. La BNUSLesdifférentsformulairesde contactsontregroupéssur unemême page
  21. 21. La Boston UniversityPlaceconsidérablelaissée à l’imagefixe ou vidéo+Menu « scrolldown »
  22. 22. La Cornell University LibraryL’image de fond se modifie àchaque rafraîchissement de lapage
  23. 23. La Bibliothèque de lUniversité dAmsterdam L’image de fond est changeante + Caractère volontairement dépouillé du site : esprit « zen »
  24. 24. La NCSU Library
  25. 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. 26. La mise en valeur des bases de données: lexemple inspirant de la BUA
  27. 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. 28. SCD Pau : la page de premier niveau est très convaincante…
  29. 29. La page de second niveau est pas mal, mais on peut mieux faire…
  30. 30. Heureusement, on a finalement trouvé ce site !Lucy Scribner Library (ancienne version du site)
  31. 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. 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. 33. Computer availability• Ball State University Library
  34. 34. Computer availability•NCSU Library
  35. 35. Computer availability• Oregon Sate University Library
  36. 36. Que pensez-vous du nouveau site de la BUA (Angers) ?
  37. 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. 38. 4. Modélisation
  39. 39. Un peu de carton et de colle…
  40. 40. Des tentatives avec un éditeur de texte
  41. 41. Et beaucoup de maquettes sous forme de diaporamas plus ou moins affreuses…
  42. 42. Ce défilé d’horreurs nous a conduits à tirer la conclusion qui s’imposait: nous avions besoin d’un graphiste…
  43. 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. 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. 45. Un projet qui mobilise 4 types d’acteurs
  46. 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. 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. 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. 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. 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. 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. 52. Chaîne éditoriale
  53. 53. Chaîne éditoriale
  54. 54. Charte éditoriale
  55. 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. 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. 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. 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. 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. 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. 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. 62. ABC Library Bohyun Kim & Marissa Ball - 3/23/2011 Computers in Libraries 2011
  63. 63. 2. Dated Look• Lowers the credibility of the site.• Users suspect outdated content. Bohyun Kim & Marissa Ball - 3/23/2011 Computers in
  64. 64. 2ABC ABC Library Bohyun Kim & Marissa Ball - 3/23/2011 Computers in Libraries 2011
  65. 65. ABC Library 2 Bohyun Kim & Marissa Ball - 3/23/2011 Computers in Libraries 2011
  66. 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. 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. 68. ABC Library Bohyun Kim & Marissa Ball - 3/23/2011 Computers in Libraries 2011
  69. 69. ABC LibraryBohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011
  70. 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. 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. 72. Bohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011
  73. 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. 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
  75. 75. Bohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011
  76. 76. Bohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011
  77. 77. ABC LibraryBohyun Kim & Marissa Ball -3/23/2011 Computers inLibraries 2011
  78. 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. 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. 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. 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. 82. Les usability tests pratiqués par la NCSU Library Ce qui permet de lister les points forts et les points faibles.
  83. 83. Les usability tests pratiqués par la NCSU Library
  84. 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. 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. 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. 87. Dernier grand projet : développement d’un site web mobile...• University of Arizona Library • University of Michigan Library
  88. 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. 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. 90. Voici à quoi ça pourrait ressembler pour Toulouse 3...
  91. 91. Quelques conseils de lecture...
  92. 92. Des questions ?Question Mark. Par Winged Wolf. CC BY-NC-ND 2.0. Source: Flickr
  93. 93. Merci de votre attention !pierre.naegelen@univ-tlse3.fr Blog : Numeribib

×