Décisions de conception : Remise à neuf de la page d'accueil des parcs
Grâce à un groupe de recherche sur l'expérience utilisateur, nous concevons une version plus intuitive de l'une de nos pages les plus populaires.
Lorsque nous avons lancé la nouvelle version de Boston.gov en 2016, nous savions que nous n'avions pas terminé. Notre plan a toujours été d'améliorer ce que nous avions accompli. Nous voulions continuer à rendre le site web plus facile à utiliser pour tous les citoyens.
Bien que l'aspect et la convivialité de Boston.gov aient beaucoup changé, certaines pages des services municipaux finissaient par sembler démesurées en raison du nombre de services qu'elles offraient aux résidents. L'une d'entre elles était celle de notre service des parcs et des loisirs .
Le site web des Parcs et Loisirs regorge de ressources précieuses. Nous voulions nous assurer que ces informations soient présentées de manière claire et compréhensible. Pour nous aider dans cette démarche, nous avons contacté nos amis et partenaires de General Assembly. Grâce à cette organisation, nous avons pu collaborer avec un groupe d'étudiants en expérience utilisateur pendant l'automne pour examiner le site web des Parcs sous un nouvel angle et proposer des idées afin de le rendre plus facile à utiliser pour les citoyens. Le groupe d'étudiants de General Assembly avec lequel nous avons travaillé comprenait Zach Rodriguez, Kalsang Bhutia et Michael Rodriguez. L'article de blog ci-dessous a été rédigé par eux à propos de leur travail.
Comprendre le problème
Le service des parcs et des loisirs de la ville souhaitait faire le point sur son site web actuel et repenser la mise en page de sa page d'accueil. L'objectif du projet était de permettre aux habitants de Boston de trouver des informations plus efficacement. Le service nous a sollicités pour réaliser un audit du contenu de son site, ainsi que pour créer des maquettes et des prototypes d'une version potentiellement améliorée.
Nous n'avions que trois semaines pour terminer le projet, donc le temps était un facteur essentiel. Notre objectif était de réaliser une refonte qui ressemble et se comporte comme le site Drupal 8 actuel. Nous voulions également nous assurer que les modifications soient faciles à mettre en œuvre pour le personnel municipal s'ils choisissent de le faire à l'avenir.
La principale préoccupation du service des parcs était de moderniser la mise en page générale de la page d'accueil afin de la rendre accessible à tous les utilisateurs du site web. Ils espéraient également faciliter la navigation pour leurs partenaires, en particulier les entreprises et les organisations intéressées par une collaboration avec le service des parcs. Sur la base de ces informations, nous avons pu identifier précisément nos utilisateurs potentiels et déterminer comment les contacter pour comprendre leurs objectifs et leurs motivations.
Faire le tour de la situation / Prendre la mesure de la situation
Pour commencer, nous devions comprendre en profondeur les besoins et les contraintes du client, au-delà de la simple technologie. Nous devions également cerner les motivations et les besoins des utilisateurs : les usagers des parcs et des espaces de loisirs et les partenaires commerciaux.
Nous avons mené des entretiens avec trois groupes clés :
- Les parties prenantes au sein du département
- Utilisateurs non-membres du site web des parcs
- Anciens partenaires du service des parcs (comme les vendeurs)
Nous n'avions pas une compréhension claire de l'histoire et de l'importance des différentes sections de la page d'accueil. Pour nous assurer de ne pas proposer des idées non concrètes, nous avons veillé à rester en contact avec les parties prenantes de Parks. Parmi nos principaux enseignements, nous avons constaté que :
- Il existe des limites aux modifications qui peuvent être apportées aux éléments globaux de Boston.gov.
- la mise en page actuelle du site web a été transférée depuis l'ancien site sans qu'il n'y ait beaucoup de changements dans la hiérarchie, et
- Les demandes d'entretien des arbres et les permis étaient deux des sujets les plus abordés lorsque les électeurs contactaient le service des parcs par téléphone ou par e-mail.
Qui sont nos utilisateurs ?
Nous avons recruté nos participants pour les entretiens grâce aux efforts de sensibilisation du service des parcs, ainsi que par le biais de nos propres réseaux de visiteurs de parcs de Boston.
Après avoir mené nos entretiens, nous avons créé un tableur qui nous a permis de facilement extraire des informations et de les étiqueter pour nos dossiers. Nous avons ensuite organisé une session de cartographie d'affinités pour révéler les informations sur les utilisateurs. Parmi les principaux enseignements tirés des utilisateurs, on peut citer :
- La COVID-19 a donné à beaucoup de gens envie d'aller plus souvent dans les parcs.
- les utilisateurs souhaitaient qu'il existe une meilleure procédure en ligne pour interagir avec les services des parcs et des loisirs
- les utilisateurs cherchaient des informations concernant les événements dans le parc, et
- les utilisateurs ont estimé que le site web des parcs devrait mieux séparer ses contenus.
Construire pour le peuple
Sur la base des informations que nous avons découvertes, nous avons élaboré nos trois proto-personnes et nous nous sommes ensuite concentrés sur le développement pour les deux premières.
- Jenny : Une passionnée de parcs qui est toujours à la recherche d'informations sur les différents événements qui s'y déroulent.
- Hawa : Propriétaire d’une entreprise locale qui souhaite collaborer avec le service des parcs sur un projet.
- Sam : Un visiteur occasionnel de parc qui n'a pas l'intention d'aller dans les parcs, mais qui cherchera des informations à leur sujet après sa visite.
Le fait de connaître nos utilisateurs et leurs objectifs a simplifié la cartographie des flux d'utilisateurs. Chaque utilisateur avait la même tâche : trouver des informations pertinentes. La seule différence entre eux résidait dans les informations qu'ils recherchaient.
Nous avons compris dès le départ qu'il s'agirait d'un projet axé principalement sur l'architecture de l'information. À cette fin, nous avons soigneusement sélectionné les outils et les méthodes de recherche les plus adaptés à notre projet. Ceci comprenait :
- audit de contenu
- analyse de données (via Google Analytics)
- plans de site actuels et futurs
- des analyses comparatives sur d'autres sites web du service des parcs, et
- tri de cartes.
Kalsang a réalisé un audit de contenu sur la page d'accueil et l'a combiné à Google Analytics afin d'obtenir une meilleure idée du trafic et de la popularité des différents contenus.
L'audit de contenu, combiné à une analyse approfondie du contenu à partir de Google Analytics, a permis d'obtenir des informations précieuses sur l'importance des différentes sections. Ces informations ont soit confirmé ce que le client nous avait dit sur la façon dont les gens utilisaient son site, soit révélé de nouvelles informations.
Zach a pu visualiser tout le contenu de la page d'accueil ainsi que les liens internes et externes en créant un plan du site . Cela nous a permis de prendre rapidement la mesure de la façon dont les éléments étaient connectés.
Michael a rédigé un modèle d'analyse. Nous avons examiné quelques autres sites web de services de parcs afin de nous faire une idée de ce qui fonctionnait et de ce qui ne fonctionnait pas, au fur et à mesure que nous avancions dans la refonte du site du client.
Les principales caractéristiques des sites web conçus pour réussir comprenaient :
- navigation simple
- utilisation équilibrée des images, et
- liens rapides facilement localisables vers les requêtes les plus fréquentes.
Les sites qui n'ont pas été mis en œuvre avec succès présentaient des problèmes tels que :
- des pages d'accueil avec des défilements apparemment infinis
- trop peu ou trop de barres de navigation, et
- un déséquilibre entre les images et les informations.
Une fois que nous avons rassemblé toutes nos informations et complété notre plan du site, nous étions bien placés pour déterminer la meilleure façon d'organiser nos informations. Nous devions également tenir compte des contraintes concernant les éléments qui devaient rester à leur place.
Michael a mené une étude de tri de cartes qui permettait aux utilisateurs de classer les éléments de la page d'accueil en différentes catégories qui avaient du sens pour eux. Nous avons reçu un certain nombre de réponses qui montraient des associations claires pour plusieurs des catégories. Cependant, il y avait un certain nombre d'éléments sur lesquels il était difficile d'obtenir un consensus.
Transformer nos idées en un design
Nous avons organisé un atelier de conception qui nous a permis, à nous trois, de :
- partagez nos différentes idées de design
- condenser les caractéristiques communes, et
- résoudre les points sur lesquels nous étions en désaccord.
Nous avons tous convenu de créer des pages web distinctes pour :
- événements
- informations spécifiques sur le parc, et
- informations sur les partenariats commerciaux.
Cela reflétait les informations importantes que les utilisateurs avaient priorisées dans les résultats de nos recherches.
Zach a examiné nos ressources de conception provenant de l' équipe numérique de la ville . Nous avons créé un guide de style facile à consulter pour nous guider lors de la création de nos maquettes. En gardant à l'esprit les couleurs, la hiérarchie typographique et le langage, nous nous sommes assurés que nos conceptions ressemblent le plus possible à la ville de Boston. Nous l'avons beaucoup utilisé lorsque nous sommes passés de nos maquettes à faible fidélité à nos prototypes à plus haute fidélité.
Nous avons mené notre premier cycle d'tests d'utilisabilité avec un maquette à fidélité faible à moyenne. Nous avons demandé aux utilisateurs de réaliser les tâches suivantes :
- Trouvez la page des événements.
- trouvez le calendrier des événements spécifiques au parc, et
- trouver les ressources nécessaires pour collaborer avec le service des parcs.
À la fin du test, nous avons posé aux utilisateurs des questions complémentaires et sollicité leurs commentaires généraux. Voici un résumé de nos résultats et observations :
| Action | Durée moyenne d'achèvement | Nombre moyen d'erreurs | Pourcentage moyen d'achèvement des tâches |
|---|---|---|---|
|
Section "Découvrir les événements" |
46 secondes |
2 erreurs |
100% de réussite |
|
Découvrez le calendrier des événements |
9 secondes |
1 erreur |
100% de réussite |
|
Découvrez les emplois chez Parks and Recreation |
45 secondes |
2 erreurs |
100% de réussite |
Bien que les utilisateurs aient été capables de réaliser les tâches que nous avions définies, cela ne leur a pas toujours été facile. Nous avons reçu des commentaires constants indiquant que :
les annonces en haut de page étaient une source de distraction
- les liens d'ancrage n'étaient pas suffisamment visibles
- il y avait trop de liens cliquables, et
- Le rouleau était très long.
Construire en tenant compte de nos résultats de test
Pour notre prototype à fidélité moyenne à élevée, nous avons pris en compte les commentaires reçus lors du premier cycle de tests et avons essayé de répondre aux préoccupations dans les limites de nos contraintes. Comme nous créions une page d'accueil de département pour un site gouvernemental plus vaste, nous ne pouvions pas grand-chose faire concernant le style de navigation ou les annonces. Nous avons donc opté pour supprimer les liens d'ancrage et placer des sections à l'intérieur d'autres pages.
Nous avons fait une autre tentative avec un deuxième cycle de tests avant d'apporter les modifications finales à présenter au client.
La plupart des utilisateurs ont terminé leurs tâches beaucoup plus rapidement lors de ce cycle de tests. Cependant, nous avons reçu des retours concernant les mêmes problèmes rencontrés lors du premier cycle de tests. Voici un résumé de nos résultats et observations :
| Actions | Durée moyenne d'achèvement | Nombre moyen d'erreurs | Pourcentage moyen d'achèvement des tâches |
|---|---|---|---|
|
Section "Découvrir les événements" |
60 secondes |
Erreurs < 1 |
80% de réussite |
|
Découvrir le calendrier des événements |
31 secondes |
Erreurs < 1 |
80% de réussite |
|
Découvrez les emplois chez Parks and Recreation |
45 secondes |
Erreurs < 1 |
100% de réussite |
Nous avons placé les liens d'ancrage sous l'en-tête Parcs et Loisirs et au-dessus de l'annonce importante concernant la COVID-19 afin de les rendre plus visibles. Nous avons encore réduit la liste des sections en déplaçant les informations moins pertinentes sous la page "À propos". Nous avons également veillé à condenser nos sections événements et actualités sur la page d'accueil.
Après avoir apporté ces modifications, nous avons présenté nos conceptions finales au service des parcs et des loisirs. Nous espérons que nos recherches et nos observations aideront le service à créer un site web plus accessible pour les résidents de la ville et ses partenaires.
General Assembly propose des formations accélérées pour acquérir des compétences très demandées dans le secteur technologique. Les étudiants avec lesquels nous avons travaillé faisaient partie de la formation intensive de conception d'expérience utilisateur de l'automne/hiver 2020. Leur travail sur le site web du département des parcs et des loisirs de la ville de Boston était un projet final qu'ils ont réalisé en trois semaines. Les étudiants qui ont participé à ce projet étaient Zach Rodriguez , Kalsang Bhutia et Michael Rodriguez .