Rethinking User Experience

Rethinking-UX ou Rux pour les intimes.

Qu’est ce que l’UX ? Et bien il s’agit de l’abréviation de “User Experience Design”. Donc comme vous pouvez le deviner nous allons repenser un design afin de favoriser une meilleure expérience utilisateur. Et pour celà nous allons nous nous attarder sur le site du KIKK festival. https://www.kikk.be/2019/en/home

Introduction au workshop

Le workshop nous a été introduit lors d’un cours avec monsieur Marchal. Après nous avoir présenté la Gestalt celui-ci nous présente comment faire un test utilisateur correctement. A la fin du cours il nous invite à explorer une première fois le site du KIKK festival et de regarder ce qui n‘allait pas sur le site et d’ensuite de faire un test utilisateur de celui-ci. Et effectivement, il y a plusieurs détails qui m’ont choqué directement.

Planning du site du kikk
Screen du planning du site

L’utilité du test utilisateur est de trouver déjà plusieurs points problématiques du site web et d’également prêter attention au cheminement ainsi qu’aux réactions d’une personne ayant une manière différente de penser et de naviguer sur le web afin de voir ce qui pourrait être amélioré.

Mise en commun

Nous nous somme mis par groupes de 4 afin de mettre en commun les résultats de nos tests utilisateurs. Évidemment, nous avons formé notre dream team habituelle avec Nathan Noël, Melih Selamet et Aude Collin ! On a déjà travaillé plusieurs fois ensemble et en plus de bien s’entendre, on se complète bien pour tirer profit un maximum de chacune de nos capacités.

Nous en avons conclu ceci comme problèmes :

Nous en avons conclu que le site est très beau, mais qu’il n’est pas pratique même pour une personne ayant l’habitude d’utiliser un PC, alors imaginez ceux qui n’ont pas l’habitude !

Comment devrait être le site idéalement ?

Nous nous somme mit en groupe de 8 temporaire afin de définir en quoi l’on pourrait améliorer le site, nous avons fait une liste de plusieurs points à améliorer et en avons fait un résumé en quelques lignes de comment devrait être le site.

Pour nous, le site idéal d’un événement doit être accessible pour tout le monde et se résume à avoir une page d’accueil claire et précise où nous pouvons rapidement trouver toutes informations dont nous avons besoin, comme les contacts l’achat de billets, les événements, les accès et éventuelles contraintes sur place (handicap, animaux, navettes, …).

Fonctionnalités

