Rethinking User Experience KIKK Festival

by Elie Durieux

Pré-RUX

Appelé RUX, c’est l’acronyme de Rethinking User Experience. Dans le cadre de nos cours d’UX, l’atelier a pour but de repenser l’expérience utilisateur d’un site, en l’occurrence, celui du KIKK festival. Avant de commencer RUX, nous avons abordé les tests utilisateurs. Cela consiste à proposer un scénario qu’un utilisateur doit réaliser sur le site.

Capture d'écran du site du festival KIKK

Stratégies & méthodes

Durant tout le long de l’atelier, ce sont les slides qui étaient le fil conducteur de notre travail dans le but de donner du sens aux étapes, comprendre pourquoi on fait cela à ce moment-là. Différentes méthodes sont alors possibles. Nous nous sommes concentrés sur quelques-unes.

Le secret du bonheur

(groupe de discussion)

Des chercheurs d’Harvard ont étudié le comportement de deux groupes d'hommes pendant 75 ans pour déterminer les facteurs de notre bohneur. La réponse est simple, ce sont les relations sociales qui déterminent le plus le bohneur. Le groupe de discussion est l’une des méthodes sur laquelle nous nous sommes concentrés. C’est avec une dizaine de personnes que nous avons mené un débat. Les questions portaient sur « Comment un utilisateur s’organise pour un événement », en découle d’autres questions...

« Quel est le dernier événement auquel vous vous êtes rendus ? »  Les réponses étaient diverses, les événements sont tous plus différent les uns des autres. "Où avez-vous achetés vos tickets ?"  Nous étions une majorité à les avoir achetés en ligne ou via une application. Savoir ça est une chose importante pour la conception du site. Il faut dès lors, faire attention à cette partie sur le site. 

« Comment vous vous organisez pour ce genre d’événements ? » En consultant la page du planning, il est donc essentiel que cette partie soit bien pensée.

« Quels types de renseignements vous attendez vous à retrouver sur le site ? »Les informations indispensables telles que le lieu, la date (+durée) le prix ainsi quel le contenu (de quoi cela parle). Dans un second temps, le moyen de s’y rendre, les informations complémentaires (parking etc) ainsi qu’un moyen de contacter quelqu’un. 

« Comment rendre ces informations accessibles ? » En créant une hiérarchie visuelle, l’oeil sait ce qu’il doit regarder en premier, le tout dans un ordre. Ce procédé a pour but de choisir ce que l’on veut voir en premier dans un design. L’ergonomie est plus importante que le visuel. Pour confirmer que la hiérarchie visuelle est fonctionnelle, on peut faire des tests utilisateurs.

La hiérarchie de l’information est importante, elle permet un accès facilité aux différentes informations. Il ne faut pas faire du beau pour faire du beau. L’expérience utilisateur est plus importante que le visuel. Faire intervenir l’utilisateur est primordial. Il faut se mettre à la place de l’utilisateur. Toutes ces tâches tentent de garantir la meilleure expérience, même si ce n’est pas suffisant.

Se simplifier la tâche pour simplifier la vie de l’utilisateur.

(top task)

On entend souvent les gens dire « parfois, il ne faut pas se casser la tête » . Cette méthode est entièrement dédiée à cela. Un site doit être simple d’utilisation. Il faut se concentrer sur un petit nombre de tâches. Nous avons constitué une liste d’une vingtaine de tâches que l’on retrouverait sur le site du KIKK et dans un second temps d’en constituer un top 3. C’est ici que l’on comprend l’intérêt de faire un groupe de discussion avant. Il nous permet de mettre tout le monde d’accord sur les tâches que l’on trouverait sur le site et donc d’être d’accord sur les tâches primaires.  Généralement, quand on parle de « top task », il est question de plusieurs micro-fonctionnalités qui permettent son bon fonctionnement. Par exemple, pour le planning, il faut une fonctionnalité qui regroupe les conférences et qui affiche leur lieu, la date, etc. Il a aussi fallu réfléchir à comment elle doit fonctionner. Il faut réfléchir comme l’utilisateur. Comment voudrais-je avoir accès aux informations relatives au planning ? 

Site de Facebook

Beaucoup de fonctionnalités

Site de Google

Top task

