# Conception du site Web de la Bibliothèque communale et scolaire de Gland : utilisation des méthodes du « design centré utilisateur » et de « l'expérience utilisateur »

Marianne CHENEVAL

marianne@cheneval.com

Spécialiste en information documentaire

## Résumé

Cet article est la synthèse d'un travail de Bachelor réalisé à la Haute Ecole de Gestion de Genève en 2021. Mandaté par la Bibliothèque communale et scolaire de Gland, ce travail avait pour but de concevoir un nouveau site Web pour la bibliothèque, en utilisant une approche centrée sur l'utilisateur. Ce texte retrace la méthodologie et quelques résultats des grandes étapes de ce projet.

<figure><img src="image_1.png" /></figure>

Cet article est disponible sous licence [Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International](https://creativecommons.org/licenses/by/4.0/).
# 1. Introduction

Ce travail de Bachelor avait comme objectif de proposer une maquette de site Web à la Bibliothèque communale et scolaire de Gland. En effet, la bibliothèque ne possède à l'heure actuelle pas son propre site, mais uniquement une page sur le site de la ville – comme encore nombre d'institutions. Afin de se moderniser et de pouvoir se rapprocher de ses usagers, elle a souhaité avoir une approche centrée sur l'utilisateur, qui prendrait en compte les besoins de son public communal (le public scolaire ayant déjà des canaux de communication dédiés). Ainsi, ce projet s'est voulu au plus proche du terrain et des usagers de la Bibliothèque de Gland.

# 2. Méthodologie

Pour atteindre cet objectif de maquette, plusieurs étapes ont été nécessaires :

1. Établir un état de l'art du design centré utilisateur, ainsi que des pratiques dans diverses institutions

2. Dresser un état des besoins et envies de la bibliothèque et des usagers

3. Choisir un Content Management System (CMS)

4. Définir le contenu du futur site

5. Mettre en place une architecture et créer une maquette

6. Effectuer des tests utilisateurs

## 2.1. Etape 1 : Le design centré utilisateur, qu'est-ce que c'est ?

Premièrement, il était nécessaire de définir et de comprendre les concepts qui seraient utilisés tout au long du travail, comme le design centré utilisateur, l'ergonomie, l'utilité et l'utilisabilité. Ensuite, les bonnes pratiques de création de site Web avec une méthode centrée sur l'utilisateur ont été présentées. Enfin, quelques sites institutionnels ont été analysés à l'aide d'une grille d'analyse.

### 2.1.1. Design centré utilisateur, UX Design, UCD

Le design centré utilisateur (en anglais User-Centered Design, UCD) est pour la première fois mentionné par Donald A. Norman, dans son livre *The Psychology of Everyday Things*, paru en 1988. Dans la deuxième édition de son livre, *The Design of Everyday Things* (2013), le design centré sur l'utilisateur est alors appelé « design centré sur l'humain ». Il était défini ainsi :

> « [...] human-centered design (HCD), [is] an approach that puts human needs, capabilities, and behavior first, then designs to accommodate those needs, capabilities, and ways of behaving. »

*(Norman 2013, p. 8)*

Le design centré sur l'humain a ensuite pris l'appellation de design centré sur l'utilisateur, et plus récemment de design d'expérience utilisateur. Tous ces termes ont finalement un sens commun : concevoir des produits et des services pour correspondre aux besoins, pratiques et envies des utilisateurs.
### 2.1.2. Ergonomie, utilité et usabilité

Lorsqu'on parle de design centré utilisateur, on passe immanquablement par le concept d'ergonomie. Alain Wisner donne une définition de l'ergonomie :

> « C'est l'ensemble des connaissances scientifiques relatives à l'Homme et nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité. »

*(Wisner 1972/1979, cité dans Boucher 2020 p.4)*

L'ergonomie est atteinte grâce à deux conditions : l'utilité et l'utilisabilité. L'utilité représente la réponse à un besoin : un objet ou un service doit être nécessaire, être utile. L'utilisabilité représente la façon de répondre à ce besoin : l'objet ou le service permet-il de satisfaire le besoin pour lequel il a été créé ? Est-il adapté, utilisable ?

En ergonomie Web, on raisonne également en termes d'utilité et d'utilisabilité. Le site Web doit répondre à de réels besoins, il doit avoir une raison d'exister, et il doit être conçu de manière à répondre au mieux à ces besoins.

Pour aller plus loin, lorsqu'on parle d'utilisabilité, on peut scinder cette notion en trois caractéristiques (Boucher 2020) :

* L'efficacité : Le site répond totalement aux besoins de l'utilisateur

* L'efficience : Le site permet à l'utilisateur de faire ce qu'il veut rapidement et sans erreurs

* La satisfaction : L'utilisateur parcourt le site avec plaisir, il ne ressent pas de frustration ou d'envie de quitter le site.

### 2.1.3. Bonnes pratiques

Une fois ces différentes définitions posées, il a fallu définir les bonnes pratiques en ergonomie Web. Pour cela, 12 points ont été détaillés, à l'aide du livre d'Amélie Boucher, Ergonomie Web & UX Design. Dans le cadre de ce compte-rendu, ces points ont été résumés ci-dessous. Des descriptions plus détaillées se trouvent dans le travail de Bachelor, ou dans le livre d'Amélie Boucher, tous deux mentionnés dans la bibliographie.

### 2.1.4. Architecture

L'architecture d'un site représente sa structure, comment les pages sont articulées entre elles, quels sont leurs liens. Une architecture claire et simple permet à l'utilisateur de se repérer facilement, et de trouver les informations qu'il recherche sans se perdre. C'est aussi là qu'est réfléchie la navigation dans le site : ciblée (l'utilisateur utilisera les menus pour naviguer), transversale (l'utilisateur navigue à l'aide des liens présents dans les pages) ou libre (l'utilisateur découvre le site à son rythme, est attiré par certaines propositions de contenus mis en avant)

**Bonnes pratiques :**

* Catégoriser l'information (grouper selon des catégories)

* Structurer l'information (hiérarchiser)

* Créer des menus qui reflètent le parcours usager
* Se mettre à la place de l'usager

### À éviter :

* Créer trop ou trop peu de niveaux de profondeur (problème lié à une mauvaise catégorisation ou structuration)

* Produire un site labyrinthique

* Penser le site d'un point de vue métier.

### 2.1.5. Organisation visuelle

L'organisation visuelle représente la façon dont sont présentées les pages visuellement. Où se trouve le menu, la barre de recherche, y a-t-il suffisamment d'espaces laissés vides, toutes les informations nécessaires sont-elles accessibles sur la page, la page est-elle hiérarchisée ? Une bonne organisation visuelle permettra de créer un sentiment de simplicité, et de logique chez le visiteur. Celui-ci ne doit pas avoir à chercher une information sur une page : c'est l'information qui doit naturellement apparaître lorsqu'on en a besoin.

### Bonnes pratiques :

* Hiérarchiser les titres

* Laisser des espaces vides pour aérer la page

* Faire figurer sur chaque page uniquement le contenu qui sera utile au visiteur à ce moment-là

### À éviter :

* Surcharger de contenus secondaires ou inutiles

* Cacher les informations importantes (information en bas de page, police trop petite, pas de mise en avant, etc.)

* Créer des pages trop longues.

### 2.1.6. Cohérence

Le site doit rester cohérent dans son ensemble. Que ce soit dans les localisations des divers éléments (menus, boutons, etc.), des appellations et symboles utilisés, des formats de présentation, ou des interactions possibles. L'utilisateur doit pouvoir discerner un comportement à adopter, une façon d'utiliser le site qui restera inchangée d'une page à l'autre.

### Bonnes pratiques :

* Toujours placer les éléments statiques au même endroit d'une page à l'autre (menus, barre de recherche, etc.)

* Toujours utiliser les mêmes mots ou symboles pour désigner le même élément

* Utiliser des styles pour les titres, les liens, etc., afin de les rendre repérables.

* Uniformiser les interactions (par exemple, un menu s'active au survol, donc tous les menus devraient s'activer au survol)

### À éviter :

* Voir le site comme une succession de pages sans liens entre elles

* Changer sans cesse la façon de nommer et de figurer les éléments.
### 2.1.7. Conventions

La plupart des sites Web respectent des conventions, intériorisées par la plupart des utilisateurs. Il en existe plusieurs catégories : conventions de localisation (menu en haut de page, logo en haut à gauche, compte utilisateur en haut à droite, etc.), de vocabulaire (compte, accueil, contact, etc.), d'interactions (cliquer sur un cœur met l'élément en favori, cliquer sur le bouton « accueil » renvoie à la page d'accueil, etc.). Pour que l'utilisateur se sente rapidement à l'aise sur le site, il doit pouvoir y retrouver des éléments familiers.

**Bonnes pratiques :**

* Lorsque cela est possible, ne pas trop s'éloigner des différentes conventions

* S'inspirer d'autres sites similaires pour les appellations usuelles

**À éviter :**

* Pouloir être trop original sans raisons particulières, au risque de perdre l'utilisateur.

### 2.1.8. Information

L'information délivrée par le site doit toujours correspondre à un besoin spécifique du visiteur. Ainsi, les différents contenus doivent pouvoir être utiles au visiteur et être placés à des endroits stratégiquement intéressants.

De plus, il est important de contrôler la quantité d'informations délivrée à l'utilisateur : trop d'information le noie, trop peu l'oblige à creuser, chercher, et lui fait perdre du temps.

**Bonnes pratiques :**

* Établir un schéma clair du contenu du site, et le répartir sur les différentes pages

* Pour tous les textes et images, systématiquement se poser la question de l'utilité du contenu à cet endroit précis

**À éviter :**

* Donner trop d'informations en même temps

* Disséminer les informations importantes.

### 2.1.9. Compréhension

Un bon site doit être très facilement et intuitivement compris et utilisable par ses utilisateurs. Ainsi, le vocabulaire, les images, les symboles, la mise en page utilisés doivent correspondre aux visiteurs.

**Bonnes pratiques :**

* Utiliser un vocabulaire adapté (pas trop spécialisé, pas de jargon métier)

* Utiliser des symboles et images connus du public-cible (loupe pour la barre de recherche, avatar pour le compte lecteur, etc.)

**À éviter :**

* Utiliser du jargon métier ou des termes spécialisés (par exemple OPAC, SIGB, bulletinage, indexation, etc.).
### 2.1.10. Guidage

Le guidage correspond à tout ce qui touche à l'accompagnement du visiteur sur le site. Proposition de contenus, bulles d'aide, FAQ. Pour une expérience optimale, le parcours utilisateur doit être prévu, anticipé, afin de pouvoir toujours proposer un contenu qui correspond aux besoins du visiteur. De la même façon, en cas d'erreur, le site doit pouvoir rediriger correctement.

**Bonnes pratiques :**

* Prévoir les parcours utilisateurs possibles pour anticiper au mieux les besoins

* Prévoir une page d'aide, une FAQ, ou des bulles d'aide pour aiguiller les utilisateurs les moins à l'aise

**À éviter :**

* Penser que tout le monde va utiliser le site de façon optimale : les aides sont utiles pour certains

* Pouloir trop en faire, et faire sentir à l'utilisateur qu'il a besoin d'être « assisté » en permanence.

### 2.1.11. Gestion des erreurs

La notion de guidage mène donc à la gestion des erreurs : que fait-on lorsqu'un utilisateur n'arrive pas à faire ce qu'il voudrait, se perd sur le site, essaie de faire des actions non-prévues par le système (entrer un numéro de téléphone là où on attend une adresse, mettre un livre en favori sans être connecté, etc.) ? Même si les erreurs doivent au maximum être évitées, certains utilisateurs en produiront immanquablement. Toutes ces erreurs doivent être prévues par le système, afin de proposer une solution au visiteur (redirection, propositions de termes, messages d'erreur). Cette étape nécessite de bien prévoir les parcours utilisateurs, et de faire tester son site.

