SlideShare une entreprise Scribd logo
CREER UN SITE WEB ?
Méthode illustrée par la médiathèque de Roubaix
PARTIE 1 – Définition et
cadrage
Juliane Casier – chef de projet numérique
Médiathèque de Roubaix La Grand-Plage
Retour d’expérience – avril 2018
Entre 2015 et 2014, la médiathèque a entièrement refait son
site internet. (Et son SIGB, et son rez de chaussée… mais c’est
une autre histoire).
Des centaines de documents ont été produits, des heures de
réflexion ont été passées… Tout ça pour un tout petit portail
de bibliothèque mis en ligne en septembre 2015
www.mediathequederoubaix.fr
Le site a beau être magnifique, ce document permet de
synthétiser et garder une trace du projet et des réflexions qui
ont été faites. Pour qu’éventuellement cela puisse servir à
d’autres.
 Une équipe issue du monde de la gestion de projet
(donc qui utilise amoureusement quelques outils type
fiche de cadrage, planning ).
 Un intérêt certain mais pas forcément maîtrisé pour les
méthodologies d’UX design => le manque d’expertise
est compensé par des réunions d’équipe pour se poser
les questions existentielles.
 Un outil « à façon avec une totale liberté pour créer les
interfaces graphiques du site web. Cela était imposé
dans notre cahier des charges.
Pourquoi on était convaincus par les méthodologies d’UX
Design ?
Parce qu’on est surs de peu de choses mais qu’on a pris le
parti suivant : un site réussi est un site qui répond aux
besoins des utilisateurs.
L’ambition du projet était élevée (mais quitte à faire autant
viser haut) : Faire un site internet de qualité, qui répond aux
besoins des utilisateurs.
A cela, notre réponse a été… la méthode. On utilise les outils
présentés ci-dessous, on crée un processus de travail (avec
des réunions régulières et courtes où on se pose les
questions), on fait attention à respecter le planning (et pour
ca, la solution c’est souvent de viser moins haut en priorisant
le plus important) … et le reste suit (avec un peu d’énergie).
On n’a pas suffisamment de recul pour savoir si le résultat est
réussi (il est visible ici www.mediathequederoubaix.fr ) mais le
plan du document suit les méthodes et outils principaux
utilisés tout au long du projet.
Des outils réutilisables et les documents les plus importants
construits avant la rédaction du cahier des charges, pour
définir quel site internet on voulait. Une 2è partie sera
produite un jour sur la mise en œuvre
△ C’est quoi ce document ?
Introduction
▲ Les caractéristiques du projet
△ Créer un site internet de qualité, qui
répond aux besoins des utilisateurs, c’est
facile…. ???
△ On trouve quoi dans ce document ?
Côté Roubaix
Côté prestataire (W3Line puis Décalog)
▲ L’équipe projet
Qi
stagaire ergonome
Juliane
Chef de projet
François
Chargé de projet
Le comité de pilotage
(l’équipe de direction)
Christian
Chef de projet
Gladys
Ergonome
Samuel
Spécialiste
statitistique web
Thomas
Développeur
Christine
Ingénieur DSI
Laurent
Directeur de projet
2. La définition de l’identité
du futur site internet
1. Travail préparatoire….on
définit ce qu’on veut faire
▼ Outil 1 - La fiche de cadrage
▼ Outil 2- les personas
▼ Outil 3 - Définition de l’utilité du site
internet
▼ Faire une cartographie de l’existant
▲ Réfléchir à ce qu’on aime (ou pas) et se
former collectivement au web
▲ Synthèse des axes forts pour le futur
site internet de la médiathèque de
Roubaix
Créer un site internet de qualité, qui répond aux besoins des utilisateurs
~~~DEFINITION ET CADRAGE~~~
3. Le cahier des charges
Première étape, définir et formaliser ce qu’on veut faire et pourquoi on veut le faire. Dans cette partie, chaque outil est présenté
rapidement de manière théorique puis sont détaillées les étapes pour expliquer et donner accès aux documents du projet
Une fiche de cadrage c’est quoi ?
C’est l’élément principal du projet, qui résume tout en une page. S’il ne fallait
garder qu’un seul outil ce serait celui là. Ca résume les éléments essentiels de ce
qu’on est en train de créer
Ça sert à …
Se poser les bonnes questions et prioriser (comme la fiche est synthétique)
Communiquer sur le projet
Faciliter le travail : en la relisant en 5’ n’importe qui doit voir les enjeux
essentiels du projet
Nommer le projet (lui donner un titre, ca permet d’en parler plus
facilement)
Faire valider la fiche de cadrage avant de se lancer, afin que les questions
fondamentales soient discutées avant d’avoir déjà trop avancé
1. Travail préparatoire….on définit ce qu’on veut faire
▲ Outil 1 – La fiche de cadrage
▲ ▼La fiche de cadrage du site internet de la
médiathèque de Roubaix
Les personas, c’est quoi ?
C’est un utilisateur cible et fictif qui permet de fixer des priorités et guider les décisions
de conception d’interface & éditoriale.
A quoi ça sert ?
Ça sert à se pencher sur ses utilisateurs. Pour le cas du projet de refonte de la
médiathèque de Roubaix, ceux-ci ont été créés collectivement pour essayer de créer une
dynamique axée utilisateur (mais qui n’a pas tellement perduré, il aurait fallu les faire
vivre au sein des équipes..).
Ils ont ensuite servis régulièrement tout au long du projet
 Pour construire les contenus de la page d’accueil et les éléments qu’on retrouve sur
toutes les pages du site
 Pour se repositionner, quand on se pose des questions importantes (Choisir entre
plusieurs maquettes graphiques, décider d’un principe de fonctionnement ou d’une
fonctionnalité…)
Si c’était à refaire
(Parce que depuis le guide du design thinking est passé par là)
On ajouterait des interviews de réels utilisateurs pour sortir de la médiathèque (là on
était un peu focalisés) – ce qui nous intéresse c’est de comprendre comment les
utilisateurs fonctionnent chez eux et d’avoir des éléments au maximum objectifs.
Les étapes qu’on a utilisées pour produire les personas :
- Définir les typologies d’utilisateur grâce aux statistiques
- Un atelier collaboratif pour que les collègues en contact avec le public fassent part de leur expertise en terme d’usagers
- Un retravail pour rendre les personas utiles au projet – par une ergonome
- Ces personas ont été enrichies par notre stagiaire en ergonomie au fur et à mesure du projet
△▲ Outil 2 - Les personas
▲ ▼Un atelier collaboratif pour définir des personas
NB : voir détail des outils utilisés en Annexe 1
Quelques résultats de l’atelier
▲ ▼Le travail de synthèse par une ergonome : les personas de la médiathèque
L’utilité c’est quoi ?
C’est une notion en ergonomie informatique, il s’agit de la liste
de ce à quoi sert l’interface. 1
A quoi ça sert ?
 A définir en détails comment et pourquoi va être utilisé le site internet.
Si c’était à refaire :
On aurait ouvert à l’utilisation mobile. On aurait complété avec des entretiens
d’utilisateurs pour être plus proche d’utilisateurs réels (et moins d’utilisation définies
par la bibliothèque et les bibliothécaires) et être plus déconnectés de la médiathèque.
▲ ▼L’utilité du site internet de la médiathèque de
Roubaix
1 http://www.ergolab.net/articles/ergonomie-informatique.php
▼ Outil 3 – Définition de l’utilité du site internet
A quoi ça sert ?
A savoir de où on part, ce qui permettra d’avoir une ligne
de route.
Pour la médiathèque de Roubaix, nous avons effectué
deux cartographies :
- Une cartographie des outils web
- Un audit du site internet existant
▲ ▼La cartographie des outils web
de la médiathèque
On cartographie les différents outils web utilisés par la
médiathèque pour définir les mécaniques et les apports
de chaque outils, ainsi que la logique de tous les outils
entre eux.
▼ Faire une cartographie de l’existant
▲ ▼ L’audit du site internet existant.
Comme on part sur une redéfinition complète du site internet, l’audit ne sert que de point de départ pour faire ressortir ce qu’on
souhaite garder, ce qui fait l’identité et les qualités du site existant. Pour cela on a utilisé une grille permettant de mesurer un
certain nombre de critères (page d’accueil, fonctionnalités, navigation…).
Les éléments principaux sont synthétisés dans un rapport.
L’audit ne peut pas être fait par le webmaster, il faut un regard frais et distancié (quand on s’occupe d’un outil quotidiennement il
est impossible d’avoir un réel regard critique dessus). Dans notre cas, c’est un stagiaire en ergonomie qui l’a fait, complété par une
ergonome (prestation demandée en tout début de projet).
Les résultats de l’audit de l’ancien site
1. Manque de cohérence et de visibilité des éléments de navigation
 Le menu principal se distingue mal et est confondu avec le fond
 Plusieurs menus sont à utiliser simultanément pour naviguer et ils
