Quelle typographie choisir en quelle taille et de quelle couleur ? Où mettre les "call to action" ? Comment faire un bon formulaire de contact ? Autant de questions auxquelles nous vous répondons dans cet article.
Voici un comparatif entre deux textes ayant le même nombre de caractères mais pas la même lisibilité :
Afin que tous les internautes puissent voir correctement votre contenu, vous devez respecter une règle : le contraste entre la couleur de fond de votre page web et la couleur de votre texte doit être au minimum de 4,5:1.
Prenons l'exemple d'un site internet avec un fond sombre :
Vous pouvez retrouver plus de détails sur les règles "The W3C's Web Accessibility Initiative" ici
La couleur n'est pas perçu de la même façon par tout le monde, elle ne doit donc pas être le seul élément pour transmettre une information. L'exemple d'un message d'erreur est parfait pour illustrer ce point. Une simple couleur rouge ne doit pas suffire à annoncer une erreur, un icon attention ou une croix doivent s'y ajouter.
Pensez aux polices d'écriture simples et sans serif pour vos paragraphes, elles sont très lisibles et offrent de nombreuses graisses pour mettre des mots en gras ou encore des citations en italique.
Voici une petite sélection de typographies disponibles gratuitement sur Google Font et ayant une belle lisibilité :
Pour vos titres, permettez-vous un peu de folie ! Utilisez une typographie serif plus classique. Cela va aider à la lecture car l'œil va reconnaitre plus rapidement les titres des paragraphes.
Voici une petite sélection de typographies disponibles gratuitement sur Google Font et ayant une belle lisibilité :
Vous souhaitez améliorer le contenu de vos textes? C'est par ici.
Il est important d'avoir le menu toujours accessible, surtout si votre page web est longue. Avoir un header fixe dans la page évite à l'utilisateur de devoir scroller en haut de page pour avoir le menu.
Ce bouton est votre "Call to action" : inscription / connexion / contact / souscription ...
Prenons l'exemple d'un site qui possède un blog : le header contiendra un lien vers l'index du blog qui, lui, va afficher tous les articles du blog. Mais dans le footer, on peut choisir de mettre en avant certains articles importants avec des liens directs.
Le fil d'Ariane permet au lecteur de se retrouver dans l'arborescence de votre site. Il s'agit d'une menu, souvent horizontal, que l'on retrouve au dessus du corps du site. Il va indiquer le chemin par lequel l'utilisateur est passé pour arriver à la page où il se trouve. En e-commerce, on peut retrouver ce type de fil d'Ariane :
Accueil -> Collection hiver -> Femme -> Manteau -> Article
Le champ de recherche ou les tags vont aider votre lecteur. Il pourra rechercher par mots-clés et par tag ce dont il a besoin. Cela aidera sa navigation sur votre site ou votre blog par exemple.
Respecter les "standards" du web n'est pas une mauvaise chose, cela permet une navigation plus fluide. Certains automatismes se sont créés chez les internautes, utilisons-les ! Comme :
Les internautes ont l'habitude de se fier au visuel pour voir quels contenus sont importants et/ou cliquables.
Votre call to action doit, comme son nom l'indique, appeler à l'action. Le texte que vous y mettrez sera important mais le design aussi. Le choix de la couleur du bouton "Call to action" va attirer ou non le regard. Chaque couleur diffusera un message différent. Certaines couleurs comme le rouge, le vert clair ou le bleu clair vont inciter l'internaute à cliquer.
Retrouver un guide des couleurs sur ce lien.
Un bon moyen de faire ressortir votre "Call to action" c'est d'utiliser les overlaps. Cela va mettre en avant votre section "Call to action" grâce à une coupure du fond en 2 couleurs. Voici un exemple :
Pour améliorer le SEO de vos pages sur mobile, consultez cet article : Vitesse de chargement des pages.
Aujourd'hui, plus de la moitié des recherches internet se font depuis un mobile ou une tablette. Un design responsive est alors primordial ! Il ne faut pas décevoir vos lecteurs avec une expérience utilisateur frustrante ou un site lent à charger.
L'optimisation d'un site sur ordinateur n'est pas la même que celle sur mobile ! Attention, votre site internet peut être très optimisé sur ordinateur mais pas sur mobile.
Cela passe par :
Il faut penser que tous les écrans de mobiles ne sont pas grands et que toutes les personnes n'ont pas de petites mains ! Alors pour éviter que certaines personnes cliquent sur 2 boutons à la fois, il y a des règles à respecter :
Lorsque vous demandez par exemple à votre utilisateur de vous contacter via un formulaire, vous devez suivre quelques règles d’ergonomie :
Voici un exemple avec plusieurs champs de formulaire :
Chaque semaine dans votre boite mail, recevez un condensé de conseils et de nouveautés Snoweb !
Nous diffusons des cookies afin d'analyser le trafic sur ce site. Les informations concernant l'utilisation que vous faites de notre site nous sont transmises dans cette optique.
