Rethinking UX

L'ajout d'amis sur Facebook

Par Alice Simon

Une rencontre, des retrouvailles

« Rethinking UX » un workshop qui a pour but de revoir une des fonctionnalités de Facebook. Quelle fonctionnalité ? 
L’ajout d’amis, tout simplement.

Nous avons formé la team des « Zizis en plastique (& funny) » avec Laurie, Ian, Manon, Thomas, Sébastien et moi-même. On se connaissait déjà tous étant donné que l’année passée nous étions dans la même classe, sauf Sébastien qui ne connaissait que Ian.

L’inventaire de l’AI et les Post-it : une étape importante

Travailler avec des post-it c’est pas super facile, surtout quand ils se décollent, mais pour l’inventaire de l’AI nous avons du faire avec.

Pour cet inventaire, nous devions lister toutes les fonctionnalités de Facebook et les trier avec leurs sous-fonctionnalités. C’est une étape assez fun à faire surtout en groupe. Quand quelqu’un trouvait une fonctionnalité en plus, on le félicitait tous, comme s’il avait réussi quelque chose de dingue, par exemple Trump qui est devenu président.

image de l'inventaire image de l'inventaire

Trouve-moi et ajoute-moi sur Facebook !

Sur Facebook il y a tellement de fonctionnalités importantes que nous utilisons chaque jour comme le chat, le statut, etc.
 Mais toutes ces fonctionnalités ont besoin de quelque chose pour fonctionner et cette chose, au final, est un besoin pour tout être humain normalement constitué… Les amis (petit moment émotion).

Sans ami sur Facebook, ton fil d’actualité ne change pas. Tu ne reçois pas de message gentil le matin en te réveillant, pas d’image drôle sur la coupe de cheveux de Trump, rien. Ton fil d’actualité est vide. C’est donc tout naturellement qu’on a choisi de travailler sur l’ajout d’amis. Pour bien analyser notre fonctionnalité nous avons pris plusieurs screenshots des différents moyens d’ajouter un ami et écrit pour chaque screenschot leurs points positifs et négatifs.

Et chez les autres y a quoi ?

Après le choix de notre fonctionnalité, nous devions piquer les idées des autres applications pour pouvoir faire un truc encore meilleur.

Non je rigole tout ça est bien évidemment faux, enfin la majeure partie en tout cas. Mais, par contre, on devait bien aller voir sur d’autres sites/applications ce qu’ils proposaient. Voir ce qu’il y avait de cool chez eux et de moins cool. Pour ne pas faire les mêmes erreurs. Évidemment on devait faire la part des choses entre plagier et s’inspirer. Nous avons réalisé cette étape sur une feuille de calcul. Vous pouvez y accéder via le petit bouton juste en dessous.

Notre tableau comparatif

Mais les utilisateurs ils ont besoin de quoi ?

Pour savoir quel utilisateur utilise Facebook et pourquoi il l’utilise, il faut créer des aubergines... Euh des « personas » plutôt. Ici notre mission était de créer 3 personas individuellement, décrire sa biographie, ses besoins et objectifs et son comportement.
Par exemple, Britney Sport était quelqu’un de très timide qui se rend sur Facebook pour rencontrer des personnes.

A l’issue de notre recherche, nous avions 18 personas. Nous devions alors les comparer, pour voir s’ils avaient des similitudes dans leurs comportements, leurs utilisations, etc. Directement nous avions su faire différents profils ou tas ou groupes, les personas primaires et secondaires.

personasecondaire

Primaires

  • Les adolescents qui recherchent des amis et se faire connaitre sur les réseaux sociaux.
  • les personnes qui ne sortent pas mais qui sont sur Facebook.
  • Les personnes qui recherchent les amis d’enfance.
personaprimaire

Secondaire

  • Les personnes renfermées sur elles mêmes et seules.
  • Ceux qui sont là pour le travail, pour faire connaître leur entreprise.
  • Les gens qui vont sur Facebook régulièrement mais qui ajoutent seulement ceux qu'ils connaissent.

T’es plutôt mobile ou desktop ?

changement icon

Le changement c’est maintenant

Pour savoir quelle idée nous devions prendre, on nous a demandé de diviser une feuille en 8 parties et de dessiner des écrans mobiles ou desktop de ce qu’on allait changer dans notre fonctionnalité. Ce fut plus une étape pour expliquer aux autres nos différentes idées pour améliorer les différentes fonctionnalités que l’on avaient trouvé ensemble.

Quand c’était terminé, nous avions fait un tour de parole pour parler de nos idées, nous étions respectueux avec chacun, on ne coupait pas la parole parce qu’on savait que sinon ça allait être le bordel et plus personne n’allait s’écouter. Ce fut après le moment de se dire « ok qui fait quoi tu fais mobile et moi desktop ? »

image de l'inventaire image de l'inventaire icone

A chacun sa sous-fonctionnalité

Nous devions donc diviser le groupe de 6 en sous-groupes de 2. Chaque groupe de 2 devait travailler sur une sous-fonctionnalité d’ajout d’amis. Et chaque personne du sous-groupe devait choisir mobile ou desktop.

Sur ordinateur

Sur mobile

Ajout d’amis sur un profil. Alice Laurie
Ajouter un amis via la barre de recherche. Sébastien Ian
Retrouver des amis. Manon Thomas

Rethinking l’ajout d’ami sur le profil