sont souvent redondants
2. Multiplication des accès aux sites et fonctionnalités
 Plusieurs outils sont utilisés : site/blog (typo3), catalogue (Horizon
Dynix), Bnr (w3line). Liés à l’historique du site
3. Une page d’accueil uniquement centrée sur l’agenda
Elle devrait pouvoir mettre en valeur l’ensemble des informations qui « font
la médiathèque ». Par exemple, des informations pratiques pourraient être
utiles dès la page d’accueil, mais la rubrique est isolée tout à droite de
l’écran.
4. Le manque d’accès directs
Il n’y a pas possibilité de s’authentifier sur le site, et pas de filet de recherche
pour le catalogue.
5. Le site évite l’utilisation excessive de scripts, applets etc…
On ne relève pas non plus d’éléments en technologie flash ce qui est positif.
Cependant, le site est trop statique
6. Les pages statiques du site sont particulièrement textuelles
Le site contient des articles plutôt longs et assez peu d’images,
contrairement au blog et à l’agenda plus attractifs, plus directs.
7. Le site a une identité graphique originale
Le site de la médiathèque de Roubaix ne ressemble pas un site de
médiathèque. Il échappe au carcan imposé des portails spécialisés. Son
originalité est un élément important. Même si la charte graphique change, il
faudra conserver cet aspect original et innovant, tout en identifiant bien les
services et fonctionnalités proposés
Deuxième étape pour construire un site internet de qualité : déterminer son identité et commencer à avoir une vision de ce qu’on
souhaite en terme de contenus et de graphisme.
En effet, un bon site web est un site qui a une forte identité : identité graphique et identité de service (et donc selon nous –
identité des gens qui composent le service et l’alimentent). Le piège c’est souvent de vouloir tout mettre sur son site et de ne pas
faire de choix.
Pour cela, la solution choisie a été de critiquer des sites internet de manière intensive jusqu’à trouver et définir ce qui nous
intéressait. « Nous » c’était les professionnels de la médiathèque amenés à être impliqués sur le futur site, les volontaires et
l’équipe de direction. Cette démarche n’a pas intégré les utilisateurs finaux.
▲ ▼ Le café numérique
Le café numérique c’est quoi ?
C’est un concept « maison » : il s’agit de moments courts, conviviaux et réguliers durant lequel les personnes présentes critiquent
des sites internet. Le but était :
- D’infuser et diffuser de la culture web
- D’avoir un groupe qui se « forme l’œil » et qui définit au fur et à mesure son identité web en sortant les points qui sont
importants et ceux qui font consensus.
Les sites web sont collectés dans un Skloog
2
au fur et à mesure selon les propositions du groupe et une veille de l’équipe projet.
Les sites internet choisis sont plutôt issus du secteur privé (Les sites internet sont souvent plus à la pointe quand il y a un enjeu
financier et des équipes dédiées à la communication web).
Tous les comptes rendus étaient rédigés sur un blog Wordpress par le chef de projet, formé à l’écriture web – cela permet
également de diffuser la culture web. Les personnes répondaient dans les commentaires
Les cafés numériques ont duré pendant 5 mois, en amont de la rédaction du cahier des charges
2 http://www.skloog.com/user/jcasier/56590
On aurait utilisé maintenant plutôt MyFrama – équivalent libre de framasoft
2. La définition de l’identité du futur site internet
▼ Réfléchir à ce qu’on aime (ou pas) et se former collectivement au web
▲ ▼ Atelier de création de maquettes
Notre manière de clôturer le café numérique : proposer un atelier de création de maquettes de pages d’accueil grâce à du collage
de morceaux de sites internet existants. Le but est de passer de la critique à « faire ». Les résultats ont été utilisés ensuite pour
rédiger le cahier des charges, afin de ressortir des axes forts transmis au prestataire du futur site. Voir détail des outils utilisés en
Annexe 2
Maquette de Clotilde
Mission : innover
Concept :
- ne pas mettre de contenus en lien avec les collections depuis la
page d’accueil, utiliser le moteur de recherche pour cela
- Pied de page jouant sur l’humour et le décalage
Maquette de François et Elise
Mission : Attirer les jeunes
Concept :
- Développer le collaboratif (partie « Vous »)
- Image et vidéo au centre
Quelques résultats de l’atelier
Ne reste qu’à mettre les résultats de tous les ateliers dans
une grande marmite et les synthétiser (par exemple avec des
cartes mentales puis sous forme d’écrit à destination du futur
prestataire)
▲ ▼ Quel site internet pour la
médiathèque ? 3
OBJECTIF 1 : un Site avec des axes forts et une identité
graphique marquée
► Avoir une véritable création graphique avec un visuel fort
et tranché, qui correspond à l’identité de la médiathèque. Le
graphisme sera créé par un graphiste indépendant.
► Avoir un ou des service(s) et des parti pris marquant
Ce sera les surprises un dispositif participatif qui permet aux
utilisateurs en 15’ de « taguer » un document en fonction de
s’il a +/- aimé (ou pas). Ce concept est apparu au fur et à
mesure et a été inspiré des pochettes surprises (dispositif
physique existant dans les médiathèques).
D’autres idées ont émergé au fur et à mesure (voir Annexe 3)
mais une seule a été développée pour des questions de
faisabilité.
OBJECTIF 2 : un Site de qualité, qui répond aux besoins des
utilisateurs
►Revoir complètement le plan du site:
3 Si la majorité de ce document a été produit à la fin de la phase de cafés
numériques, certains commentaires sont faits avec du recul
 Partir des besoins des usagers uniquement - Démarche
UX décrite en détail dans le CCTP avec d’autres
éléments (voir Annexe 4)
► Avoir un ou deux services qui améliorent notablement le
système actuel
 Les lister et choisir. Les mettre en valeur dans le cahier
des charges
o Modifier son identifiant / mot de passe
o Ne pas avoir à se reconnecter pour accéder à une
ressource payante (Arte VOD, Assimil…)
o Pour les professionnels, créer des sélections de
documents facilement grâce à l’utilisation de
paniers
o N’avoir dans le catalogue que les documents
consultables (on enlève les sortis des collections)
► Trouver une place pour la médiation numérique des
savoirs (autrement dit, tout ce qui permet de mettre en
valeur des documents du catalogue via le web)
 Intégrer aux résultats de la recherche les contenus de
médiation
 Développer des espaces thématiques – médiation
destinée à un public spécifique
► Charte de qualité pour le futur site
 Définir des axes ergonomiques pour la conception du
futur site
o Cf annexe 5
 Définir une charte éditoriale pour le futur site
▼ Synthèse des axes forts pour le futur site internet de la médiathèque de Roubaix
Quelques résultats
Le service qui propose à l’utilisateur de personnaliser
son identifiant/ mot de passe (facilite l’accès à
l’espace personnel, au WIFI, aux ordinateurs de la
méd.)
L es résultats du
moteur de
recherche
proposent aussi
les articles du site
internet s’ils sont
pertinents
Espace thématique parent agrégeant tous les
contenus de la médiathèque qui peuvent les
intéresser + de la mise en avant de contenus du web
et de la médiathèque
Si un document a
fait l’objet d’une
surprise, d’une
sélection ou d’une
critique, cela se
retrouve sur la
notice
A ce stade, le projet était cadré (on savait ce qu’on voulait
faire), ne restait « plus » qu’à définir un cahier des charges.
Sachant qu’étant établissement public, on est soumis au code
des marchés publics.
L’enjeu de celui-ci est de décrire suffisamment la prestation
pour que le prestataire puisse chiffrer précisément son offre
(et qu’on puisse mettre en concurrence sur les même critères.
Il s’agit également de prévoir et imposer ce qu’il faut lors de la
mise en œuvre, tout en laissant une ouverture au prestataire
pour faire une offre la plus pertinente possible.
Le cctp est disponible à l’adresse :
http://www.mediathequederoubaix.fr/infos/qui-sommes-
nous
Au niveau de la description des prestations, on pense souvent
avant tout à décrire les fonctionnalités (ce qu’on veut que
l’outil fasse). Mais il faut aussi que Google sache qu’il existe,
qu’il corresponde aux habitudes d’utilisation des utilisateurs,
qu’il soit attractif (pas ringard, lisible), etc.. Et il est
important de faire des choix : il vaut en effet mieux 10
fonctionnalités utiles que 1000 moyennement pratiques. Or
ca n’est pas toujours évident de connaitre vraiment les
besoins et pratiques des utilisateurs.
Dans notre cahier des charges, nous avons ainsi intégré la
stratégie suivante :
1) Cadrer et présenter le site
- Présentation du site
o A partir des éléments ci-dessus : fiche de
cadrage, principes définis…
- Définition des grands principes du site internet :
o Mobile first
o Un site accessible, bien référencé (se pense dès la
conception)
o Recherche à la google
o Un site ergonomique et attractif graphiquement
2) Définir le périmètre complet de la prestation pour ne pas
oublier l’essentiel
- Gestion de projet : pour avoir un mode de
fonctionnement efficace et imposer des méthodes
ergonomiques qui permettent de modifier ce qui a été fait de
manière cadrée (on n’aime pas trop en projet défaire ce qu’on
a fait, ca porte un risque de ne jamais terminer le projet).
- Prestations d’ergonomie et de graphisme web
- Fonctionnalités de l’outil détaillées. On a imposé
certains outils pour lesquels on savait qu’ils répondaient aux
besoins (Piwik pour les statistiques par exemple).
- Prestation de référencement : description de ce qui
est imposé comme règles et outils, demande de
prestation de référencement
- Prestation d’accessibilité : description de ce qui est
imposé comme règles et outils, on imposé la
méthode en se basant sur les recommandations sur
l’accessibilité des sites WEB publics proposées par
le Ministère de l’Economie et des Finances (qui doit
dater un peu maintenant)
3. Le cahier des charges
△ Et maintenant… la définition du cahier
des charges
▲ Le périmètre de la prestation
3) Décrire ce qui permet de dimensionner l’outil
C’est souvent là qu’il ne faut pas tout décrire trop
précisément si on veut laisser un peu de marges aux solutions
qu’on n’envisage peut être pas. On peut ainsi décrire :
- Les grandes fonctionnalités attendues du CMS
- Les types de contenus du CMS pour pouvoir budgéter le
nombre d’interfaces à développer
- Les fonctionnalités du moteur de recherche (mais
attention à « maitriser » les demandes en ayant une
solution technique en tête sinon ca peut chiffrer)
- Développements spécifiques (dans notre cas, un module
de gestion de malles lecture développé à façon)
- Description de la manière dont le portail intéropère avec
les autres outils de la médiathèque (annuaire lecteur,
SIGB, ressources numériques payantes…)
- Description des besoins en authentification unique.
- Intégration des contenus du site internet (géré par le
CMS) et des notices bibliographiques (souvent géré par
la brique moteur de recherche)
On sait toujours mieux après coup ce qu’il aurait mieux valu
faire autrement. Dans notre cas, quelques idées :
- Prévoir la rémunération du prestataire segmenté sur
chaque release (à chaque livraison) – on a du faire
des avenants
- Prévoir la prestation d’ergonomie et de graphisme
dans un lot à part
o On souhaitait avoir une prestation d’un
ergonome pour nous aider à trouver des solutions
aux problèmes soulevés en tests utilisateurs. Et
on s’est rendus compte qu’un graphiste web avec
une formation en ergonomie c’est beaucoup
mieux mais ca ne se trouve pas toujours
facilement.
o Et dans l’idéal (parce que depuis on a testé la
méthode et que c’est vraiment efficace), on
aurait fait un focus group en amont du projet
(piloté par un prestataire ergonome web) plutôt
que pleins de tests utilisateurs
- Services + : on aurait réfléchi nous même à un
service de newsletter adapté. On a fini par utiliser
Mailjet (service externe) sans que cela soit cohérent
avec notre politique de maitrise des données
utilisateurs)
- Pour le référencement, on avait imposé des règles et
outils dans le cahier des charges (qui avaient été
défini grâce au cours sur le référencement d’Open
Classroom), mais la demande de prestation de
référencement n’a pas vraiment été suivie de faits.
- Idem pour la prestation d’accessibilité. On aurait dû
imposer la labellisation (souvent payante mais dont
le cout peut être intégré au projet) dans la foulée.
▲ Un retour d’expérience
A ce stade, le projet était défini, le prestataire choisi (Décalog
dans notre cas).
La mise en œuvre pouvait se dérouler…
A suivre dans une prochaine partie (quand on aura le temps
de développer la documentation), la mise en œuvre du projet
et du site internet, notamment la conduite des tests
utilisateurs.
Cette œuvre est rédigée en avril 2018 par la ville de Roubaix.
Elle est mise à disposition selon les termes de la Licence
Creative Commons Attribution – Partage dans les même
conditions
Conclusion
Mentions légales et condition de
réutilisation de ce document
Annexe 1 : Atelier de définition de personas – Déroulé et
outils
Déroulé :
A – Présentation
9h10-9h20
Qui : personnes en contact avec le public. Amené à cotoyer
des types d’usagers différents (2 par type d’usager)
 Définition d’un persona - Animateur
