À l’heure où les pages Web se rallongent et s’animent, il devient de plus en plus difficile d’orienter convenablement ses visiteurs à travers son site. En effet, mode du Long Scrolling oblige, nous devenons affectivement dépendants de notre molette de souris – Facebook, salut à toi ! – et souhaitons accéder à toute l’information que l’on recherche sans changer d’onglet – Internet mobile, merci bien. Du coup, nous scrollons encore et encore, sans savoir nécessairement où cela nous mène. Heureusement, il existe un moyen infaillible d’orienter les internautes de façon adaptée à leurs attentes : utiliser des icônes.
Les icônes ont le vent en poupe depuis l’arrivée du Flat Design. Épurées et modernes sans être trop discrètes, elles permettent de captiver l’attention des visiteurs et de les renseigner simultanément. Ainsi, ces derniers peuvent prendre un moment de repos dans leur course verticale et découvrir les sections du site que l’auteur – à savoir vous – souhaite mettre en valeur.
Nous vous présentons nos meilleurs conseils et les outils incontournables pour baliser votre site comme un pro.
La bonne utilisation des icônes
Vous l’avez compris, les icônes comptent parmi les ressources les plus utiles de votre caisse à outils digitale. Encore faut-il savoir quand les dégainer et comment en faire bon usage. Ci-dessous, un petit guide pratique :
Quelles icônes utiliser et à quelles fins ?
Icônes de navigation : comme leur nom l’indique, ces icônes servent à orienter vos visiteurs à travers votre site. Par exemple, les flèches parlent d’elles-mêmes : si la forme pointe vers le haut, on sait qu’on retourne en haut de page – et inversement si elle vise le bas. En revanche, la même flèche tournée vers la droite indique où cliquer >>. Mais vous pouvez également utiliser ces visuels pour orienter vers vos pages internes. Le croquis de caddie/sac à main peut (et doit) renvoyer le client vers son panier d’achat, une enveloppe orientera vers la page Contact et les icônes Facebook, Twitter et autres enverront vers vos comptes sur les réseaux sociaux. La liberté est infinie.
Icônes d’information : parfois, il n’est pas nécessaire d’avoir un lien (ou une page) caché derrière chacune de vos icônes. C’est le cas notamment si vous souhaitez afficher vos différents services, présenter les valeurs de votre entreprise, ou encore, exposer les avantages de vos produits sur une même section de votre site. Si telle est votre intention, mieux vaut utiliser les icônes comme des balises et les accompagner d’un court texte. On imagine parfaitement une illustration de camion sous laquelle vous décrivez brièvement vos conditions de livraison, une épingle type Google accompagnée de vos coordonnées ou encore, un visuel de globe sous lequel sont détaillées les langues que vous maîtrisez. Une fois de plus, tout dépend de vos besoins, mais il est certain qu’en connaissant les bonnes ressources, vous trouverez icône à votre pied.
Icônes d’action (directe) : ces dernières sont à utiliser avec précaution car elles peuvent désorienter vos visiteurs. Si une flèche épaisse dans un cercle peut être synonyme de « Télécharger », elle peut également indiquer de naviguer vers le bas. De même, une icône de signe ‘+’ peut à vos yeux signifier « Ajouter au Panier » mais pour d’autres, elle sous-entend « En Savoir Plus ». Si vous faites usage de ces visuels en tant que « boutons », il est essentiel de les accompagner d’un texte d’appel à l’action clair et concis.
Règles de base
Bien, entrons dans le vif du sujet. Maintenant que vous connaissez les différentes utilisations possibles, nous vous présentons les trucs et astuces de nos designers :
Trouvez le style adapté : vos icônes doivent être alignées avec votre charte graphique et se fondre dans votre design. Cela signifie que les couleurs doivent impérativement s’accorder avec votre palette – autrement, ça fait désordre – et, en règle générale, que le look doit correspondre à l’atmosphère de votre site.
Soyez constant : choisissez un set d’icônes et tenez-vous-y. Trop de styles tue le style.
Signalez vos liens : si vous ancrez des liens dans vos icônes, il est utile de choisir une couleur ou un effet « au survol » (c’est-à-dire, quand le visiteur passe au-dessus de l’une d’elles avec la souris) et une autre « après clic » (une fois que le gaillard a cliqué dessus). Ainsi, les internautes sauront directement que ces éléments sont cliquables et économiseront quelques précieuses secondes. Note : pour ce faire, vous devez utiliser un bouton que vous personnalisez. Nous vous recommandons à cet effet de créer vos visuel avec l’outil que nous vous présentons plus bas. Suspense.
Animez (avec modération) : les animations peuvent améliorer l’impact de vos icônes – ou ruiner votre site. Si les icônes apparaissent de façon synchronisée et subtile, elles obtiendront l’attention qu’elles méritent. En revanche, si vous abusez des animations ou les employez à tort et à travers, vous risquez de provoquer un séisme visuel qui fera fuir vos visiteurs.
Les outils à connaître
Le Web regorge de ressources d’icônes gratuites. Néanmoins, pour ceux d’entre nous n’ayant pas de connaissances en Photoshop/InDesign et autres logiciels terrifiants, leur utilisation peut s’avérer limitée. Heureusement, il existe des outils qui vous permettent de créer, personnaliser et utiliser vos icônes avec une facilité plus qu’appréciable et le tout dans le bon format d'image.
Vous trouverez dans l’Éditeur Wix des dizaines d’icônes préconçues à intégrer directement sur votre site – ce qui est déjà très sympa. Ce que vous ne saviez peut-être pas, c’est qu’il est possible de les modifier à volonté ! Choisissez une forme (dans le menu susnommé), modifiez les couleurs, les bordures, la taille, l’orientation et placez-la à l’endroit de votre choix. Voilà votre site décoré d’une nouvelle icône en pleine forme – si vous permettez le jeu de mots bidon.
Illustrio
Illustrio est un outil qui vous propose une large variété d’icônes mais surtout, qui vous permet de les personnaliser en quelques clics. Vous y trouverez aussi des illustrations, des formats conçus pour les textes ou encore des chartes (graphs, stats, etc.) pour les plus pointus. Ah oui, c’est gratuit, évidemment. Il ne vous reste plus qu’à importer vos icônes dans l’Éditeur Wix et le tour est joué. Nous l’avons testé et approuvé. Maintenant, c’est à votre tour !
Prêt à vous lancer dans l’aventure digitale ? Créez un site gratuit dès aujourd’hui !