Réaliser le design de nos différentes fonctionnalités était compliqué. Personnellement je remettais en doute le fait que je puisse mieux faire que les web designer de facebook.
Mais finalement, comme Madame Habran me l’avait dit, Facebook est en perpétuel changement. Et c’est vrai. Presque chaque mois Facebook trouve quelque chose de nouveau à repenser ou à ajouter à leurs fonctionnalités. Alors pourquoi ne trouverais-je pas une amélioration moi-même ?

icone

Deux boutons, mais pourquoi ?

Il y a deux boutons pour ajouter un ami, ce qui ne sert strictement à rien à part perturber l’utilisateur. C’est par là que j’ai commencé : je devais enlever un des boutons, mais lequel ?

Un des deux boutons se trouve sur la photo de couverture, ce qui pourrait gêner l’utilisateur. En effet, si un de ces boutons se trouve sur un élément important de sa photo, il ne sait strictement rien faire et pourait donc être frusté. Et nous ne voulons certainement pas ça.

Pas user friendly

icone

Affordance ou es-tu ?

poke icon
icon poke

« ... » et le poke ? Utile ou pas ?

Pour ce qui est du bouton « … », je ne sais même pas l’expliquer et c’est déjà ça le problème ! On ne sait même pas mettre un nom dessus, l’utilisateur ne sait pas ce qui se trouve dedans, ce n’est pas un bouton affordant. J’ai donc décidé de rendre les éléments visibles et de ne pas les regrouper dans un bouton.
 J’ai mis les éléments de sorte qu’ils soient très épurés et simple.

J’ai aussi supprimé le bouton « poke ». Pour moi ce bouton n’a aucune utilité pour l’utilisateur. J’ai l’impression que Facebook a voulu créer un « wizz » comme sur MSN sauf que c’est tombé à l’eau. Car personne ne l’utilise, il ne sert à rien, à part envoyer une notification « vous a envoyé un poke » oui et après ?

Ce qui a changé :

J’ai donc enlevé toutes les choses qui se trouvaient sur la photo de couverture et je les ai mises dans la bannière qui existait déjà en dessous de la photo de couverture. Dans cette bannière se trouvait déjà un bouton « Ajouter » ainsi que les amis en commun. Pour moi, cette bannière était donc consacrée à :

Travailler le prototyping individuellement tout en recevant du Feedback de notre groupe.

J’ai commencé mon prototyping rapidement à l’aide de croquis pour savoir où placer mes éléments et ce qui allait changer en appuyant sur ce bouton. Après le prototyping papier, je l’ai réalisé sur Sketch avec le bon visuel et je pouvais ainsi l’inclure dans Invision.

Prototyping sur invision

La réalisation de mon case study

Pour le design de mon case study, j’ai directement adopté le style épuré, car c’est ce que je voulais faire. Le case study c’est principalement de la lecture, si le design est trop chargé ça empiète sur le contenu.J’ai d’abord réalisé des wireframes papier pour savoir l’agencement de mes colonnes. Je me suis souvenue des différentes étapes que nous avions du faire pour Iolce et cela m’a beaucoup aidé pour la typographie et la grille.

J’ai donc commencé le design sur Sketch et c’est là que beaucoup d’idées me sont venues comme les sections de couleurs, pour encore plus différencier le changement de chapitre. 
 J’ai aussi pensé à quelques interactions pour rendre mon case study plus interactif pour l’utilisateur. Je n’avais pas envie que cela ressemble à un journal qu’on lit et puis c’est tout.

image de l'inventaire image de l'inventaire Case study

Je voulais aussi faire un rapprochement avec le thème facebook mais pas trop. Je n’avais pas non plus envie que ça soit du facebook copié-collé. Je voulais que seulement quelques éléments s’y rapportent. 
Pour celà j’ai seulement la même gamme de couleur de bleu.

C’est donc à chaque fois que j’introduisais un chapitre, qu’une autre idée me venait.
 J’ai bien évidemment changé plusieurs fois. C’est pour l’agencement de mon texte que j’ai eu le plus de mal. J’ai dû changer beaucoup de fois pour être satisfaite.

Pour la typographique,je voulais des typographies sans empâtements parce que je trouve que c’est plus agréable à lire et que cela convient plus au style de mon case study très épuré.

Bernina Sans

- Vous êtes en retard !
-Un magicien n’est jamais en retard, ni en avance d’ailleurs Frodon Sacquet. Il arrive précisément à l’heure prévue.

Mr Eaves Mod OT

- Vous êtes en retard !
- Un magicien n’est jamais en retard, ni en avance d’ailleurs Frodon Sacquet. Il arrive précisément à l’heure prévue.

Média

L'ambiance de travail en DWM

Incrustation de mon Rethinking sur After effect

Ce que j’ai retenu de ce workshop

image groupe

Revoir une fonctionnalité d’un site super connu est particulièrement stressant. J’ai douté de mes capacités à revoir quelque chose que je trouvais déjà très bien réalisé. Durant ce workshop, il y avait aussi le fameux minuteur. Je n’arrêtais pas de le regarder pour voir si j’étais bien dans les temps, mais en fin de compte ce minuteur m'a plutôt bien aidé. Je savais ce qu’il fallait faire et combien de temps il me restait avant l’étape suivante.

Merci à mon groupe les zizis en plastique (&funny) pour ce super workshop, pour vos encouragements et votre bonne humeur.

Voir notre page commune