Rethinking UX : Facebook

Repenser l’expérience utilisateur de la barre de recherche sur mobile Commencer la lecture

Méthodologie

La démarche de travail

Le thème de cette année était Facebook ! L'objectif : repenser l'expérience utilisateur d'une fonctionnalité d'un des plus grands réseaux sociaux du web. Pour ce faire, nous avons formé des groupes de 6 personnes de manière à travailler en équipe sur un sujet commun. Le but étant bien sûr de proposer une autre vision de cette fonctionnalité.

Nous nous sommes donc consertés afin de se mettre d'accord sur la fonctionnalité que nous allions analyser. On a donc choisi la "Recherche d'amis sur Facebook". A partir de la, nous avons chacun réfléchit aux différents moyens d'ajouter quelqu'un, que ce soit par la barre de recherche classique, via les liens, les pages, les groupes...

Comprendre & assembler

Architecture de l'information

Pour bien visualiser toutes les possibilités d'ajouts d'amis et de follow sur Facebook, on a dressé une architecture de l'information. Alors qu'est ce que c'est une AI ? C'est une arborescence d'un site ou d'une application. Cela permet de regrouper les informations qui vont ensemble et de catégoriser les sous fonctionnalités (comme par exemple la barre de recherche Facebook).

Les post-it orange sont les sous-fonctionnalités de l'ajout d'amis et les post-it jaune sont toutes les voies par lesquelles on peut rajouter quelqu'un. Avec cette vue d'ensemble, on comprend que les possibilités sont grandes et que la quantité de liens est assez impressionant. Maintenant c'est à nous de clarifier tout cela et si possible, d'alléger les chemins entre nos différentes actions autant sur mobile que sur desktop.

ai-i

Penser pour l'utilisateur

personas-img personas2-img

Création de différents personas

On a ensuite crée des personas. Mais c'est quoi des personas justement ? Ce sont des faux profils de personnes crées afin de se mettre dans la peau d'un utilisateur quotidien. Cela permet de mieux comprendre comment certaines personnes vivent et agissent sur leur mobile et leur ordinateur, et ainsi permettre de corriger des erreurs avant la publication d'un site ou d'une application.

Les personas sont d'une grande utilitée dans la recherche d'expériences utilisateurs adéquates. Nous avons ainsi produit chacun 6 personas différents et de tout âge, profession, vie etc.. Nous les avons ensuite regroupé par tranche d'âge afin de comprendre comment ces groupes de personnes agissent.

Analyser les différentes situations

Les personas de type "primaire" sont les personnes âgées entre 10-25 ans. Ce sont eux qui sont les plus souvent connecté au réseau social parce qu'ils ont grandit avec internet. Il faut donc analyser leurs méthodes de vie pour comprendre de quelle manière ils abordent le réseau Facebook.

Les personas de type "secondaire" et "tertiaire" représente les personnes âgées entre 30-60 ans. Ils se situent ainsi car ils utilisent également Facebook mais avec un rythme beaucoup plus lent. Il convient également d'analyser leur comportement car eux aussi doivent être satisfait.

S'adapter aux écrans

Format desktop et mobile

Une fois les personas bien analysés, nous avons départagé toutes les sous fonctionnalités de l'ajout d'amis sur Facebook entre nous. Il y avait donc 3 sous fonctionnalités divisés en deux parties : Mobile et Desktop. La phase individuelle avait commencé.