L’une des solutions est l’utilisation de filtre, une autre solution pourrait d'être de créer une timeline ou les conférences seraient classés individuellement. Une dernière fonctionnalité pourrait être par exemple être une barre de recherche. Pour en arriver à ce résultat, il faut se questionner. Se questionner sur « pour qui travaille-t-on ». Pour notre client ? Pour les utilisateurs ? La réponse est les deux. C’est là qu’est toute la difficulté. D’un côté, il savoir satisfaire les envies et les demande du client. D’un autre, il faut imaginer la meilleure expérience possible pour l’utilisateur. Souvent, il est difficile d’associer les deux. La solution est de faire intervenir le client dans le projet. Étant impliqué dans le projet, il sera satisfait du résultat.

À l’aide des gommettes, nous sommes parvenus à constituer trois fonctionnalités primaires. La première concerne l’achat des tickets, la deuxième, les informations tels que le lieu, la date et la langue. Pour ma part, j’ai choisi le planning complet. Ce choix détermine sur quoi nous allions nous concentrer le reste de l'atelier.

Feuille avec une liste de tâche écrite et des gommettes collées sur la feuille

S'inspirer pour mieux créer

(Audit)

Pour confirmer la pertinence de nos fonctionnalités et des mises en place, une technique consiste à faire un audit. Cela consiste à regarder comment font les autres pour répondre à une problématique. Un travail de recherche est nécessaire. J’ai consulté les sites de festival en premier. Le filtre est la fonctionnalité qui était la plus présente tout site confondu. Efficace et rapide, elle est adaptée à tout type d’événements, tout le monde sait comment l’utiliser. 

Site du Rock Werchter, des concerts sont rangés par ordre alphabétique Site du Brussel Summer Festival.

La deuxième fonctionnalité que l’on trouve le plus souvent est la timeline. Affichée de manière chronologique, son fonctionnement est proche d’un planning. Il faut tout de fois faire attention à son ergonomie. Cela doit rester compréhensible et simple à utiliser.

Site du Tomorrowland avec une ligne du temps.

Se mettre dans la peau d’un utilisateur

(User Journey)

Toujours dans une démarche de mettre l’utilisateur au centre de son produit. Un User Journey est un scénario d’utilisateur imaginé. Se mettre à la place de l’utilisateur durant une consultation de site n’est pas suffisant. Il faut prendre l’entièreté de son parcours en compte, c’est-à-dire, avant, pendant et après d'avoir été sur le site. Quel intérêt ? Définir l’utilisation de son site dans un contexte réaliste.  Un User Journey comporte une problématique ainsi que des solutions. Il n’a pas été simple de comprendre les subtilités d’un User Journey. L’une de nos erreurs à été de croire qu’il fallait améliorer un site alors qu’il faut le repenser. Il ne faut pas prendre des fonctionnalités existante pour les modifier, mais bien créer des situations de tous les jours. Ces situations comportent des problématiques (des taches que l’utilisateur fait). Il faut ensuite réfléchir à comment résoudre cela à travers des fonctionnalités.

Illustration d'un User Journey

Il faut réfléchir au contexte physique, temporel, personnel (l’état de l’utilisateur, sa condition) Voici les questions que nous nous sommes posés. Savoir où va-t-on l’utiliser ? Dans un lieu public ? Dans un endroit avec peu de 4G ?  Savoir qui va l’utiliser ? Cette personne a-t-elle des particularités (troubles de la vision, incapacités physiques) ? Quelle langue la personne parle ? Va-t-elle consulter le site en présence d’autres personnes ? À quel moment de la journée ? Le matin, en journée, le soir, quand il fait nuit ? La personne est au KIKK en ce moment et souhaite voir quelles conférences pourrait-il voir après. Comment faire pour afficher cette information ? Comment expliquer à l’utilisateur qu’il est plus avantageux s’il souhaite prendre un ticket uniquement pour le deuxième jour ? Comment faire comprendre à la personne qu’il n’est plus possible d’y participer. Ces questions créent des problématiques qui pourraient survenir et donc permettre des solutions. Le tout est de savoir quelles questions sont intéressante à se poser.

Un tableau contenant des problématiques et des solutions.

Rater pour mieux réussir

(Mes erreurs)

S’il y a bien une chose que j’ai apprise durant ce workshop, c’est qu’on se plante. On se plante tout le temps.

Un écran de jeu Game over avec écrit essayez encore.

Arrivé à un certain point, il y a toujours une série de choses à refaire.  Le premier exemple est celui de l’audit. Étant donné que la tâche de l’utilisateur était la consultation du programme complet, je me suis intéressé à des sites similaires. Après le User Journey, les problématiques m’ont dirigées vers une utilisation de filtre. L’audit ne présentant pas ces caractéristiques, il m’a fallu refaire des recherches sur d’autres sites qui comportaient des filtres (AirBnb). Mon erreur ici a été de se baser uniquement sur des sites similaires.

