Le commencement

Le workshop débute sur une semaine de cours assez “classique”; Toute la classe se retrouve le lundi au B237, là notre professeur, Mr. Marchal, nous présente de nouvelles slides, celles-ci touchent sur les lois de la Gestalt, matière importante qui nous servira pour la suite de l’année, il nous montre également une vidéo d’un test utilisateur. À la fin du cours, un exercice nous est demandé :

“ Vous refaites un test utilisateur, dans les règles de l’art avec le site du kikk.” Scénario :Vous souhaitez vous rendre au KIKK — festival web — voir la conférence de Base Design et enchainer avec une autre conférence. Vous devez organiser votre journée et trouver les renseignements nécessaires, où se rendre, à quelle heure, à quel prix. ”

— Mr.Marchal
Capture d'écran du site du KIKK Festival

Le but est qu’on puisse déjà cerner les différents problèmes du site et ainsi les noter sur une feuille en papier. La deuxième étape est de faire passer ce même test à une personne de notre entourage en gardant le même scénario. Ce test est filmé pour nous aider à relever les différents problèmes sur lesquelles l’utilisateur se heurte. Pour finir, nous devons réaliser un Google Doc avec notre analyse du test ainsi qu’un lien vers la vidéo. D’ailleurs si vous le désirez vous retrouver mon travail sur ce lien: Test utilisateur
Cette situation de départ nous sera utile pour la suite du Workshop, notre professeur nous explique que ça sera sur base des problèmes rencontrés lors de notre test utilisateur qu’on va devoir travailler ces prochaines semaines.

Le workshop démarre

Nous voilà tous réunis dans la salle G1 comme G2, munis de nos tests Utilisateurs et de notre bonne humeur. Pour commencer, il nous est demandé de nous mettre par groupes de 4, je choisis sans hésitation de me mettre avec Aude Collin Melih Selamet et Christopher Grauwen; ces derniers sont de bons amis et je sais que leur manière de travailler convient parfaitement à la mienne, on arrive à se décider assez rapidement sans se prendre la tête et on est une équipe assez soudée !

Image de Melih, Aude, Christopher et Nathan

C’est donc en groupe qu’on a pour mission de réaliser une mise en commun ainsi qu’un compte rendu en 5 phrases des différents problèmes rencontrés lors nos tests utilisateur. On s'est vite rendu compte que nous avions à peu près tous une liste de problèmes semblables, ca n'a donc pas été difficile pour nous de réaliser notre compte rendu.

L’étape d’après a été de se mettre par groupe de 8 et de travailler ensemble pour mettre en commun des solutions qu’on pourrait apporter au site du KIKK. Les idées nous sont venues assez rapidement puisque nous avions déjà été faire un tour sur le site et avions déjà relevé quelques points à améliorer ! À la fin nous nous sommes retrouvé avec liste d’une vingtaine de points qui semblait important pour un bon site web. Ces différents points ont été résumés par notre groupe en une phrase:

“ 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, …). ”

— Résumé du groupe
Capture d'écran du résumé de notre groupe

Un peu avant midi, on s’est remis en groupe de quatre afin de travailler sur un nouveau point qui nous sera important pour la suite du workshop; on s’est concerté pour réaliser une liste de tâches que l'utilisateur serait amené à faire lorsqu’il tombe sur le site web du KIKK. Ainsi au bout de 10 minutes, nous nous sommes retrouvés avec une liste assez conséquente, nous avons décidé d’en garder une vingtaine. Ensuite à l’aide de nos jolies gommettes, chaque personne du groupe a dû choisir 3 tâches qui lui semblaient intéressantes. Pour finir les trois tâches qui possédaient le plus de gommettes ont été gardées et chaque personne du groupe devait en choisir une pour travailler dessus durant les prochains jours.

Taches utilisateurs

Ainsi les 3 choix principaux se sont porté sur le fait de parcourir le programme, acheter un ticket et accéder facilement aux conférences et trouver facilement les informations les concernant. Pour ma part j’ai choisi de travailler sur l’accès aux conférences, ce point me tenait fort à coeur puisque pour moi, un site web évenementiel se doit d'avoir une présentation des programmes/ conférences claire pour l'utilisateur.

