Amélioration de l'User Onboarding de Pinterest

04.02.2016 Par Julie Huygens

Voici notre analyse de l'User Onboarding de Pinterest. Ma collègue France, et moi-même avons largement commenté son déroulement afin d'en souligné le bon et le mauvais. Le but final étant de le refondre pour en faire une première expérience idéale pour les nouveaux utilisateurs. Dans ce récit vous pourrez donc découvrir notre épopée à la découverte de Pinterest et les modifications que je propose pour améliorer leur onboarding.

L'analyse de l'User Onboarding de Pinterest.

Dès notre arrivée sur Pinterest, la page s'obscurcit et un pop up d'inscription apparaît. Frustration extrême, il nous est impossible de le fermer pour visualiser les images en arrière-plan, qui ont pourtant l'air bien jolies. On nous parle directement d'un gars qui à utilisé Pinterest. On sait pas qui, tout ce qu'on sait, c'est que nous on ne peut pas l'utiliser sans s'inscrire ! On essaye de nous faire rêver avec des "+ 50 milliards d'épingles à découvrir", mais on ne sait même pas vraiment ce que sont des épingles ?

écran d'inscription de Pinterest

A cette étape, nous ne pouvons donc que nous inscrire, ou nous connecter si nous possédons déjà un compte. L'inscription est clairement mise en évidence alors que la connection se fait toute timide en haut à droite. Ce qui est dommage car au vu de la popularité de Pinterest, la plupart des personnes allant sur le site ont certainement déjà un compte et ne souhaites donc que se connecter.

L'inscription à Pinterest.

