Conseils de conception d'image de héros pour les sites Web Fintech

57% du temps que les gens passent sur notre page d'accueil fintech est consacré au contenu au-dessus du pli. Sachant cela, quelle sorte de première impression pensez-vous que votre image de héros fait aux utilisateurs potentiels? Si vous n'êtes pas convaincu que c'est une bonne solution, voici 5 façons de résoudre ce problème.

Quand il s'agit de concevoir le site Web de votre application fintech, il y a un composant en général que vous devez faire attention à créer: L'image du héros de la page d'accueil .

C'est généralement la première chose que les gens regardent lorsqu'ils accèdent à votre site Web et cela pourrait de manière réaliste faire ou défaire leur décision de cliquer sur le bouton "Télécharger" ou "S'inscrire".

In cet article, nous allons examiner ce qui fait une conception d'image de héros digne d'un clic pour les fintechs avec quelques exemples que vous pouvez suivre.

Conception de l'image de héros pour la Fintech

Quel est le but de l'image de héros ? Semblable aux écrans de démarrage pour les applications, l'image du héros du site Web vous permet de fournir aux utilisateurs une introduction attrayante et descriptive du produit. S'il ne communique pas rapidement ce que fait le produit et ne fait pas une offre alléchante, vous allez probablement perdre beaucoup de monde.

Nous allons laisser la copie accompagnant l'image à votre rédacteur. Pour l'instant, concentrons-nous sur cinq choses que vous pouvez faire pour améliorer la conception de vos images de héros et encourager plus d'inscriptions aux applications dans le processus.

1. Prenez-le au pli

Une étude NNG en 2018 a examiné la corrélation entre les parties d'une page Web et l'attention portée à chacune.

Voici ce qu'elle a trouvé:

57% du temps total passé sur une page est concentré sur le contenu au-dessus du plier. Bien que cela puisse suggérer qu'il est préférable de raccourcir l'image du héros pour que plus de contenu et de sections puissent être visibles à la fois, je dirais que cela signifie le contraire.

La première raison est que les internautes sont intelligents. Ils savent que si un site Web les empêche de faire défiler – ce qui est un instinct naturel à ce stade – ils doivent accéder à la navigation. Donc, ce n’est pas comme si la visibilité de la section suivante du contenu fournissait un signal pour faire défiler.

Deuxièmement, l’image du héros mérite d’être vue sans distractions. Lorsque vous permettez à plus de contenu de sortir au-dessus du pli, vous risquez de donner aux visiteurs trop de choses à traiter en même temps. Et avec une solution technique comme une application financière, cela pourrait être un problème.

Au lieu de cela, faites vraiment la première impression qui compte. Concevez une bannière simple, mais accrocheuse et visuellement descriptive pour correspondre à l'argumentaire de vente concis et convaincant et au CTA de votre rédacteur.

Voici un exemple de la façon de procéder à partir de Honeydue sur le bureau:

Il ne fait aucun doute ce que cette application est pour, et l'aperçu permet même aux utilisateurs de se faire une idée de sa facilité d'utilisation.

Sur mobile, la même image de héros exacte est utilisée. La seule différence est que l'espace blanc environnant a disparu:

La bannière ne va pas jusqu'au pli, mais ce n'est pas grave. Bien que nous puissions voir la partie la plus sombre de la section suivante, cela n'enlève rien aux visuels attrayants ainsi qu'à la promesse qui se trouve au premier plan.

2. Laisser les utilisateurs avec un seul choix clair

Je sais qu'il est tentant de présenter aux utilisateurs potentiels une variété d'options:

• En savoir plus sur le produit
• Télécharger sur l'App Store
• Essayer la démo

Mais, vraiment, si vous connaissez la personnalité de votre utilisateur, vous connaissez le chemin qu'il va probablement parcourir de la découverte à la conversion. Et sachant cela, votre image de héros devrait leur présenter le CTA qui a le plus de sens pour tous les visiteurs.

Prenons l'exemple de Venmo :

Voici comment les gens peuvent voir cette image de héros en fonction de l'endroit où ils se trouvent dans l'entonnoir de vente :

Les visiteurs du haut de l'entonnoir (ceux qui sont en phase de découverte) examineront ceci et penseront:

