Atelier RUX — DWM

Case-study rédigé par Sylvian Bergiers

Une situation de départ

Lorsqu’on parle de l’UX en web, c’est pour parler de l’expérience de l’utilisateur. Parler de la manière dont on a penser notre site, des tests que l’on a réalisé, uniquement dans le but de rendre l’expérience de l’utilisateur la plus belle possible.

Dans le Design Web & Mobile, l’UX intervient directement dans la conception d’un site web. Quand un site web est fluide, accessible et agréable à utiliser, c’est que les développeurs ont bien réalisés l’étape de l’UX.

Il faut donc apprendre à faire des UX solide pour développer des sites webs de qualités. Mais comment cela fonctionne-t-il ?

https://usabilitygeek.com/wp-content/uploads/2017/07/ux-design-process-lead.jpg

Un atelier

Rethinking UX, ou plus simplement RUX, est un atelier réalisé en groupe de quatre étudiants et ayant comme but de tester un site web pour en approuver et désapprouver des éléments de sa conception.

Tout commence par un test utilisateur. C’est une méthode qui permet d’évaluer un produit en le faisant tester par une personne extérieur. La consigne était de filmer un utilisateur qui se rend sur le site du KIKK festival et doit organiser sa journée en sélectionnant une conférence bien précise et ensuite acheter le ticket adéquat pour y participer.

Lors de la première journée d’atelier, nous avions tous rédiger au préalable un compte-rendu du test utilisateur et donc une idée concrète des différents problèmes rencontrés sur le site. Nous étions donc prêt à repenser le site pour améliorer l’UX.

3 top task ont été choisi par notre groupe, sur lesquels nous allions travailler tout le long de l’atelier RUX. Les tops tasks sont simplement les tâches principales du site.

Notre groupe a choisi celle-ci :

  • Conférence
  • Calendrier/horaire
  • Ticket
test utilisateur

Le scénario du test utilisateur effectué par mon père.

Des solutions et des hypothèses d’action

Ensuite, nous avons créer un“user journey”, un scénario divisé en étape montrant comment un utilisateur pourrait interagir avec notre projet. Cela nous aide donc à réfléchir sur les fonctionnalités du site application. Créer des User journey différent les uns des autres permet de visualiser le plus de problématiques possibles que l’on rencontre sur un site. Voici les trois utilisateurs que l’on a choisi. Ils sont tous différents et avec des situations différentes:

  • Une personne âgée qui a découvert le site grâce à une affiche publicitaire et intéressé, regarde sur son smartphone avant d’aller acheter son ticket sur la version desktop;
  • Une jeune qui découvre le site via une pub au cinéma, avant la projection de son film, et regarde avec ses amies sur son smartphone pour ensuite aller sur le desktop;
  • Un jeune qui découvre le site sur un réseau sociaux et ne va regarde le site qu’à l’aide de son smartphone;
  • Une femme aveugle qui a entendu parlé du KIKK festival et souhaite se renseigner sur le site;
  • Un homme en chaise roulante qui souhaite se rendre au KIKK festival et recherche sur le net des renseignements pour les aides envers les personnes à mobilités réduites.

Grâce à cette multitude d’utilisateur et de situation différente, nous avons pu trouvé beaucoup de problématiques auxquelles nous n’aurions même pas pensé sans ces user journey. C’est donc très pratique de réaliser des user journey. Chaque personne du groupe a ciblé les problèmes en corrélation avec leur fonctionnalité (top task) et il ne manquait plus qu’à réfléchir sur les différentes solutions pour tenter de rendre le site le plus fluide et complet possible.

Photo des user journey

Un exemple de user journey ainsi que l'analyse des émotions.

Des actions concrètes

Des feuilles blanches, des crayons, des ciseaux, … Un petit résumé du matériel utilisé pour créer des prototypes en papier du site web du KIKK festival. Lorsque nous avions réfléchis sur les solutions à apporter, il était temps de les créer en les dessinant comme si nous étions sur un site web. Chaque membre réalisait des prototypes et les faisaient tester par d’autres pour tenter de répondre à toutes les situations et être le plus fluide possible. Evidemment rien n’était bon au premier coup, il était donc nécessaire de créer plusieurs versions au fur et à mesure des remarques et conseils donnés par les professeurs et les autres étudiants.

Photo des premiers prototypes en version mobile

Un des premiers prototypes mobile que l'on a réalisé.

Remise en situation

Le site du KIKK a donc état remanié avec plein de nouvelles fonctionnalités, mais ce n’était pas encore parfait (bien que la perfection ne soit réellement atteignable), l’UX n’était pas au top et c’était bien normal. Nous sommes en apprentissage, c’était logique de devoir continuer à approfondir notre travail. Donc une fois d’autres prototypes réalisés, il fallait les tester, corriger, repenser etc. Jusqu’à obtenir des fonctionnalités solides et capable de répondre à toutes les attentes. Nous avons donc un site du KIKK Festival avec des fonctionnalités repensées mais l’UX n’était pas encore satisfaisant. Il fallait faire encore des tests et des « user journey » pour corriger et repenser les nouvelles fonctionnalités mises en place.

Photo en plein travail

Recréer pour mieux repérer

Pour aller encore plus loin dans le travail demandé, nous avons décidé de recommencer à zéro. De nouvelle manière de penser nos fonctionnalités ont été trouvées, il a donc fallu recréer des prototypes papiers et les faire tester par des utilisateurs. Une fois les tests réalisés, nous avons écouté les retours. L’ux était meilleur mais il y avait encore d’autres problèmes décelés qui devaient une fois de plus être comblé. Nous avons pris note des problèmes que les utilisateurs ont rencontrés durant le test et de nouveau discuter en groupe des améliorations à apporter. Lorsqu’elles ont été retranscrites en prototype papier, il était de nouveau temps de les refaire tester. A partir du moment où nous commencions à tourner en rond dans les ajouts de fonctionnalités et que les tests d’utilisateurs ne recensaient plus vraiment de problèmes, l’objectif était enfin atteint. nous avions donc réussi à développé des améliorations pour rendre l’UX le plus fluide et appréciable possible.

Photo des différents prototypes associés

Voilà à quoi pouvait ressembler notre table lors des tests utilisateurs.

Une conclusion

Le groupe de travail était super, on a tous su s’entendre directement et jusqu’au bout. On a tous pu s’exprimer sur les tests , les prototypes et les fonctionnalités ainsi que partager des commentaires constructifs et des idées sur le travail à réaliser. Il y a eu une cinquième personne qui s’est jointe à nous. Elle est arrivé après deux jours de travail et nous lui avons rapidement expliqué ce qu’il avait à faire pour rattraper son retard au plus vite. Elle a rapidement travaillé sur des prototypes et à procéder à quelques tests sans pour autant les approfondir. Sans aucunement la blâmer, je pense qu’elle n’était pas assez motivé pour cet atelier puisqu’elle n’a pas toujours fait acte de présence, bien qu’elle ait travaillé un minimum. Ce n’était pas dérangeant qu’elle ne soit pas là mais il était assez pesant de devoir lui expliquer par message, à sa demande, ce qu’il s’était passé la journée. Je pense que le groupe peut-être content du travail réalisé. Nous avons su se concentrer sur l’objectif à atteindre et de par la communication et l’envie de chacun, nous avons pu créer des prototypes papiers très concluants et satisfaisants. L’objectif est atteint et grâce à cette atelier, nous avons une idée concrète des démarches à faire lorsqu’il faut penser à l’UX d’une appli, site web, etc.

Photo de groupe

Photo du groupe, il manque Tom qui prenait la photo.