Dans le cadre de nos études en Développement web à la Haute Ecole Albert Jacquart, nous avons participé à l’atelier « RUX ». Rethinking-UX qui consistait à repenser une fonctionnalité d’un site qui pourrait être améliorée. Nous avons eu le choix entre 5 sites : Medium, Pinterest, Twitter, UberEats et WhatsApp. Pour notre part, nous avons opté pour Pinterest.

Un groupe soudé

Nous étions quatre à travailler sur le projet Rethinking-Ux : Pablo Exposito Lopez, Kevin Trieu, Maxens Cornet et William Massin. Nous nous sommes concertés tout ou long du projet pour analyser en profondeur le site Pinterest et mettre en commun nos idées.

photo Pablo Exposito Lopez
Pablo
photo Kevin Trieu
Kevin
photo Maxens Cornet
Maxence
photo William Massin
William
compo pinterest illu

Vous ne connaissez pas Pinterest ? Il s’agit d’un site qui mélange les idées de réseau social et de partage d’images : celles que les utilisateurs publient sur le site (créations personnelles) ou des images trouvées sur le web. Il permet aux utilisateurs de créer leurs propres banques d’images classées par thèmes. Le site « épingle » (Pin) les intérêts (Interest) de l’utilisateur grâce aux recherches qu’il effectue sur son site et met ses informations à jour grâce à sa base de données gigantesque en suivant le fil de l’actualité.

icon smartphone illu

fonctionnalités principales

  • La recherche de sujet ciblé ;
  • Le choix des images à mettre en favori ;
  • La création de banques d’images personnelles.

Pinterest permet aussi

  • De s’abonner à des sujets bien précis, pour suivre une actualité pertinente ;
  • De recommander de nouveaux contenus susceptibles de plaire à l’utilisateur ;
  • D’envoyer des messages aux autres utilisateurs du site.
icon amelioration de groupe

Amélioration d'une fonctionnalité

Après en avoir discuté avec notre professeur, nous avons choisi de tous travailler sur la même fonctionnalité, celle qui nous paraissait la plus importante : il s’agit de la fonction « abonnement » qui pourrait être améliorée. Chacun abordera donc cette problématique de façon personnelle ce qui permettra, nous l’espérons, d’apporter des solutions plus diversifiées au problème qui nous est posé.

User Testing

Pour faire apparaître les difficultés que pouvait éprouver l’utilisateur vis-à-vis de cette fonctionnalité, j’ai effectué un test utilisateur avec une personne qui ne connaissait pas le site et qui avait comme objectif de s’abonner à une chaine. J’ai suivi le chemin qu’elle devait suivre dans la fonction « abonnement » et j’ai pris note de son ressenti général. J’ai pu mettre ainsi en évidence les failles de l’interface.

voir
photo user png

études comparatives

Après cette étape qui me paraissait indispensable, moi et mon groupe avons réalisé une étude comparative avec plusieurs sites qui proposaient une fonction similaire. Cela m’a permis de compléter mon analyse sur les défaillances de cette fonctionnalité.

voir
icon liste svg

Analyse individuelle

C’est ici que je vais commencer à analyser de façon individuelle la fonctionnalité choisie et essayer de trouver des solutions pour améliorer l’expérience utilisateur.

Problèmes relevés

Dans le User Testing, j’ai remarqué que quand la personne était arrivée sur la page « abonnements », la page était assez difficile à décrypter. En effet, toutes les icônes concernant ses abonnements étaient pratiquement illisibles. Elles étaient collées les unes aux autres, leur taille était beaucoup trop petite comparé au reste des éléments de la page.

screen pinter png

De plus, quand on n’a pas d’abonnement, il y a deux boutons (…) qui semblent vouloir dire la même chose et qui peuvent laisser l’utilisateur dans l’expectative.

screen pinter png

En outre, une fois l’utilisateur abonné à une ou plusieurs chaînes, il peut y accéder et les modifier à sa guise. Le problème est qu’il ne peut pas y accéder en cliquant sur les icônes affichées à l'écran: il est redirigé vers une autre page, ce qui n'est pas très intuitif et assez redondant je dois dire.

screen pinter png
icone atome illu svg

Pistes de réflexion

  • Rendre plus de visibilité aux icônes et leur donner plus d’importance ;
  • Rendre accessible les abonnements sans devoir passer par une fenêtre ;
  • Supprimer ou remplacer le bouton «ajouter» qui se trouve déjà dans la fenêtre de modification d’abonnement.
 icone idee illu svg

La solution

Je pensais améliorer l’interface de cette fonction en la rendant plus intuitive pour l’utilisateur. Plus besoin de passer par une fenêtre mal agencée pour accéder à ses abonnement. Les icônes affichées en haut de la page deviendraient interactives, c'est à dire qu'on pourrait directement accéder à la chaîne voulue en cliquant simplement sur l'icône lui correspondant. On aurait également la possibilité de se désabonner en cliquant sur une petite croix apparaissant au survol de l'icône.

screen solution png

Une interface améliorée

Les icônes dans le haut de la page seraient agrandies pour une meilleure lisibilité et ergonomie. Elles seraient disposées horizontalement sous forme de Slide Bar, c'est à dire que l'utilisateur pourrait faire défiler les icônes de gauche à droite et inversement pour accèder aux chaines qu'il souhaite consulter. Il y aurait encore la possibilité de modifier sa page d'abonnement avec le bouton traditionnel de modification qui fera apparaître une fenêtre. Le bouton «ajouter» serait remplacemer par un bouton «home» permettant d'accèder au fil d'actualité des ses abonnements.

screen solution png

Pour finir

Ces workshops m’ont paru un peu complexe au départ mais je n’y étais pas encore suffisamment habitués et je ne savais pas sur quoi cela allait déboucher. C’est en avançant dans cette démarche que je me suis rendu compte que cette approche pouvait avoir des cotés positifs. Elle permettait, d’échanger des points de vue, d’approfondir des matières et d’apprendre à travailler en équipe, chose qui me paraît essentielle pour un futur job dans une véritable entreprise.