• «Des paiements sociaux rapides et sûrs» semble prometteur.
• On dirait que je peux payer et être payé vraiment facilement avec cette application.
• Hmmm… Je ne suis pas sûr d'être prêt à m'inscrire pour le moment. Permettez-moi de faire défiler vers le bas et de voir ce qu'il y a d'autre.

Même s'ils ne sont peut-être pas prêts à se convertir, les graines ont été plantées. Ils savent ce qu'ils peuvent potentiellement obtenir en téléchargeant cette application et ils savent où et comment commencer.

Visiteurs en bas de l'entonnoir (ceux qui sont prêts à passer à l'action) qui reviennent sur le site ou page examinera ceci et pensera:

• Oui, cela semble parfait pour mes besoins.
• Plus de 60 millions d'utilisateurs me seront utiles à mesure que j'étendrai mon réseau de personnes pour payer et être payé par.
• Très bien, allons-y.

Si la bannière contenait une variété de CTA, cependant, le choix pourrait ne pas être aussi rapide ou aussi clair à faire. Allez-y et faites ce choix pour eux en simplifiant les étapes suivantes. Les gens qui sont encore sur la clôture savent ce qu'ils doivent faire pour mieux s'informer et peuvent aller chercher plus d'informations sur l'application tandis que les autres peuvent instantanément cliquer pour commencer.

3. Choisissez la bonne image

Il n'y a pas de formule spécifique pour concevoir un arrière-plan ou des images pour votre bannière de héros fintech. Cela dit, voici quelque chose à penser avant de vous décider sur un design:

Quel est le but du produit?

J'ai vu des images de héros fintech où des utilisateurs souriants prennent place à l'avant du application qui est à peine visible sur un appareil placé en arrière-plan. Voici ce que je vais dire à ce sujet:

Bien sûr, vous voulez que vos utilisateurs soient plus heureux une fois qu’ils commencent à utiliser votre application. Cependant, ce n’est généralement pas l’objectif final. Les utilisateurs téléchargent et / ou achètent des applications fintech à des fins plus pragmatiques.

Ils ont un problème dont ils ont besoin pour être résolu par une solution hautement technique. Gestion budgétaire. Investir. Génération de factures. Et votre application est conçue pour éliminer cette complexité de leur vie.

N'est-il donc pas plus logique de placer votre produit au premier plan et de leur montrer tout de suite ce qu'ils peuvent accomplir avec lui? Par opposition à mettre en évidence une réponse superficielle à l'utilisation de l'application, comme des gens souriants autour d'une table de conférence?

Voici un exemple de Acorns qui, je pense, fonctionne bien:

Le design est simple, propre et très descriptif. Il ne faudrait pas plus de quelques secondes à un visiteur pour se rendre compte qu'Acorns leur donne une application et une carte VISA avec laquelle faire fructifier leur argent.

Si vous sentez que quelque chose d'aussi simple et axé sur la technologie n'est pas conforme à votre la marque, c'est très bien. Il existe d'autres moyens de gérer la conception de l'arrière-plan et des images de votre image de héros.

Voici un exemple animé de Betterment :

Cette conception est unique en ce qu'il ne s'agit pas simplement d'une image d'un smartphone ou d'un moniteur de bureau avec le app dessus. Celui-ci montre en fait aux gens à quel point il est facile de se fixer des objectifs, ce qui est un composant essentiel d'une application comme celle-ci. Et cela vous évite d'avoir à vous contenter d'une photo de personnes qui ne seront pas très efficaces pour vendre la solution .

4. Ajoutez des marques de confiance significatives

Chaque fois que vous créez une application impliquant de l'argent, la confiance doit être intégrée à la conception .

Avec la fintech, il existe plusieurs façons de gagner la confiance de

Prenez une application de gestion de l'argent comme Emma :

Regardez sous les boutons de l'App Store et vous trouverez la marque de confiance d'Emma. Il s'agit d'une note de 4,7 étoiles (par opposition à un 5 étoiles irréaliste) d'après plus de 3 000 avis sur l'App Store. Quelqu'un qui se demande s'il vaut la peine de franchir le pas pourrait avoir besoin de voir cela pour être convaincu de convertir.

Voici un autre type de marque de confiance trouvé sur l'image du héros FreshBooks :

FreshBooks fournit aux utilisateurs potentiels des liens vers trois de ses pages de politique:

