Repenser une interface :
le KIKK Festival

Comme chaque année se tient à Namur le KIKK Festival. Il s’agit d’une sorte de site de conférences et évènements artistiques, technologiques et divers se déroulant non-seulement sur plusieurs jours mais également à travers toute la ville. Afin de faire la promotion de tout cela, les organisateurs ont mis en place un site internet ( https://www.kikk.be/ ). Seulement, plusieurs éléments pourraient être améliorés.

L’atelier RUX

Je suis une étudiante en deuxième année Design Web et Mobile à la Haute École Albert Jacquard. Dans le cadre d’un de nos atelier, le RUX ( alias le Rethinking User Experience), nous avons soulevé les problèmes d’ergonomie, de praticabilité et de logique présent sur le site de l’évènement KIKK. Tantôt par groupe, tantôt tout seul, nous imaginons des solutions et des alternatives.

photo d'élèves au travail

Chemin de réflexion

Avant le lancement de l’atelier, chacun réalise un test utilisateur du site. Un test utilisateur consiste à demander à une personne tiers de tester un site. Il lui sera demandé de réaliser une tâche particulière ( par exemple, « vous devez vous rendre à la conférence de Base Design, trouvez en le lieu et l’heure puis allez acheter le ticket pour y accéder. »). Cela permet de déceler les éventuels éléments problématiques et rendre l’ensemble plus user friendly. Au plus des cobayes testeront votre site au plus vous serez capables de l’améliorer correctement.

Par groupe, nous nous posons la question de savoir quelles seraient les attentes venant de quelqu’un d’intéressé par un évènement vis-à-vis de la page web de celui-ci ? Quelles informations aimerait-il avoir et dans quelle priorité ? Après un petit 40 minutes de brainstorming, nous finissons par établir que, pour nous, le site idéal d’un événement doit être accessible pour tout le monde. Il se doit d’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 des billets, les événements, les accès et éventuelles contraintes sur place (handicaps, animaux, navettes,…). Toujours par groupe, nous dressons une liste des fonctionnalités qu’un utilisateur pourrait réaliser lorsqu’il souhaite s’informer sur le site d’un festival. En repensant à nos expériences personnelles et à nos tests utilisateurs, nous terminons avec une liste d’une vingtaine d’éléments. Parmi ces éléments, nous utilisons tous des gommettes pour marquer ceux qui nous paraissent être les plus importants. Après ce vote, quelques tâches ressortent plus que les autres :

photo liste fonctionnalités
  • Acheter ses tickets ;
  • Parcourir le programme ;
  • Filtrer le contenu.

Chacun d’entre nous choisit un de ces facteurs afin d’en faire la base de sa réflexion de redesign. S’en suit une nouvelle réflexion, j’ai choisit de me concentrer sur la billetterie du site. Je commence donc par une recherche sur d’autres sites afin de voir comment eux ont procédé. Je profite de cette recherche pour penser à différent moyens d’agencer tout mes éléments. Ainsi je finis avec un petit sommaire d’idées :

  • formulaire déroulant avec les différentes sortes de tickets + formulaire à remplir avec le nombre de tickets souhaité ;
  • liste de cases correspondant aux tickets à cocher avec formulaire à remplir pour nombre de tickets voulus pour chaque ticket sélectionné.
    Exemple : les tickets de choix d’autographes sur le site de la PeopleCon ; exemple liste tickets
  • block liste des tickets + descriptifs, doit cliquer dessus pour passer à la phase d’achat.
    Exemple : les tickets d’accès pour les conférences sur le site de la PeopleCon ou la billetterie d’origine du KIKK ;
    exemple liste tickets exemple liste tickets
  • formulaire en plusieures parties, d abord choix, puis précision dans le choix et enfin paiement avec dernières modalités.
    Exemple : le choix de trajet sur le site de la SNCB ou des séances sur celui de l’Acinapolis.
    exemple liste tickets exemple liste tickets

Dans le but de nous aider à penser à tous les cas possibles, nous réalisons des User Journey. Il s’agit de faire un schéma détaillant l’expérience d’un potentiel utilisateur. Il faut penser aux émotions et aux problèmes qu’il rencontrerait et aussi établir les réseaux de communication par lesquels il passe au fil de son avancement. Il me fallut malheureusement du temps pour comprendre comment en réaliser un correctement. J’avais d’abord mal saisi la façon dont un User Journey correct devait se présenter. Grâce à des conseils et aux exemples disponibles sur le site UXPressia j’ai réussi à finalement en sortir un correct.

screen du User Journey

Début de design

Sur appui de mon travail de réflexion, je me lance dans la confection de plusieurs wireframes papier, autrement dit la finalité de cet atelier RUX.

photo du bureau avec le début du travail

Je décide de faire une version mobile de l’interface de billetterie mais pas que, je revois également légèrement l’interface d’accès ainsi que les types de billets disponibles. Je commence par faire une version assez proche de celle disponible d’origine. Seulement, je remplace le scroll vertical infinissable par un scroll horizontal avec en plus des tickets répartis par catégorie. J’instaure également un principe de cart, permettant de choisir plusieurs billets différents facilement et tout en restant sur le site.

  • Page d'accueil

    Page d'accueil

  • Menu ouvert

    Menu ouvert

  • Page d'achat des tickets partie 1

    Page d'achat des tickets partie 1

  • Page d'achat des tickets partie 2

    Page d'achat des tickets partie 2

  • Fenêtre s'ouvrant lors du choix de ticket

    Fenêtre s'ouvrant lors du choix de ticket

  • Bouton acheter se mettant en bas de page après sélection du ticket

    Bouton "buy" se mettant en bas de page après sélection du ticket

  • Vue du panier avec les tickets qui ont été choisis

    Vue du panier avec les tickets qui ont été choisis

Je le fais tester à différentes personnes qui soulignent le manque de logique sur le bouton d’achat de la pop-up et celui amenant au cart. Je commence alors une nouvelle version, je renomme et simplifie les tickets et change le tri avec scroll pour un menu sélectif. Au départ mal designé ( simple flèche vers le bas, qui s’est révélée trop peu intuitive), je le redessine et tout de suite ça devient beaucoup mieux. Il faut alors choisir dans un menu déroulant quel type de ticket on souhaite, puis sélectionner le budget ( normal ou moins de 25 ans). Je refais tester le design et la personne réalise la tâche sans soucis.

  • Page d'accueil

    Page d'accueil

  • Menu ouvert

    Menu ouvert

  • Page d'achat des tickets partie 1

    Page d'achat des tickets partie 1

  • Page d'achat des tickets partie 2

    Page d'achat des tickets partie 2

  • Page d'achat des tickets partie 3

    Page d'achat des tickets partie 3

  • Page d'achat des tickets partie 4

    Page d'achat des tickets partie 4

  • Bouton buy et go to cart apparaissant après le choix d'un billet

    Bouton "add to cart" et "go to cart" apparaissant après le choix d'un billet

  • Menu déroulant pour passer d'un type de conférence à l'autre

    Menu déroulant pour passer d'un type de conférence à l'autre

  • Fenêtre de confirmation d'ajout du ticket

    Fenêtre de confirmation d'ajout du ticket

  • Vue du panier avec les tickets qui ont été choisis

    Vue du panier avec les tickets qui ont été choisis

Voici maintenant un rapide exemple d'une situation possible de quelqu'un souhaitant acheter des tickets via ce nouveau système finalisé :

  • Page d'accueil

    L'utilisateur se trouve sur la page d'accueil, il ouvre le Menu.

  • Menu ouvert

    Parmis les options du menu déroulant, il choisit "Buy tickets".

  • Page d'achat des tickets Kids

    Il arrive sur la page d'accueil des tickets.

  • Apparition des interfaces d'achat

    Il décide d'ajouter un ticket, l'option "add to cart" apparaît.

  • Confirmation de l'achat via une pop-up

    Une fois qu'il a appuyé sur "add to cart", une pop-up appraît pour confirmer l'ajout.

  • Ouverture du menu déroulant pour changer de catégorie

    Il clique sur le menu déroulant pour changer de catégorie de conférence.

  • Arrivée sur la page de tickets pour les Masterclasses

    Il arrive sur une nouvelle page de tickets.

  • Apparition des interfaces d'achat

    À nouveau il choisit un ticket et le bouton d ajout apparaît.

  • Confirmation du nouvel achat via une nouvelle pop-up

    La pop-up de confirmation s'affiche une nouvelle fois.

  • Interation avec le bouton de redirection vers le panier

    L'utilisateur clique sur le bouton pour aller voir son panier.

  • Finalisation de l'achat

    Le contenu du panier est vérifié puis il s'en va sur la page finale d'achat.

Feedback de l’expérience

Au final, cet atelier RUX qu’est-ce que c’était ? Selon mon expérience personnelle, j’y ai appris à remettre en question notre façon de penser, ma logique propre, pour laisser place à celle de l’autre. Apprendre à ouvrir les yeux sur ce qui fait d’une interface qu’elle sera agréable ET pratique aux yeux de l’utilisateur. Cet atelier m’a aussi poussée à utiliser des procédés ( User Journey, Test Utilisateur,…) afin d’affiner mon jugement et d’orienter correctement ma démarche. Si je devais résumé, je dirais que j’ai appris à mettre en place tout un ensemble de principes afin d’aboutir à une interface plus facile d’utilisation et mettant le besoin de l’utilisateur en priorité.

photo du wireframe papier