Pour finir cette journée, nous avons trouvé des valeurs et des principes pour le Voice and Tones de notre fonctionnalité. Je dois avouer qu’il m’a fallu un peu de temps avant de comprendre ce que tout ça voulait signifier; mais grace à Melih et à Aude j'ai pu saisir plus facilement leur sens et avancer sur la suite du projet.
En partant donc de l'idée que le site se veut multiculturel et ouvert au partage, nous avons relevé une quinzaine de points. Encore une fois nous nous sommes mis d’accord sur ceux que nous allions garder avec nos gommettes !

Voice & Tones

Cette journée a été forte productive pour tout le groupe, nous avons déjà une bonne base pour la suite du workshop. Malgré le fait que j’ai été perdu en cours d’après-midi, j’ai eu la chance de compter sur les personnes de mon groupe pour m’aider et me remettre sur les “rails” pour pouvoir continuer sans aucun souci !

Un problème, des solutions

Ce qui suit a été plus difficile que ce soit pour moi comme pour ceux de mon groupe. En effet, ce jour-là nous nous sommes attaqués aux “User Journey”, une sorte de “scénario” écrit comportant plusieurs contextes ( contexte spatial, physique, économique, social, …) et qui est censé représenter le parcours d’un utilisateur lambda, d’un milieu social lambda et qui souhaiterait se rendre sur la page du KIKK.
Cependant, nous sommes partis du mauvais pied, en effet nous n’avions pas compris comment devait ressembler un test utilisateur, et même si, les idées principales étaient correctes, le reste tel que la mise en forme ne l’était absolument pas … La journée s’est donc terminée sur un gros échec qu’on a dû corriger au plus vite le lendemain pour ne pas perdre trop de temps pour la suite.

User Journey

Durant la suite du Workshop, on a consacré une partie de notre matinée à corriger nos “user Journey” tous ensemble, de cette manière on pouvait avancer plus rapidement et gagner un maximum de temps pour la suite de la journée.
Il a fallu revoir en groupe la manière dont nous allions présenter nos éléments dans chacun de nos user journey. Ce qui nous faisait défaut a été le fait d'avoir créé des scénarios trop courts, alors qu'il est préférable de détailler un maximum chaque étape, présenter les inconvénients et les avantages de ces étapes.

Pendant que nous corrigions nos erreurs un nouvel élève s’est rajouté dans notre groupe, il s’appelle Mohamed et il est 2.5; nous lui avons alors expliqué le travail qui nous était demandé, sur quoi était basé le workshop et nous l’avons également aidé pour qu’il rattrape le retard qu’il avait vu qu’il n’était pas là les premiers jours !

L’après-midi, nous avons pu passer à la suite du travail: la création de nos prototypes papiers. La première étape a été de faire des recherches sur internet, j’ai été analyser plein de petits sites afin de réaliser une liste de points positifs et négatifs qui pouvaient m’aider lors de la création de ma fonctionnalité pour mes prototypes. Pour rappel je me suis attaqué à la section conférence et pouvoir permettre à l’utilisateur d'accéder plus facilement à ces dernières !

note des sites analysés

J’avais l’idée de rendre l'espace "conférences" plus accesible à l'utilisateur. Pour se faire, une solution m'étais venue assez rapidement: faire un système de filtres comme on peut trouver sur certains sites de ventes comme Krëfel permettant à l’utilisateur de trouver plus facilement ce qu’il recherche. De ce fait l'utilisateur introduit les valeurs qu'il désire dans chacun des différents filtres mis à sa disposition, et le navigateur lui affichera les différentes conférences qui répondent à ses choix.

capture d'écran du site de Krefel