**Bonnes pratiques :**

* Prévoir au mieux les situations qui pourraient produire des erreurs

* Prévoir des messages d'erreur compréhensibles

* Toujours accompagner l'utilisateur en cas d'erreur

* Si possible, faire tester son site par une grande variété de profils (notamment : enfants, personnes âgées, en situation de handicap, peu à l'aise avec la technologie, etc.)

**À éviter :**

* Laisser l'utilisateur sur une impasse

* Produire des messages d'erreurs incompréhensibles par le public (error 404, etc.)

* Penser qu'un processus qui nous paraît simple ne peut pas produire d'erreurs.

### 2.1.12. Rapidité

En UX Design, la notion d'efficience est centrale : les échanges entre le site et l'utilisateur doivent être fluides et efficaces. Ainsi, les éléments d'interaction importants tels que les boutons, les barres de recherche doivent être mis en avant (taille, couleur, placement). Le visiteur ne doit pas devoir chercher des fonctionnalités centrales à son expérience.
La rapidité inclut également la rapidité de réponse du site : des pages trop chargées en animations ou images vont prendre du temps à charger, et peuvent ainsi agacer, ou faire quitter le site à certains visiteurs.

### Bonnes pratiques :

* Placer les éléments importants au premier plan, en plus gros, et de façon à attirer l'œil

* Viser l'efficacité

### À éviter :

* Cacher des éléments dans des coins

* Oublier de hiérarchiser les contenus importants dans chaque page

* Charger le site en contenus gourmands qui vont le ralentir.

## 2.1.13. Liberté

Si le site doit guider, il doit aussi laisser à l'utilisateur la liberté d'explorer, d'utiliser le site à sa convenance. Il ne doit pas se sentir obligé de faire certaines actions, ou freiné par des restrictions.

### Bonnes pratiques :

* Permettre les principales interactions comme : le copier-coller, le retour en arrière, l'annulation, la gestion du volume sonore, la désactivation des animations, etc.

### À éviter :

* Poser trop de restrictions (formulaires pré-remplis, impossibilité de revenir en arrière, effets visuels et / ou sonores impossibles à arrêter, etc.)

* Inclure trop de pop-ups, de barrières à l'exploration libre du site (pop-up pour proposer l'inscription à la newsletter, accès restreint au site, etc.). Ces actions doivent être limitées à l'essentiel.

