Bon à savoir!

Un rethinking UX consiste à changer son apparence visuelle et à modifier ses fonctionnalités. La rethinking va plus loin qu’un relooking qui concerne uniquement la partie visible d’un site Internet, elle améliore également l’utilisation.

Le rethinking permet de penser de nouveau à quelque chose, l’envisager sur d’autres bases.

Qu’apporte cette opération, et pour quelle raison faut-il repenser une fonctionnalité d’un site internet ?

La plupart des fonctions ont été conçues et construites dans un premier temps pour la version desktop et plus tard intégré à la version mobile.

image du groupe

Échanger, harmoniser l’expérience.

« Facebook sert avant tout à communiquer, se rencontrer, partager et se retrouver. »

La réalisation du travail de notre groupe, composé de Manon L., Thomas L., Alice S., Laurie B., Sébastien S. et Ian V, consistait à repenser une fonctionnalité Facebook, plus particulièrement dans notre cas, la fonction: ajouter un ami.

Parcourir pour mieux comprendre

Caractéristiques et fonctionnalité ont été épingler sous forme de post-it pour ensuite faire une architecture de l’information basée sur tout ce que nous pouvions faire sur Facebook.

En faisant le tri des plus grosses fonctionnalités, nous avons constaté qu’il y avait différent moyen d’ajouter un ami notamment par le biais d’un statut en survolant le nom de la personne qui a posté ce statut, par le profil ainsi que par l’icône d’invitation.

Le sujet était maintenant décidé et le concret s‘est peu à peu installé.

architecture de l'information

Les personas

C’est du proto-personas qui permet de créer des personnages fictifs qui ont pour but dans cet exercice de nous aider à définir les besoins de tout type d’utilisateurs.

Ensuite, nous sommes passés aux users stories. C’est un scénario qui présente chacun de nos personas dans un contexte pour savoir quelles sont les attentes et besoins que nous devons apporter pour chacune des situations.

Une fois toutes les histoires scénarisées sur papier, nous nous sommes concertés pour échanger et savoir ce que nos personas ont besoin pour accéder plus facilement à l’information.

personas sur papier

Conception en groupe

Comme cité plus haut, notre fonctionnalité principale est de retravailler la fonction qui permet d’ajouter un ami. Après ça, nous nous sommes divisés en 2 groupes pour établir un rapport entre le desktop et le mobile et 3 groupes sur les sous-fonctionnalités.

Quand on est sur le site, nous avons remarqué qu’ils y avaient différents moyens d’ajouter un ami notamment par le biais d’un statut en survolant le nom de la personne qui a posté ce statut, par le profil ainsi que par l'icône d'invitation et la barre de recherche

imac alice Manon Ian
iphone Laurie Thomas Sébastien
Wireframe papier

Analyse de l’interface existante

Ma démarche démarre par l’analyse de la barre de recherche. La difficulté principale qu’on a rencontrée est que Facebook est déjà une application très bien réussie. Voici l’interface actuelle utilisée.

Comme toute barre de recherche, Facebook à garder sa fonctionnalité principale étant la simple recherche pour ensuite accéder à plus d’information par chemin de conversion. C’est ce qui m’a donné envie à repenser cela.

Vu que nous avons plusieurs moyens différents d’ajouter un ami, je me suis dit qu’au lieu de parcourir un chemin pour accéder à cette fonctionnalité (ajouter un ami), pourquoi ne pas la simplifier et la mettre dans un endroit où quasi tout utilisateur qui utilise Facebook passe par là une dizaine de fois par jour puisse facilement ajouter la personne qu’il est en train de chercher.

gif facebook de base
image du groupe

Les modifications

Mon idée est de rendre cette barre de recherche plus intéractive dans le sens où il faudrait que les utilisateurs puissent faire plus avec plus de facilité.

J’ai voulu incorporer un bouton d’ajout et d’abonnement dans l’encadrer d’un résultat de recherche. Avec un effet hover sur une personne, on peut découvrir une information supplémentaire et la photo de profil un peu plus grande pour mieux la distinguer.

Distinguer les ressemblances

Après qu’on ait chacun fait une rapide révision des call to action, nous nous sommes basés sur le même design que propose actuellement Facebook dans ses couleurs et avons mis au point plusieurs visuels individuellement.La difficulté résidait dans la proposition de visuels tous différents. Ce qui nous a amenés à faire un compromis en choisissant les visuels les plus intéressants et avec plus d’affordance.

Voici les résultats obtenus après réflexion et discussion collective.

les resultats obtenus
prototype

Exprérience utilisateur

Après avoir trouvé la cohérence graphique, chacun de nous avons travaillé sur sa sous-fonctionnalité. Nous avons ensuite fait un test par la méthode du prototyping qui fait en sorte de simuler, par le biais de InVisionapp, une utilisation sur mobile de même que sur desktop. Un premier feedback à été effectué par les membres du groupe qui nous auras permis d’améliorer l’utilisation et la compréhension des défauts à rectifier.

Expérimentez mon prototype

Ce que j’ai retenu de ce workshop

En conclusion, nous avons mis l’importance sur le rethinking, tout en apportant des modifications mineures au design car cela pouvait affaiblir la notoriété de Facebook à travers les caractéristiques spécifiques des boutons. De plus, le thème du rethinking UX sur Facebook était un excellent défi pour des étudiants comme nous qui débutent dans le web. En effet, c’est un site qui, au niveau de la conception, a reçu des mérites des utilisateurs. Il est aujourd’hui important de nous surpasser à produire un travail qui nous permet de penser au delà de nos capacités.