C'est donc avec cette idée en tête que je me suis lancé à créer mon prototype papier. J'ai décidé de garder une interface similaire à celle du KIKK, la barre de menu, les tickets et la langue se retrouve donc à la même place. Pour ce qui est de l'interface de la section conférences, j'ai réfléchi à quelle barre de filtres serait la plus adaptée au site tout en gardant à l'esprit que le Voice & Tones de notre site se veut pratique et en même temps simple,j'ai donc décidé de rajouter ma barre de filtres juste au dessus des conférences; l'utilisateur n'est donc pas perdu, l'utilisateur n'est donc pas perdu, il sait facilement la retrouver, celle-ci ne prend pas trop de place sur la page et se mélange bien avec les éléments déjà existants sur la page.

Ensuite je me suis demandé si une barre de recherche ne serait pas au final plus adaptée. Ainsi l'utilisateur pourra directement trouver sur ce qu'il désire en une simple recherche dans la barre dédiée à cet effet. Pour trancher ce qui était le mieux j’ai décidé de faire un prototype papier avec juste une option de filtre dans la section “conférence” pour commencer.

Premier prototype papier

Une fois le prototype terminé j’ai été trouvé des personnes de notre option pour qu’ils puissent le tester, la première personne a été Melih, je lui avais donné comme scénario de trouver les informations concernant la conférence Base Design et son avis a été plus que favorable, il a su la trouver assez facilement grâce au système de filtres que j’avais créé ! La deuxième personne à qui j’ai fait tester mon prototype a relevé un souci majeur: l’absence “d'indicateur de filtre”. En effet, vu que mes filtres sont sous des onglets déroulants; l’utilisateur ne sait plus quels filtres ont été activés ! Pour pallier ce problème je suis allé visiter différents sites, celui qui a attiré mon attention est celui de Zalando:

Filtres Zalando

Leur manière de faire apparaître les filtres actifs est assez astucieuse, j’ai donc corrigé mon prototype papier en tenant compte de leur technique. De plus j’ai décidé de rajouter une barre de recherche ainsi l’utilisateur peut tapper le nom d’une conférence et tomber directement dessus sans devoir la chercher dans tout le lot.
Il ne me restait plus qu’à le faire tester; Aude a accepté de se prêter au jeu; je lui ai donné le même scénario que celui qu’on avait eu en début de Workshop c’est-à-dire :

“ Vous refaites un test utilisateur, dans les règles de l’art avec le site du kikk.” Scénario :Vous souhaitez vous rendre au KIKK — festival web — voir la conférence de Base Design et enchainer avec une autre conférence. Vous devez organiser votre journée et trouver les renseignements nécessaires, où se rendre, à quelle heure, à quel prix. ”

— Mr.Marchal
Prototype papier corrigé

À la fin du test je l’ai questionné pour avoir son avis à propos du prototype, elle n’a pas relevé de point négatif ! Au contraire, le fait d’avoir utilisé une barre de recherche combinée à un système de filtres lui a permis de vérifier facilement les conférences qui l'intéressaient pour qu’elle puisse organiser son planning facilement !

Conclusion finale

Ce workshop n’a pas été des plus simples pour ma part mais j’ai pu compter sur un groupe soudé prêt à m’aider dès que j’avais besoin d’aide. Le fait de devoir travailler à la fois seul sur son projet tout en demandant des conseils de ceux de notre groupe tout au long du workshop est un point que j'appréhendais mais qui au final m'a semblé excellent: elle m'a permis de voir par moi même ce qui n'allait pas, de trouver des solutions et de les appliquer et tout ca de manière autonome.
Mais j’y ai appris pas mal de choses ne serait-ce qu’en me basant sur les avis des testeurs tout au long du séminaire, leurs différentes remarques m'a permis de voir où se trouvait les failles, les corriger mais surtout d'apprendre de mes erreurs. j'ai aimé l'idée d'aller tester les prototypes des autres étudiants car ça nous a permis de nous corriger les uns et les autres mais également de nous donner une source d'inspirations que se soit en voyant ce que eux ont fait pour leur prototype ou que se soit en discutant des différentes solutions qu'ils pouvaient mettre en oeuvre pour corriger leur erreurs.