Comment utiliser la typographie et le design pour améliorer l’expérience d’un utilisateur
Qu’est-ce qui rend un site Web ou un e-mail convaincant et agréable à regarder ? Avant de commencer à lire des guides sur des guides sur la création d’une page de destination ou sur la manière de créer l’e-mail parfait, vous devriez peut-être réfléchir de manière simple et minimale pour un changement.
Alors, qu’est-ce qui rend quelque chose comme ça, merveilleux? Est-ce les visuels, les couleurs, la copie… Ou autre chose ?
Eh bien, tout cela va bien, surtout la copie (clin d’œil! ), cependant, il y a quelque chose qui attire l’attention de l’utilisateur: la typographie.
La typographie est le style et l’apparence des imprimés, selon mon bon vieil ami, Google. Le fait qu’il s’agisse d’un type d’art à part entière va sans dire.
Et la typographie est la base sur laquelle toutes sortes de dessins liés à l’écrit sont créés. Cela signifie que vous pouvez le trouver partout: dans les livres, sur les packages, même – et surtout, pour nous – sur les sites Web, les e-mails et les pages de destination.
Cependant, artistique ou non, la typographie est quelque chose qui doit offrir aux utilisateurs une bonne expérience, un peu comme tous les outils. Et les lettres cursives sont peut-être si jolies, mais sont-elles utilisables ?
Voyons comment nous pouvons améliorer l’expérience d’un utilisateur et l’interface utilisateur elle-même, en utilisant une typographie appropriée.
Au début, il y a la police
Imaginez à quel point votre site Web aurait l’air blasé et indifférent et combien il en coûterait à l’expérience de l’utilisateur si votre police ne correspondait pas à la sainte trinité d’une entreprise : votre public cible, le ton de votre marque et vos objectifs.
Choisir la bonne police, c’est un peu comme choisir les rideaux parfaits pour une pièce. Les rideaux collants montrent un mauvais goût, et une police qui ne correspond tout simplement pas peut donner à votre projet un aspect collant au mieux et au pire du spam.
La police est aussi importante que les visuels eux-mêmes, pour créer une impression et repérer les éléments que vous devez identifier, à la fois dans un site Web et dans un e-mail, optimisant ainsi l’expérience de votre utilisateur.
Vous aurez besoin de gras pour les déclarations audacieuses, de lettres cursives et d’une calligraphie intense pour les choses élégantes et pas trop importantes. Des combinaisons comme celle ci-dessous sont indispensables :
appariements de polices de marque
Cependant, je suis obligé de vous avertir d’une chose: trop de polices vous feront perdre la partie. Vous pouvez avoir deux types de polices au maximum, et vous devrez vous assurer qu’elles sont utilisées comme dans l’exemple ci-dessus : plus audacieuses et plus strictes pour le titre, plus raffinées pour le corps de la copie.
Et souvenez-vous de ce qui suit : si nous parlons de votre site Web et non d’une page de destination ou d’un e-mail, vous devriez peut-être penser à utiliser une police standardisée.
Vous voyez, la cursive peut parfois être difficile à lire et un résultat trop artistique peut être beau mais ce n’est pas facile à lire et à comprendre. Pour les clients occupés d’aujourd’hui, qui sont capables de numériser des blocs de texte et de trouver exactement ce qu’ils ont besoin de savoir, afin de gagner du temps, quelque chose de non standardisé peut sembler beaucoup trop d’efforts.
Votre public est plus familier avec Times New Roman, par exemple. Ils peuvent même vous dire où il doit être utilisé et ils sont faciles à parcourir.
De plus, cela pourrait causer un véritable problème de contenu, dans le sens où une police et un format plus artistiques pourraient détourner l’attention de l’engagement du contenu.
Les éléments spéciaux d’une police :
Une police est composée de divers éléments qui peuvent faire ou défaire son utilisation, à peu près. Vous avez différents styles, poids, les travaux ! Alors allons voir de quoi il s’agit :
Vous avez votre famille de polices, tout d’abord. La famille de polices (ou police de caractères) est à peu près la grande catégorie qui contient des polices du même style.
Deuxièmement, vous avez votre poids de police, c’est-à-dire la largeur de chaque caractère. Cet élément sépare la police qui sera utilisée pour créer un titre et celle qui se retrouvera dans le corps du texte.
Troisièmement, le crénage, c’est-à-dire le modèle suivi par les caractères, c’est-à-dire l’espacement entre deux lettres, qui est nécessaire, car vos yeux suivront ce modèle exact.
C’est cet espacement et les marges qui définiront l’élément final, très important :
Le nombre de caractères par ligne. Trop de caractères par ligne et le corps du texte sembleront encombrés, ce qui entraînera une très mauvaise expérience utilisateur.
Trop peu et il faudra plus de temps à l’œil pour atteindre le paragraphe suivant, obtenant exactement le même résultat que celui que j’ai mentionné ci-dessus.
En limitant la longueur, vous améliorez la lisibilité de votre texte. Si la ligne est trop longue, elle ne s’affichera pas correctement sur l’appareil, ce qui signifie que le lecteur ne pourra pas la lire correctement, ce qui entraînera un gâchis, CRO (Conversion Rate Optimization).
Vous devrez trouver un nombre d’or qui fonctionne pour vous sur celui-ci et garder à l’esprit que ce nombre d’or devra s’arrêter à 60 caractères par ligne.
Et un petit indice ici : vous devrez également faire attention à l’ espacement entre les lignes, car il est tout simplement trop facile de relire une ligne ou de l’omettre complètement. Ce qui n’est jamais une bonne pratique, surtout à notre époque où les consommateurs ont tant d’options.
Taille de police et autres cauchemars
Combien de fois avez-vous vu un texte en majuscules et pensé que l’écrivain voulait crier avec colère? Je parie que la réponse est "beaucoup de fois".
Les tailles de police peuvent fonctionner de la même manière que le ton du mot prononcé : les italiques peuvent imiter, les polices en gras peuvent être exigeantes, les majuscules peuvent attirer l’attention, etc.
Par conséquent, un concepteur doit être prudent lorsqu’il choisit une police et un style, surtout s’il a un public diversifié à qui «parler ».
Si vous ne me croyez pas, ouvrez simplement un roman et vérifiez la police. Ensuite, ouvrez un livre pour enfants et faites la même chose.
Tout se résume à ce que j’ai mentionné au début : vous devez attirer votre public cible à travers votre typographie ainsi que la copie et les visuels eux-mêmes.
Mais la taille n’est pas tout ce qui compte. Puisque nous parlons de numérique, votre typographie doit être impeccable sur tous les appareils. Vous devez optimiser pour les mobiles, les tablettes et les ordinateurs de bureau, afin d’éviter que l’utilisateur ne s’embrouille et ne supprime complètement votre contenu.
Gardez à l’esprit que la hauteur est tout aussi importante. Un texte très long ou très court qui a fière allure lors du test de l’affichage sur ordinateur peut ne pas fonctionner correctement sur mobile.
Le plus grand cauchemar de tous est peut-être l’alignement du texte. Dans la culture occidentale, les gens sont habitués à lire de gauche à droite, par conséquent, vous devez être conscient de ce fait et agir en conséquence.
Utilisez l’alignement à gauche pour imiter la façon dont les gens lisent les textes imprimés, et vous êtes prêt à partir.
La même chose ne fonctionnera pas pour votre public cible si celui-ci est situé quelque part à l’est, où la lecture se fait de droite à gauche. Donc, encore une fois, votre public cible est la première chose à considérer avant de prendre une décision.
Les tendances sont vos amies
Vous savez que les meilleures pratiques ne prendront pas le gâteau en matière de typographie et de design, n’est-ce pas ?
Vous pouvez utiliser les meilleures polices, votre alignement pourrait être impeccable, mais sans utiliser les tendances de conception, votre e-mail, votre site Web, votre page de destination, quoi que vous créiez, pourrait toujours rester l’un de vos secrets les mieux gardés.
L’audace est parfois belle
Pensez à MAC par exemple. La marque de beauté aime utiliser du texte en gras et un contraste extrême comme élément :
Cosmétiques MAC
C’est le slogan de la marque et ce depuis toujours. C’est dramatique et vous ne pouvez pas le manquer. Il en va de même pour l’image du héros de leur newsletter :
Infolettre MAC Cosmétiques
La salutation est juste… Là! Si nous devions créer une personne à partir de cette image de héros, ce serait une personne très élégante qui serait très heureuse de vous voir marcher dans la rue.
En outre, envisagez de faire ce qui suit : En plus d’utiliser des lettres en gras, vous pouvez également mettre en surbrillance du texte dans votre conception.
Un peu comme ce que nous faisions quand nous étions enfants avec nos marqueurs sur nos livres. Rappelez-vous combien d’attention cela attirait?
Ce sont deux façons que vous pouvez utiliser pour établir la hiérarchie en matière de conception.
Pimentez le texte !
Les blocs de texte sont parfaits lorsque vous les alignez et que les gens peuvent les lire sans même essayer, mais que se passe-t-il lorsque vous devez vous démarquer de la foule et pimenter un peu les choses ?
Essayez de mélanger les choses en ce qui concerne les titres, avec du texte qui commencera à l’horizontale, se tournera vers la verticale, se transformera en lettres dispersées…
La clé ici est d’engager le visiteur. Et quelle meilleure façon de les engager que d’être ludique et de les faire rechercher ces petits éléments qui les feront jouer un peu.
Gens magiques Gens vaudous
L’image ci-dessus est la visualisation parfaite du point que j’essaie de faire valoir, vu que j’ai dû tourner la tête une ou deux fois sans me perdre. Vous pouvez voir que le principe d’alignement à gauche est toujours évident ici, car vous ne pouvez pas mal lire le nom, à moins que ce ne soit intentionnel et que vous ayez besoin d’un exercice de créativité !
Bits et morceaux de contenu
Quoi que vous fassiez, vous devez toujours garder à l’esprit que le contenu est ce avec quoi vous travaillez et que le contenu est roi. Toujours.
Assurez-vous que la qualité correspond à votre vision et à la fréquence à laquelle vous publiez, téléchargez ou envoyez des e-mails.
Deuxièmement, assurez-vous que votre conception ne détourne pas l’attention du contenu. Par exemple, un bouton CTA doit être en gras et en couleurs contrastées, mais pas au point où le destinataire ne lira pas le message que vous essayez de transmettre.
Allez-y et lisez le contenu, passez du temps avec lui et entrez-y vraiment. Si vous publiez beaucoup de nouvelles choses, elles devront être opportunes, pertinentes et accrocheuses.
Visualisez ce que vous voulez dire. Lisez votre texte à haute voix et assurez-vous que vous créez l’image que vous aviez en tête lorsque vous avez posé les yeux sur les brouillons pour la première fois.
Et un de plus pour la route
Faites très attention aux couleurs que vous allez utiliser. Outre la psychologie des couleurs et la façon dont elle peut affecter l’utilisateur, vous devrez faire attention à deux autres choses :
Numéro un, le daltonisme. N’utilisez pas trop de rouges ou de verts lorsqu’il s’agit de mettre en évidence des informations importantes.
Le daltonisme est une affection assez courante, le daltonisme rouge et vert étant les deux cas les plus courants. Ainsi, en ce qui concerne les CTA et les choses qu’il faut savoir, comme les termes et conditions, par exemple, s’en tenir aux noirs et aux contrastes élevés.
Numéro deux, images et texte clignotants. Les images clignotantes peuvent provoquer des sentiments d’anxiété, elles peuvent distraire l’utilisateur et elles sont plutôt ennuyeuses. Mais ce ne sont pas les principales raisons pour lesquelles vous devriez les éviter.
Les images clignotantes peuvent provoquer des crises d’épilepsie.
En conclusion
Il reste encore beaucoup de non-dits en ce qui concerne la typographie, la conception Web et la propre expérience de l’utilisateur, mais je pense que nous avons couvert les bases ici.
Assurez-vous simplement de sortir des sentiers battus et d’être pertinent sans être le même que tout le monde. Une personne créative comme vous trouvera sûrement un moyen de sortir des sentiers battus !
Et n’oubliez pas de laisser un commentaire avec vos commentaires sur ce post!