Le parcours du wallet mobile d’Alephium !

Le wallet mobile Alephium est un excellent complément à l’ensemble des wallets développés par les principaux contributeurs. Il est disponible pour Android et iOS. Il est facile à utiliser, amusant et beau ! Essayez-le ! Voici une conversation libre sur la conception, les défis et les choix faits par Mikaël Vaivre et Ilias Trichopoulos lors de la construction du wallet mobile. Nous vous la donnons telle quelle car il est important de montrer ce qui se passe dans les coulisses, dans l’esprit des concepteurs techniques des contributeurs frontaux ! Cela semble si facile lorsque vous utilisez le wallet, mais pour en arriver là… le voyage est long et ardu, plein de recherches, d’expériences, de défis technologiques et d’un dévouement sans faille à la conception centrée sur l’utilisateur !

Genèse du wallet mobile Alephium & défis les plus importants

Vladimir Moshnyager : Quand avez-vous commencé à travailler sur le wallet mobile Alephium ?

Mikaël Vaivre : Cela a commencé il y a environ un an. Nous nous sommes d’abord concentrés sur la sécurité, le chiffrement et la création d’un prototype capable d’importer une seed. Nous avons mené des recherches approfondies pour trouver les bons composants techniques.

Nous avons étudié d’autres wallets open-source sur les stratégies de gestion du chiffrement et de la biométrie, ainsi que sur la façon de gérer le stockage sécurisé et la gestion de l’état (c’est assez technique, mais c’est la façon dont vous gérez l’état de l’application d’une manière compréhensible pour les développeurs et facile à maintenir).

Après quelques mois, nous avons appliqué ce que nous avions appris à la v2 du desktop wallet (lancé en mai 2023), en garantissant une approche cohérente dans tous nos produits et en faisant des allers-retours entre les deux, ce qui a permis de les renforcer.

Vladimir Moshnyager : Combien de temps a duré le développement, et était-ce un processus continu ?

Mikaël Vaivre : Cela a pris environ neuf mois, mais pas à temps plein. Nous sommes souvent passés d’un projet à l’autre, y compris le SDK, l’Explorer et le site web, et nous nous sommes également concentrés sur la v2 du desktop wallet pendant cette période.

Vladimir Moshnyager : Quels ont été les plus grands défis ? Comment avez-vous géré les différences entre les plateformes iOS et Android ?

Mikaël Vaivre : Pour être plus précis, nous utilisons Expo, une couche au-dessus du développement natif qui simplifie beaucoup l’expérience du développeur. Mais nous avons eu du mal à résoudre les problèmes de construction. Vous construisez quelque chose qui fonctionne sur Android, mais qui ne fonctionne pas sur iOS. Ensuite, vous réussissez à faire fonctionner quelque chose, mais plus tard vous découvrez un comportement totalement différent sur IOS et Android, vous devez donc trouver un bon moyen de construire une application qui fonctionne sur les deux plates-formes…

Les paradigmes d’utilisation et de construction technique sur Android et iOS sont tellement différents que la façon dont vous naviguez dans les applications est différente. Pour cette raison, j’ai pris le temps (ce fut un processus assez long) de construire une interface utilisateur (IU) qui fonctionnerait bien sur les deux plates-formes. Mon objectif personnel était d’éviter qu’il y ait beaucoup de différences entre les applications. Je voulais que l’interface soit la même sur les deux plates-formes. Nous aurions pu adopter une autre approche : Nous avons deux applications d’apparence différente, mais cela nous donne beaucoup plus de travail à maintenir, et c’est un processus plus sujet aux erreurs.

Si vous regardez le matériel Android (les modèles), les appareils qui peuvent faire fonctionner votre application sont tellement différents ! Certains smartphones ont un très petit écran, d’autres sont énormes. Certains sont très lents. Sur iOS, les gens ont tendance à mettre à jour leurs téléphones assez régulièrement, mais sur Android, ce n’est pas la même chose : il y a encore beaucoup d’appareils plus anciens. S’assurer que l’application fonctionne sur de nombreux appareils est un véritable défi.

Vladimir Moshnyager : Android avait donc des contraintes qui n’existaient pas sur iOS. Mais était-ce le seul problème ?

Mikaël Vaivre : Bien que les interfaces utilisateur d’Android et d’iOS diffèrent, Android favorisant les boutons d’action flottants et iOS utilisant une navigation basée sur l’en-tête, nous avons développé une interface unifiée qui s’adapte efficacement aux deux groupes d’utilisateurs.