Personnage virtuel créé artificiellement, usager cible du
futur portail.
Partir du réél commun. Puis dans un deuxième temps,
spécifier / imaginer (par exemple, rapport à
l’informatique)
Les + rééls = + efficaces.
A quoi vont servir les personas :
Outil qui seront utilisés pendant la conception des
interfaces
> Interface fonctionnelle
> Graphisme
> Parcours d’usage
> Complémentaires des tests utilisateurs
B- Présentation du déroulé de l’atelier
PHASE 1 – présentation de l’atelier - 9h20-9h30
PHASE 2 – Se mettent au travail par groupe de deux –
9h30-10h30
Prendre une des catégories d’utilisateur distribué (groupe
par espace – on donne à l’oral les types d’usager que les
participants côtoient dans le cadre de leur service au
public)
Choisir un usager typique d’un espace que vous connaissez
et décrire leurs usages de la médiathèque et du numérique
Consignes : (données au fur et à mesure en tournant dans
les groupes)
- Plutôt quelqu’un qui utilise internet, le numérique…
(pas une personne qui ne l’utilisera JAMAIS ).
- un mot clef que je vais distribuer (voir ci-dessous les
types d’utilisateur) => un espace ou un type d’usager
pour chacun
- Personne représentative d’un espace que vous
connaissez
- Plutôt monsieur tout le monde (pas usagers qui
râlent et qu’on remarque +): quelqu’un représentatif
d’un groupe
- Rapport à la médiathèque : utilise quel(s) espace(s)
en priorité, pour faire quoi ?
- Décrire ses usages
- Contexte sans intérêt, usages surtout: numérique
(informatique, ressources num’, site internet depuis
chez lui, catalogue ici)
Remplir le modèle distribué (cf ci-dessous)
PHASE 3 – Présentation, discussion, commentaire – 10h30-
11h30
Annexes
 1 par un, présentation des personas en temps limité (10
personnes, 40 minutes) / 9h45 – 10h30
 Discussion, commentaires
