Ainsi naquit Loan Simulator
Dans le design d’interactions il y a beaucoup d’innovations, d’envie de bien faire, d’ambitions et plusieurs approches qu’il est parfois bon de distinguer. Que ce soit dit ! Si l’obtention d’un design award est une quête difficile à achever, il est tout aussi complexe d’avoir pour maître mot l’efficacité. Chez KissKissBankBank & Co, nous faisons partie de cette seconde catégorie, celle des entêtés, pour qui l’interface est une histoire de fonctionnalité.
Récemment nous vous dévoilions les dessous de notre bibliothèque de composants. Aujourd’hui, nous vous proposons un récit, celui de la création d’un composant complexe, le bien nommé Loan simulator, un simulateur pas comme les autres.
Avant Loan Simulator
Pour qui n’a jamais connu la nécessité d’emprunter de l’argent, « la simulation d’emprunt » n’évoque pas grand chose. Pour un certain nombre, ces mots devraient leur rappeler un souvenir douloureux, l’heure fatidique des choix importants. La simulation d’emprunt, c’est là où tout se joue, où l’on doit choisir combien emprunter ? Combien rembourser chaque mois ? Pendant combien de temps ? Si ces questions sont difficiles à trancher, c’est parce qu’elles ont par la suite une incidence sur la vie de tous les jours. La gestion de son budget est une affaire quotidienne. Il est donc important de faire les bons choix, ou à défaut de trouver les modalités de remboursement qui nous conviennent le mieux. Avant Loan Simulator ce n’était pas chose aisée, car des simulateur sur le web il y en a ; mais ils ne sont pas toujours faciles à utiliser…
Quelques explications avec cette courte hagiographie !
Cas 1: Un simulateur comme les autres, c’est-à-dire contraignant
L’utilisateur est contraint de choisir une durée de remboursement pour connaître le montant de ses mensualités. Il ne peut déterminer directement le montant qu’il souhaite rembourser chaque mois. Surtout, le nombre de choix possible est très limité et ne permet pas d’adapter les modalités de remboursement aux besoins de chacun. Enfin, le résultat de la simulation n’est pas suffisamment mis en évidence.
Cas 2: Un autre simulateur comme les autres, c’est-à-dire pas pratique
Le simulateur n’affiche pas la durée de remboursement. L’utilisateur est donc obligé d’effectuer le calcul par lui-même afin d’obtenir une partie de l’information souhaitée.
Cas 3: Encore un simulateur comme les autres, c’est-à-dire très complexe
A l’inverse de l’exemple précédent, on trouve toutes les informations souhaitées mais elles sont difficilement lisibles. Autre point négatif, il faut revenir à l’étape précédente pour choisir un montant d’emprunt différent. Et si le montant de l’emprunt change, les modalités de remboursement préalablement choisies s’effacent. Il est donc difficile de comparer les solutions possibles entre elles.
Sans parler d’esthétisme, le problème commun à tous ces simulateurs est qu’ils négligent tout ou partie des attentes de l’utilisateur. Ils en deviennent donc afonctionnels. C’est pour cette raison et parce que la simulation d’emprunt est un passage obligé des utilisateurs de notre solution de prêt entre particulier que nous avons entrepris de concevoir Loan Simulator.
Ainsi naquit loan simulator
Loan simulator est le fruit d’une rencontre. Celle des besoins de nos utilisateurs avec notre volonté de transformer l’étape compliquée de la simulation d’emprunt en une étape simple. Pour parvenir à un résultat satisfaisant, il n’y a pas de recettes miracle. Il faut du temps, des ressources, une bonne dose d’abnégation et surtout garder à l’esprit qu’on ne design pas pour soi.
- Considérer les besoins de l’utilisateur final
La première partie de l’exercice consiste à se mettre à la place de l’utilisateur. Se dire, « si j’étais lui », de quoi aurais-je besoin ? Qu’est ce que je souhaite faire à ce moment précis ? Quelle action dois-je effectuer ?
Avant de tracer les contours de ce nouveau composant, nous avons donc essayé de définir ce que serait une simulation idéale…
Il était une fois un utilisateur qui se faisait une haute idée de la simulation d’emprunt et pour qui celle-ci devrait permettre :
. d’effectuer sa simulation aussi simplement sur mobile que sur ordinateur
. d’avoir a effectuer le moins d’actions possibles
. d’effectuer sa simulation sur une même page pour visualiser et modifier ses choix sans revenir en arrière
. d’adapter ses modalités de remboursement à sa situation et donc bénéficier d’un grand nombre de choix possible
. de choisir directement le montant de ses mensualités plutôt que le nombre de mensualités
. de comprendre la relation entre le montant emprunté et les modalités de remboursement
2. Designer…prototyper…tester…retester
Les attentes de l’utilisateur correspondent en quelques sorte aux clauses d’un contrat qu’en tant que concepteurs nous sommes tenus de respecter. Pour cela, il est indispensable de proposer à une personne étrangère à la problématique de tester le composant. C’est sur la base de ces tests et grâce à l’ingénuité de nos collègues que nous sommes parvenus à résoudre les difficultés rencontrées et que nous avons choisi :
. d’utiliser un slider pour faciliter l’usage du composant sur mobile,
. de gérer les déplacement de la poignée sur le slider d’après une échelle graduelle (de 1 en 1 jusqu’à 200€, de 10 en 10 jusqu’à 1000€ et de 100 en 100 jusqu’à 10 000€),
. de placer les résultat de la simulation au dessus du slider pour qu’ils soient visibles en toutes circonstances,
. d’arrondir le résultat de la simulation à l’unité pour éviter tout calcul supplémentaire à l’utilisateur,
. de supprimer toutes autres informations inutiles (ex: le taux d’intérêt) et de renforcer la visibilité boutons d’actions via l’UI.
Dans la version finale mise en ligne le 17 février 2017, l’utilisateur n’a que trois actions à effectuer pour simuler son emprunt :
. renseigner le montant souhaité de l’emprunt dans le champ de texte
. choisir ses modalités de remboursement en faisant glisser la poignée du « slider » de gauche à droite
. cliquer sur le bouton pour passer à l’étape suivante
Si la dernière version en date possède un ADN commun avec les premiers wireframes, certaines solutions ont été écartées au fil des confrontations entre le composant et la réalité de l’expérience utilisateur, d’autres améliorées. Cette phase de gestation est indispensable pour obtenir un composant satisfaisant sur le plan fonctionnel. Nous vous invitons à le tester et à juger par vous même de la qualité de l’expérience. Toutes vos remarques et suggestions sont les bienvenues !
Après Loan simulator
Depuis l’intégration de loan simulator sur la page d’accueil de notre service de prêt entre particuliers, le taux de transformation de cette page a augmenté sensiblement, le nombre total de collectes créées sur la plateforme a doublé pour un volume de trafic équivalent. Pour autant, Loan simulateur est encore jeune et perfectible. Nous pensons déjà à le faire évoluer pour proposer des modalités de remboursement adaptées au profil de l’utilisateur. Encore une fois, il faudra user de méthode dans la conception de cette nouvelle fonctionnalité et éviter le piège du “ design pour soi ”, car c’est ainsi qu’est né Loan simulator et que devraient naître bien d’autres composants.
