Stratégies de polices pour les sites Web et les applications Fintech

Stratégies de polices pour les sites Web et les applications fintech : meilleures pratiques et tendances actuelles utilisées par les principales sociétés financières.

Lorsque vous choisissez une typographie pour un site Web ou une application mobile, vous souhaitez atteindre certains objectifs. Vous avez besoin de polices lisibles et lisibles, ainsi que du style et de la personnalité de la marque.

Pour certaines niches, vous pouvez vous amuser beaucoup avec la typographie, par exemple en mélangeant des polices de script ludiques avec des polices simples sans empattement. La fintech ne fait pas partie de ces niches.

Cela dit, ce n’est pas parce que la typographie fintech appelle une approche plus sérieuse que vous devez simplement utiliser Roboto et l’appeler un jour. Bien qu’il existe certainement certaines bonnes pratiques à suivre lors de la sélection des polices, les concepteurs de fintech font des choix intéressants de nos jours.

Dans cet article, je vais vous donner quelques conseils sur le choix des polices fintech. Ensuite, je vais partager ce que j’ai observé après avoir visité les sites Web de quelques dizaines de sociétés de technologie financière et comment leurs choix peuvent être ceux que vous souhaitez intégrer dans votre propre processus de sélection de typographie.

Directives générales pour le choix des polices pour la conception Fintech

Que vous conceviez un produit fintech ou que le site Web le commercialise, il existe certaines bonnes pratiques à suivre lors du choix de la typographie :

Choisissez des polices avec sécurité intégrée

La sécurité dans la conception fintech ne se limite pas à mettre en œuvre des mesures de sécurité pour assurer la sécurité des utilisateurs, puis à appliquer des marques de confiance à l’interface utilisateur pour les assurer de leur sécurité. Les utilisateurs doivent également savoir que la société fintech est une société avec laquelle ils sont en sécurité, de sorte que la conception doit également en tenir compte.

Lorsque vous recherchez des polices qui renforcent cette idée, choisissez celles qui donnent l’impression :

• Moderne
• Sûr
• Fiable
• Transparent
• Professionnelle
• Fort
• Robuste
• Fiable
• Équilibré

Cela signifie qu’il n’y a pas de polices de script, de polices de contour, de polices vintage, de polices rustiques, de polices décoratives, etc. Serifs et sans serifs vont être vos meilleurs amis dans la conception fintech.

Le formulaire doit suivre la fonction

La typographie joue un rôle essentiel dans les applications et sur les sites Web. C’est pourquoi la forme doit toujours suivre la fonction lors de la sélection des polices.

Avant tout, la lisibilité et la lisibilité ne peuvent être compromises au profit d’une conception de police plus attrayante ou expérimentale. Bien que la lisibilité soit toujours un élément important pour rendre une interface utilisable, la lisibilité compte beaucoup dans la fintech.

Étant donné que les applications fintech ont généralement un mélange sain de lettres, de chiffres et de ponctuation, chaque caractère doit être distinct. Si l’un des caractères d’une police est difficile à distinguer les uns des autres, les utilisateurs peuvent avoir du mal à comprendre ce qu’ils lisent ou à mal l’interpréter complètement.

Lorsque vous envisagez des polices, examinez le jeu de caractères complet. Un bon point de départ consiste à comparer le « I » majuscule, le « l » minuscule et le chiffre « 1 ». Si vous avez du mal à les distinguer les uns des autres, vous aurez besoin d’une police différente.

Envisagez une police différente pour les nombres

La lisibilité est tout aussi importante pour les chiffres que pour les caractères spéciaux dans la fintech. Prenez, par exemple, les symboles monétaires. Une police qui utilise des versions non reconnaissables de ces symboles pourrait entraîner des problèmes de compréhension ou, à tout le moins, ralentir les choses pour le lecteur.

Vous devez également tenir compte de la façon dont les chiffres et les caractères spéciaux s’alignent dans l’interface utilisateur. Par exemple, supposons que vous construisez une application de budgétisation. De nombreuses pages contiendront des lignes de données ou de calculs budgétaires. Si vous n’utilisez pas une police de nombres à espacement fixe, les données ne s’aligneront pas sur les décimales, ce qui créera des problèmes pour les utilisateurs finaux.

Bien que vous souhaitiez toujours réduire au minimum le nombre de polices sur la plupart des sites et applications, la conception fintech peut vous obliger à utiliser une police supplémentaire uniquement pour les chiffres et les caractères spéciaux.

