rethinking ux

ajout d'ami

Image rethinking UX

Étude de cas réalisée par Manon Lemmens

projet

Notre but

Le but de ce workshop « Rethinking UX » est d’analyser et améliorer la fonctionnalité « ajout d’ami » d’un service nommé Facebook.

réalisation Tache de peinture Tache de peinture

Qui, quoi, où, comment?

  • 6 personnes.
  • Elèves à la Haute Ecole Albert Jacquard.
  • Prêts à relever des défis.
  • Ensemble pour un workshop.

C’est de là qu’est né «Les zizis en plastique (et Funny)», notre groupe constitué d’Alice Simon, Laurie Bartumville, Ian Vu, Sébastien Seghers, Thomas Lambert et moi-même.

gif

01 inventaire

Un inventaire? A quoi ça sert?

Un inventaire sert à comprendre l'architecture du site, tout ses onglets, toutes les "parties" du site en lui-même. Il y en a des centaines sur certains!

Et c'est ce que nous avons réalisés: un inventaire de l’Architecture de l’Information de facebook. Ce qui nous a aidés à faire le tour des fonctionnalités et sous-fonctionnalités de celui-ci (voir point 2), pour ainsi comprendre de quoi ce site est composé et ainsi mettre tout « à plat » en inscrivant ces fonctionnalités sur des post-it alignés et rangés.

Image de post-it Image de post-it

02

ajout d'ami

Vous n’avez pas assez d’amis et cherchez à en ajouter encore plus?

Vous tombez bien, nous avons choisi la fonctionnalité « ajout d’ami » afin de l’analyser en profondeur.

Il existe donc, d'après nos recherches, plusieurs manières d’ajouter des amis sur facebook:

  • - Via le fil d’actualités,
  • - via un groupe (exemple ci-dessous),
  • - via un profil,
  • - via les amis de nos amis. (#stalking)

Ensuite, nous avons cherché les avantages et inconvénients de plusieurs autres plateformes similaires (mobile ou desktop) à Facebook (comme Snapchat ou Instagram,..), ce qui était mieux ou moins bien en rapport à notre fonctionnalité choisie (très utile pour voir la concurrence!).

Consultez notre analyse complète en cliquant ici!

Tache de peinture

03

identité

Nous avons aussi imaginé 3 personas chacun (représentant des identités de personne) pour en avoir un nombre minimum de différents.

Mais pourquoi?

Nous les avons mis en commun et écrit des histoires pour chacunes d’elles pour savoir quels étaient leurs besoins et attentes vis-à-vis de nos fonctionnalités. Ce qui nous a aidé à identifier les problèmes par rapport à elles. Par exemple, la catégorie « amis d’enfance » concerne spécialement les adultes qui cherchent à retrouver des amis avec qui ils étaient à l’école.

Image aubergines Image aubergines
Image wireframes

J'ai donc choisi la sous-fonctionnalité « retrouver des amis » avec Thomas Lambert (la couille droite). Thomas pour la version mobile et moi-même pour la version desktop; analyser son design, son affordance,..

Nous avons alors imaginé à quoi nos sous-fonctionnalités pourraient ressembler avec les améliorations apportées.

04

wireframes

Nous avons ensuite un peu plus travaillés seuls, chacun de notre coté. Nous avions tous notre sous-fonctionnalité à développer et à tester.

Nous avons surtout réalisés des prototypes InVision pour faire des user testing et voir si l’affordance de nos boutons améliorés était meilleure. Thomas et moi avons mis en commun la version mobile et desktop de nos sous-fonctionnalités pour qu’il y ait une concordance dans celles-ci.

Le but n’étant bien sur pas de redesigner notre sous-fonctionnalité mais de la repenser et l’améliorer dans son utilisation. Et cela a fonctionné, les testeurs ont immédiatement trouver le bouton « retrouver des amis » qui posait auparavant problème. (Résultat ci-dessous)

Tache de peinture
résultat Tache de peinture Tache de peinture Tache de peinture

Le résultat

05

retrouver des amis

Après un petit sondage, notre problème était que le bouton « retrouver des amis » n’était pas assez visible et que la plupart des usagers de Facebook ne savaient même pas qu’il existait. Il se trouve dans l’onglet « invitation » en petit, à coté de « paramètres ». (Connu uniquement par les stalkeurs niveau pro!)

solution

La solution première est donc d’agrandir le bouton et de changer son design en apportant un logo. Le bouton reste à la même place, dans le même onglet, mais est beaucoup plus visible tout en restant dans le design de facebook.

Avant/après

bouton retrouver des amis bouton retrouver des amis

06

position

Une fois ayant cliqué sur ce bouton, nous arrivions sur une page de recherches qui n’était pas compréhensible. La partie « retrouver des amis » ne se remarque même pas car elle se trouve en petit sur le coté droit de l’écran, là où facebook propose le plus souvent des pubs. Nous effaçons donc cette partie de l'écran sans même le vouloir.

Page retrouver des amis

solution

Pour finir, nous tombons sur une page de recherches plus affordante.

Bouton amélioré

La partie « retrouver des amis » a été changée de place. Au lieu d’être en petit sur la droite, là où personne ne regarde, elle est en pleine page en grand.

Le formulaire reste le même et une sélection se fait sur la droite en fonction de ce qu’on coche dans ce même formulaire et ce qu’on y inscrit. Ensuite, le bouton «supprimer» à été enlevé car le but de ma recherche est de retrouver des amis, pas de les supprimer.

Vous pouvez donc ajouter des amis avec encore plus de facilité! (Merci qui? Merci les zizis en plastique et Funny!)

Voici un rapide résumé de ce workshop, en images:

Conclusion

Ce travail était un énorme défi depuis le début. Repenser une fonctionnalité de Facebook n'était vraiment pas une tâche facile. Repenser quelque chose qui est analysé chaque jour par des professionnels, on ne pensait pas pouvoir en être capable. Penser à améliorer sans changer le but pour autant, ni changer le design,.. mais nous l'avons fait.

Consultez également les études de cas des autres membres du groupe et la page des zizis en plastique (et Funny):

Ian

Ian Vu

Étude de cas
Laurie

Laurie Bartumville

Étude de cas
Alice

Alice Simon

Étude de cas
Photo de groupe

Les zizis en plastique (& Funny)

Étude de cas
Thomas

Thomas Lambert

Étude de cas
Sébastien

Sébastien Seghers

Étude de cas