5 conseils pour concevoir de meilleures icônes de menu Fintech

Dans cet article, nous allons examiner l'importance de l'iconographie des menus dans la conception d'applications fintech et quelques conseils à garder à l'esprit lors de leur utilisation.

Imaginez que vous êtes à la recherche d'un cabinet comptable pour votre entreprise. La société Money Money Money semble légitime et a une tonne d'évaluations et de critiques positives des clients en ligne. Alors vous leur donnez un appel pour obtenir plus d'informations sur les plans tarifaires ainsi que pour poser les questions restantes que vous avez.

Le seul problème est que vous ne reconnaissez aucune des invites de menu que la voix robotique à l'autre bout vous donne :

• "Choisissez 1 pour les précautions de l'Oncle Sam"
• "Choisissez 2 pour la pondération du livre"
• "Choisissez 3 pour Hustling Advisory Panel"
• "Choisissez 4 pour tous les autres appelants"

Comment réagiriez-vous à cela ? Vous pourriez rire au début, pensant que c'était juste l'entreprise qui était drôle ou excentrique.

Mais alors vous pourriez penser : « Hmmm… Cette entreprise va m'aider à gérer mon argent. Peut-être qu'ils ne devraient pas plaisanter.Vous pourriez également vous demander s'il sera si difficile de comprendre les conversations que vous avez avec leurs comptables ou, pire, les factures qu'ils vous envoient.

La même chose peut se produire si une application de services financiers utilise la mauvaise iconographie dans la conception de son menu. Et tout revient au même problème :

Lorsque vous utilisez le mauvais langage, qu'il soit verbal ou visuel, vous envoyez les mauvais signaux aux utilisateurs. Dans certains cas, cela peut même tuer la confiance de vos utilisateurs et nuire à leur capacité à agir. Et puisque le menu de votre application est le seul endroit où ils peuvent aller pour explorer et utiliser les principales fonctionnalités de l'application, vous ne pouvez pas vous permettre de le gâcher avec la mauvaise iconographie.

J'ai installé quelques dizaines d'applications de services financiers pour pouvoir fouiller et voir à quoi ressemblaient leurs menus. J'ai identifié un certain nombre de tendances et les ai utilisées pour créer les conseils et directives suivants que vous pourrez utiliser lors de la conception de vos icônes de menu fintech à l'avenir :

1. Le menu principal doit toujours inclure des étiquettes

Je vais vous donner deux exemples qui montrent pourquoi les menus sans étiquette sont une mauvaise idée.

C'est d'abord le menu dans lenous vendonsapplication mobile:

Cette seconde est le menu dans leArgent mobile PayPalapplication mobile:

Pouvez-vous dire ce que chacune de ces icônes signifie ?

L'un des problèmes avec ces conceptions d'icônes particulières est qu'elles représentent une fonctionnalité obscure de l'application, comme celle du code QR qui apparaît en premier dans la rangée des icônes du menu Venmo.

Un autre problème est que les dessins ne sont pas si originaux. Prenez le signe dollar qui apparaît en deuxième à partir de la gauche dans le menu de PayPal. Cela pourrait faire référence à un certain nombre de fonctionnalités de la fintech. Pour cette application particulière, c'est là que les utilisateurs envoient et demandent des paiements.

Il existe très peu d'icônes de menu universellement reconnues. Dans la conception de l'application, je dirais que vous êtes en sécurité en utilisant ce qui suit :

• Maison pour la maison
• Silhouette d'utilisateur pour le compte
• Loupe pour la recherche
• Équipement pour les paramètres
• Cloche pour les notifications
• Hamburger pour le menu

Si vous placez l'une de ces icônes en dehors du menu principal (comme dans les coins supérieur gauche ou supérieur droit de l'interface de l'application), elles n'ont pas besoin d'étiquettes. Dans le menu principal, cependant, chaque icône doit être accompagnée d'une étiquette même si elle est reconnaissable. C'est le seul moyen de s'assurer que chaque utilisateur comprend quelles fonctionnalités sont disponibles dans l'application et où les trouver.

2. N'hésitez pas à inclure une icône d'accueil

Sur les sites Web, il n'est plus courant d'inclure une icône d'accueil dans le menu. La plupart des utilisateurs savent désormais que le logo de la marque les ramènera chez eux. Et tant qu'il apparaît dans le coin supérieur gauche, ils n'auront aucun problème à retrouver rapidement leur chemin.