Notre approche harmonise ces différences, garantissant une navigation et une utilisation transparentes sur les deux systèmes d’exploitation.

Nous avons dû ajouter plusieurs composants à la main (ce qui signifie que nous avons dû les coder) pour créer cette expérience qui partage les mêmes visuels et la même sensation que le desktop wallet.

Réflexions sur le processus

Vladimir Moshnyager : Avez-vous apprécié le processus de création de l’application mobile ?

Mikaël Vaivre : Oui, j’ai apprécié, mais cela a été plus difficile que prévu, surtout en ce qui concerne la conception de l’interface utilisateur. Il est très difficile de rendre quelque chose de simple. Jusqu’à la fin du processus, j’ai peaufiné les éléments de l’interface utilisateur pour m’assurer qu’ils étaient fluides sur le téléphone portable.

La présentation de base de l’interface utilisateur était prête assez tôt dans le processus de conception. Cependant, j’ai été confronté à des difficultés dans la gestion des contrastes. La question s’est posée de savoir s’il fallait enfermer le contenu dans des boîtes ou le laisser flotter librement dans l’interface utilisateur. J’ai également réfléchi à l’opportunité d’utiliser des bordures dans certaines zones, compte tenu des limites d’un petit écran qui peut être utilisé dans différents contextes.

La conception d’un produit mobile nécessite des considérations différentes de celles d’un produit de bureau. Les conditions extérieures lumineuses nécessitent une approche distincte de la conception de l’interface utilisateur et de la sélection de la palette de couleurs. Par conséquent, de nombreuses itérations ont été nécessaires pour affiner la conception de l’application mobile. Il était essentiel de renforcer le contraste et d’incorporer des éléments de conception tels que des ombres pour s’assurer que certaines fonctionnalités ressortent, en particulier dans le thème lumineux. Étant donné que l’utilisation mobile se fait dans des environnements différents, un simulateur d’ordinateur de bureau ne peut pas rendre pleinement les subtilités d’une journée ensoleillée, par exemple. Ces facteurs ont considérablement influencé le processus de conception.

Vladimir Moshnyager : Quelles sont les caractéristiques les plus importantes d’un wallet crypto mobile ?

Mikaël Vaivre : Le processus d’accueil est crucial. Il doit être simple et rapide tout en éduquant l’utilisateur à la sécurité, comme l’importance de sauvegarder sa phrase de départ. L’application mobile est très facile d’accès : vous allez sur l’app store et en un clic, elle est sur votre téléphone. Nous devons veiller à ce qu’il soit toujours facile pour l’utilisateur d’entrer dans votre écosystème.

Pour ce faire, vous devez réduire autant que possible les étapes d’intégration tout en maintenant un niveau de sécurité élevé. Sur l’un des wallets que nous avons étudiés, il faut cinq secondes pour entrer dans l’application, mais il est très facile d’oublier de sauvegarder correctement sa seed. Nous voulions nous assurer que cela ne se produise pas dans notre cas.

Vladimir Moshnyager : Pouvez-vous nous en dire plus sur les caractéristiques techniques dont vous êtes le plus fier ?

Mikaël Vaivre : J’aime beaucoup le processus d’importation du wallet avec le code QR animé. Il permet aux utilisateurs de transférer facilement leur wallet et leurs métadonnées du desktop wallet vers le mobile wallet. Maintenant, vous avez une nouvelle installation de seed sur un autre appareil. Ainsi, vous pouvez accéder à votre wallet Alephium en déplacement.

Je suis également fier du travail réalisé sur l’intégration de Wallet Connect. Pouvoir implémenter la plupart des fonctionnalités que nous avons sur le desktop wallet est une grande réussite. Pour la première version (v1), être aussi riche en fonctionnalités et fonctionner de manière fluide est vraiment cool.

Recherche sur les wallets mobiles

Vladimir Moshnyager : Quels sont les wallets que vous avez étudiés et quels sont ceux que vous utilisez vous-même ?

Mikaël Vaivre : J’utilise Revolut et PostFinance pour les opérations bancaires traditionnelles. Même si l’interface utilisateur n’est pas terrible, les gens ont aujourd’hui l’habitude d’effectuer des transactions financières sur leur téléphone portable. Et le changement de paradigme pour embarquer sur la crypto, le fossé, est encore grand.