Un prototype papier avec un bouton filtre

Il suffit parfois d’un tout petit détail pour tout recommencer. La deuxième erreur à été de croire qu’on devait se baser sur les fonctionnalitées du site déjà présentes pour faire nos User Journey. Pour les User Journey. Au lieu de penser à de nouvelles fonctionnalités, nous avions repris des fonctionnalités du site pour les améliorer. Il s’agissait ici de repenser, pas d’améliorer.

C’est au stade des prototypes que j’ai compris une subtilité qui m’a fait modifier une nouvelle fois mon User Journey.  Il s’agit de faire une seule et unique problématique et proposer des solutions différentes. Le but d’un prototype est de répondre à des questions posées, il faut qu’ils répondent à la même question, sinon, cela n’a aucun intérêt. J’ai donc dû refaire d’autres prototypes qui proposaient d’autres solutions à une même problématique. Je me suis basé sur cette problématique. « Un utilisateur ne sait pas quoi faire entre deux conférences. »

Après un peu de travail, j’en suis arrivé à ce résultat.  Je n’avais même pas déjà passé de test, que j’avais déjà dû refaire des prototypes. Arrivé à cette étape, je pouvais enfin dire que j’avais deux réponses à une problématique.

Un prototype papier avec un planning.

Propose à l’utilisateur des conférences qui vont bientôt commencer.

Un autre prototype papier avec un planning

Propose des suggestions à l’utilisateur s'il y a un creux entre deux conférences.

Boucler la boucle

(Tests utilisateurs)

Si l’audit sert à confirmer la mise en place de nos fonctionnalités, rendre nos choix pertinents, les tests utilisateurs le font pour les prototypes. La prochaine étape consiste donc à faire passer des tests utilisateurs. Les utilisateurs ont eu tendance à choisir le prototype qui proposait des suggestions. Quand deux conférences sont sélectionnées et qu’il y a un creux, un bouton suggestion apparaît, en cliquant dessus, des propositions d’activités à faire sont proposées.

Prototype papier avec une fenêtre qui superpose le planning

Le commentaire des utilisateurs était que l’affichage du bouton suggestions n’était pas visible. Étant présent dans le bas de l’écran, on ne le voit pas directement.

La question était : « Comment mettre en valeur un bouton dès que l’utilisateur à une suggestion ». Plusieurs solutions s’offraient à moi. Une animation qui mettrait en valeur le bouton, un avertissement avant d’aller à l’étape suivante. Pour en choisir une, il faut savoir laquelle est la plus adaptée, et pour savoir quelle solution est la plus adaptée, il faut réfléchir à comment mettre en place d’abord et voir quelles solutions fonctionne le mieux.

Comment mettre en place une animation sur le bouton ? Pour trouver des animations, j’ai trouvé des exemples d’animation de survoltage que je pourrais utiliser pour faire mettre en valeur ce bouton dès qu’une suggestion est disponible.

Comment mettre en place un avertissement avant de continuer son achat ? En mettant le bouton grisé par exemple, cela indique à l’utilisateur qu’une condition est requise avant de continuer. Il faut faire comprendre que pour continuer, il faut cliquer sur suggestion à l’aide d’une animation sur le mot « suggestion » Au final, on résout un problème avec deux solutions. 

La plus grosse difficulté, c'est vous même

(Post-RUX)

Pour conclure ce workshop, ma plus grosse difficulté à été de correctement faire chaque étape.  J’ai dû à plusieurs reprises refaire certaines parties du travail, car je n’avais pas bien compris ce qu’il fallait faire. En plus de produire un travail à itération (refaire des prototypes pour l’améliorer) il m’a aussi fallu refaire quelques étapes. Une autre chose que j’ai apprise, c’est qu’il faut se planter. Quand c’est la première fois que l’on fait ce type de travail, on ne peut pas réussir du premier coup chaque étape. Il faut être conscient que ce type d’erreur peut arriver, faire attention à chaque chose que l’on fait et ne pas se démotiver. Pour éviter cela, il faut se poser des questions, beaucoup de questions. Est-ce que je fais correctement ce qui est demandé ? À quoi sert cette étape ? Pourquoi faire cette étape ? Est-ce bien quelque chose que l’utilisateur ferait ?

Notre groupe