Gestion de projet site web

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

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

Les sites web aussi…

Premier site web du SCD…

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

Deuxième site web…

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

Et maintenant…

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

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

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

Quelle 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

Méthode de travail…

1. Evaluation du site web…

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

– 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...)

•  

Cartographie de l’existant

– 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

• Pour recueillir et formaliser les besoins, on a eu recours à la technique du « brown paper »

2. Expression des besoins…

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

Autrement dit regarder ce qui se fait ailleurs.

3. Le benchmarking…

SCD Université Versailles Saint-Quentin

Formulation claire et simple…que nous avons reprise

Le SCD Université Lyon 2

Mise en valeur efficace des services proposés par la bibliothèque

La BNUS

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

La Boston University

Place considérable laissée à l’image fixe ou vidéo

+

Menu « scroll down »

La Cornell University Library

L’image de fond se modifie à chaque rafraîchissement de la page

La Bibliothèque de l'Université d'Amsterdam

L’image de fond est changeante

+

Caractère volontairement dépouillé du site :

esprit « zen »

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 »

La NCSU Library

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

• 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

La question des accès disciplinaires...

Aucun de ces exemples n'est convaincant... Manque de lisibilité... Aspect fourre-tout...

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

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

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

• Exemple : University of Saskatchewan 

Offrir la possibilité de partager n'importe  quelle page... Est-ce bien utile ?

Permettre de partager les actualités,c'est peut-être biensuffisant...

• Georgia Tech Library 

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

• Ball State University Library

Computer availability

•NCSU Library Computer availability

• Oregon Sate University Library  Computer availability

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

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

The latest news from Research at Google.

4. Modélisation

Un peu de carton et de colle…

Des tentatives avec un éditeur de texte

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

Ce défilé d’horreurs nous a conduits à tirer la conclusion qui s’imposait:

nous avions besoin d’un graphiste…

• Cahier des clauses techniques particulièresTravail minutieux permettant de dégager les spécifications

techniques, page par page

• Plan-projetSurtout axé sur la gestion de projet (organisation, répartition

des rôles)

• Plan de testsPermet d’évaluer le travail du prestataire (« recette »)

Il découle des spécifications techniques

5 -La rédaction d’un cahier des charges

I) Cartographie de l’existantA) 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

Structure du plan-projet

Un projet qui mobilise 4 types d’acteurs

Maîtrise d’Œuvre et Maîtrise d’Ouvrage

Equipe projet MOA:

 Missions:• Étude de l’existant• Définition des besoins

fonctionnels• Modélisation d’une

maquette PPT• Validation des travaux du

graphiste

Membres:• Chef de projet : Pierre Naegelen (Affaires

Générales)• Charpentier Hervé (Affaires Générales)• Comaills Tania (BU Santé)• Daudé Vincent (BU Sciences)• De Daran Henriette (BU Sciences)• Marty Laurent (BU Santé)• Piani Dominique (BU Sciences)• Rosier Fabienne (Santé/Affaires Générales)• Viguier Philippe (BU Sciences)

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

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)

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)

Maîtrise d’Œuvre et Maîtrise d’Ouvrage

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.

Prestataires

• 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 !)

6. Phases ultimes avant la mise en ligne

Chaîne éditoriale

Chaîne éditoriale

Charte éditoriale

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

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

Les projets pour les mois à venir :

« 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]

1. Les usability tests

Vitesse et

rapidité

Vitesse et

rapidité

Petit échantillon

“ Usability means that people who use the [site] can do so quickly and easily to accomplish their own tasks” (Dumas et Redish)

“It takes only five users to uncover 80 percent of high-level usability problems”. (Jakob Nielsen)

Source : Bohyun Kim & Marissa Ball - Florida International University 

testing

retesting

redesign

Processus itératif

“Usability is an iterative process of testing/redesign, retesting/redesign, & retesting/redesign.” (Luther)

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 2011http://fr.slideshare.net/bohyunkim/usability-express-recipe-for-libraries

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

1. Clutter / Noise 2. Dated look 3. Too subtle design4. Unclear terms / library jargon5. Redundant or unnecessary content6. Bad writing 7. Design against convention8. Unintuitive navigation

Usual Suspects

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

• Promote all things → Nothing stands out.

• Users have no idea where to focus/start.• Information overload

→ Stress

1. Clutter / Noise

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

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

ABC Library

• Lowers the credibility of the site.• Users suspect outdated content.

2. Dated Look

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

2

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

ABC Library

ABC

ABC Library 2

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

• 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

3. Too Subtle Design

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

• Test your site with new users.– Card sorting method

4. Unclear Terms/Library Jargon

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

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

ABC Library

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

ABC Library

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

4. Unclear Terms/Library Jargon

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

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

5. Redundant/unnecessary Content

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

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

• Make a content inventory.• Review content by category & purpose.• Remove overlapping, redundant, unnecessary

content.

5. Redundant/unnecessary Content

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

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

6. Bad Writing

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

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

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

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

ABC Library

• The best ally of usability is convention.• Anything that prompts a pause and thinking

is bad. Surprise

Confusion Agony over choice

Stress

7. Design against Convention

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

• 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

7. Design against Convention

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

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

8. Unintuitive Navigation

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

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

Les usability tests pratiqués par la NCSU Library

Ce qui permet de lister les points forts et les points faibles.

Les usability tests pratiqués par la NCSU Library

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

Autres exemples d'amélioration de l'ergonomie de l’outil de découverte

CSU San Marcos Libraries

NCSU LibrariesDuke University Libraries

Emory Libraries

Version mobile [en cours, pas encore de deadline]

3. Dernier grand projet : développement d’un site web mobile...

• Bordeaux 3 • BUA (Angers)

Dernier grand projet : développement d’un site web mobile...

• University of Arizona Library • University of Michigan Library

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

• 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

Dernier grand projet : développement d’un site web mobile...

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

Quelques conseils de lecture...

Des questions ?

Question Mark. Par Winged Wolf. CC BY-NC-ND 2.0. Source: Flickr

Merci de votre attention !

pierre.naegelen@univ-tlse3.fr

Blog : Numeribib