## 2.1.14. Accessibilité

Le site doit à la fois avoir une accessibilité physique : tout utilisateur, quel que soit sa condition physique et mentale (handicap ou non) doit pouvoir utiliser le site, et une accessibilité technologique : le site est utilisable sur une grande variété de taille d'écrons (ordinateur, tablette, smartphone, etc.) et de navigateurs (Google Chrome, Firefox, Safari, etc.).

### Bonnes pratiques :

* S'informer sur les dispositions à mettre en place pour un site accessible (Web Accessibility Initiative<fnref n="1" />, W3C<fnref n="2" />, AccessiWeb<fnref n="3" />). Principalement, ces mesures vont consister à fournir des textes alternatifs à tous les médias visuels, à utiliser des contrastes de couleurs adaptés, des tailles de caractères réglables, etc.

* S'assurer que le site soit agréablement utilisable sur mobile

<footnote n="1">¹ https://www.w3.org/WAI/</footnote>

<footnote n="2">² https://www.w3.org/standards/webdesign/accessibility</footnote>

<footnote n="3">³ https://www.accessiweb.org/index.php/accueil.html</footnote>
## À éviter :

* Laisser l'utilisateur s'adapter au site et ne rien prévoir pour adapter le site aux différents publics

* Utiliser trop d'animations, de contenus qui s'affichent au survol (difficile à utiliser pour certaines personnes avec un handicap moteur), de contrastes de couleurs trop faibles.

