Dans cet article, nous allons découvrir ensemble le User Onboarding (ou Start Experience) de l’application Trello sur Android.
User Onboarding est le terme définissant la prise en charge de l’utilisateur lors de sa première visite sur un site, une application ou un service. Cela comprend donc les différents moyens utilisés pour faire découvrir le site, pour créer un nouveau compte,…
Trello est une liste de tâches disponible sur de nombreuses plateformes (Desktop, iPhone, iPad, smartphones Android , Tablettes, Montres connectées et Kindle Fire). En créant un compte, il est donc possible d’accéder à ses listes un peu partout.
Maintenant que vous en savez un petit peu plus, découvrons ensemble le User Onboarding de Trello et la manière dont je l’ai repensé. Pour ce faire la Start expérience sera divisée en quatre étapes:
Page d’accueil
Avant...
Lors de la première utilisation, nous arrivons sur cet écran. On nous souhaite la bienvenue avec un « Hello Trello », c’est plutôt positif. Mais pourquoi « Trello » ? C’est comme si, arrivé sur facebook, on nous disait « Salut Facebook ! »…
Après cela, il y a une phrase d’accroche assez bien tournée : « Ready to start getting stuff done ? » . Bien sûr c’est motivant ! Qui n’a pas envie d’être efficace, surtout pour les tâches les plus pénibles ?! Seul point vraiment négatif de cette présentation : c’est quoi, Trello, au final ? Un utilisateur qui aurait vu cette application dans le store et l’aurait téléchargée sans en lire la description ne serait pas beaucoup plus avancé !
La petite illustration montre la mascotte de l’application, Taco, et en dessous d’elle l’interface simplifiée de Trello, mais à cette étape nous ne le savons pas encore.
Les quatre cercles en bas de l’écran indique un slideshow de quatre pages, nous sommes à la première.
Finalement, arrivent deux boutons, complètement identiques : un pour s’inscrire et un pour se connecter. Les intitulés sont clairs et précis. Simplement entourés d’un bord blanc, ils n’attirent pas vraiment l’attention, aucun d’eux ne se détachent. Leur place est judicieuse : ils sont tous les deux facilement accessibles avec le pouce.
Après...
L’interface a été entièrement remodelée. Le bleu principalement utilisé dans l’application a été conservé pour les boutons et bannières afin de garder une cohérence. Une seconde couleur a été choisie pour mettre des informations secondaires en évidence.
Ainsi, sur la première page, l’utilisateur est directement accueilli par le « Bienvenue sur Trello ». La phrase d’accroche a été conservée, à un détail près : il est précisé ici que Trello est bien une application de gestion de listes de tâches. De cette manière, tout est dit dès le début.
Un call-to-action invite l’utilisateur à créer sa première liste, tandis qu’un lien plus discret lui permet de découvrir l’application. S’il a déjà un compte, il lui suffit de cliquer sur « Enregistrez-vous » pour atteindre le panneau de connexion.
Slideshow
Avant...
Les illustrations ne sont pas cohérentes les unes avec les autres : la première n’a que des aplats de couleurs dans les tons bleus, la deuxième mélange photo et illustrations et la dernière n’a plus que des illustrations…
Les textes sont simples et concis, on va droit au but ! Par contre les éléments présentés ne sont pas judicieusement choisis : n’oublions pas qu’à cette étape-ci personne ne nous a encore dit que Trello permettait de faire des listes de tâches… Et là on nous dit déjà qu’on pourra l’organiser, d’y ajouter des détails et d’inviter d’autres personnes… Tout ça en utilisant le vocabulaire spécifique de Trello (board, list, card).
De plus, il n’est pas possible d’avoir un aperçu de l’application avant de s’inscrire.
Après...
Le slideshow ne commence que lorsque l’utilisateur clique sur « Découvrez Trello ». De cette manière, seuls les personnes intéressées ou curieuses y arriveront.
Il comporte trois écrans, ayant exactement la même construction. En haut à gauche on retrouve le logo de Trello, à droite une croix qui permet de retourner à l’écran d’accueil.
Le titre reste lui aussi identique, tandis que l’illustration, le sous-titre et le texte varient en fonction de l’explication donnée. Les illustrations ont également été homogénéisées afin de créer un ensemble plus cohérent.
Un indicateur permet de savoir sur quel écran du slide on se trouve, tandis que les flèches autour permettent de passer d’un à l’autre (il est également possible de changer d’écran en faisant un swipe).
Le bouton permettant de créer une nouvelle liste reste disponible, afin de ne pas devoir retourner en arrière.
A nouveau, si l’utilisateur a déjà un compte, il peut se connecter en cliquant sur « Enregistrez-vous » dans le bas de l’écran.
Inscription
Avant...
Il y a seulement 3 champs à remplir : un nom, une adresse email et un mot de passe. Leur intitulé sont simples, logiques et les informations demandées sont légitimes. Excepté pour le nom : quel nom doit-on introduire ? Notre prénom ? Notre nom ? Un nom d’utilisateur ? A quoi cela va-t-il servir ?
Le bouton « cancel » permet d’annuler l’inscription et de revenir à l’écran d’accueil.
Il est également possible de s’inscrire directement via son compte gmail. Le bouton prévu pour cela est situé tout en bas de l’écran, ce qui ne le rend pas visible du tout ! Si on clique dessus, cela ouvre une fenêtre permettant de sélectionner le compte qui nous convient, suivi des autorisations d’accès qui nous sont demandées.
Si on décide de s’inscrire directement via Trello, tout se passe bien jusqu’à ce qu’on appuie sur Create. Si nous avons introduit un mot de passe de moins de 8 caractères, le champ de mot de passe s’affiche en rouge, ce qui rend le texte illisible sur le fond bleu. De plus, ne pas avoir de feedback avant de cliquer sur valider et avoir un message d’erreur lors de la validation est plutôt frustrant.
Si on se connecte avec Trello, un message apparait sur l’écran principal, nous invitant à confirmer notre adresse via le mail de confirmation. Un bouton « open email » permet d’accéder directement à notre application de mail. Un seul problème : elle ouvre par défaut l’application Gmail, quelle que soit l’adresse utilisée.
Après...
Un tutoriel a été intégré juste avant l’écran d’inscription. L’utilisateur sera invité à créer une liste et guidé pas à pas par des indications claires se situant en haut de la page. Le bouton permettant de passer à l’étape suivante reste toujours dans le bas de page.
Créer une tâche
La première étape permet de créer des tâches. Pour ce faire, l’utilisateur n’a qu’à toucher le bouton « + » et l’instruction « Créez une nouvelle tâche ». Le bouton se transformera alors en cercle et l’instruction deviendra l’input permettant de nommer la tâche. L’option de création apparait alors juste en dessous de la nouvelle tâche, ainsi il est toujours facile et possible d’en rajouter une !
A côté de chaque tâche se trouve une flèche faisant apparaitre un sous-menu. Cela permet d’ajouter divers informations à la tâche sélectionnées. En cliquant sur « description », ce mot laisse place à un input permettant à l’utilisateur d’introduire un texte.
Cliquer sur « échéance » ouvre le calendrier afin de sélectionner une date plus facilement. Cette date s’affiche alors sous la forme de jour/mois/année et un bouton calendrier apparait juste à côté. Toute cette zone est cliquable et réouvre le calendrier s’il faut modifier la date.
Le label permet d’ajouter une couleur à la tâche. Cette couleur apparait alors dans la ligne de séparation en dessous de la tâche.
La section de sous-tâches permet de créer une checklist à l’intérieur de la tâche. Au clic, il est possible d’éditer le nom de la sous-tâche. Ces interactions sont les mêmes que pour les tâches principales afin de faciliter la compréhension.
Enfin, l’option photo permet de choisir une photo dans sa galerie.
Nommer la liste
La deuxième étape permet de renommer la liste. Cela se fait dans la barre de titre mise en couleur.
Donner un nom à la catégorie
Finalement l’utilisateur est invité à choisir un nom de catégorie. Pour que ce soit clair, les instructions précises qu’une catégorie est un groupe de plusieurs listes.
Créer une nouvelle liste
Une fois la première liste créée, l’utilisateur a le choix : soit il continue à créer une liste, soit il la sauvegarde.
S’il décide de créer une nouvelle liste, il arrive sur un écran comportant déjà sa liste et permettant de créer une nouvelle liste, de modifier sa liste actuelle ou de créer une nouvelle catégorie. Le bouton « sauvegardez votre liste » reste toujours disponible en bas de l’écran, en effet tant que l’utilisateur n’a pas créer de compte, ses listes ne sont pas sauvegardées.
S’inscrire
Si l’utilisateur clique sur « sauvegardez votre liste », il arrive sur un écran avec un formulaire. Seules trois information sont requises : l’adresse email, le nom d’utilisateur (renommé afin d’être plus compréhensible) et le mot de passe. Les exigences du mot de passe sont directement affichées à côté du label.
Par défaut, le nom d’utilisateur correspond aux caractères avant le @ de l’adresse email entrée. Bien sûr, ce nom reste modifiable.
Si l’input est correctement complété, un indicateur de validation apparait dans l’input correspondant. En cas d’erreur, le champ et le label se colore en rouge directement après avoir été complétés : il ne faut plus attendre d’avoir validé !
Ecran principal
Avant...
Une fois l’inscription terminée, un pop up apparait sur l’écran principal. Il nous rappelle l’adresse email utilisée et la possibilité de se connecter aussi sur Trello.com. On se sent accueilli, c’est assez positif mais le look du message rappel plus un message d’erreur qu’autre chose, et ne colle pas vraiment à la charte graphique de Trello.
Une fois le pop up fermé, nous arrivons sur l’écran d’accueil où… nous ne savons plus que faire…
Nous pouvons en effet voir « How to use Trello for Android » mais est-ce un titre ? un bouton ? juste un texte ? Après avoir finalement cliqué dessus, cela nous ouvre un groupe de liste, appelé board. Ces listes comportent déjà des « cards » qui, nous le comprenons assez vite, sont le mode d’emploi de l’application. En les parcourant, nous découvrons les différentes possibilités qu’offre Trello. Et voilà, nous sommes largués dans cette application, livrés à nous-mêmes pour la comprendre.
Les différentes étapes du tuto sont divisées en quatre listes : Getting Started, Diving In, Mastering Trello et More Info. Et selon eux, savoir comment marquer une tâche comme terminée fait partie de la catégorie « Maitriser Trello »… De plus, seuls les titres des cards sont visibles, pour avoir plus d’informations. Nous sommes donc obligés d’ouvrir complètement les cards pour chercher les informations nous-mêmes.
Après...
Une fois l’inscription terminée, l’utilisateur arrive sur l’écran principal. Il peut y retrouver ses catégories, ses listes, … Un message lui souhaite la bienvenue et l’informe que ses listes ont été sauvegardées avec succès.
Cette analyse vous a plu ? N’hésitez pas à en consulter d’autres !