Malgré le fait que la suite soit solo, cela ne veut pas dire que nous n'avons pas coopéré entre nous car il faut que chaque refonte de l'expérience soit en cohérence avec les autres. On ne va pas mélanger des styles guides différents ! (Guide des typographies et couleurs d'un projet).

group-img

Repenser l'expérience

Solutionner les problèmes

La grosse partie du projet était lancé ! J'avais comme partie : la barre de recherche sur mobile. Je devais donc repenser l'expérience de la recherche que j'avais actuellement sur mon Facebook. J'ai donc prit mon smartphone et j'ai analysé la barre de recherche en profondeur. Après mes analyses, je me suis dit que vu l'évolution des mobiles aujourd'hui, il est important de concevoir une interface facile d'accès et très intuitive. Une fois mes idées en place, je devait les dessiner pour rendre tout cela plus compréhensible.

Dessiner des wireframes

J'ai donc commencé à dessiner des wireframes. Les wireframes sont des brouillons papier ou numérique sur lesquels on dessine des prototypes d'un site ou d'une application ou quelconque projet. Le but étant bien évidemment de se simplifier la tâche pour rendre visible ce que l'on à l'esprit.

Les wireframes sont très utile également dans la recherche du UX (user experience). On ne peut rien faire sans eux et c'est le meilleur moyen pour faire du bon travail. Une fois le tout dessiné, j'ai commencé à faire des visuels pour ainsi pouvoir avoir un plan de vue parfait sur mes nouvelles expériences utilisateurs.

focus : Amélioration de la barre de recherche

01Le lancement de la recherche

L'information visuelle
phone-visual Avant
phone-visual2 Après

Pour le moment Facebook possède une barre de recherche des plus simple, pas dérangeante. On retrouve le bouton "annuler" au dessus afin d'intérompre sa recherche et un placeholder (texte dans la barre) avec la mention "Recherche". Il n'y a rien de plus, car on a pas besoin de rajouter des choses inutiles.

Néanmoins, j'ai trouvé une autre manière plus simple encore d'afficher les informations pour qu'elles soient bien nette. J'ai donc modifié le placeholder en un texte plus claire sur un fond blanc. J'ai également remplacé le bouton "annuler" par une croix car on comprend mieux une croix, surtout pour les personnes secondaires et tertiaires.

02 Chercher une personne

Améliorer les relations et la recherche
phone-visual Avant
phone-visual2 phone-visual2 Après

Pour le moment, Facebook propose un résultat de recherche simple avec une image, le nom, la profession, l'ajout d'amis et les amis en commun de la personne. On retrouve également le bouton "Afficher plus de résulats" en dessous. J'ai cherché différents moyens de pallier à certains problèmes comme le manque d'informations essentielles sur les résultats. J'ai donc retravaillé les boutons "d'ajout d'amis" et les boutons "follow" de manière à simplifier encore plus les relations.

J'ai rajouté des informations sur les personnes recherchées, comme le le lieu de résidence. On a également choisi le vert pour les amis de façon à ce que les utilisateurs reconnaissent bien la fonction essentielle. J'ai aussi placé un bouton "afficher les résulats avancé" en haut pour qu'il soit bien visible et qu'il redirige vers des résultats avancés. De cette manière, les utilisateurs ne seront pas perdu. C'est important que le tunnel de conversion soit bien claire.

03 Recherche approfondie

Gagner du temps sur les résultats
phone-visual Avant
phone-visual2 phone-visual2 Après

L'interface actuelle de Facebook pour plus de résultat est également simple. On retrouve les mêmes informations que dans l'étape précédente à l'exception d'une sous navigation destiné à trier les résultats de recherche. Cela est effectivement très utile car cela permet de gagner du temps et de ne pas se perdre. J'ai décidé de nommer cette interface "résultats avancés" car c'est plus facile à comprendre que "plus de résultats". Ici on comprend que l'on va en avoir plus.

De cette manière, j'ai retravaillé les résultats pour mettre en place un slider avec des profils plus complets + l'option "ajouter" et "follow". Grâce à cela, les personnes navigant sur mobile auront plus facile à visualiser le profil recherché et ne devront pas forcément cliquer sur chaque profil des résultats pour vérifier que ce soit le bon. J'ai également rajouté une information sur le nombre de personnes trouvées, c'est important de savoir combien, car plusieurs personnes portent le même nom.

Mise en commun

Combiner nos expériences

On a donc tous proposé des redéfinitions de l'expérience sur les diverses sous-fonctionnalités. On a ensuite regroupé nos expériences de manière à adopter un style plus ou moins commun comme énnoncé plus haut. C'est en se concertant et en travaillant en groupe que l'on peut proposer de bonnes expériences.

J'ai également comparé mes visuels avec mon coéquipier en duo sur la barre de recherche afin d'avoir un modèle desktop et mobile qui corresponde. On a également regroupé nos expériences sur un site commun.

group
group

Nous avons donc crée un site regroupant toutes nos études de cas personelles afin de pouvoir regarder nos créations. On y retrouve également la présentation de notre groupe au complet. Tout les liens sont disponible plus bas sur cette page.

Envie de vivre l'expérience ?

Mon rethinking UX en live

Regarder sur Invision

Notre team

Les zizis en plastique (& funny)

  • member of team Sébastien
  • member of team Manon
  • member of team Ian
  • member of team Laurie
  • member of team Alice
  • member of team Thomas

The Rethinking UX

Conclusion

Ce travail à été très intéressant à réaliser autant en groupe que solo. J'ai beacoup cherché pour présenter une expérience utilisateur différente. Mon objectif était d'apporter une utilisation plus simple pour toutes les personnes utilisant un mobile. C'est important que tout soit accessible le plus rapidement possible sans réfléchir.