darkmode

rethinking ux.

un projet scolaire — 2022

Le projet.

Rethinking UX — le troisième projet de l’année scolaire à la HEAJ. Commençant par un travail de groupe, puis individuel à certains aspects, RUX demande des capacités d’analyse, d’esprit critique et est essentiel dans l’apprentissage des bases de l’UX/UI. Cette année, nous avons dû analyser le site du BAM, chercher ce qui ne fonctionne pas, et proposer des solutions.

Les groupes.

Nous avons commencé par nous mettre en plusieurs groupes de 3 ou 4. N’hésitez donc pas à visiter le case study de mes collègues, Sarah Pestiaux, Joao-Gabriel De Souza Meyer, et Jean De Roy

photo de prototypes

Video

Définir le BAM

Le BAM ou “Beaux Arts Mons”, est un espace culturel qui propose des expositions tout au long de l’année. Il se veut être une œuvre d’art et d’architecture en lui-même. Outre les diverses expositions, le BAM peut aussi accueillir des colloques, séminaires et réceptions

inventaire de contenu

Inventaire de contenu

Une des premières choses à faire avant tout est de faire l’inventaire de contenu. Il suffit de repérer chaque élément de la page et les identifier: la nav, le titre principal, les sous-titres, les paragraphes, les images…

On identifie également le contenu, ce que disent les paragraphes, à quoi servent les images…

Les tests utilisateur.

Nous avons dû chacun faire passer un test utilisateur - la personne devait faire la démarche nécéssaire pour acheter un ticket. Au niveau de mon test, l’utilisateur n’a pas eu de problème, mais ce n’a pas toujours été le cas.

lire l'article médium

Conclusion des tests utilisateur.

Tout d’abord, le site est très mal organisé, les éléments ne sont pas à la bonne place: il y a un non-respect des lois de la Gestalt, les éléments qui devraient être dans le footer se trouvent dans le header et vice-versa. Ensuite, la hiérarchie est inexistante; il n’y a pas de rythme dans la mise en page. De plus, les principes de l’affordance ne sont pas respectés: le site n’est pas intuitif, il y a une répétition des éléments et le site n’est pas responsive.

une photo d'un ordinateur avec des résultats de tests
tâches et fonctionnalités

Tâches et fonctionnalités

Après avoir fait passer ce teste en en avoir tiré les conclusions, nous avons dû, par groupe, choisir une fonctionnalité sur laquelle nous allions chacun travailler afin de l’améliorer/l’aouter.

Avec mon groupe, nous avons choisi de travailler sur le service client. Ce service est nécessaire pour accompagner l’achat pour permettre au client d’avoir un filet de sécurité lors de son expérience sur le site. Les fonctionnalités sont:

  • Formulaire
  • Barre de recherchse
  • Contact (téléphone, mail)
  • Chatbot
  • FAQ

Guides d'entretien

Par groupe, nous avons dû mettre en place un guide d’entretien, qui consistait à préparer des questions à poser à un ou des potentiels utilisateurs afin de récolter les réponses, les analyser, et améliorer le design de nos fonctionnalités.

vers le guide d'entretien
Guide d'entretien
Résumé des interviews

Résumé des interviews

Après avoir interviewé quelques personnes, nous avons remarqué plusieurs éléments récurrents. L’utilisateur exige d’un service client qu’il soit rapide, efficace et, dans le cas d’un service par téléphone, aimable. Un seul mot d’ordre : réactivité. Il doit se sentir écouté et ne pas avoir l’impression de perdre son temps inutilement. Un bon service client doit prendre le temps d’écouter le problème, proposer une solution adéquate et donner des informations claires. Il est également important que l’utilisateur ait plusieurs moyens de contact car chacun est différent et est plus ou moins à l’aise avec le contact humain.

Création d’un audit personnel

L’étape suivante consiste à créer un audit personnel. Le but était de chercher six sites différents qui présentent les mêmes ou le même genre de fonctionnalités que celles sur laquelle je travaille. J’ai choisi d’analyser les sites suivants:

1 / 6

Fnac

Avantages

  • La réponse aux questions de la FAQ apparaissent sur la même page que les questions; pas besoin de recharger la page = réponses rapides

Désavantages

  • L’onglet service client n’est pas mis en évidence, l’user peut vite passer à côté.
2 / 6

Coolblue

Avantages

  • Le service client est mis en avant et facile à trouver
  • La FAQ est claire et permet au client de chercher les réponses à ses questions.

Désavantages

  • Le service est-il peut-être trop mis en avant, ce qui rend le tout un peu trop encombrant ?
3 / 6

Amazon

Avantages

  • La FAQ est claire et permet au client de chercher les réponses à ses questions.

Désavantages

  • Pas de barre de recherche.
4 / 6

kmska

Avantages

  • Il y a une FAQ claire et précise
  • Il y a possibilité d’envoyer un formulaire, ce qui peut être utile au cas où le client n’a pas trouvé de réponse dans la FAQ

Désavantages

  • Pas de barre de recherche.
5 / 6

Proximus

Avantages

  • L’onglet service client est disponible sur la navigation principale, il est mis en avant mais pas trop
  • Il y a une section qui propose au client de cliquer sur des liens utiles qui servent de FAQ
  • Il y a une barre de recherche, le client peut aller directement à la section qui l’intéresse

Désavantages

  • Dans l’onglet recherche, le client doit d’abord choisir une catégorie puis taper sa question. Il voudrait peut-être accéder juste une catégorie en particulier, ou ne sait pas mettre de catégorie sur sa question.
6 / 6

Spotify

Avantages

  • L’onglet service client est disponible sur la navigation principale, il est mis en avant mais pas trop
  • Il y a une section qui propose au client de cliquer sur des liens utiles qui servent de FAQ
  • Il y a une barre de recherche, le client peut aller directement à la section qui l’intéresse
  • Option permettant de contacter des membres de la communauté dans un forum complet

Désavantages

  • pour contacter la communauté, redirection vers site externe.

Les croquis

Nous avons dû ensuite réaliser des croquis des fonctionnalités choisies en s’inspirant de ce qu’on avait analysé lors de l’audit. Il fallait en faire un pour chaque fonctionnalité, donc pour moi, trois: un pour le chatbot, un pour la FAQ et un pour un formulaire.

croquis

Les User Journeys

Vient alors l’étape de l’user journey. Il fallait qu’on se mette à la place de l’utilisateur, qu’on invente une situation de départ, une raison pour laquelle il accèdera au site, un problème qu’il y rencontrerait, la solution que la fonctionnalité en question apporterait, et ses ressentis au long de l’expérience. Ceci en trois fois, avec trois personnes imaginaires différentes.

Les prototypes papier

La dernière étape avant de passer aux prototypes définitifs. Il fallait noter, dessiner, découper, créer de sorte à ce que nous puissions faire tester nos prototypes en version papier. Une fois testés, nous les corrigeons, les améliorons, et passons alors à la version définitive.