Je me souviens de la première fois, en 2016, où j’ai utilisé une application de crypto-monnaie et où l’écran principal comportait deux sections : Mon compte, où se trouvait mon argent, et une autre : mon wallet. J’ai réfléchi : Pourquoi ai-je deux comptes ? Où dois-je mettre mon argent ? C’était déroutant. La clé pour rendre la technologie plus accessible est de la traduire dans des choses auxquelles les gens sont habitués. Je me suis donc inspiré des applications bancaires plus traditionnelles à cet égard.

Nous avons étudié de nombreux wallets cryptographiques tels que MyEtherWallet, MetaMask, Rainbow et Ledger Live. En ce qui concerne l’interface utilisateur, nous nous sommes concentrés sur les plus utilisés. Nous avons également tenu compte des similitudes de conception entre les wallets mobiles et les wallets d’extension, car il existe de nombreux points communs.

L’un des wallets qui s’est le plus démarqué est Rainbow, car il est très convivial. Notre wallet est un mélange des deux mondes, essayant d’être quelque chose de familier pour les nouveaux utilisateurs, avec un équilibre entre le sérieux et l’humour. Comme il s’agit d’argent, nous devons faire en sorte que l’utilisateur se sente en sécurité, que ce ne soit pas compliqué et que ce ne soit pas une blague.

Public cible et utilisation

Vladimir Moshnyager : Quel est le public cible du wallet mobile ?

Mikaël Vaivre : La cible a évolué au fil du temps : nous nous sommes d’abord concentrés sur les mineurs, puis sur les développeurs, et nous visons maintenant à créer un produit accessible et convivial pour un public plus large. Fondamentalement, les personnes qui utilisent Revolut devraient être en mesure d’utiliser notre wallet mobile.

Vladimir Moshnyager : Le wallet mobile aura-t-il toutes les fonctionnalités du desktop wallet ?

Mikaël Vaivre : Pas nécessairement. Environ 80 % des fonctionnalités seront les mêmes, mais les fonctionnalités très avancées resteront exclusives au desktop wallet.

Vladimir Moshnyager : Les utilisateurs peuvent-ils supprimer leurs informations personnelles ?

Mikaël Vaivre : Nous avons dû répondre par l’affirmative pour nous conformer aux politiques des magasins d’applications, mais nous ne stockons pas d’informations personnelles. Nous ne collectons que des données analytiques anonymes (il est impossible d’identifier un utilisateur en particulier), et il s’agit en fait d’interactions simples, de choses que nous utilisons pour mieux comprendre comment l’application est utilisée. Mais à part cela, nous n’avons pas de comptes d’utilisateurs. Nous n’avons pas à stocker de données sur les utilisateurs.

Vladimir Moshnyager : Quelle sera, selon vous, la principale utilisation du wallet mobile ?

Mikaël Vaivre : Bien sûr, trouver l’œuf de Pâques ! (Note : il y a un Easter Egg sur le portefeuille mobile, essayez de le trouver !)

Plus sérieusement, il s’agit plutôt de vérifier les soldes, les statuts des transactions et d’envoyer des petites et moyennes transactions en déplacement. Et bien sûr, il est très pratique pour interagir avec les dApps, en partie grâce à l’appareil photo du téléphone qui permet de scanner les codes QR.

La technologie sous le capot (et le processus de création)

Vladimir Moshnyager : Quelles sont les technologies de base utilisées ?

Mikaël Vaivre : Nous utilisons React Native, ce qui nous permet d’utiliser TypeScript pour la plupart de notre logique, de nos animations et de la mise en page de l’interface utilisateur. Cela nous permet de partager une partie de la logique entre notre desktop et notre wallet mobile. Nous avons un SDK que nous utilisons en interne pour cela, ce qui rend notre code plus propre et plus efficace.

Nous avons fait ce choix parce que les applications écrites en React Native peuvent offrir une expérience fluide sur mobile, et c’est ce que l’utilisateur attend : que l’application ne soit pas léthargique, et que les animations et les transitions soient parfaites. Nous utilisons Expo pour gérer le développement sur différentes plateformes (iOS et Android), ce qui nous fait gagner beaucoup de temps et nous aide à publier sur les deux app stores.

Vladimir Moshnyager : Comment se déroule le processus de construction ?

Mikaël Vaivre : J’aborde mon processus de conception en trois étapes principales :