Dans les applications mobiles fintech, cependant, il semble assez courant de nommer le premier lien de menu "Accueil" commeNerdPortefeuilleEst-ce que:

50% de ceux que j'ai regardés avaient leurs menus configurés de cette façon. Puis il y en avait commementhequi a utilisé l'icône de la maison, mais lui a donné une étiquette différente :

Au lieu de "Accueil", l'icône de la maison est associée à une étiquette "Aperçu".

J'aime que "Aperçu" soit plus précis et clair sur ce qui se trouve dans le premier onglet, même si je me rends compte que ce n'est peut-être pas toujours un descripteur pertinent pour le lien du menu principal. J'ai vu beaucoup de menus commençant par "Comptes" dans mes recherches. Et il est certainement plus logique de les étiqueter comme tels.

Mais si votre premier onglet est un tableau de bord ou un flux quelconque, je pense que le générique "Accueil" est probablement le meilleur. La finance est déjà un sujet angoissant pour de nombreux utilisateurs et la dernière chose que vous voulez est de rendre les fonctionnalités de l'application trop techniques. Et "Home" leur donne un espace sûr et fiable où aller lorsqu'ils ont fini d'utiliser les autres fonctionnalités.

3. Utilisez des étiquettes courtes et des icônes descriptives

Si vous souhaitez créer des utilisateurs plus confiants, les fonctionnalités de votre menu doivent être limpides. Il y a deux choses qui peuvent aider à cela :

1. Utiliser une iconographie distinctive et descriptive.Avec une icône unique pour chaque onglet, les utilisateurs sont moins susceptibles d'être confus ou de se tromper lors de l'utilisation du menu.

2. Faites des étiquettes aussi courtes que possible. Les espaces entre chacune des icônes vont être importants pour deux raisons. Le premier est qu'ils améliorent la capacité d'un utilisateur à se concentrer sur chaque onglet. La seconde est que des écarts plus importants augmenteront la confiance des clics. Des étiquettes plus courtes vous aideront à ouvrir cet espace.

Prenez, par exemple,Banque d'AmériqueLe menu de l'application :

Les trois premières icônes contiennent toutes le signe dollar ($). Bien que l'icône "Transfert" soit la plus unique des trois, elle contient toujours un élément de flèche similaire à "Bill Pay". Et "Comptes" et "Bill Pay" sont presque identiques, à l'exception de la flèche vers la droite dans l'icône "Bill Pay".

Regardons commentDécouvrirgère une structure de menu similaire :

Intéressons-nous d'abord aux différences entre ces trois labels : Virement, Dépôt et Paiement. Ils sont tous écrits succinctement dans l'application Discover. Une fois les détails redondants supprimés, les utilisateurs pourront sélectionner rapidement l'onglet contenant la fonctionnalité dont ils ont besoin.

Parlons maintenant de ces icônes. Alors que "Transfert" et "Payer" de Discovery contiennent tous deux le signe dollar, les conceptions sont complètement différentes et décrivent mieux ce que fait la fonctionnalité. Le « dépôt » est intéressant car il n'adopte pas une approche axée sur l'argent. Au lieu de cela, il se concentre surcommentles utilisateurs utiliseront cette fonctionnalité, c'est-à-dire en prenant une photo de leur chèque pour le déposer dans l'application.

Si vous pouvez concevoir des icônes qui décrivent avec précision la fonctionnalité, les utilisateurs seront moins dépendants des étiquettes. Cela dit, il est indispensable d'avoir des étiquettes claires et concises en guise de sauvegarde.

4. Test A/B Solide vs Styles de Contour

Environ 75% des applications fintech que j'ai consultées ont conçu leurs icônes dans un style de contour de la manièreBord MerrillEst-ce que:

À mon avis, ces icônes de menu sont plus belles que les styles d'icônes solides, comme ceux que l'on trouve dans leApplication Stripe Dashboard:

Avec moins de détails, les icônes décrites apparaissent plus nettes et plus faciles à comprendre. Mais ce n'est que mon avis personnel et mes préférences. Cela semble également être le cas pour de nombreux concepteurs, compte tenu de la prévalence du choix de conception d'icônes.