Poursuivons donc notre découverte en nous inscrivant (nous n'avons pas franchement le choix sinon l'aventure s'arrête ici et en plus on nous promet que ça ne prend pas plus de 15 secondes). Sur le pop up, deux choix s'offrent à nous, se connecter via notre compte Facebook ou créer un compte grâce à notre adresse e-mail. C’est bien d’avoir le choix de se connecter avec son compte Facebook, pour les pressés qui n'ont pas peur de confier leur âme. Nous, nous choisissons de nous inscrire par e-mail et entrons donc nos précieuses données.

Formulaire d'inscription de Pinterest

En dessous, il nous est parfois (Oui oui, parfois) demandé si nous souhaitons personnaliser le processus d'inscription en fonction des informations issues des sites que nous avons visités. "En savoir plus" est écrit suite à ce texte, ce qui pourrait présager une possibilité...d'en savoir plus ? Mais ce n'est même pas un lien, rien ne se passe lorsque l'on clique dessus...Déception ! Décidément ça ne donne pas trop confiance tous ces pièges…

Un nouveau footer fait également son apparition. Pourquoi ? On ne sait pas vraiment, car lorsqu'on clique sur un mot clé, nous arrivons sur une nouvelle page mais le voyage est de courte durée car si on scroll un peu, il nous est à nouveau demandé de nous inscrire...Et rebelotte.

Apparition du pop-up d'inscription de Pinterest

Nous voilà donc de nouveau à notre inscription, sur le deuxième écran nous devons indiquer notre "nom complet" (Julie Anne Danielle Huygens pour moi donc, je suppose...) notre âge et notre sexe, un classique intrusif, à côté duquel un petit "i" communément utilisé pour signifier "informations" se trouve. Mais non malheureux, ici ce petit "i"est plein de secrets car il ne contient pas que des informations ! C'est également grâce à lui que vous pourrez enfin faire reconnaître votre non-binarité. Vous vous en seriez doutés ? Moi pas. D'ailleurs, brotips : seul le nom est obligatoire pour pouvoir continuer l'inscription...Mais chut, personne d'autre ne le sait !

Suite du formulaire d'inscription de Pinterest

Nous arrivons enfin à la finalisation de l'inscription (Qui met bien plus que 15 secondes entre nous...), on nous impose de choisir 5 thèmes avant de pouvoir continuer, thèmes influencés par nos "goûts" selon notre sexe... Bref on passera là dessus. Un champ de recherche permet de trouver des thèmes plus appropriés à nos goûts personnels (ce qui n'est pas mal vu que c'est obligatoire) MAIS, malheureusement cette recherche reste très, trop superficielle et il est difficile d'y trouver ce que l'on souhaite car les mots-clés ne sont pas liés par thèmes généraux. Par exemple, taper "arbre" ne donne rien, il faut taper "naturel" pour avoir de la verdure sur son écran. De plus, passer d'un joli fond du site flouté à un fond gris souris lors de la création de son espace personnel, c'est presque choquant.

Choix des cinq thèmes

Une fois nos thèmes sélectionnés, le site nous propose son nouveau bouton de navigateur. Il n’y a pas vraiment d’information quant à son utilité et un énorme call-to-action nous invite à l’installer. Si vous ne voulez pas l’installer, comme nous, il faut cliquer sur le tout petit “ignorer” gris en dessous, ce qui vous ouvrira d’abord un pop up pour vous demander si vous êtes bien sur de vouloir ignorer, et offre enfin quelques informations sur ce fameux bouton.

Installation du bouton Pinterest

Une fois que nous avons ignorer cette audacieuse demande, nous arrivons sur une page de finalisation qui nous affiche un récaputilatif des thèmes que nous avons sélectionnés. Une petite barre de chargement rouge dans le bas nous indique la progression de la création de notre espace personnel

Finalisation de l'inscription

Une fois la page personnelle crée, nous découvrons enfin l’arrière plan que nous avons pu apercevoir lors de la création de notre compte. Des jolies images en lien avec les thèmes que nous avons sélectionnés recouvre la page et un call-to-action en haut à gauche nous invite à chercher d’autres thèmes si ceux là ne nous plaisent pas. Ce call-to-action placé juste sous la barre de recherche est plutôt bien vu, et invite l’utilisateur à parcourir le site.

Page d'accueil personnelle

En haut à droite se trouve notre profil personnel, avec notre belle tête d’épingle qui est bien sur modifiable, et les notifications. En bas à droite, un “+” nous intrigue et s’avère être une nouvelle invitation à télécharger le bouton pour navigateur...Pas très affordant tout ça. Le “?” en dessous est un bouton d’aide qui propose ses recommandations en matière de paramétrage. Nous sommes maintenant inscrit, et c’est la fin de l’user onboarding.

Conclusion de cette expérience.

Au final c’était plutôt facile de nous inscrire sur Pinterest, mais vous constatez par vous même qu'il y a une multitude de petites choses à améliorer. Et c'est là que le « Nous » va se transformer en « Je », car je vais laisser ma collègue travailler sur ses propres améliorations et vous exposer les miennes.

Ma version de l'User Onboarding de Pinterest

Modification de la page d'accueil.

Sur la nouvelle page d'accueil, j'ai décidé de scinder les écrans de connexion et d'inscription en deux boutons disctincts. Ces boutons remplacent le pop up qui nous empêchait d'accéder au site.

Ecran d'accueil de Pinterest

Le contenu principal de Pinterest est composé d'images, seulement je trouve dommage qu'on ne nous offre pas la possibilité de les regarder librement sans être inscrit. Je trouve que l'utilisateur serait d'avantage mis en confiance s'il découvrait l'étendue des possibilités que Pinterest offre en terme d'inspiration avant d'être obligé de s'inscrire. Commencer une aventure par un remplissage de paperasse, ça ne me donne personnellement pas très envie et ça en fait fuir plus d'un.

Se connecter et s'inscrire.

Pour les utilisateurs non connectés qui veulent épingler une image, un pop up de connexion s'ouvre, avec la possibilité de s'inscrire également si ils ne possèdent pas de compte. Une fois que l'utilisateur clique sur "S'inscrire" il est redirigé vers l'écran d'inscription que vous pouvez voir plus bas.

Pop-up de demande de connexion ou d'inscription

J'ai totalement refondu l'écran de connexion qui n'avait pas du tout le même design que celui d'inscription. Je trouvais cela dommage d'avoir un beau design pour accueillir les nouveaux arrivants et de faire utiliser la porte de service à ses habitués.

Connexion à Pinterest

Sur l'écran d'inscription, une phrase un peu plus personnifiée et une explication plus claire ne sont pas non plus de refus pour que l'utilisateur ne soit pas trop perdu. Ces petites phrases permettent de faire comprendre à l'utilisateur l'utilité de s'inscrire pour profiter pleinement du site.

Inscription à Pinterest

Lorsque l'on poursuit l'inscription, il n'y a plus d'étrange second footer, seul le premier à été conservé car il détient des informations utiles pour un utilisateur curieux. Ensuite, j'ai reformuler les demandes pour qu'elles soient plus claires et j'ai précisé ce qui est obligatoire pour s'inscrire et ce qui ne l'est pas. Le "i" de informations reprend ses droits en ne proposant plus que des informations, et une troisième case à cocher fait son apparition, le "neutre".

Formulaire d'inscription

Le changement de design de l'écran du choix des thèmes est voulu, cela permet à l'utilisateur de constater qu'il en phase de création de compte. Toutes ses données sont entrées, c'est presque la fin. J'ai tout de même décidé de garder le même arrière plan que précédemment, que je trouve bien moins triste que du gris.

Choix des cinq thèmes

Le fait de demander des thèmes est bien sur nécessaire. Cela permettra de rendre la page d'accueil plus agréable et personnalisée. Mais imposer cinq thèmes est peut-être un peu excessif, j'ai donc laissé 2 thèmes obligatoires. L'utilisateur peut bien sur s'abonner à tous les thèmes dont il a envie. Le système de recherche mériterai également d'être amélioré afin de pouvoir associer les recherches précises à chaque thèmes.

Pas de grand changement sur la page de finalisation, juste un léger redesign et une reformulation plus précise de ce qu'il se passe. La barre de chargement en bas à été conservée pour indiquer où est-ce que la finalisation en est.

Création de la page d'accueil

Une fois l'inscription finie, voici notre page d'accueil où nos thèmes sont affichés. J'ai gardé le call-to-action en haut à gauche qui invite à rechercher d'autres thèmes, je me suis contentée de reformuler le bouton afin de lui procurer plus d'affordance.

Page d'accueil

J'ai regroupé la plupart des fonctionnalités en haut à droite, près du profil personnel. La tête d'épingle à été remplacée par une silhouette humaine, afin que l'utilisateur comprenne de suite de quoi il s'agit. J'ai également décidé d'afficher les paramètres sur la page car avant il fallait cliquer sur son profil pour y accéder, et donc pouvoir se déconnecter, ce qui pour moi représente bien trop d'action pour quelque chose d'aussi banal. J'ai également remonté les icônes qui se trouvaient en bas à droite et j'ai ensuite modifié le design du bouton qui invitait à télécharger l'application “pin it” pour navigateur car avant ce n'était qu'un “+” énigmatique.

Conclusion de mon expérience.

En résumé, j'ai essayé de conserver l'âme et la charte graphique de Pinterest en me contentant de remodeler à ma sauce le design et son contenu pour le rendre, à mes yeux, plus agréable et intuitif. J'ai trouvé très intéréssant de travailler le Onboarding car à force de s'inscrire un peu partout sur le net, je me rend compte que je ne faisais plus vraiment attention aux détails qui pourtant, changent tout.