Assurez-vous qu’ils sont multilingues

À moins que vous ne conceviez un produit fintech pour les utilisateurs d’un seul pays où ils parlent une langue et utilisent une devise, vous aurez besoin d’une police avec prise en charge multilingue.

Cela peut rendre plus difficile la recherche de polices car elles n’ont pas toutes des jeux de caractères cyrilliques ou pour les langues de droite à gauche comme l’hébreu ou l’arabe. Cela dit, si l’application doit être commercialisée en tant que solution internationale, il est pertinent que votre police prenne en charge d’autres langues.

Voici quelques conseils pour localiser la fintech conception d’applications spécifiquement pour les utilisateurs d’Amérique latine.

Comment les grandes entreprises Fintech gèrent-elles la typographie ?

J’ai passé l’après-midi à inspecter les sites Web de 25 grandes sociétés de technologie financière pour voir quels types de polices elles utilisent. Bien que cela ne garantisse pas qu’ils soient les mêmes que ceux utilisés dans leurs applications, je soupçonne qu’ils sont au moins représentatifs de la typographie intégrée à l’application.

Ce qui suit ne sont rien de plus que mes observations, donc ils ne sont pas censés être des règles que vous devez respecter. Cependant, j’ai trouvé quelques tendances intéressantes que vous voudrez peut-être garder à l’esprit lorsque vous choisirez des polices pour la fintech à l’avenir :

1. Les polices Serif sont rares

Tous les sites Web que j’ai examinés, à l’exception d’un seul, utilisent une association de polices sans empattement/sans empattement. Le seul site Web qui utilise un empattement non sans est Braintree:

La police d’en-tête utilisée ici est appelée B Proportional et c’est un empattement de dalle à espacement fixe un peu comme Courier. La police de paragraphe est une police sans empattement simple et directe appelée Avenir Next.

Je trouve intéressant que ce soit le seul exemple d’empattement que j’ai pu trouver n’importe où. Même dans ce cas, ce n’est pas un empattement comme le sont Times New Roman ou Georgia. Les polices Serif ont tendance à se sentir classiques et formelles. Cette police à espacement fixe semble plus mécanique qu’autre chose.

Pourquoi est-ce que les conceptions fintech – et même les conceptions bancaires financières – se sont éloignées des empattements ? Même une entreprise comme American Express qui existe depuis toujours utilise la police Benton Sans pour ses en-têtes et Helvetica Neue pour le corps du texte :

C’est peut-être parce que les sociétés financières veulent que leurs marques et leurs produits soient considérés comme modernes et conviviaux au lieu d’être obsolètes ou rigides. C’est une tendance intéressante et quelque chose à garder à l’esprit lorsque vous décidez entre empattements et sans empattements pour vos produits.

2. Les polices reflètent le côté FIN de l’entreprise, pas tellement la technologie

En y allant, je m’attendais à ce qu’au moins un quart des sites que j’ai consultés utilisent une police futuriste pour le texte d’en-tête. Je n’ai pas trouvé un seul exemple de cela.

Maintenant, certaines polices futuristes sont un peu là-bas. Ce n’était pas ce que je m’attendais à voir. Cependant, si vous regardez un site comme dafont.comvous y verrez un certain nombre d’options relativement modérées (pensez à quelque chose comme Conthrax, Aero ou même Exo 2) :

Je me demande si c’est parce qu’une police futuriste semblerait trop abstraite et intimidante. Pour une marque technologique comme Tesla, ce style de typographie a beaucoup de sens. Leurs produits ont un côté avant-gardiste et exclusif.

Avec la fintech, vous voulez tout le monde sentir que le produit leur est accessible. J’ai donc peut-être eu tort de supposer que l’accent serait mis sur la technologie lors du style des polices du site Web ou du produit.

3. La majorité des sites Fintech utilisent la même famille de polices

Quatre des 25 sites fintech que j’ai visités utilisaient des polices de différentes familles :

Tous les autres sites fintech avaient des polices de la même famille ou sous-familles :

L’une des meilleures raisons de concevoir un site ou un produit fintech avec des polices de la même famille est de créer une ambiance plus harmonieuse et stable. Il semble que c’est ce que recherchent de nombreux concepteurs de technologies financières.

Cela dit, avec certaines polices, il existe une grande variété dans la façon dont les variantes de style apparaissent même lorsqu’elles sont placées côte à côte. Il suffit de regarder l’image du héros Betterment pour en avoir un exemple :