Nous avons noté sur une feuille une liste d’actions qu’il serait possible qu’un utilisateur cherche à faire sur le site. Ensuite, à l’aide de gommettes, nous avons sélectionné chacun 3 actions d’utilisateur qui selon nous sont les plus importantes afin de voir lesquelles reviennent le plus (un système de vote en gros). Celles qui sont le plus ressorties sont l’achat de tickets, parcourir le programme (par programme nous entendons le planning / la programmation de l'événement, ça peut prêter à confusion) et un système de recherche facilité pour trouver les activités plus facilement.

Comme vous le remarquerez peut-être sur la photo ci-dessous nous avions 2 actions similaires que nous avons regroupé pour le programme ainsi que l’action « Ouvrir un menu déroulant » qui nous avons supprimé car il ne s’agit pas vraiment d’une action que cherche à faire l’utilisateur, mais plus un moyen pour y parvenir.

Photo de la feuille avec les gomettes

Nous avons chacun choisit une action utilisateur a retravailler. Personnellement, j’ai choisi de m’occuper du programme proposé pour le festival car celui-ci m’avait vraiment choqué tellement il n’était pas pratique.

Voice and tone

Nous avons utilisé la technique des gommettes une seconde fois pour définir le Voice and tone du site. Pour le voice nous avons choisis « pratique », « simple », « multiculturel » et « ouvert ». Tandis que pour le ton nous étions tous d’accord pour qu’il soit formel. Ceci nous sera utile afin de garder ce voice and tone lors de la création de nos solutions.

Photo de la feuille avec les gomettes

User journey

L’étape d’après a été de réaliser des user journeys. Nous avons d'abord écrit le scénario de ceux-ci avant de les développer. Puis nous nous sommes aider du site https://uxpressia.com/ afin de les mettre en forme

Pour écrire ceux-ci, nous avons pris en compte plusieurs choses comme le contexte social, économique, spatial et physique et les avons intégré dans nos user journey. Chaque membre de groupe a réalisé un user journey puis nous les avons mis en commun.

Mon user journey

Bon, c’est bien beau de faire des user journey mais en quoi m’ont-ils été utile ? Et bien grâce à ceux-ci, nous avons pu relever certains problèmes (et des choses bien aussi). Certains problèmes déjà vu lors des tests utilisateurs comme le manque de lisibilité, les problèmes de traduction ou le site mal organisé. Et d’autres comme trouver des informations sur l'événement du type si des réductions sont disponibles pour les étudiants ou des moyens pour voir, questionner certains conférenciers.

Pendant que nous travaillons sur nos users-journey un nouveau membre est arrivé dans le groupe ! Il s’agit de Mohammed Moussaoui, un étudiant de 3e devant refaire l’atelier. Nous lui avons expliqué ce qu’il fallait faire et l’avons aidé à rattraper son retard car il n’avait pas pu être là les jours précédents comme il devait suivre des cours de 3e pendant les heures de l’atelier.

Inspiration

Afin de réaliser le meilleur planning possible, je me suis inspiré d’autres sites remplissant une tâche similaire et j'ai analysé ceux-ci afin d’en tirer le meilleur et de voir aussi ce qui n’allait pas que je pouvais éviter. Voici les notes que j’ai prises. J’ai pu observer que la création d’un planning n’est pas forcément une chose aisée et qu’il faut que celui-ci s’adapte à son contenu. Par là, j’entends que le planning des sorties de films d’un cinéma sera organisé différemment que le planning des conférences de la Blizzcon car les 2 ont une organisation et une utilisation différente.

Ma prise de notes

Prototype

Maintenant que nous avons fait tout cela, il est temps de passer aux premiers prototypes ! Personnellement, j’ai d'abord fait des croquis très brouillons afin de retravailler ceux-ci avant de passer à une version plus propre à faire tester à mes chers collègues.

Afin de commencer mes prototypes, j’ai réutilisé mes recherches faites précédemment sur d’autres sites web proposant aussi des programmations d'événements / planning. Je me suis inspiré de ceux que j’ai trouvés les plus utiles en reprenant les choses bien et les ai adaptés à la programmation du KIKK afin d’avoir un résultat utile pour l’utilisateur.

Durant mes essais, j’ai cependant eu une illumination, plusieurs fois par semaine je consulte un planning que je trouve vraiment bien fait et je n’y avais même pas pensé ! Il s’agit du planning de la sortie des animes que je regarde sur Adkami https://www.adkami.com/agenda. J’ai repris l’idée d’une colonne par jour car lorsque l’on se rend à ce genre d'événement sur plusieurs jours une des choses principale qu’on se demande est « Quel(s) jour(s) je vais m’y rendre et pour assister à quoi ? ». Ensuite, les activités sont mises dans l’ordre par heure avec l’heure affichée de manière visible directement sur la vignette de l’activité. Si vous souhaitez en apprendre plus sur une des activités, il vous suffit de cliquer dessus pour ouvrir une info-bulle avec plus d’information sur celles-ci dont un petit lien « En savoir plus » afin d’arriver sur la page du KIKK qui présente l’intégralité de l’activité.

Prototype avec tous les filtres décochés Prototype avec 2 filtres cochés

J’ai également pensé à un code couleur afin de repérer plus rapidement une activité selon son type. Par exemple mauve pour les conférences et bleu pour les activités “Kids friendly”. Il est également possible de cliquer sur un système de tri juste à gauche du planning afin de n’afficher que les activités qui nous intéresse encore plus facilement. Et en plus, cela peut aider les daltoniens si jamais le code couleur ne les aide pas.

Une fois mon prototype terminé, je l’ai fait tester à d’autres élèves de la classe en commençant par ceux de mon groupe. Le résultat de ces tests ont directement été assez concluant j’ai dû modifier seulement certaines petites choses mais sinon le résultat était là ! À une exception près, mais qui a tout chamboulé.

Un de mes userTest Un de mes userTest

Retour en arrière pour mieux avancer !

Monsieur Marchal m’a fait une très bonne remarque concernant le planning que j’ai réalisé. Dans le cas de vendredi où il y a 28 conférences +2 autres activités ma colonne serait beaucoup trop longue et donc en plus de ne pas être terrible esthétiquement ça serait surtout beaucoup moins pratique pour se repérer dans le planning.

Et là, c’est le drame, j’ai du mal à trouver une idée pour arranger cela. J’en viens même à me dire qu'au final le planning de base n’était pas si mal à quelques soucis près. Donc j’ai réfléchi et je me suis dit autant faire un retour en arrière et revenir à la base. Qu’est-ce qui posait des soucis dans le planning de base en version desktop ?

  1. Le scroll horizontal beaucoup trop long.
  2. Certaines vignettes sont beaucoup trop étirée en longueur. Par exemple le “Market” ou le “KIKK in Town”, on peut toujours comprendre de quoi il s’agit avec le nom des lignes à gauche mais je trouve ça extrêmement désagréable d’avoir le reste da la vignette blanche qui prend une grand partie de mon écran sans aucune informations dedans une fois que l’on a scrollé un peu vers la droite.
  3. Les vignettes beaucoup trop grosse, pour les grands écrans elles sont déjà trop grosse mais sur mon 2e écran qui est plus petit (1024*768) je ne peux voir que très peu d’information d’un coup. Une solution est de dézoomer mais tous les utilisateurs ne connaissent pas le dézoom et en plus en dézoomant la taille du texte devient trop petite et donc illisible.
  4. Aussi mettre les heures en haut du tableau par 40min, je trouve cela un peu moins intuitif qu’avoir heures par heures ou 30min par 30min. Après ça c’est peut-être moi qui chipote pour du détail, mais je vais quand même essayer des changements sur ça pour mon prochain prototype.
  5. Le planning affiche les heures de 9h à minuit alors que l’activité se terminant le plus tard finit à 19h10. Donc il y a presque 5h d’inutiles d’affichées augmentant le scroll horizontal pour rien.
Screen su planning beaucoup trop gros sur un petit écran
Screen du planning sur un écran plus petit

En prenant en compte ces problèmes j'ai commencé de nouveaux prototypes. Après quelques croquis rapides et brouillons sur feuille je me lance et réalise un prototype sur PC plus proche du planning d'origine mais en corrigeant les problèmes cités précédemment. J’ai choisi de le compléter avec la journée la plus chargée afin de mieux réaliser si celui-ci fonctionne ou non. J'ai pu résoudre les problèmes du planning de base, cependant ma seule déception est que je pense que sur des écrans plus petit il y aura toujours un scroll horizontal malgré que j’ai réduit celui-ci. Pour éviter ce scroll je n’ai pas trouvé de solution qui ne nuirait pas à l’ergonomie et la lisibilité du planning. J’ai réduit la largeur du planning en 9 colonnes, 8 car c’est le maximum d’activité sur une journée et la 9e est là pour indiquer le lieu de l’activité. Je n’ai pas mis de colonne pour les activités entre 13 et 14h tout simplement car il n’y a pas d’activités commençant à ces heures-là donc cela aurait fait une colonne vide inutile. J’ai changé le système d’heures afin de garder un alignement.

Mon prototype final
Mon prototype

J’ai également ajouté un champ de texte « Recherche » si l’on souhaite rechercher une activité particulière pour remplacer le système de filtres que j’avais sur mon prototype précédent. La recherche met en évidence l’activité recherchée.

Système de recherche de mon prototype
La fonction « Recherche » du prototype

Conclusion

Ce que cet atelier m’a le plus appris est de ne pas me limiter à mon mode de pensée mais au contraire à adapter le design aux utilisateurs et pour cela autant s’inspirer des travaux déjà réalisé par d’autres personnes et surtout travailler avec des gens qui ont d’autre manières de voir les choses et d’utiliser un site web. Il faut savoir faire l’effort de demander un maximum l’aide des autres pour savoir comment améliorer son design. Comme un grand homme le dit très bien « Il ne faut pas développer pour l’utilisateur, mais AVEC l’utilisateur ».

Il m’a aussi fait prendre conscience d’une chose. Dans un premier temps, j’ai voulu complètement remodeler le design du planning du site. C’était une erreur, car celui-ci malgré ses défauts à quand même des qualités et vouloir trop m’en écarter m’a conduit dans une mauvaise route. Finalement garder l’idée de base du planning, mais simplement en corrigeant ses petits défauts était dans ce cas-ci la meilleure chose à faire.