• Conditions de Service
• Politique de confidentialité
• Sauvegardes de sécurité

Et il le fait juste à côté du tout premier formulaire et CTA sur son site Web. Comme nous le verrons dans le conseil n ° 5, il s'agit d'un bien meilleur moyen d'informer les utilisateurs sur les questions de confidentialité tout en gagnant leur confiance dès le début.

Bien sûr, il existe d'autres moyens d'intégrer des marques de confiance dans cette section. Vous voudrez peut-être inclure un avis sur le fait d'être membre de la FDIC, un sceau de certification de confidentialité TRUSTe ou un témoignage d'une organisation puissante ou d'une publication qui se porte garant de l'application. Tout dépend de la raison pour laquelle les utilisateurs doutent ou s'inquiètent de passer à l'étape suivante et du type de créateur de confiance apaisera ces craintes.

5. Minimiser les distractions

Tout comme c'est une bonne idée de concevoir l'image de votre héros pour qu'elle touche le pli, il est également sage de supprimer toutes les distractions qui empêcheraient les visiteurs de se concentrer sur l'image du héros.

Prenons l'exemple de ] Blend :

Je suis prêt à parier que les cartes thermiques et les enregistrements des utilisateurs révéleraient que les visiteurs sont immédiatement attirés par les messages contextuels au bas de l'écran au lieu des image de héros.

Celui dans le coin est, bien sûr, un avis essentiel à partager avec les visiteurs. Cependant, compte tenu de l'omniprésence de ces avis de consentement sur les cookies, il y a de fortes chances que la plupart des visiteurs acceptent aveuglément les conditions sans tenir compte des ramifications de cette décision. Il existe une meilleure façon de gérer cela, que je vais expliquer ci-dessous.

L'autre distraction fait la promotion d'un rapport Forrester. Il y a deux raisons pour lesquelles celui-ci doit disparaître.

Pour commencer, il ne peut pas être utilisé tant que les visiteurs n'ont pas traité l'avis de consentement du cookie. Deuxièmement, quelque chose comme celui-ci devrait jouer un rôle secondaire par rapport à l'objectif principal du site (c'est-à-dire transformer les visiteurs en utilisateurs payants), bien qu'il ne soit pas conçu de cette façon.

Cela empire sur mobile:

C'est la première chose que les visiteurs voient lorsqu'ils accèdent au site. Seul le titre est visible au-dessus du grand avis de consentement aux cookies.

Bien que cet avis soit nécessaire pour la conformité au RGPD et au CCPA, rien n'indique qu'il doit être donné à la seconde où quelqu'un accède au site. En fait, il est probablement préférable d'insérer cet avis lorsque cela devient pertinent – comme quelqu'un remplissant un formulaire ou effectuant un achat.

Voici le deuxième problème avec le site mobile de Blend:

Une fois que les visiteurs ont traité la barre de consentement des cookies, ils voient la grande barre bleue faisant la promotion du rapport Forrester. Pourtant, l'image du héros reste compromise car environ un tiers de l'écran est couvert par cette fenêtre contextuelle collante.

Cette bannière ne devrait apparaître que sur les pages où cela est pertinent ou, à tout le moins, une fois que les visiteurs sont plus bas sur la page d'accueil . Il n'y a aucune raison pour que le message principal du site soit dissimulé comme ceci.

Ce n'est qu'après que les deux fenêtres pop-up ont été supprimées que les visiteurs mobiles voient une partie de l'image du héros:

Même alors, l'image et le bouton «Demander une démo» sont cachés sous le pli.

Plutôt que occupent tant d'espace précieux et tant de secondes précieuses pour capter l'attention des utilisateurs potentiels, écarter les distractions.

Récapitulation

Compte tenu du temps passé à regarder le contenu au-dessus du pli sur votre page d'accueil, vous devez accorder une attention particulière à la conception de votre image de héros. Faites-le correctement et vous pourrez faire une impression forte et durable auprès des utilisateurs potentiels en quelques secondes. Faites-le mal et vous pourriez les perdre à jamais au profit de la concurrence.

Les cinq conseils ci-dessus vous aideront à éliminer les distractions, à faciliter le processus de prise de décision et à renforcer la confiance afin que la vôtre soit la seule application qu'ils souhaitent utiliser à la fin .