Si vous souhaitez créer une harmonie dans votre conception typographique, mais que vous souhaitez éviter que l’interface utilisateur ne soit trop monotone, il vous sera utile de trouver une grande famille de polices qui le permette.

Betterment utilise une famille de polices appelée GT Amérique pour faire ça, d’ailleurs. Il y a six sous-familles en son sein : compressé, condensé, standard, étendu, étendu et mono (espacé). Et il y a 84 styles au total disponibles.

4. Les polices sécurisées pour le Web ne semblent pas être une priorité

La création d’une expérience cohérente d’un utilisateur à l’autre est un aspect important de la conception UX. Cependant, la seule façon de garantir que cela se produise en matière de typographie est d’utiliser des polices sécurisées pour le Web, compatibles avec tous les navigateurs et ne nécessitant pas de police de secours.

Le principal problème avec l’utilisation de polices sécurisées pour le Web est qu’elles sont ennuyeuses. Ils incluent des polices telles que :

• Times New Roman
• Géorgie
• Tahoma
• Helvétique
• Arial
• verdane
• Courrier Nouveau

Une solution de contournement courante que j’ai vue ces jours-ci consiste à utiliser Google Fonts. Ils ne sont pas nécessairement garantis de s’afficher sur tous navigateur, mais je pense que suffisamment d’entre eux existent depuis assez longtemps pour être considérés comme des paramètres par défaut du système.

Dans mes observations sur les sites Web de fintech, cependant, personne n’utilise de polices traditionnelles sécurisées pour le Web, et beaucoup d’entre eux n’utilisent pas non plus Google Fonts. BlockFi et Avant utilisent Open Sans. Gemini et Brex utilisent l’Inter. Ally utilise Lato. C’est tout pour Google Fonts.

Alors, pourquoi cela se produit-il avec la typographie fintech ? Je ne pense pas que ce soit parce que personne ne se soucie de l’accessibilité ou quoi que ce soit du genre. Je pense que c’est probablement plus que les polices utilisées dans la fintech sont de base sans empattements. Il n’y a pas une tonne de complexité dans ces polices, donc avoir recours à l’affichage d’une police de secours peut ne pas être considéré comme un gros problème.

Par exemple, voici le texte d’en-tête qui apparaît dans l’image principale de Mint :

Il s’agit d’une police appelée Avenir. Lorsque j’ai inspecté le code dans Google Chrome, il m’a dit que la police de sauvegarde était Helvetica. Voici comment ce même titre apparaît dans Fonts.comL’échantillon d’Helvetica Black :

Si vous savez ce que vous cherchez, vous pouvez voir les différences entre ces deux polices. Comme le « o » rond et l’axe des x grand dans Avenir. Cela dit, je doute que de nombreux utilisateurs de Mint remarquent une différence s’ils rencontraient ces polices sur différents navigateurs. Je doute également que cela changerait la façon dont ils interprétaient le style ou la personnalité de la marque, car leur design est assez proche.

Une autre raison pour laquelle je pense que certaines marques de technologies financières n’utilisent pas les polices Web sécurisées ou même Google Fonts est qu’elles téléchargent les fichiers de polices directement sur le site. Bien que ce ne soit généralement pas une bonne chose pour les performances, le concepteur n’a peut-être pas d’autre choix s’il utilise des polices personnalisées, ce qui est le cas ici. Charles Schwab utilise Charles Modern. Klarna utilise Klarna. PayPal et Xoom utilisent PayPal Sans. Etc.

En donnant aux navigateurs les fichiers exacts à afficher, aucune sauvegarde n’est nécessaire.

Emballer

Bien que les polices utilisées par les marques fintech varient considérablement, les règles qu’elles suivent ne semblent pas beaucoup varier. Des directives de base que j’ai décrites plus tôt aux observations de première main que j’ai notées sur les principaux sites Web de fintech d’aujourd’hui, il semble y avoir certaines pratiques que tout le monde a acceptées.

Cela a du sens compte tenu de la nature délicate de la fintech. Bien que ces entreprises aient besoin de se tailler une identité et une niche uniques, elles ne peuvent pas se permettre d’effrayer les utilisateurs potentiels ou actuels avec une conception risquée, qui inclut leurs choix typographiques.

Ensuite, considérez comment concevoir des icônes de menu fintech.