PHASE 4 – Mise au propre, envoi
NB : analyse a posteriori :
Piège = être dans le cliché ou être « à côté ». On aurait
privilégié une séance d’entretien avec des utilsateurs rééls
Types d’utilisateurs (effectué en amont à partir des
statistiques sur les inscrits)
Jeune Utilisate
ur du
pole
réussir
(emploi)
Nouvel
usager
(creuser
ce qu’il
va
chercher)
Utilise
régulièreme
nt le site
internet
depuis chez
lui
Famille -
> mère
de
famille ;
adolesce
nt qui
vient
pour
toute sa
famille
Empr
unte
ur,
carte
médi
athè
que
Adolesce
nt
Usager
occasion
nel
Utilise
régulièreme
nt le
catalogue à
la
médiathèq
ue
Usager
du
patrimoi
ne qui
vient en
salle
d’étude
Empr
unte
ur,
carte
biblio
thèq
ue
1 enfant ?
(utilise le
site
internet /
catalogue
?)
Usager
régulier
Non
empr
unte
ur
(pas
trop)
Guides pour remplir les modèles
Annexe 2 : Atelier de création de pages d’accueil - Déroulé et
outils
Le principe de l'atelier :
Construire la maquette fonctionnelle de la page d'accueil du futur site
internet de la médiathèque d’une ville du Canada qui ressemble en tous
point à la médiathèque de Roubaix. Maquette construite à partir de
copier/coller d'autres sites + dessins + tout outil utile
Outils proposés : accès à internet ciseaux, colle, papier…
Avec une mission spécifique pour chaque groupe. Les missions proposées :
- Augmenter l’attractivité pour les jeunes.
- Fidélisation des internautes en leur proposant un contenu
interactif, attractif et mis à jour régulièrement.
- Pour orienter les différents types d’usager du portail au sein des
ressources quels que soient leurs besoins (recherche précise en
tête ou recherche d’idées de lecture)
- Innover : créer un site de Médiathèque différent de ce qui existe,
- Faciliter l’accès aux services par type de public
Et une fiche de cadrage imposant ... le cadre (comme son nom l'indique) .
1/ présentation du cadre, des outils, lecture collective et appropriation de
la fiche de cadrage
- Chacun choisit puis colle la mission sur la fiche de cadrage (cf
missions listées ci-dessus)
- Chacun choisit puis colle un nom de ville (utilisation de noms de
ville québécois rigolos)
2/Par deux, chacun a 1h pour faire sa page internet à l’aide de colle et de
ciseaux. Ils doivent la commenter et l’analyser à la fin
3/ Présentation devant tous : des difficultés rencontrées + partis pris
pour répondre aux missions et lever les difficultés.
+ fiche de cadrage réajustée et redéfinie
Fiche de cadrage
Donnée à chaque binôme
Annexe 3 : Idées évoquées pour avoir des services et partis
pris marquants – Synthèse complète à l’issue des cafés
numériques
 Créer un service de « drive » de document
inspiré des supermarchés drive
 Créer un service d’inscription complet en
ligne
 Transparence sur la gestion des collections
o rendre humain, visible les opérations
de création de fonds.
o Montrer les coulisses de la
médiathèque au sein du
« catalogue »: office, pilons,
acquisitions...?
o Donner des éléments de choix issus
de l’expérience des bibliothécaires :
choisir un bouquin ? etc… ?
 Les musées et bibliothèques sont des
endroits protégés que le publique vient
chercher => expérience du lieu + légitimité
de l’institution => jouer cette carte ?
 Aborder le contiinuum (avant, pendant,
après)
 Avoir un ton ?
 Service : pour le conseil => on flashe un livre qu’on a aimé, ça
nous en conseille un autre
 Travailler sur le local et la convivialité ?
 Faire une vraie page outil pour les profs ? (type espace
thématique)
 Utiliser des choses existantes et qui fonctionnent et
fédèrent : vente ?Café ?
 Utiliser la refonte architecturale du bâtiment pour la
traduire dans l'espace numérique. Appliquer les concepts liés
aux réflexions de la bibliothèque 3è lieu ou au zoning à
l'architecture numérique du site internet.
 Faire de l’humour (réflexion café numérique de l’été inspiré
« même ta bibliothèque » et « ciel ma bibliothèque »)
o Risque de tourner à vide : capacité de
renouvellement ?
o L’humour permet de casser le côté institutionnel.
Les bibliothécaires de l’ENSSIB (qui parlent en leur
nom propre et pas en temps que professionnel sur
« ciel ma bibliothèque ») sont drôles sur ce tumblr.
o Faire rire ? Problématique : comment faire rire
sans être cheap
o Mises à jour régulière
o Dans un coin de la page d’accueil ?
o Photographies de scènes à la bibliothèque
o Superpositions : chez soi/ à la bibliothèque (sur le
modèle de « on pense bien à vous »)
o Superpositions temporelle (sur le modèle de la
photo de famille reproduite 20 ans plus tard)
o Intégrer des chats : un livre/un chat ; le chat de la
directrice chaque jour ; mise en scène d’un chat à
la bibliothèque…
o Ce n’est pas le parti pris sur le Facebook plutôt ?
Médiation :
 Favoriser la longue traîne=> jouer sur un décalage (les –
empruntés…)… Peut vite virer ringard ou « moqueur »
 « exporter » la médiation sur : des pages consacrées =>
espace thématique, blog, etc… et sinon ne plus en faire du
tout ?
 Utiliser les pôles de compétences : 1 ou 2 thèmes vitrine ?
(espace thématique - Le décliner ?)
 Coups de cœur qui apparaissent aléatoirement et changent
au chargement de la page – cf citations de Nanarland qui
changent à chaque rechargement
 La bibliothèque idéale ( cf Qobuz) au lieu de « sélection de
bibliothécaires »
 Éventuellement sur des thématiques ciblées, avec un travail
sur les accès à faire : exemple de la sélection thématique de
la médiathèque de Marcq-en-Baroeul qui propose une liste
par lieu, avec des thèmes pouvant intéresser les parents (ou
les enfants?)
o Dans le grenier... sorcières, fantômes / Pirates et trésors,
etc...
Avec toutefois un bémol : est-ce que ces thématiques vont être
choisies par les parents ou par les enfants ? (est-ce qu'un livre
sur le pot va être choisi spontanément par un enfant? Est-ce
vraiment une thématique qui l'intéresse ?)
Annexe 4 : Eléments pour le cahier des charges – synthèse
suite aux cafés numériques
Des éléments techniques
- Adapter aux tablettes et supports mobiles
- Concevoir selon une démarche ergonomique
o Définir objectifs – cf annexe
- Cadre = fiche de cadrage
Des éléments imposés
Page d’accueil
- Un logo ou bandeau pour indiquer qu’on est à la
médiathèque/archives de Roubaix
- Une barre de recherche dans la partie haute du site,
de taille moyenne à grande
- Encart « se connecter »
- Une barre de navigation / plan
- Un bas de page
Autres pages
- pour chaque page contenant de l’information, il doit
être possible d’imprimer cette page, d’agrandir le texte
et éventuellement de télécharger la fiche ou le dossier
en pdf,
- Sharebare
- Pour la recherche sur le catalogue, attention aux
articles. Bien tester des exemples de recherche concrets
par des utilisateurs
- Travailler sur la page pour les professeurs qui agrège
tout ce qui concerne ce public spécifique
Des besoins
- permettre de répondre à tous les besoins potentiels
des utilisateurs de la Médiathèque, qu’ils viennent pour
la première fois sur le site ou qu’ils soient des usagers
réguliers.
- Des accès rapides aux pages de médiation
documentaire (a minima les pages thématiques) et à la
page facebook
- Des réponses rapides et concrètes aux principaux
besoins des usagers
- Mise en valeur d’éléments et services marquants
Des principes
- une distinction entre des contenus « volatiles » - qui ont
une durée de vie courte (annonce d’évènements) - et
contenus à durée de vie pérenne
- proposer plusieurs accès à un même type d’information
(mots clef, auteur, date)
- des icônes et un maximum de repères visuels
Annexe 5 : Premiers éléments pour la charte éditoriale pour le
futur site internet de la médiathèque et archives de Roubaix –
suite aux cafés numériques
Intégration web :
 PAS DE PDF (sauf en support de téléchargement
éventuel)
 Pas de musique ou de film sans lien vers de l’écoute en
ligne
 Pas de référence documentaire sans image et sans lien
vers la notice complète
 Pas de conseil sans un auteur identifié et nommé, et
une date
Gestion de la une et mises à jour
 Pas de contenu sans mise en valeur sur la page
d’accueil
 Ne prévoir que des contenus qui peuvent être mis à jour
au minimum 1 fois par semaine
Qualité des contenus
 Utiliser des images de qualité
 Travailler sur les accroches et les titres
 Intégrer des liens hypertextes
 Ecrire web
 Avoir des outils communs de rédaction (veille, etc..)
 Travailler sur l’intégration web avec le catalogue
Aspects éditoriaux techniques
 Intégrer l’accessibilité
 Gestion et choix des images : libre de droits, de qualité,
mettre les copyrights
 Proposer des métadonnées pour les contenus
(référencement)
 Mobile first : développer un design d’abord et surtout
adapté pour les supports mobiles.
Annexe 6 : Axes d’amélioration à plus long terme – réflexion
suite à la phase de définition
(synthèse d’idées venues à Juliane suite à la journée BNF, à la
journée sur le web sémantique + idées évoquées lors de réunions de
travail par des collègues)
Produire du contenu
 Capitaliser les productions existantes de la
médiathèque :
S'assurer que toute action de médiation culturelle a son
équivalent numérique produit sur le site et facilement
accessible. Par exemple : les productions des ateliers
(création d’affiche, ateliers de Bruno, journée Rascal, etc…)
=> peut servir de porte d’entrée pour faire du collaboratif
avec les classes par exemple, et comme « journal de bord de
la médiathèque ». Permet de concentrer (c’est le besoin pour
le blog actuel exprimé par Clotilde entre autre lors de la
réunion des correspondants POUC de décembre 2013)
Penser à l’alimentation => nécessite un rôle de « journaliste
interne » qui prend des photos, récupère, anime les réseaux
de contributeurs internes.
Puis envisager d’aller plus loin, pour en garder une trace plus
pérenne en inscrivant ces actions dans les collections et donc
dans le catalogue ou son équivalent futur. Pour cela, un
système de tag ou de lien hypertexte vers la bibliographie
présente sur le site et depuis le catalogue (dans une
métadonnée par exemple) pourrait être envisagé comme
base minimum.
 Récolter plus d’information sur les activités de la
médiathèque (ateliers avec les classes ou heures du conte
par exemple), tenir un journal de bord pour les actions
passées.
Comment : mettre en place un système technique de
prise de photo,etc…
 Intégrer en amont le numérique pour chaque projet (ex :
projet de chaine youtube des petits pouces
 Faire vivre : veille, création de lieux d’échange d’idées et
d’expression pour tous les contributeurs ET tous les
professionnels de la médiathèque.
Faire du collaboratif
 Espace pour les profs ?
 S’associer à la politique de démocratie participative
de Roubaix (La fabrique, etc..)
 Appliquer l’expérience d’éducation à la science du
projet Inmédiat pour les adolescents : utiliser le
numérique pour favoriser des formes de travail
collaboratives avec les usagers, pour produire des
services innovants / rester en contact / distribuer des
capacités à s’informer / favoriser l’expression
autonome. => L’appliquer à la bibliothèque et
construire le futur site / les futurs ateliers là-dessus ?
Avoir une identité éditoriale définie entre tous les outils de
la méd.
 Penser global web => intégrer aussi outils externes,
stratégie éditoriale globale
Les actus de la médiathèque sur l'action
culturelle certainement, mais peut être aussi par des
outils pour choisir leurs produits culturels, les aider à
s'orienter dans les collections ? L'idée serait de voir plus
large pour cibler des services adaptés aux utilisateurs
sur les réseaux sociaux. Créer une identité numérique
réfléchie et ciblée.
Pour un rayonnement régional, il pourrait être
intéressant de s'intégrer aux outils existants (site
internet des associations par exemple), en axant vers
des fonds phares (régionaux notamment) et des axes
qui entrent en résonance avec des actions faites par ces
institutions. En quelque sorte en créant des « profils »
pour lesquels on propose une communication ciblée. Une
idée par exemple pour illustrer ce propos serait d'inciter
à la réutilisation des fonds de la BN-R pour produire
différents objets à des institutions ou entreprises
locales, comme l'a fait le Rijkmuseum.
Autre développements
 Faire une application pour aider
l’utilisateur à localiser un livre et se
repérer dans la médiathèque (cf ce
qui a été fait au château de
Fontainebleau => l’application
permet de se localiser en prenant des
photographies)
 Ouverture des données (en lien avec
géolocalisation)
Annexe 7 : Détail des releases du site internet de la
médiathèque de Roubaix

Contenu connexe

Tendances

rapport-projet-de-fin-detudes
 rapport-projet-de-fin-detudes rapport-projet-de-fin-detudes
rapport-projet-de-fin-detudesAchraf Mokhtari
 
RECHERCHE OPÉRATIONNELLE SEMESTRE 6
RECHERCHE OPÉRATIONNELLE SEMESTRE 6RECHERCHE OPÉRATIONNELLE SEMESTRE 6
RECHERCHE OPÉRATIONNELLE SEMESTRE 6
Jamal Yasser
 
Design thinking evaluation - test
Design thinking evaluation - testDesign thinking evaluation - test
Design thinking evaluation - test
Vanessa Lirus
 
Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...
Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...
Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...
NP6
 
La declinaison des objectifs
La declinaison des objectifsLa declinaison des objectifs
La declinaison des objectifsfadwa-slh
 
Guide mise en place d'un sig
Guide mise en place d'un sigGuide mise en place d'un sig
Guide mise en place d'un sig
Centre des Techniques Spatiales
 
Cahier des charges site internet AXOM
Cahier des charges site internet AXOMCahier des charges site internet AXOM
Cahier des charges site internet AXOM
Jeremy ABDILLA
 
Livre Blanc : Boostez votre service client
Livre Blanc : Boostez votre service clientLivre Blanc : Boostez votre service client
Livre Blanc : Boostez votre service client
Sage france
 
Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...
Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...
Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...
nous sommes vivants
 
Formation WordPress 2023.pptx
Formation WordPress 2023.pptxFormation WordPress 2023.pptx
Formation WordPress 2023.pptx
Palmsquare
 
La demarche-strategique
La demarche-strategiqueLa demarche-strategique
La demarche-strategiqueagfmax
 
Créer son site WordPress de A à Z
Créer son site WordPress de A à ZCréer son site WordPress de A à Z
Créer son site WordPress de A à Z
Julien Dereumaux
 
Marketing d'Influence
Marketing d'InfluenceMarketing d'Influence
Marketing d'Influence
JIN
 
Les cartes mentales_v1.0
Les cartes mentales_v1.0Les cartes mentales_v1.0
Les cartes mentales_v1.0
CÔTE Jean-Pascal
 
Stratégie digitale de Vente Privée
Stratégie digitale de Vente PrivéeStratégie digitale de Vente Privée
Stratégie digitale de Vente Privée
Camille Durand
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
Chris Gaillard
 
Le Digital marketing
Le Digital marketingLe Digital marketing
Le Digital marketing
Yacine Iheb Tekkour
 

Tendances (20)

rapport-projet-de-fin-detudes
 rapport-projet-de-fin-detudes rapport-projet-de-fin-detudes
rapport-projet-de-fin-detudes
 
C’est quoi l’UX -
C’est quoi l’UX -C’est quoi l’UX -
C’est quoi l’UX -
 
RECHERCHE OPÉRATIONNELLE SEMESTRE 6
RECHERCHE OPÉRATIONNELLE SEMESTRE 6RECHERCHE OPÉRATIONNELLE SEMESTRE 6
RECHERCHE OPÉRATIONNELLE SEMESTRE 6
 
Design thinking evaluation - test
Design thinking evaluation - testDesign thinking evaluation - test
Design thinking evaluation - test
 
Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...
Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...
Workshop : Segmenter sa base client - Bonnes pratiques, approches innovantes,...
 
La declinaison des objectifs
La declinaison des objectifsLa declinaison des objectifs
La declinaison des objectifs
 
Guide mise en place d'un sig
Guide mise en place d'un sigGuide mise en place d'un sig
Guide mise en place d'un sig
 
Cahier des charges site internet AXOM
Cahier des charges site internet AXOMCahier des charges site internet AXOM
Cahier des charges site internet AXOM
 
Livre Blanc : Boostez votre service client
Livre Blanc : Boostez votre service clientLivre Blanc : Boostez votre service client
Livre Blanc : Boostez votre service client
 
Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...
Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...
Methode pourquoitucours : comment travaillent les planneurs stratégiques de l...
 
Formation WordPress 2023.pptx
Formation WordPress 2023.pptxFormation WordPress 2023.pptx
Formation WordPress 2023.pptx
 
La demarche-strategique
La demarche-strategiqueLa demarche-strategique
La demarche-strategique
 
Créer son site WordPress de A à Z
Créer son site WordPress de A à ZCréer son site WordPress de A à Z
Créer son site WordPress de A à Z
 
Marketing d'Influence
Marketing d'InfluenceMarketing d'Influence
Marketing d'Influence
 
Les cartes mentales_v1.0
Les cartes mentales_v1.0Les cartes mentales_v1.0
Les cartes mentales_v1.0
 
Stratégie digitale de Vente Privée
Stratégie digitale de Vente PrivéeStratégie digitale de Vente Privée
Stratégie digitale de Vente Privée
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
 
Über - Stratégie Digitale
Über - Stratégie Digitale Über - Stratégie Digitale
Über - Stratégie Digitale
 
Web 2.0 : une introduction
Web 2.0 : une introductionWeb 2.0 : une introduction
Web 2.0 : une introduction
 
Le Digital marketing
Le Digital marketingLe Digital marketing
Le Digital marketing
 

Similaire à Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1

Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
guest6d3f53
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2
Eric Giraudin
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Ardesi Midi-Pyrénées
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Mohammed JAITI
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Actency
 
Les enjeux du web 2.0 et le travail collaboratif
Les enjeux du web 2.0 et le travail collaboratifLes enjeux du web 2.0 et le travail collaboratif
Les enjeux du web 2.0 et le travail collaboratifLEVY REMI
 
Témoignage sur la coordination des applications numériques et du portail dans...
Témoignage sur la coordination des applications numériques et du portail dans...Témoignage sur la coordination des applications numériques et du portail dans...
Témoignage sur la coordination des applications numériques et du portail dans...bdvo
 
Projet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de MoiransProjet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de Moirans
Thomas Gomez de Mercado
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
La FeWeb
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
Cap'Com
 
Workn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webWorkn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site web
Net Design
 
Restitution assistant personnel atelier 8
Restitution assistant personnel atelier 8Restitution assistant personnel atelier 8
Restitution assistant personnel atelier 8
Nathalie Plegades
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
Laurent Barbat
 
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Guillaume RICHARD
 
Quel outil pour quel usage ?.pdf
Quel outil pour quel usage ?.pdfQuel outil pour quel usage ?.pdf
Quel outil pour quel usage ?.pdf
PhilippeVIGIER5
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
Benjamin Hoguet
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
laureno
 
Nouveau site web pour bibliothèques ups
Nouveau site web pour bibliothèques upsNouveau site web pour bibliothèques ups
Nouveau site web pour bibliothèques ups
Université Paul Sabatier Toulouse III
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
piera5
 

Similaire à Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1 (20)

Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2
 
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
 
Les enjeux du web 2.0 et le travail collaboratif
Les enjeux du web 2.0 et le travail collaboratifLes enjeux du web 2.0 et le travail collaboratif
Les enjeux du web 2.0 et le travail collaboratif
 
Témoignage sur la coordination des applications numériques et du portail dans...
Témoignage sur la coordination des applications numériques et du portail dans...Témoignage sur la coordination des applications numériques et du portail dans...
Témoignage sur la coordination des applications numériques et du portail dans...
 
Projet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de MoiransProjet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de Moirans
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
Workn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webWorkn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site web
 
Restitution assistant personnel atelier 8
Restitution assistant personnel atelier 8Restitution assistant personnel atelier 8
Restitution assistant personnel atelier 8
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
 
Quel outil pour quel usage ?.pdf
Quel outil pour quel usage ?.pdfQuel outil pour quel usage ?.pdf
Quel outil pour quel usage ?.pdf
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Nouveau site web pour bibliothèques ups
Nouveau site web pour bibliothèques upsNouveau site web pour bibliothèques ups
Nouveau site web pour bibliothèques ups
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
 

Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1

  • 1. CREER UN SITE WEB ? Méthode illustrée par la médiathèque de Roubaix PARTIE 1 – Définition et cadrage Juliane Casier – chef de projet numérique Médiathèque de Roubaix La Grand-Plage Retour d’expérience – avril 2018
  • 2. Entre 2015 et 2014, la médiathèque a entièrement refait son site internet. (Et son SIGB, et son rez de chaussée… mais c’est une autre histoire). Des centaines de documents ont été produits, des heures de réflexion ont été passées… Tout ça pour un tout petit portail de bibliothèque mis en ligne en septembre 2015 www.mediathequederoubaix.fr Le site a beau être magnifique, ce document permet de synthétiser et garder une trace du projet et des réflexions qui ont été faites. Pour qu’éventuellement cela puisse servir à d’autres.  Une équipe issue du monde de la gestion de projet (donc qui utilise amoureusement quelques outils type fiche de cadrage, planning ).  Un intérêt certain mais pas forcément maîtrisé pour les méthodologies d’UX design => le manque d’expertise est compensé par des réunions d’équipe pour se poser les questions existentielles.  Un outil « à façon avec une totale liberté pour créer les interfaces graphiques du site web. Cela était imposé dans notre cahier des charges. Pourquoi on était convaincus par les méthodologies d’UX Design ? Parce qu’on est surs de peu de choses mais qu’on a pris le parti suivant : un site réussi est un site qui répond aux besoins des utilisateurs. L’ambition du projet était élevée (mais quitte à faire autant viser haut) : Faire un site internet de qualité, qui répond aux besoins des utilisateurs. A cela, notre réponse a été… la méthode. On utilise les outils présentés ci-dessous, on crée un processus de travail (avec des réunions régulières et courtes où on se pose les questions), on fait attention à respecter le planning (et pour ca, la solution c’est souvent de viser moins haut en priorisant le plus important) … et le reste suit (avec un peu d’énergie). On n’a pas suffisamment de recul pour savoir si le résultat est réussi (il est visible ici www.mediathequederoubaix.fr ) mais le plan du document suit les méthodes et outils principaux utilisés tout au long du projet. Des outils réutilisables et les documents les plus importants construits avant la rédaction du cahier des charges, pour définir quel site internet on voulait. Une 2è partie sera produite un jour sur la mise en œuvre △ C’est quoi ce document ? Introduction ▲ Les caractéristiques du projet △ Créer un site internet de qualité, qui répond aux besoins des utilisateurs, c’est facile…. ??? △ On trouve quoi dans ce document ?
  • 3. Côté Roubaix Côté prestataire (W3Line puis Décalog) ▲ L’équipe projet Qi stagaire ergonome Juliane Chef de projet François Chargé de projet Le comité de pilotage (l’équipe de direction) Christian Chef de projet Gladys Ergonome Samuel Spécialiste statitistique web Thomas Développeur Christine Ingénieur DSI Laurent Directeur de projet
  • 4. 2. La définition de l’identité du futur site internet 1. Travail préparatoire….on définit ce qu’on veut faire ▼ Outil 1 - La fiche de cadrage ▼ Outil 2- les personas ▼ Outil 3 - Définition de l’utilité du site internet ▼ Faire une cartographie de l’existant ▲ Réfléchir à ce qu’on aime (ou pas) et se former collectivement au web ▲ Synthèse des axes forts pour le futur site internet de la médiathèque de Roubaix Créer un site internet de qualité, qui répond aux besoins des utilisateurs ~~~DEFINITION ET CADRAGE~~~ 3. Le cahier des charges
  • 5. Première étape, définir et formaliser ce qu’on veut faire et pourquoi on veut le faire. Dans cette partie, chaque outil est présenté rapidement de manière théorique puis sont détaillées les étapes pour expliquer et donner accès aux documents du projet Une fiche de cadrage c’est quoi ? C’est l’élément principal du projet, qui résume tout en une page. S’il ne fallait garder qu’un seul outil ce serait celui là. Ca résume les éléments essentiels de ce qu’on est en train de créer Ça sert à … Se poser les bonnes questions et prioriser (comme la fiche est synthétique) Communiquer sur le projet Faciliter le travail : en la relisant en 5’ n’importe qui doit voir les enjeux essentiels du projet Nommer le projet (lui donner un titre, ca permet d’en parler plus facilement) Faire valider la fiche de cadrage avant de se lancer, afin que les questions fondamentales soient discutées avant d’avoir déjà trop avancé 1. Travail préparatoire….on définit ce qu’on veut faire ▲ Outil 1 – La fiche de cadrage
  • 6. ▲ ▼La fiche de cadrage du site internet de la médiathèque de Roubaix
  • 7. Les personas, c’est quoi ? C’est un utilisateur cible et fictif qui permet de fixer des priorités et guider les décisions de conception d’interface & éditoriale. A quoi ça sert ? Ça sert à se pencher sur ses utilisateurs. Pour le cas du projet de refonte de la médiathèque de Roubaix, ceux-ci ont été créés collectivement pour essayer de créer une dynamique axée utilisateur (mais qui n’a pas tellement perduré, il aurait fallu les faire vivre au sein des équipes..). Ils ont ensuite servis régulièrement tout au long du projet  Pour construire les contenus de la page d’accueil et les éléments qu’on retrouve sur toutes les pages du site  Pour se repositionner, quand on se pose des questions importantes (Choisir entre plusieurs maquettes graphiques, décider d’un principe de fonctionnement ou d’une fonctionnalité…) Si c’était à refaire (Parce que depuis le guide du design thinking est passé par là) On ajouterait des interviews de réels utilisateurs pour sortir de la médiathèque (là on était un peu focalisés) – ce qui nous intéresse c’est de comprendre comment les utilisateurs fonctionnent chez eux et d’avoir des éléments au maximum objectifs. Les étapes qu’on a utilisées pour produire les personas : - Définir les typologies d’utilisateur grâce aux statistiques - Un atelier collaboratif pour que les collègues en contact avec le public fassent part de leur expertise en terme d’usagers - Un retravail pour rendre les personas utiles au projet – par une ergonome - Ces personas ont été enrichies par notre stagiaire en ergonomie au fur et à mesure du projet △▲ Outil 2 - Les personas
  • 8. ▲ ▼Un atelier collaboratif pour définir des personas NB : voir détail des outils utilisés en Annexe 1
  • 10. ▲ ▼Le travail de synthèse par une ergonome : les personas de la médiathèque
  • 11.
  • 12. L’utilité c’est quoi ? C’est une notion en ergonomie informatique, il s’agit de la liste de ce à quoi sert l’interface. 1 A quoi ça sert ?  A définir en détails comment et pourquoi va être utilisé le site internet. Si c’était à refaire : On aurait ouvert à l’utilisation mobile. On aurait complété avec des entretiens d’utilisateurs pour être plus proche d’utilisateurs réels (et moins d’utilisation définies par la bibliothèque et les bibliothécaires) et être plus déconnectés de la médiathèque. ▲ ▼L’utilité du site internet de la médiathèque de Roubaix 1 http://www.ergolab.net/articles/ergonomie-informatique.php ▼ Outil 3 – Définition de l’utilité du site internet
  • 13. A quoi ça sert ? A savoir de où on part, ce qui permettra d’avoir une ligne de route. Pour la médiathèque de Roubaix, nous avons effectué deux cartographies : - Une cartographie des outils web - Un audit du site internet existant ▲ ▼La cartographie des outils web de la médiathèque On cartographie les différents outils web utilisés par la médiathèque pour définir les mécaniques et les apports de chaque outils, ainsi que la logique de tous les outils entre eux. ▼ Faire une cartographie de l’existant
  • 14. ▲ ▼ L’audit du site internet existant. Comme on part sur une redéfinition complète du site internet, l’audit ne sert que de point de départ pour faire ressortir ce qu’on souhaite garder, ce qui fait l’identité et les qualités du site existant. Pour cela on a utilisé une grille permettant de mesurer un certain nombre de critères (page d’accueil, fonctionnalités, navigation…). Les éléments principaux sont synthétisés dans un rapport. L’audit ne peut pas être fait par le webmaster, il faut un regard frais et distancié (quand on s’occupe d’un outil quotidiennement il est impossible d’avoir un réel regard critique dessus). Dans notre cas, c’est un stagiaire en ergonomie qui l’a fait, complété par une ergonome (prestation demandée en tout début de projet). Les résultats de l’audit de l’ancien site 1. Manque de cohérence et de visibilité des éléments de navigation  Le menu principal se distingue mal et est confondu avec le fond  Plusieurs menus sont à utiliser simultanément pour naviguer et ils sont souvent redondants 2. Multiplication des accès aux sites et fonctionnalités  Plusieurs outils sont utilisés : site/blog (typo3), catalogue (Horizon Dynix), Bnr (w3line). Liés à l’historique du site 3. Une page d’accueil uniquement centrée sur l’agenda Elle devrait pouvoir mettre en valeur l’ensemble des informations qui « font la médiathèque ». Par exemple, des informations pratiques pourraient être utiles dès la page d’accueil, mais la rubrique est isolée tout à droite de l’écran. 4. Le manque d’accès directs Il n’y a pas possibilité de s’authentifier sur le site, et pas de filet de recherche pour le catalogue. 5. Le site évite l’utilisation excessive de scripts, applets etc… On ne relève pas non plus d’éléments en technologie flash ce qui est positif. Cependant, le site est trop statique 6. Les pages statiques du site sont particulièrement textuelles Le site contient des articles plutôt longs et assez peu d’images, contrairement au blog et à l’agenda plus attractifs, plus directs. 7. Le site a une identité graphique originale Le site de la médiathèque de Roubaix ne ressemble pas un site de médiathèque. Il échappe au carcan imposé des portails spécialisés. Son originalité est un élément important. Même si la charte graphique change, il faudra conserver cet aspect original et innovant, tout en identifiant bien les services et fonctionnalités proposés
  • 15. Deuxième étape pour construire un site internet de qualité : déterminer son identité et commencer à avoir une vision de ce qu’on souhaite en terme de contenus et de graphisme. En effet, un bon site web est un site qui a une forte identité : identité graphique et identité de service (et donc selon nous – identité des gens qui composent le service et l’alimentent). Le piège c’est souvent de vouloir tout mettre sur son site et de ne pas faire de choix. Pour cela, la solution choisie a été de critiquer des sites internet de manière intensive jusqu’à trouver et définir ce qui nous intéressait. « Nous » c’était les professionnels de la médiathèque amenés à être impliqués sur le futur site, les volontaires et l’équipe de direction. Cette démarche n’a pas intégré les utilisateurs finaux. ▲ ▼ Le café numérique Le café numérique c’est quoi ? C’est un concept « maison » : il s’agit de moments courts, conviviaux et réguliers durant lequel les personnes présentes critiquent des sites internet. Le but était : - D’infuser et diffuser de la culture web - D’avoir un groupe qui se « forme l’œil » et qui définit au fur et à mesure son identité web en sortant les points qui sont importants et ceux qui font consensus. Les sites web sont collectés dans un Skloog 2 au fur et à mesure selon les propositions du groupe et une veille de l’équipe projet. Les sites internet choisis sont plutôt issus du secteur privé (Les sites internet sont souvent plus à la pointe quand il y a un enjeu financier et des équipes dédiées à la communication web). Tous les comptes rendus étaient rédigés sur un blog Wordpress par le chef de projet, formé à l’écriture web – cela permet également de diffuser la culture web. Les personnes répondaient dans les commentaires Les cafés numériques ont duré pendant 5 mois, en amont de la rédaction du cahier des charges 2 http://www.skloog.com/user/jcasier/56590 On aurait utilisé maintenant plutôt MyFrama – équivalent libre de framasoft 2. La définition de l’identité du futur site internet ▼ Réfléchir à ce qu’on aime (ou pas) et se former collectivement au web
  • 16.
  • 17. ▲ ▼ Atelier de création de maquettes Notre manière de clôturer le café numérique : proposer un atelier de création de maquettes de pages d’accueil grâce à du collage de morceaux de sites internet existants. Le but est de passer de la critique à « faire ». Les résultats ont été utilisés ensuite pour rédiger le cahier des charges, afin de ressortir des axes forts transmis au prestataire du futur site. Voir détail des outils utilisés en Annexe 2
  • 18. Maquette de Clotilde Mission : innover Concept : - ne pas mettre de contenus en lien avec les collections depuis la page d’accueil, utiliser le moteur de recherche pour cela - Pied de page jouant sur l’humour et le décalage Maquette de François et Elise Mission : Attirer les jeunes Concept : - Développer le collaboratif (partie « Vous ») - Image et vidéo au centre Quelques résultats de l’atelier
  • 19. Ne reste qu’à mettre les résultats de tous les ateliers dans une grande marmite et les synthétiser (par exemple avec des cartes mentales puis sous forme d’écrit à destination du futur prestataire) ▲ ▼ Quel site internet pour la médiathèque ? 3 OBJECTIF 1 : un Site avec des axes forts et une identité graphique marquée ► Avoir une véritable création graphique avec un visuel fort et tranché, qui correspond à l’identité de la médiathèque. Le graphisme sera créé par un graphiste indépendant. ► Avoir un ou des service(s) et des parti pris marquant Ce sera les surprises un dispositif participatif qui permet aux utilisateurs en 15’ de « taguer » un document en fonction de s’il a +/- aimé (ou pas). Ce concept est apparu au fur et à mesure et a été inspiré des pochettes surprises (dispositif physique existant dans les médiathèques). D’autres idées ont émergé au fur et à mesure (voir Annexe 3) mais une seule a été développée pour des questions de faisabilité. OBJECTIF 2 : un Site de qualité, qui répond aux besoins des utilisateurs ►Revoir complètement le plan du site: 3 Si la majorité de ce document a été produit à la fin de la phase de cafés numériques, certains commentaires sont faits avec du recul  Partir des besoins des usagers uniquement - Démarche UX décrite en détail dans le CCTP avec d’autres éléments (voir Annexe 4) ► Avoir un ou deux services qui améliorent notablement le système actuel  Les lister et choisir. Les mettre en valeur dans le cahier des charges o Modifier son identifiant / mot de passe o Ne pas avoir à se reconnecter pour accéder à une ressource payante (Arte VOD, Assimil…) o Pour les professionnels, créer des sélections de documents facilement grâce à l’utilisation de paniers o N’avoir dans le catalogue que les documents consultables (on enlève les sortis des collections) ► Trouver une place pour la médiation numérique des savoirs (autrement dit, tout ce qui permet de mettre en valeur des documents du catalogue via le web)  Intégrer aux résultats de la recherche les contenus de médiation  Développer des espaces thématiques – médiation destinée à un public spécifique ► Charte de qualité pour le futur site  Définir des axes ergonomiques pour la conception du futur site o Cf annexe 5  Définir une charte éditoriale pour le futur site ▼ Synthèse des axes forts pour le futur site internet de la médiathèque de Roubaix
  • 20. Quelques résultats Le service qui propose à l’utilisateur de personnaliser son identifiant/ mot de passe (facilite l’accès à l’espace personnel, au WIFI, aux ordinateurs de la méd.) L es résultats du moteur de recherche proposent aussi les articles du site internet s’ils sont pertinents Espace thématique parent agrégeant tous les contenus de la médiathèque qui peuvent les intéresser + de la mise en avant de contenus du web et de la médiathèque Si un document a fait l’objet d’une surprise, d’une sélection ou d’une critique, cela se retrouve sur la notice
  • 21. A ce stade, le projet était cadré (on savait ce qu’on voulait faire), ne restait « plus » qu’à définir un cahier des charges. Sachant qu’étant établissement public, on est soumis au code des marchés publics. L’enjeu de celui-ci est de décrire suffisamment la prestation pour que le prestataire puisse chiffrer précisément son offre (et qu’on puisse mettre en concurrence sur les même critères. Il s’agit également de prévoir et imposer ce qu’il faut lors de la mise en œuvre, tout en laissant une ouverture au prestataire pour faire une offre la plus pertinente possible. Le cctp est disponible à l’adresse : http://www.mediathequederoubaix.fr/infos/qui-sommes- nous Au niveau de la description des prestations, on pense souvent avant tout à décrire les fonctionnalités (ce qu’on veut que l’outil fasse). Mais il faut aussi que Google sache qu’il existe, qu’il corresponde aux habitudes d’utilisation des utilisateurs, qu’il soit attractif (pas ringard, lisible), etc.. Et il est important de faire des choix : il vaut en effet mieux 10 fonctionnalités utiles que 1000 moyennement pratiques. Or ca n’est pas toujours évident de connaitre vraiment les besoins et pratiques des utilisateurs. Dans notre cahier des charges, nous avons ainsi intégré la stratégie suivante : 1) Cadrer et présenter le site - Présentation du site o A partir des éléments ci-dessus : fiche de cadrage, principes définis… - Définition des grands principes du site internet : o Mobile first o Un site accessible, bien référencé (se pense dès la conception) o Recherche à la google o Un site ergonomique et attractif graphiquement 2) Définir le périmètre complet de la prestation pour ne pas oublier l’essentiel - Gestion de projet : pour avoir un mode de fonctionnement efficace et imposer des méthodes ergonomiques qui permettent de modifier ce qui a été fait de manière cadrée (on n’aime pas trop en projet défaire ce qu’on a fait, ca porte un risque de ne jamais terminer le projet). - Prestations d’ergonomie et de graphisme web - Fonctionnalités de l’outil détaillées. On a imposé certains outils pour lesquels on savait qu’ils répondaient aux besoins (Piwik pour les statistiques par exemple). - Prestation de référencement : description de ce qui est imposé comme règles et outils, demande de prestation de référencement - Prestation d’accessibilité : description de ce qui est imposé comme règles et outils, on imposé la méthode en se basant sur les recommandations sur l’accessibilité des sites WEB publics proposées par le Ministère de l’Economie et des Finances (qui doit dater un peu maintenant) 3. Le cahier des charges △ Et maintenant… la définition du cahier des charges ▲ Le périmètre de la prestation
  • 22. 3) Décrire ce qui permet de dimensionner l’outil C’est souvent là qu’il ne faut pas tout décrire trop précisément si on veut laisser un peu de marges aux solutions qu’on n’envisage peut être pas. On peut ainsi décrire : - Les grandes fonctionnalités attendues du CMS - Les types de contenus du CMS pour pouvoir budgéter le nombre d’interfaces à développer - Les fonctionnalités du moteur de recherche (mais attention à « maitriser » les demandes en ayant une solution technique en tête sinon ca peut chiffrer) - Développements spécifiques (dans notre cas, un module de gestion de malles lecture développé à façon) - Description de la manière dont le portail intéropère avec les autres outils de la médiathèque (annuaire lecteur, SIGB, ressources numériques payantes…) - Description des besoins en authentification unique. - Intégration des contenus du site internet (géré par le CMS) et des notices bibliographiques (souvent géré par la brique moteur de recherche) On sait toujours mieux après coup ce qu’il aurait mieux valu faire autrement. Dans notre cas, quelques idées : - Prévoir la rémunération du prestataire segmenté sur chaque release (à chaque livraison) – on a du faire des avenants - Prévoir la prestation d’ergonomie et de graphisme dans un lot à part o On souhaitait avoir une prestation d’un ergonome pour nous aider à trouver des solutions aux problèmes soulevés en tests utilisateurs. Et on s’est rendus compte qu’un graphiste web avec une formation en ergonomie c’est beaucoup mieux mais ca ne se trouve pas toujours facilement. o Et dans l’idéal (parce que depuis on a testé la méthode et que c’est vraiment efficace), on aurait fait un focus group en amont du projet (piloté par un prestataire ergonome web) plutôt que pleins de tests utilisateurs - Services + : on aurait réfléchi nous même à un service de newsletter adapté. On a fini par utiliser Mailjet (service externe) sans que cela soit cohérent avec notre politique de maitrise des données utilisateurs) - Pour le référencement, on avait imposé des règles et outils dans le cahier des charges (qui avaient été défini grâce au cours sur le référencement d’Open Classroom), mais la demande de prestation de référencement n’a pas vraiment été suivie de faits. - Idem pour la prestation d’accessibilité. On aurait dû imposer la labellisation (souvent payante mais dont le cout peut être intégré au projet) dans la foulée. ▲ Un retour d’expérience
  • 23. A ce stade, le projet était défini, le prestataire choisi (Décalog dans notre cas). La mise en œuvre pouvait se dérouler… A suivre dans une prochaine partie (quand on aura le temps de développer la documentation), la mise en œuvre du projet et du site internet, notamment la conduite des tests utilisateurs. Cette œuvre est rédigée en avril 2018 par la ville de Roubaix. Elle est mise à disposition selon les termes de la Licence Creative Commons Attribution – Partage dans les même conditions Conclusion Mentions légales et condition de réutilisation de ce document
  • 24. Annexe 1 : Atelier de définition de personas – Déroulé et outils Déroulé : A – Présentation 9h10-9h20 Qui : personnes en contact avec le public. Amené à cotoyer des types d’usagers différents (2 par type d’usager)  Définition d’un persona - Animateur Personnage virtuel créé artificiellement, usager cible du futur portail. Partir du réél commun. Puis dans un deuxième temps, spécifier / imaginer (par exemple, rapport à l’informatique) Les + rééls = + efficaces. A quoi vont servir les personas : Outil qui seront utilisés pendant la conception des interfaces > Interface fonctionnelle > Graphisme > Parcours d’usage > Complémentaires des tests utilisateurs B- Présentation du déroulé de l’atelier PHASE 1 – présentation de l’atelier - 9h20-9h30 PHASE 2 – Se mettent au travail par groupe de deux – 9h30-10h30 Prendre une des catégories d’utilisateur distribué (groupe par espace – on donne à l’oral les types d’usager que les participants côtoient dans le cadre de leur service au public) Choisir un usager typique d’un espace que vous connaissez et décrire leurs usages de la médiathèque et du numérique Consignes : (données au fur et à mesure en tournant dans les groupes) - Plutôt quelqu’un qui utilise internet, le numérique… (pas une personne qui ne l’utilisera JAMAIS ). - un mot clef que je vais distribuer (voir ci-dessous les types d’utilisateur) => un espace ou un type d’usager pour chacun - Personne représentative d’un espace que vous connaissez - Plutôt monsieur tout le monde (pas usagers qui râlent et qu’on remarque +): quelqu’un représentatif d’un groupe - Rapport à la médiathèque : utilise quel(s) espace(s) en priorité, pour faire quoi ? - Décrire ses usages - Contexte sans intérêt, usages surtout: numérique (informatique, ressources num’, site internet depuis chez lui, catalogue ici) Remplir le modèle distribué (cf ci-dessous) PHASE 3 – Présentation, discussion, commentaire – 10h30- 11h30 Annexes
  • 25.  1 par un, présentation des personas en temps limité (10 personnes, 40 minutes) / 9h45 – 10h30  Discussion, commentaires PHASE 4 – Mise au propre, envoi NB : analyse a posteriori : Piège = être dans le cliché ou être « à côté ». On aurait privilégié une séance d’entretien avec des utilsateurs rééls Types d’utilisateurs (effectué en amont à partir des statistiques sur les inscrits) Jeune Utilisate ur du pole réussir (emploi) Nouvel usager (creuser ce qu’il va chercher) Utilise régulièreme nt le site internet depuis chez lui Famille - > mère de famille ; adolesce nt qui vient pour toute sa famille Empr unte ur, carte médi athè que Adolesce nt Usager occasion nel Utilise régulièreme nt le catalogue à la médiathèq ue Usager du patrimoi ne qui vient en salle d’étude Empr unte ur, carte biblio thèq ue 1 enfant ? (utilise le site internet / catalogue ?) Usager régulier Non empr unte ur (pas trop) Guides pour remplir les modèles
  • 26.
  • 27. Annexe 2 : Atelier de création de pages d’accueil - Déroulé et outils Le principe de l'atelier : Construire la maquette fonctionnelle de la page d'accueil du futur site internet de la médiathèque d’une ville du Canada qui ressemble en tous point à la médiathèque de Roubaix. Maquette construite à partir de copier/coller d'autres sites + dessins + tout outil utile Outils proposés : accès à internet ciseaux, colle, papier… Avec une mission spécifique pour chaque groupe. Les missions proposées : - Augmenter l’attractivité pour les jeunes. - Fidélisation des internautes en leur proposant un contenu interactif, attractif et mis à jour régulièrement. - Pour orienter les différents types d’usager du portail au sein des ressources quels que soient leurs besoins (recherche précise en tête ou recherche d’idées de lecture) - Innover : créer un site de Médiathèque différent de ce qui existe, - Faciliter l’accès aux services par type de public Et une fiche de cadrage imposant ... le cadre (comme son nom l'indique) . 1/ présentation du cadre, des outils, lecture collective et appropriation de la fiche de cadrage - Chacun choisit puis colle la mission sur la fiche de cadrage (cf missions listées ci-dessus) - Chacun choisit puis colle un nom de ville (utilisation de noms de ville québécois rigolos) 2/Par deux, chacun a 1h pour faire sa page internet à l’aide de colle et de ciseaux. Ils doivent la commenter et l’analyser à la fin 3/ Présentation devant tous : des difficultés rencontrées + partis pris pour répondre aux missions et lever les difficultés. + fiche de cadrage réajustée et redéfinie Fiche de cadrage Donnée à chaque binôme
  • 28. Annexe 3 : Idées évoquées pour avoir des services et partis pris marquants – Synthèse complète à l’issue des cafés numériques  Créer un service de « drive » de document inspiré des supermarchés drive  Créer un service d’inscription complet en ligne  Transparence sur la gestion des collections o rendre humain, visible les opérations de création de fonds. o Montrer les coulisses de la médiathèque au sein du « catalogue »: office, pilons, acquisitions...? o Donner des éléments de choix issus de l’expérience des bibliothécaires : choisir un bouquin ? etc… ?  Les musées et bibliothèques sont des endroits protégés que le publique vient chercher => expérience du lieu + légitimité de l’institution => jouer cette carte ?  Aborder le contiinuum (avant, pendant, après)  Avoir un ton ?  Service : pour le conseil => on flashe un livre qu’on a aimé, ça nous en conseille un autre  Travailler sur le local et la convivialité ?  Faire une vraie page outil pour les profs ? (type espace thématique)  Utiliser des choses existantes et qui fonctionnent et fédèrent : vente ?Café ?  Utiliser la refonte architecturale du bâtiment pour la traduire dans l'espace numérique. Appliquer les concepts liés aux réflexions de la bibliothèque 3è lieu ou au zoning à l'architecture numérique du site internet.  Faire de l’humour (réflexion café numérique de l’été inspiré « même ta bibliothèque » et « ciel ma bibliothèque ») o Risque de tourner à vide : capacité de renouvellement ? o L’humour permet de casser le côté institutionnel. Les bibliothécaires de l’ENSSIB (qui parlent en leur nom propre et pas en temps que professionnel sur « ciel ma bibliothèque ») sont drôles sur ce tumblr. o Faire rire ? Problématique : comment faire rire sans être cheap o Mises à jour régulière o Dans un coin de la page d’accueil ? o Photographies de scènes à la bibliothèque o Superpositions : chez soi/ à la bibliothèque (sur le modèle de « on pense bien à vous ») o Superpositions temporelle (sur le modèle de la photo de famille reproduite 20 ans plus tard) o Intégrer des chats : un livre/un chat ; le chat de la directrice chaque jour ; mise en scène d’un chat à la bibliothèque… o Ce n’est pas le parti pris sur le Facebook plutôt ? Médiation :  Favoriser la longue traîne=> jouer sur un décalage (les – empruntés…)… Peut vite virer ringard ou « moqueur »  « exporter » la médiation sur : des pages consacrées => espace thématique, blog, etc… et sinon ne plus en faire du tout ?  Utiliser les pôles de compétences : 1 ou 2 thèmes vitrine ? (espace thématique - Le décliner ?)  Coups de cœur qui apparaissent aléatoirement et changent au chargement de la page – cf citations de Nanarland qui changent à chaque rechargement  La bibliothèque idéale ( cf Qobuz) au lieu de « sélection de bibliothécaires »
  • 29.  Éventuellement sur des thématiques ciblées, avec un travail sur les accès à faire : exemple de la sélection thématique de la médiathèque de Marcq-en-Baroeul qui propose une liste par lieu, avec des thèmes pouvant intéresser les parents (ou les enfants?) o Dans le grenier... sorcières, fantômes / Pirates et trésors, etc... Avec toutefois un bémol : est-ce que ces thématiques vont être choisies par les parents ou par les enfants ? (est-ce qu'un livre sur le pot va être choisi spontanément par un enfant? Est-ce vraiment une thématique qui l'intéresse ?) Annexe 4 : Eléments pour le cahier des charges – synthèse suite aux cafés numériques Des éléments techniques - Adapter aux tablettes et supports mobiles - Concevoir selon une démarche ergonomique o Définir objectifs – cf annexe - Cadre = fiche de cadrage Des éléments imposés Page d’accueil - Un logo ou bandeau pour indiquer qu’on est à la médiathèque/archives de Roubaix - Une barre de recherche dans la partie haute du site, de taille moyenne à grande - Encart « se connecter » - Une barre de navigation / plan - Un bas de page Autres pages - pour chaque page contenant de l’information, il doit être possible d’imprimer cette page, d’agrandir le texte et éventuellement de télécharger la fiche ou le dossier en pdf, - Sharebare - Pour la recherche sur le catalogue, attention aux articles. Bien tester des exemples de recherche concrets par des utilisateurs - Travailler sur la page pour les professeurs qui agrège tout ce qui concerne ce public spécifique Des besoins - permettre de répondre à tous les besoins potentiels des utilisateurs de la Médiathèque, qu’ils viennent pour la première fois sur le site ou qu’ils soient des usagers réguliers. - Des accès rapides aux pages de médiation documentaire (a minima les pages thématiques) et à la page facebook - Des réponses rapides et concrètes aux principaux besoins des usagers - Mise en valeur d’éléments et services marquants Des principes - une distinction entre des contenus « volatiles » - qui ont une durée de vie courte (annonce d’évènements) - et contenus à durée de vie pérenne - proposer plusieurs accès à un même type d’information (mots clef, auteur, date) - des icônes et un maximum de repères visuels
  • 30. Annexe 5 : Premiers éléments pour la charte éditoriale pour le futur site internet de la médiathèque et archives de Roubaix – suite aux cafés numériques Intégration web :  PAS DE PDF (sauf en support de téléchargement éventuel)  Pas de musique ou de film sans lien vers de l’écoute en ligne  Pas de référence documentaire sans image et sans lien vers la notice complète  Pas de conseil sans un auteur identifié et nommé, et une date Gestion de la une et mises à jour  Pas de contenu sans mise en valeur sur la page d’accueil  Ne prévoir que des contenus qui peuvent être mis à jour au minimum 1 fois par semaine Qualité des contenus  Utiliser des images de qualité  Travailler sur les accroches et les titres  Intégrer des liens hypertextes  Ecrire web  Avoir des outils communs de rédaction (veille, etc..)  Travailler sur l’intégration web avec le catalogue Aspects éditoriaux techniques  Intégrer l’accessibilité  Gestion et choix des images : libre de droits, de qualité, mettre les copyrights  Proposer des métadonnées pour les contenus (référencement)  Mobile first : développer un design d’abord et surtout adapté pour les supports mobiles.
  • 31. Annexe 6 : Axes d’amélioration à plus long terme – réflexion suite à la phase de définition (synthèse d’idées venues à Juliane suite à la journée BNF, à la journée sur le web sémantique + idées évoquées lors de réunions de travail par des collègues) Produire du contenu  Capitaliser les productions existantes de la médiathèque : S'assurer que toute action de médiation culturelle a son équivalent numérique produit sur le site et facilement accessible. Par exemple : les productions des ateliers (création d’affiche, ateliers de Bruno, journée Rascal, etc…) => peut servir de porte d’entrée pour faire du collaboratif avec les classes par exemple, et comme « journal de bord de la médiathèque ». Permet de concentrer (c’est le besoin pour le blog actuel exprimé par Clotilde entre autre lors de la réunion des correspondants POUC de décembre 2013) Penser à l’alimentation => nécessite un rôle de « journaliste interne » qui prend des photos, récupère, anime les réseaux de contributeurs internes. Puis envisager d’aller plus loin, pour en garder une trace plus pérenne en inscrivant ces actions dans les collections et donc dans le catalogue ou son équivalent futur. Pour cela, un système de tag ou de lien hypertexte vers la bibliographie présente sur le site et depuis le catalogue (dans une métadonnée par exemple) pourrait être envisagé comme base minimum.  Récolter plus d’information sur les activités de la médiathèque (ateliers avec les classes ou heures du conte par exemple), tenir un journal de bord pour les actions passées. Comment : mettre en place un système technique de prise de photo,etc…  Intégrer en amont le numérique pour chaque projet (ex : projet de chaine youtube des petits pouces  Faire vivre : veille, création de lieux d’échange d’idées et d’expression pour tous les contributeurs ET tous les professionnels de la médiathèque. Faire du collaboratif  Espace pour les profs ?  S’associer à la politique de démocratie participative de Roubaix (La fabrique, etc..)  Appliquer l’expérience d’éducation à la science du projet Inmédiat pour les adolescents : utiliser le numérique pour favoriser des formes de travail collaboratives avec les usagers, pour produire des services innovants / rester en contact / distribuer des capacités à s’informer / favoriser l’expression autonome. => L’appliquer à la bibliothèque et construire le futur site / les futurs ateliers là-dessus ? Avoir une identité éditoriale définie entre tous les outils de la méd.  Penser global web => intégrer aussi outils externes, stratégie éditoriale globale Les actus de la médiathèque sur l'action culturelle certainement, mais peut être aussi par des
  • 32. outils pour choisir leurs produits culturels, les aider à s'orienter dans les collections ? L'idée serait de voir plus large pour cibler des services adaptés aux utilisateurs sur les réseaux sociaux. Créer une identité numérique réfléchie et ciblée. Pour un rayonnement régional, il pourrait être intéressant de s'intégrer aux outils existants (site internet des associations par exemple), en axant vers des fonds phares (régionaux notamment) et des axes qui entrent en résonance avec des actions faites par ces institutions. En quelque sorte en créant des « profils » pour lesquels on propose une communication ciblée. Une idée par exemple pour illustrer ce propos serait d'inciter à la réutilisation des fonds de la BN-R pour produire différents objets à des institutions ou entreprises locales, comme l'a fait le Rijkmuseum. Autre développements  Faire une application pour aider l’utilisateur à localiser un livre et se repérer dans la médiathèque (cf ce qui a été fait au château de Fontainebleau => l’application permet de se localiser en prenant des photographies)  Ouverture des données (en lien avec géolocalisation) Annexe 7 : Détail des releases du site internet de la médiathèque de Roubaix