### 2.1.15. Satisfaction de l'internaute

Au-delà de toutes ces bonnes pratiques, le plus important, le cœur de l'UX Design, reste l'utilisateur. Son contentement, son plaisir à utiliser le site, sont le but de toutes les bonnes pratiques énoncées plus haut. Le site doit rester : utile, esthétique, performant, personnalisé, fiable.

## Bonnes pratiques :

* Se mettre à la place de l'utilisateur final lors de toutes les prises de décisions

* Garder en tête les bonnes pratiques, mais s'adapter au contexte de son institution, à son public, à ses moyens

* Garder en tête que le plaisir de l'utilisateur à utiliser le site influera sur sa fidélité, son envie de revenir sur le site

## À éviter :

* Pouloir viser la perfection de façon absolue

* Mettre de côté les préoccupations pratiques de moyens (financiers, humains, temporels)

* Oublier ses usagers dans le processus de création.

### 2.1.16. Grille d'analyse

Afin de pouvoir évaluer d'autres sites sur leur design, pour pouvoir éventuellement s'en inspirer, une grille d'analyse a été utilisée. Cette grille, très complète, a été empruntée au travail de Bachelor de Joan Lang, publié en 2011, *Réalisation d'un nouveau concept de site web pour les Kornhausbibliotheken à Berne*. Elle permet d'évaluer un site selon plusieurs axes : identité visuelle, lisibilité et visibilité, design et graphismes, accessibilité, conventions, navigation, structure, accès au contenu, aide à l'utilisateur, arborescence des pages et architecture, originalité. Ces critères avaient à l'époque été inspirés d'une ancienne édition du livre d'Amélie Boucher paru en 2007, *Ergonomie Web : pour des sites Web efficaces*, mais restent globalement valides. Cette grille complétée est disponible en annexe du travail de Bachelor.

## 2.2. Étape 2 : Besoins de la bibliothèque et besoins du public

Après cette phase théorique, la seconde étape consistait à récolter les besoins des différents acteurs.

### 2.2.1. Besoins de la bibliothèque

L'équipe de la bibliothèque sera en première ligne pour gérer, alimenter, utiliser, et faire vivre le site. Afin de mieux cerner les besoins des bibliothécaires, un premier questionnaire leur a été distribué. Il comportait des questions ouvertes, et cherchait à définir ce qu'ils appréciaient / n'aimaient pas sur la page actuelle, et à partager leurs idées pour un site « de rêve ». Les éléments appréciés étaient les éléments utiles aux lecteurs (liens vers des ressources et outils,
barre de recherche dans le catalogue, actualités). Au contraire, l'aspect et la construction du site actuel ne correspondaient pas aux attentes (site labyrinthique, pas de menu / navigation, manque de vie, design peu attractif). Les bibliothécaires auraient voulu, pour le futur site, plus de dynamisme, de convivialité, d'interactivité. Le site devrait être adapté à tous les publics (enfants, personnes âgées, personnes allophones, etc.), être simple d'utilisation, et offrir des fonctionnalités utiles comme la recherche dans le catalogue, l'accès à son compte lecteur, à des collections thématiques, ou encore la présence d'une page d'aide, de type FAQ.

Après avoir cerné les attentes de la bibliothèque, il était temps d'interroger les usagers.

### 2.2.1. Besoins du public : enquête et entretiens

Afin de recueillir tout d'abord des données quantitatives, un questionnaire a été diffusé via plusieurs canaux : mailing de la bibliothèque, newsletter de la Ville de Gland, page Facebook de la bibliothèque, distribution sur place de questionnaires en version papier. Sur une période de deux semaines, 176 réponses utilisables ont été produites. À noter que les interrogés n'étaient pas tous inscrits à la bibliothèque, certains ne la fréquentaient pas. Leur avis était néanmoins important, pour cibler éventuellement un nouveau public.

