06 Juin 2014

Pour l’ergonomie de votre site, pensez aux icônes !

E-marketing, Expertise de l'agence Pullseo Aucun commentaire

Aujourd’hui nous allons commencer par parler de hamburger. Non, pas celui que vous pouvez manger dans un fast-food mais bel et bien de hamburger sur internet. Ou plus précisément de « menu
hamburger ». Depuis un moment maintenant on voit apparaître sur de nombreux sites web ce type de bouton, d’icône ou de symbole représenté par 3 traits horizontaux et qui permet généralement d’afficher un menu en cliquant dessus.

L'icône de menu hamburger

Vous voyez maintenant de quoi il s’agit ? Cela tombe bien car ce n’est précisément pas de ça dont nous allons vous parler aujourd’hui. Non car l’utilisation du menu hamburger pour remplacer un menu classique (celui qui se compose de texte) fait encore débat concernant son efficacité puisque sa compréhension n’est pas toujours garantie par un internaute non averti. Et cela nous amène au sujet d’aujourd’hui qui consiste à analyser deux exemples concrets d’icônes qui sont généralement acceptées comme des standards sur le web.

Le bouton de recherche

barre de recherche twitterLa loupe est sans conteste associé à la fonction de recherche. Vous pouvez vous rendre sur n’importe quel site et vous aurez de grandes chances pour que la barre de recherche du site soit accompagné d’une loupe. Son utilisation et compréhension est presque naturelle. Et pourtant ces champs de saisie restent encore pour la plupart accompagnés du mot Recherche ou Search (en plus de la loupe) pour être certain qu’un internaute comprendra et identifiera plus facilement la barre de recherche.

La barre de recherche Twitter que vous pouvez voir plus haut est, en plus du symbole de la loupe, accompagné du texte « Search ». Facebook va même plus loin en rajoutant une précision sur la recherche avec le texte « Chercher des personnes, des lieux… ».

L’icône d’accès aux paramètres

Roue dentée TwitterUn autre bouton, qui est plus souvent utilisé sans texte descriptif, est celui qui donne accès aux paramètres, d’un compte ou d’un service. Par contre, la forme de l’icône peut changer d’un site à l’autre. Si l’on prend l’exemple des sites connus, Google utilise pour Gmail une roue dentée pour l’accès aux paramètres, même chose pour Twitter (comme vous pouvez le constater sur l’image). En revanche, Facebook qui utilisait également une roue dentée, l’a depuis remplacée par un triangle qui pointe vers le bas (qui signale ici l’existence d’un menu déroulant donnant l’accès aux paramètres et à d’autres fonctionnalités).

menu hamburger google chromePar contre, Google utilisait pour son navigateur Chrome une icône différente pour l’accès aux paramètres, il s’agissait là d’une clé anglaise avant d’être finalement remplacée sur les dernières versions de Chrome par un … menu hamburger. Eh oui, celui-ci regroupe dorénavant le tout (paramètres et menu) dans un même et unique bouton.

Les avantages

Mais au final quels sont les différents avantages notables qu’offre l’utilisation des icônes sur son
site web :

  • on les distingue plus facilement les unes des autres
  • elles prennent moins de place et permettent donc d’afficher plus de fonctions ou d’aérer le design d’une page
  • la barrière de la langue est moins présente avec des icônes qu’avec du texte

Toutefois, rien n’empêche d’ajouter également le texte explicatif en attribut title sur l’image ce qui permet d’afficher une info-bulle lorsque l’on passe la souris sur l’icône (attention, cela n’est évidemment pas possible sur les terminaux tactiles).

La combinaison des deux peut aussi être envisagée ou l’alternance entre icône et texte en fonction des situations. En effet c’est souvent le cas sur les sites en responsive design où les boutons texte se transforment en icône dès lors que l’on passe sur une résolution d’affichage plus réduite (comme c’est le cas sur les terminaux mobiles).

Mais l’utilisation du texte a ses avantages également

  • les boutons texte sont plus compréhensibles et présentent moins d’ambiguïté
  • il est plus facile de modifier du texte que des icônes
  • il est aussi plus facile de trouver les mots appropriés au contexte que de trouver ou créer des icônes efficaces

Quel est le bon choix à faire ?

Du fait de l’utilisation croissante d’internet sur les terminaux mobiles (smartphones et tablettes), il est important d’aérer un peu plus son site web. L’affichage sur ces terminaux est généralement plus réduit et l’utilisation des icônes permet de remédier à cela. Pour autant certains sites ont fait le choix d’utiliser le moins d’icônes possible. C’est le cas d’Amazon où même la loupe pour la recherche est remplacée par un bouton avec le texte « GO »La seule icône présente sur la page d’accueil d’Amazon est celle du panier, qui est unanimement utilisée sur les sites e-commerce.

Au final, l’important c’est d’utiliser les icônes adéquates pour qu’elles soient comprises par la majorité des utilisateurs. N’hésitez pas à procéder à un A/B testing, par exemple, pour voir si une icône est mieux comprise qu’une autre. Voir même si le texte classique ne reste, pour l’instant, pas la meilleure solution dans votre cas.

Source image : WixBlog

Aucun commentaire pour “Pour l’ergonomie de votre site, pensez aux icônes !”

Laisser un commentaire

Les liens des commentaires peuvent être libérés des nofollow.