Rethinking UX

Le workshop

Tout as commencé le 3 novembre avec un cours de “human centered design“ , le cours de Monsieur Marchal, il nous présente son cours et le concept de test utilisateur qui consiste à faire tester un site, une app, etc… à des utilisateurs. Et c’est à partir de ça que nous allons démarrer notre dernier workshop de l’année : RUX.

Notre objectif est simple, repenser, transformer, améliorer, une fonctionnalité d’une interface en groupe de 4, dans notre cas nous prenons le site du KIKK festival de Namur, grâce à nos tests utilisateurs nous détectons les différents soucis liés au site original et tenterons de les résoudre ensemble dans un premier temps puis séparément. 

Notre groupe

C’est parti mon KIKK…iii :

Nous voilà lancé dans l’aventure, nous nous organisons en groupe pour discuter des différents besoins utilisateurs sur le site. On se pose beaucoup de questions, qu’est ce que nous ferions si on cherche une conférence ? si on veut acheter des billets ? si on veut retrouver le planning ? On doit faire marcher notre imagination. 

Le besoin utilisateur

Le site du KIKK nous proposent beaucoup d’activité, entre conférences, expos et workshops nous avons l’embarras du choix et sommes rapidement perdu. Avec toutes ces questions dans la tête, nous parvenons à identifier les différentes  “Top tasks“ , les tâches les plus importantes qu’un utilisateur effectue sur le site et choisissons ensemble les 3 tâches les plus importantes pour pourvoir en retravaillé une chacun individuellement. Nous avons choisis :  « rechercher une conférence, acheter ses billets et consulter les horaires » . 

notes multiples tasks et gommettes

La fine équipe !

À moi de jouer !

J’ai décidé de travailler sur la tâche de la recherche, forcément la première fonctionnalité qui me vient à l’esprit est la fameuse barre de recherche qui nous manque tellement dans le site original du KIKK même si d’autres alternatives en termes de fonctionnalités sont possibles, ici je vais principalement me concentrer là-dessus, j’ai décidé de choisir la recherche plutôt que les autres  “Top tasks“ , car lors de mon test utilisateur sur le site original du KIKK la première chose qui m’as choqué moi et mon testeur c’est le surplus d’informations et la désorganisation dans laquelle on retrouve la liste des conférences. 

Comment designer la sainte barre de recherche ?

Illu sainte barre de recherche

En faisant mes recherches et en comparant avec ce que les autres sites plus ou moins populaires ont à proposer je finis par me créer une petite liste de bonnes et mauvaises utilisations pour moi plus tard. 

Moi en plein travail

Simple ? Non, non.

Une barre pour écrire et un bouton pour lancer la recherche semble simple à designer, mais elle devient rapidement indispensable lorsque le site est complexe et/ou proposent beaucoup d’informations et fait donc partie intégrante de l'esthétique de l’interface, lorsqu’un utilisateur se retrouve face à cet afflux d’informations il est de notre devoir de designer de lui donner un moyen d’atteindre son objectif rapidement et facilement et c’est là qu’intervient la barre de recherche. 

Par où commencer ? Sur mobile ? Sur desktop ?

Avant tout il est important de savoir tout ce qui va avec notre fameuse recherche. J’ai tout de suite pensé à un système de filtre pour rendre plus fluide la navigation sur la page, mais une question c’est directement posé à moi.

Plein de questions

Comment ne pas en faire trop ? On voit souvent des sites web où les filtres sont tellement nombreux qu’ils recouvrent toute la page, inutile d’après moi et spécialement dans le contexte d’un site de conférence voir même pas du tout ? On veut pouvoir acheter nos billets, nous renseigner sur tel ou tel conférence sans se prendre la tête. C’est encore plus important si l’on est sur mobile, l’utilisateur va pouvoir non seulement acheter ses billets ou simplement se renseigner sur les conférences, mais lorsqu’il en aura le plus besoin les renseignements seront à portée de main. 

Travail et recherche sur pc

Le temps des prototypes

Après une présentation de Mme. Wera et M. Marchal, nous pauvres mortels nous sommes élevés et avons commencé à dessiner nos prototypes papier, armé de nos crayons ciseaux et autres ustensiles nous voilà largué dans le monde du découpage/collage.

Lors de la création de mon prototype j’ai appliqué certaines des lois de la Gestalt, on peut facilement distinguer la loi de la similarité, proximité, symétrie et clotûre notamment au niveau des suggestions et des résultats, il est important de tenir compte de ces principes en designant. 

Prototypes papier

L'étape finale

Avant de nous pencher plus sur l’intégration sur notre page web, les tests de nos fameux prototypes. Tout le monde à plus ou moins fait tester ses prototypes aux différentes personnes de la classe ou extérieurs afin de construire des réflexions basées sur nos observations. Je n’ai malheureusement pas encore eu le temps de faire beaucoup de test, cependant j’ai néanmoins récolté quelques informations que je vais vous expliquer. 

Conclusion

Premièrement, j’étais parti sur une recherche sans aucun filtre à part une séparation entre les conférences et les conférenciers dans les résultats directement, mais il est clair que toute la partie activités annexes tels que les minis expos ou les workshops ne seraient donc pas trouvables ainsi, il faut donc trouver un compromis pour avoir un minimum de filtres tout en couvrant l'intégralité des activités que propose le site. J’ai donc choisi de rajouter des extensions qui font offices de filtres directement pour séparer chaque type d’activité. 

Prototype de barre recherche avec filtres

D’un autre côté, ces filtres ne seraient pas adapté à un usage mobile et c’est là que la deuxième solution intervient, dans le cas du mobile il serait plus judicieux d’avoir des filtres sous forme de listes, mais aussi que celles-ci occupent tout l’espace du téléphone pour simplifier l’écran tout en affichant tous les filtres nécessaires à l’utilisateur. 

Prototype de barre recherche mobile

Détails mineurs gros impact

Point final

La recherche est une activité fondamentale et un élément essentiel lors de la création d’une application ou d’un site riche en contenu. Même des modifications mineures, telles qu'un système d’auto-suggestion ou l'indication des informations à insérer dans le champ de recherche, peuvent considérablement augmenter la praticité de la recherche, ainsi que l'expérience utilisateur dans sa globalité.