Cela dit, j'étais curieux de voir s'il y avait quelque chose à cela, si les utilisateurs préféraient vraiment l'apparence des icônes décrites par rapport aux icônes solides. Ou si, peut-être, ils étaient meilleurs pour la convivialité.

Une thèse de maîtrise et une étude intituléeIcônes remplies ou contours : l'impact du style d'icône sur la convivialité examiné cette question et a constaté qu'il n'y avait vraiment pas de différence perceptible entre les deux. La seule exception était celle-ci :

"En moyenne sur les 20 formes d'icônes uniques utilisées dans le test, le style de contour a conduit à des temps de tâche légèrement plus longs, mais uniquement lorsque les icônes étaient affichées en blanc sur un fond noir."

Si vous voulez assurer une convivialité maximale de votre application fintech, je vous recommandeTest A/B les deux styles, que vous utilisiez un thème clair ou foncé. Bien que j'aie le sentiment que les icônes décrites peuvent faire mieux, je ne pense pas que vous devriez exclure la possibilité d'une augmentation de la vitesse d'utilisation ou de la confiance des clics lors de l'utilisation d'icônes solides.

5. Compte pour l'accessibilité

L'accessibilité des applications est un must de nos jours. Et bien que vous connaissiez les pièges d'accessibilité courants à éviter lors de la conception d'une application, il existe certains problèmes d'accessibilité auxquels vos icônes de menu fintech peuvent être plus sensibles.

Par exemple, les utilisateurs daltoniens peuvent avoir du mal à s'orienter dans l'application si leonglet sélectionnéressemble à "Marchés" dans leApplication Kraken Pro:

Les utilisateurs identifieront l'onglet sélectionné par l'icône et la couleur du texte. Ainsi, "Marchés" est bleu tandis que les autres onglets sont en gris foncé standard. Certains utilisateurs daltoniens peuvent ne pas remarquer cette différence.

Une meilleure pratique serait d'utiliser un surligneur de boîte de la manièreQuickBooks Travailleur autonomeEst-ce que:

Même si l'icône et l'étiquette du « tableau de bord » sélectionné passent du gris au vert, c'est la boîte ombrée qui l'entoure qui permettra à tous les utilisateurs de repérer la différence entre les icônes.

Pendant que nous sommes ici, nous devrions aborder d'autres problèmes d'accessibilité possibles liés à la conception des icônes. Comme:

Contraste des couleurs—Le gris clair de QuickBooks pourrait ne pas être suffisant pour que les utilisateurs malvoyants puissent lire facilement.

Espacement —QuickBooks fait un très bon travail avec cela, mais je recommanderais de raccourcir les étiquettes ou de rétrécir légèrement le texte afin qu'ils s'alignent avec les icônes correspondantes. Semblable à ce que nous voyons dans leApplication PayPal pour les entreprises:

Tout cet espace blanc supplémentaire contribuera à améliorer la lisibilité et la confiance des clics. Assurez-vous simplement de ne pas être trop petit avec les icônes ou les étiquettes.

Une dernière chose à laquelle penser estemplacement etconception indépendante de l'âge . Par exemple, PayPal for Business utilise des factures papier pour l'icône "Argent". Mais qu'en est-il des pays qui ont une monnaie sans papier ? Et qu'en est-il des jeunes générations qui grandissent avec des cartes de crédit et des applications de trésorerie numérique au lieu de dollars et de pièces ?

Bien que cela revienne à l'idée d'utiliser des icônes reconnaissables, vous devez également tenir compte de leur caractère persistant. Afin de pérenniser vos applications fintech, assurez-vous de ne pas utiliser d'iconographie obsolète ou non pertinente.

Emballer

Les gens veulent se sentir en sécurité quand il s'agit de leur argent . C'est pourquoi il est si important que les applications fintech soient conçues dans un langage visuel et verbal auquel elles peuvent faire confiance.

L'iconographie du menu joue un rôle particulièrement important à cet égard, car les utilisateurs vont s'y référer souvent pour s'orienter vers ce qu'il y a dans l'application et prendre des mesures. Il est donc préférable de pécher par excès de prévisible et ennuyeux plutôt que d'unique ou créatif lorsqu'il s'agit de concevoir vos icônes fintech.