La création des maquettes : Pour commencer, je passe du temps sur les maquettes afin d’établir une base solide. Il ne s’agit pas de simples wireframes, mais de maquettes détaillées qui incluent des éléments de mise en page tels que les couleurs, les bordures et les marges. Mon objectif n’est pas d’obtenir une précision au pixel près, mais de créer un visuel qui représente environ 80 % de l’apparence de l’application finale. Je suis conscient que certains concepteurs, en particulier dans les grandes entreprises, doivent produire des maquettes au pixel près. Je pense que l’effort pour atteindre un tel niveau de détail dans les maquettes n’est pas nécessaire pour nous. Je travaille donc jusqu’à ce que les maquettes soient “suffisamment bonnes”, c’est-à-dire jusqu’à ce qu’elles soient proches du sommet de la courbe de productivité. Ensuite, j’arrête de les affiner.

Développement et itération : Une fois que les maquettes sont “suffisamment bonnes”, je passe au développement. Il se peut que je modifie encore quelques points ici et là, parfois en changeant légèrement la mise en page, mais l’objectif principal est de finaliser la mise en page. Ainsi, lorsque nous mettrons le code en œuvre, il sera définitif. Je veux éviter de modifier complètement la mise en page une fois le codage terminé, car c’est une perte de temps.

Essais et dernières retouches : La dernière phase consiste à tester et à affiner le projet. Elle englobe le cinquième restant de la procédure. En tant que personne travaillant sur la conception mais aussi sur le développement, je mets en œuvre les derniers ajustements directement dans l’application au cours de cette étape.

Regard sur l’avenir

Vladimir Moshnyager : Quelle est la feuille de route pour le wallet ?

Mikaël Vaivre : Tout d’abord, nous voulions sortir la V1, puis une version intermédiaire pour peaufiner les choses en fonction des retours. Nous nous concentrerons ensuite sur le desktop wallet et sur l’amélioration de l’interaction avec les applications. J’ai de nombreuses petites (et moins petites !) améliorations en tête pour le wallet mobile.

Vladimir Moshnyager : Est-il envisageable qu’à un moment donné, ce soit un SDK et une place de marché d’applications qui aillent dans le wallet ?

Mikaël Vaivre : Nous avons parlé d’améliorer la façon dont vous interagissez avec les applications, éventuellement en utilisant un environnement web dans le wallet. Il y a deux façons de le faire : ouvrir un navigateur web à l’intérieur du wallet (comme le fait Metamask), ou avoir une place de marché externe pour les dApps. Pour l’instant, l’objectif est de fournir une connexion stable avec les dApps en utilisant WalletConnect 2.0.

Vladimir Moshnyager : Quand puis-je avoir plusieurs wallets dans mon wallet mobile ?

Mikaël Vaivre : Nous avons pris en charge plusieurs seeds en interne, mais nous avons rencontré des problèmes avec le chiffrement, de sorte que l’option a été de lancer le wallet en ne prenant en charge qu’une seule phrase de seed. Nous voulons être très sûrs de bien faire les choses. C’est une fonctionnalité que tous les wallets ne prennent pas en charge, car elle est complexe. Nous l’utiliserons à l’avenir, dès que nous serons satisfaits de la solution que nous aurons trouvée.

Vladimir Moshnyager : Avez-vous un projet de mise en œuvre ou de réflexion sur la tendance à l’abstraction de compte ou à devenir un wallet multi-chaînes ?

Mikaël Vaivre : Tout est possible, mais je pense qu’il est trop tôt pour nous. Nous devons nous assurer que nous offrons une excellente expérience et que nous disposons d’une base solide pour aller de l’avant avec de nouvelles fonctionnalités. Nous sommes fiers de ce que nous avons aujourd’hui, et nous avons une liste de choses qui nous occuperont pendant un certain temps !

Si vous voulez en savoir plus sur Mika et son processus de conception, il a pris la parole lors du techtalk de l’été dernier, expliquant sa vision de UI & UX, pour lequel vous pouvez trouver la vidéo ici, les diapositives là et un article complet! Si vous aimez ce genre de contenu, nous avons également créé un espace twitter dédié à l’UI/UX et aux wallets ici.

Le wallet mobile Alephium combine une technologie robuste, un design centré sur l’utilisateur, et une vision pour fournir une expérience de gestion de crypto-monnaie transparente. Il est disponible sur Google Play et sur l’App Store iOS.

N’oubliez pas de suivre @alephium et @Alephiumfr sur Twitter pour rester informé en tout temps.