Le questionnaire regroupait des questions de catégorisation : âge, genre, situation professionnelle, rapport aux nouvelles technologies, appareils utilisés pour aller sur internet, et des questions tournées vers leur utilisation actuelle de la bibliothèque et du site (ou d'une autre bibliothèque, pour les non-usagers) : fréquence d'utilisation de la bibliothèque, avec qui viennent-ils, utilisent-ils le site actuel et pour quoi faire, ainsi que leurs besoins pour le futur : fonctionnalités souhaitées sur le site. Ce dernier point a ensuite servi de base pour proposer le contenu du site Web. Les résultats de cette question peuvent se retrouver sur la **Figure 1**.
<figure><img src="image_2.png" /><figcaption>Figure : 1: Besoins idéaux</figcaption></figure>

Les fonctionnalités demandées restent classiques : prolonger des documents, consulter les horaires, avoir accès au catalogue, obtenir des conseils de lecture. Le site devra donc tout particulièrement bien mettre en avant ces contenus, car ils correspondent aux réels besoins des utilisateurs.

Une deuxième étape qualitative a ensuite eu lieu. Grâce au questionnaire, des volontaires ont été contactés pour participer à des entretiens / focus groups. Ces rencontres, qui rassemblaient entre un et trois participants, selon les disponibilités de chacun, ont permis de cerner plus en détail les souhaits des participants : qu'attendaient-ils d'un site Web, quelles étaient leurs pratiques, comment imaginaient-ils le futur site ? Globalement, les souhaits des participants reflétaient les réponses au questionnaire : avoir accès aux horaires, pouvoir prolonger leurs documents, consulter les nouveautés. Néanmoins, plusieurs personnes ont semblé enthousiasmées par l'idée de pouvoir interagir avec d'autres sur le site, que ce soit par le biais de commentaires sous les publications de la bibliothèque, de publications de leurs propres coups de cœur sur un forum, ou d'échanges avec d'autres usagers sur leurs pratiques documentaires. Certains ont étendu ces envies au-delà du site, soulignant leurs besoins d'échange, de connexions avec leur communauté.

Tous ces éléments ont été retenus pour la mise en place du contenu du site.
## 2.1. Étape 3 : CMS, Possibilités techniques

Afin de pouvoir se projeter dans les possibilités techniques, différentes options en termes de création de site ont été explorées. Il a rapidement été décidé de partir sur un Content Management System (une solution permettant d'utiliser des templates, des modèles de pages et de contenu, au lieu de tout coder à la main). Grâce au livre blanc de l'entreprise Smile – Open Source Solutions : 200 Questions pour choisir un CMS, plusieurs critères ont été retenus, dont les principaux restaient : la simplicité d'utilisation, la liberté de personnalisation, le coût. Les 4 CMS analysés étaient Joomla !, WordPress, Spip, et Drupal.

Après des tests rapides (une à deux heures ont été consacrées à l'essai des CMS ; avec un peu plus de temps, il aurait été intéressant d'y passer quelques heures supplémentaires), les CMS ont été notés grâce à une grille comparative. Celui qui arrivait en tête de classement était WordPress. En effet, ce CMS est largement connu et utilisé, facile d'utilisation, et permet une personnalisation large grâce à ses nombreuses extensions gratuites.

L'équipe informatique de la Ville de Gland a été présente lors de ce processus, donnant son avis éclairé, et validant le choix final de WordPress. En effet, il est possible que le service informatique prenne en charge la gestion technique du site, et leur aide dans ce projet a été une grande plus-value.

## 2.1. Étape 4 : Contenu

Le contenu du site a été choisi selon différents critères :

* Résultats des deux questionnaires et des différents entretiens

* Contenu actuel du site

* Inspirations venues des analyses d'autres sites.

Ensuite, ces contenus ont été disposés dans une grille, afin d'en avoir une vue d'ensemble. Chaque contenu a été hiérarchisé selon son importance (indispensable, possibilité, à écarter pour l'instant). Ce classement reste une recommandation, et prend en compte les possibilités techniques, les envies des usagers, et de l'équipe de la bibliothèque.

## 2.1. Étape 5 : Architecture et maquettage

Les étapes de la création de l'architecture et de construction de la maquette ont été entremêlées. En effet, elles s'alimentaient l'une l'autre.

### 2.1.1. Architecture

Afin de commencer à structurer une architecture, un outil reconnu et puissant a été utilisé : le tri par cartes. Cette technique, qui fait participer les utilisateurs, permet de hiérarchiser et organiser les différents contenus entre eux, afin d'en tirer des observations utilisables. Dans notre cas, ces utilisateurs représentaient l'équipe de la bibliothèque.

Concrètement, les différents contenus qui seront présents sur le site sont inscrits sur des cartes. Les participants doivent ensuite les arranger entre elles selon des groupes qui font sens pour eux. Un tri de carte peut se faire de manière individuelle ou en groupe, en physique (tri de cartes papier) ou en virtuel (tri de cartes numérique). Comme le nombre de participants allait être réduit, et pour des questions de délais, le tri de cartes numérique individuel a été utilisé.

Afin d'analyser les résultats obtenus, deux méthodes ont été utilisées : la matrice de similarité (voir Figure 2), et le dendrogramme (voir Figure 3 et Figure 4).
Pour lire une matrice de similarité, il suffit de croiser les lignes et les colonnes pour obtenir le pourcentage de participants ayant classé ces deux cartes dans le même groupe. Par exemple, dans cette matrice (Figure 2), 100% des participants ont classé la carte « horaires » dans le même groupe que la carte « coordonnées de la bibliothèque (téléphone, mail).

<figure><img src="image_3.png" /><figcaption>Figure 2 : Matrice de similarité du tri par cartes</figcaption></figure>

Le dendrogramme permet de mettre en lumière des catégories. Sur l'axe vertical, on retrouve toutes les cartes. Sur l'axe horizontal, on peut voir « l'accord », soit le pourcentage de participants qui seraient d'accord de grouper ces contenus. Par exemple, si on place son curseur sur 90%, on peut dire que 90% des participants sont d'accord de regrouper les cartes « Plan d'accès », « Horaires » et « Coordonnées de la bibliothèque ». À contrario, lorsqu'on déplace le curseur sur la droite, et qu'on examine le diagramme avec 40% d'accord, les catégories deviennent plus larges, regroupent plus de cartes, car les participants ont moins fait ces associations, elles deviennent plus anecdotiques. Cette analyse peut être utile pour définir des grandes catégories grâce à un pourcentage d'accord moyen, pour ensuite créer les sous-catégories, en se déplaçant sur la gauche du graphique
<figure><img src="image_4.png" /><figcaption>Figure 4 : Dendrogramme avec un accord de 40%</figcaption></figure>

<figure><img src="image_5.png" /></figure>

Finalement, l'architecture retenue a été la suivante (voir **Figure 6**).
<figure><img src="image_6.png" /><figcaption>Figure 5 : Architecture du futur site</figcaption></figure>

### 2.1.1. Maquette

Afin de visualiser l'architecture produite, une maquette a été construite sur le logiciel Microsoft Office PowerPoint. Cette solution offrait une simplicité de prise en main, un export facile en PDF, et un coût nul (grâce à la licence Microsoft Office gratuite dans le cadre des études).

Lors de la création, il était important de garder en tête toutes les bonnes pratiques exposées plus haut. La terminologie des menus, par exemple, a été modifiée de nombreuses fois pour arriver à un résultat satisfaisant. Ces appellations restent des recommandations, et ne sont pas définitives.

Deux maquettes (voir Figure 6 et Figure 7) ont été produites, afin de prendre en compte les habitudes des utilisateurs, qui sont aussi nombreux à consulter le site sur dispositif mobile que sur ordinateur.
<figure><img src="image_7.png" /><figcaption>Figure 7</figcaption></figure>
Lors de la conception de ces maquettes, le plus important restait la simplicité, la compréhension instinctive et l'utilité. Le site ne se veut pas compliqué mais complet, et répondant aux besoins de ses utilisateurs.

## 2.1. Étape 6 : Tests utilisateurs

Afin d'éprouver les différentes maquettes, celles-ci ont été envoyées, en format PDF, à une vingtaine d'utilisateurs volontaires, avec des tâches simples à effectuer telles que : réserver un livre, accéder à son compte, effectuer une recherche, etc. Les participants ont ensuite été invités à renvoyer un feedback.

Les deux maquettes ont ainsi été testées, en répartissant les participants sur les différentes tâches et les deux maquettes. Sur une dizaine de réponses, les retours obtenus étaient en majorité positifs. Quelques critiques, comme un manque d'explications sur les différents catalogues d'ebooks, peuvent être résolues facilement en ajoutant des éléments explicatifs (de type bulles d'aide).

## 3. Pistes d'amélioration

Au terme de ce projet, les résultats restent positifs et encourageants. Néanmoins, si c'était à refaire, certaines phases pourraient être améliorées.

Tout d'abord, l'étude des différents CMS pourrait être plus poussée, afin de faire un choix totalement éclairé, et ne pas risquer de passer à côté d'une solution plus adaptée.

Ensuite, pour produire l'architecture du site Web, il aurait bien sûr été encore plus enrichissant d'inclure les usagers dans ce processus. Une quantité plus importante de données aurait permis de tirer des conclusions plus objectives, et d'exploiter le réel potentiel d'outils comme la matrice de similarité ou le dendrogramme.

Enfin, pour accompagner la suite du projet, créer un cahier des charges pour le site peut permettre de rassembler en un même endroit les différents besoins, fonctionnalités, contenus souhaités, afin de faciliter la prise en main du projet par la relève.

## 4. Conclusion

Cette expérience a permis de se rapprocher des besoins d'un public communal en termes de communication numérique. Il était particulièrement intéressant d'avoir pu mener ce projet de A à Z, en commençant par la définition des besoins, la rencontre et l'écoute des usagers, pour arriver à un résultat concret sous la forme d'une maquette. Ce cheminement a permis de se rendre compte de la réalité du terrain, de se confronter à des problèmes inattendus, de voir se concrétiser ce qui n'était au départ qu'une idée.

Lorsqu'on cherche à moderniser son site Web, ou à en créer un de toutes pièces, comme c'était le cas ici, il est important de bien se préparer, de bien s'entourer, et si possible, de prendre le temps pour réaliser chaque étape. La collaboration avec les différentes parties prenantes (hiérarchie, service informatique, usagers, conseillers, etc.) est cruciale, et la confrontation des idées a permis d'avancer, de faire évoluer le projet et d'arriver, finalement, à une maquette utile et... utilisable !
Bibliographie

BECUE, Grégory, 2011. 200 questions pour choisir un CMS : les bonnes questions à se poser pour choisir le bon outil. Asnières-sur-Seine : Smile Open Source solutions. Gestion de contenu et GED.

BIBLIOTHÈQUE COMMUNALE DE GLAND, 2014. @bibliotheque.gland. Compte Facebook [en ligne]. Dernière mise à jour le 13 juillet 2021. [Consulté le 13 juillet 2021]. Disponible à l'adresse : https://www.facebook.com/bibliotheque.gland/?ref=page_internal

BIBLIOTHÈQUE COMMUNALE ET SCOLAIRE DE GLAND, 2021. Bibliothèque communale et scolaire. Ville de Gland.ch [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://www.gland.ch/decouvrir-et-sortir/culture/lire/bibliotheque-communale-et-scolaire

BIBLIOTHÈQUE DE BLONAY - ST-LÉGIER, 2021. Bibliothèque de Blonay – St-Légier [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://mabibliotheque.ch/

BIBLIOTHÈQUE DE ROLLE & ENVIRONS, 2021. Bibliothèque de Rolle & environs [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://bibliotheque-rolle.ch/

BIBLIOTHÈQUE MUNICIPALE DE VEVEY, 2021. Bibliothèque municipale de Vevey [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://biblio.vevey.ch/default/accueil2.aspx?_lg=fr-FR

BOLFING, Anton, et al., 2011. Étude 2011 sur l'accessibilité des sites Web suisses [en ligne]. Zurich : Fondation « Accès pour tous ». [Consulté le 21 juin 2021]. Disponible à l'adresse : https://www.access-for-all.ch/images/Accessibility_Studie/Accessibility_Studie_2011_fr_komplett.pdf

BOUCHER, Amélie, 2020. Ergonomie web & UX design pour une conception centrée utilisateur. 4e édition, nouvelle présentation, 350 nouveaux exemples. Paris : Eyrolles. Design Web. ISBN 978-2-212-13736-1.

CELLIER, Jean-Marie, 2021. Ergonomie. Encyclopædia Universalis [en ligne]. 2021. [Consulté le 8 avril 2021]. Disponible à l'adresse : https://www.universalis.fr/encyclopedie/ergonomie/

CHENEVAL, Marianne, 2021. Mise en place d'un site Web dédié à la Bibliothèque communale et scolaire de Gland en appliquant les méthodes du « design centré utilisateur » et de « l'expérience utilisateur » [en ligne]. Genève : Haute école de gestion de Genève. Travail de Bachelor. [Consulté le 29 novembre 2021]. Disponible à l'adresse : https://doc.rero.ch/record/333318

CODEUR, 2021. Tableau comparatif des CMS : Comparer les systèmes de gestion de contenu. Comparatifs par codeur [en ligne]. 2021. [Consulté le 22 mars 2021]. Disponible à l'adresse : https://www.codeur.com/comparatifs/tableau-comparatif-cms/

CROIX-ROUGE DE BELGIQUE. Enquête de satisfaction du site internet de la Croix-Rouge de Belgique. SurveyMonkey [en ligne]. [Consulté le 29 mars 2021]. Disponible à l'adresse : https://fr.surveymonkey.com/r/enquete-croix-rouge-belgique

DAUMAL, Sylvie, 2018. Design d'expérience utilisateur : Principes et méthodes UX. 3ème édition. Paris : Eyrolles. Design Web. ISBN 978-2-212-67456-9
DIGITAL MINT, 2019. Choisir le bon CMS pour son entreprise, c'est tout un art! *Digitalmint - Agence Growth Marketing, Lausanne* [en ligne]. 12 janvier 2019. [Consulté le 22 mars 2021]. Disponible à l'adresse : https://digitalmint.ch/choisir-cms/

ETCHES, Amanda et SCHMIDT, Aaron, 2016. *Utile, utilisable, désirable : Redessiner les bibliothèques pour leurs utilisateurs* [en ligne]. Villeurbanne : Presses de l'enssib. [Consulté le 10 juin 2021]. La Numérique. ISBN 978-2-37546-053-5. Disponible à l'adresse : https://books.openedition.org/pressesenssib/1537

GARRETT, Jesse James, 2011. *The Elements of User Experience: User-Centered Design for the Web and Beyond*. Second Edition. Berkeley : New Riders. ISBN 978-0-321-68368-7.

GOMBERT, Guirec, 2021. La loi de Fitts appliquée à l'expérience utilisateur. *Agence LunaWeb* [en ligne]. 7 avril 2021. [Consulté le 9 juin 2021]. Disponible à l'adresse : https://www.lunaweb.fr/blog/ergonomie-utilisateur-loi-fitts/

GOOGLE ANALYTICS, 2021. *Google Analytics* [en ligne]. 2021. [Consulté le 13 juillet 2021]. Disponible à l'adresse : https://analytics.google.com/analytics/web/provision/#/provision

GOOGLE ARTS & CULTURE, 2021. *Google Arts & Culture*. [en ligne]. 2021. [Consulté le 13 juillet 2021]. Disponible à l'adresse : https://artsandculture.google.com

GOOGLE FORMS, 2021. *Google Forms* [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://docs.google.com/forms/u/0/

L, Bastien, 2019. SSO (Single Sign-On) définition de l'authentification unique. *LeBigData.fr* [en ligne]. 11 juillet 2019. [Consulté le 13 juillet 2021]. Disponible à l'adresse : https://www.lebigdata.fr/single-sign-on-sso-definition

LA FABRIQUE DU NET, 2014. Comment choisir le bon logiciel pour créer son site web ? *La Fabrique du Net* [en ligne]. 17 avril 2014. [Consulté le 22 mars 2021]. Disponible à l'adresse : https://www.lafabriquedunet.fr/conseils/comparaison-logiciel-prestataire/choisir-logiciel-creation-site-web/

LALLEMAND, Carine et GRONIER, Guillaume, 2015. Tri de cartes. In : *Méthodes de design UX : 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs* [en ligne]. Paris : Eyrolles. Design web. ISBN 978-2-212-14143-6. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://tecfa.unige.ch/tecfa/maltt/ergo/articles/P2/tri_deCartes (Lallemand2016).pdf

LANG, Joan, 2011. *Réalisation d'un nouveau concept de site web pour les Kornhausbibliotheken à Berne* [en ligne]. Genève : Haute école de gestion de Genève. Travail de Bachelor. [Consulté le 13 juillet 2021]. Disponible à l'adresse : https://doc.rero.ch/record/28015?In=fr

LE JOURNAL DU NET, 2019a. Mockup : définition, traduction. *Le Journal du Net* [en ligne]. 10 janvier 2019 09:01. [Consulté le 7 juillet 2021]. Disponible à l'adresse : https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203293-mockup-definition-traduction/

LE JOURNAL DU NET, 2019b. Système de Gestion de contenu : qu'est-ce qu'un CMS ? *Le Journal du Net* [en ligne]. 10 janvier 2019 09:00. [Consulté le 8 juillet 2021]. Disponible à l'adresse : https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203349-cms-content-management-system-definition-traduction-et-acteurs/
MIROLIUBOV, Dimitry, 2021. Pdf Icône gratuit. Flaticon.com [en ligne]. 2021. [Consulté le 20 juin 2021]. Disponible à l'adresse : https://www.flaticon.com/fr/icone-gratuite/pdf_337946

NIELSEN, Jakob, 2000. Why You Only Need to Test with 5 Users. Nielsen Norman Group [en ligne]. 18 mars 2000. [Consulté le 9 juillet 2021]. Disponible à l'adresse : https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

NOGIER, Jean-François et LECLERC, Jules, 2016. UX design & ergonomie des interfaces. 6e édition. Paris : Dunod. ISBN 978-2-10-075461-8.

NORMAN, Donald A., 2013. *The design of everyday things*. Revised and expanded edition. New York, New York: Basic Books. ISBN 978-0-465-05065-9. [Consulté le 13 juillet 2021]. Disponible à l'adresse : https://www.sunyoungkim.org/class/old/hci_f18/pdf/The-Design-of-Everyday-Things-Revised-and-Expanded-Edition.pdf

OPENSKA, 2021. 5 questions à se poser pour bien choisir son CMS. Openska [en ligne]. 2021. [Consulté le 22 mars 2021]. Disponible à l'adresse : https://www.openska.com/formation-cms/quel-cms-choisir.html

OPTIMAL SORT, 2021. Optimal Sort - Online Card Sorting Tool. Optimal Workshop [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://www.optimalworkshop.com/optimalsort/

OVHCLOUD, 2021. Choisir un CMS pour créer un site web. OVHcloud [en ligne]. 2021. [Consulté le 22 mars 2021]. Disponible à l'adresse : https://www.ovh.com/fr/hebergement-web/site/comparatif-cms/

PIXABAY, 2021. Pixabay [en ligne]. 2021. [Consulté le 15 avril 2021]. Disponible à l'adresse : https://pixabay.com/fr/

PORTIGAL, Steve, 2013. Interviewing users how to uncover compelling insights. Brooklyn, New York : Rosenfeld Media. ISBN 978-1-933820-11-8.

SALT LAKE CITY PUBLIC LIBRARY, 2021. *The City Library: Salt Lake City Public Library* [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://services.slcpl.org

SCHMIDT, Aaron et ETCHES, Amanda, 2012. User experience (UX) design for libraries. Londres : Facet. ISBN 978-1-85604-843-9.

SCOTTSDALE PUBLIC LIBRARY SYSTEM, 2021. Scottsdale Public Library [en ligne]. 2021. [Consulté le 7 juin 2021]. Disponible à l'adresse : https://www.scottsdalelibrary.org/

SERVICE ACCRÉDITATION, PILOTAGE ET ÉVALUATION (SAPE) - HES-SO, 2015. *Organisation d'un groupe de discussion (Focus Group) : Liste de contrôle* [en ligne]. Delémont : HES-SO. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://www.hes-so.ch/data/documents/Brochure-HES-SO-Organisation-groupe-discussion--Focus-Group--Liste-controle--version-planches-6578.pdf

THÉÂTRE GRAND-CHAMP, 2021. *Théâtre de Grand-Champ* [en ligne]. 2021. [Consulté le 30 avril 2021]. Disponible à l'adresse : https://www.grand-champ.ch/

USABILIS, 2018. Qu'est-ce que l'affordance ? Usabilis [en ligne]. 20 février 2018. [Consulté le 3 juin 2021]. Disponible à l'adresse : https://www.usabilis.com/definition-affordance/

VALÉRY, Claire, 2018. Comment choisir le bon CMS pour votre site Web. TemplateMonster Blog France [en ligne]. 28 novembre 2018. [Consulté le 22 mars 2021]. Disponible à l'adresse :
https://www templatemonster.com/blog/fr/comment-choisir-le-bon-cms-pour-votre-site-web-comparaison-de-cms-open-source/

VISUAL PARADIGM ONLINE, 2021. Standard Customer Journey Map Template. Visual Paradigm Online [en ligne]. 2021. [Consulté le 12 juillet 2021]. Disponible à l'adresse : https://online visual-paradigm.com/diagrams/templates/customer-journey-mapping/standard-customer-journey-map-template/#

WYZOWL, 2021. How to Create a User Journey Map – Made Simple! Wyzowl [en ligne]. 2021. [Consulté le 21 mai 2021]. Disponible à l'adresse : https://www.wyzowl.com/user-journey-map/