Qu’est-ce qu’un menu burger ?

Le menu burger (ou hamburger), c’est cette petite icône, matérialisée par trois traits horizontaux, qui affiche le menu d’un site internet, au clic :

Les raisons de notre goût pour les (menus) burgers

Sur un écran de smartphone, où chaque pixel est compté, remplacer un menu contenant de nombreux éléments par cette petite icône est la solution rêvée des webdesigners pour gagner un précieux espace : le menu burger est facilement identifiable malgré sa petite taille, et accessible sans difficulté pour un clic « au doigt ».

La tendance étant plus que jamais aux designs épurés (ou flat design), la tentation de remettre le couvert pour un menu burger sur les écrans plus larges (ordinateurs, voire tablettes) est grande.

Y a-t-il un risque de perturber le bon transit de votre site ?

Pourquoi le menu burger n’est pas (toujours) la meilleure solution ?

Un engagement plus faible

« Ce qui n’est pas vu n’est pas connu ».

Le principal soucis que pose le menu burger est qu’il ne donne aucune information sur ce qu’il contient. L’internaute n’a donc aucune « tentation » à cliquer sur tel ou tel élément qui lui semblerait intéressant. La perte de trafic est conséquente. Pour poursuivre l’analogie culinaire : c’est souvent en consultant le menu d’un restaurant que nos sens commencent à s’éveiller.

Un clic supplémentaire

Vous forcez vos visiteurs à systématiquement faire au moins un clic supplémentaire pour afficher le menu, éventuellement déployer un sous-menu puis cliquer à nouveau sur la page souhaitée… Au bout de quelques pages consultées, vous imaginez bien que vos visiteurs vont vite se lasser et rendre leur tablier.

Un emplacement pas toujours facile d’accès

Enfin – mais ce n’est pas propre au menu burger – l’emplacement choisi pour son affichage n’est pas toujours idéal. De moins de 4 pouces en moyenne en 2012, les écrans des smartphones actuels tournent actuellement autours de 5 pouces (≈ 12,7 cm de diagonale). Il devient donc difficile voire impossible d’accéder d’une seule main aux éléments placés en haut de l’écran :

Aperçu de la difficulté d’accès aux différentes zones de l’écran d’un téléphone portable (de taille standard, pour un droitier)

C’est pourquoi de plus en plus de sites optent pour un menu placé… en bas de l’écran. Cela peut être déstabilisant au début, car ce n’est pas habituel, mais la navigation s’en trouve nettement facilitée !

Quelles-sont les alternatives ?

Un menu burger, mais uniquement pour les pages secondaires

Votre contenu principal ne devrait pas être caché ! Si vous optez pour le menu burger, placez des accès directs vers vos contenus les plus importants (boutons, encarts mis en exergue…). Les pages secondaires peuvent être placées dans le menu burger, à la manière du site mobile d’Uber, qui laisse la part belle à sa fonction première : trouver un conducteur. Les pages annexes prennent place dans le menu burger.

La tab bar (barre d’onglets)

Très efficace lorsqu’il y a peu d’éléments à afficher, le menu tab permet de conserver une esthétique épurée tout en donnant un aperçu (complet ou non) des rubriques principales de votre site. Accompagnée d’icônes, elle met en avant vos contenus principaux. Cette solution est idéale lorsque le site comporte peu de sections : les 4 principales seront affichées en permanence, les suivantes prendront place dans un 5^e éléments intitulé « Plus », fonctionnant comme un menu burger.

Le menu horizontal

Tirant profit du défilement latéral intuitif sur mobile (le fameux swipe, avec le pouce), le menu horizontal permet d’afficher dans une zone relativement restreinte un nombre plus important d’éléments.
Attention toutefois à bien donner une indication visuelle de la présence d’autres éléments accessibles, pour que les internautes pensent à faire défiler le menu.

L’addition s’il vous plaît !

Pour résumer, le menu burger se prête tout à fait à une utilisation sur mobile, si on respecte quelques règles simples :

• Un emplacement accessible
• Une arborescence simplifiée, pour éviter la multiplication des clics
• Un accès rapide aux contenus principaux, via des accès directs

Sur écrans plus larges, le menu burger est à éviter, à moins d’y afficher des pages secondaires ou d’avoir des accès directs vers les contenus les plus importants du site. Dans le cas d’un site ayant beaucoup de contenu, on basculera alors sur un… mega-menu* !

Mais avant d’aborder cet autre sujet, digérons déjà notre menu burger.

_{* Type de menu déployant un panneau, souvent en pleine largeur, qui permet d’afficher simultanément plusieurs niveaux de sous-menus, de manière claire et hiérarchisée.}

Pas si simple.

Pour y parvenir, il vous faudra adopter les techniques de SEO (Search Engine Optimization), , dopées ponctuellement par le SEA (Search Engine Advertising), autrement appelé référencement payant.

Un bon SEO combine qualité des contenus (pertinence et organisation), netlinking (liens pointant vers votre site), accessibilité (et rapidité), confiance (notoriété), cohérence des réseaux sociaux et comportement de l’internaute.

La clef de voûte du référencement reste la qualité des contenus. Plus votre site est accrocheur et bien implanté dans son écosystème digital et plus les internautes s’y attardent : ce qui est repéré par Google qui sait le valoriser.

La qualité des contenus, un précédent refrsh vous en a parlé, passe par votre capacité à surprendre et à donner envie à l’internaute d’interagir avec vous. Elle passe aussi par la qualité des mots-clefs dont vous jalonnez vos pages. Ça, c’est la partie visible. Il existe aussi une partie invisible. Un genre de web furtif, que seuls les algorithmes de Google savent détecter, constitué par les métadonnées. Si vous suivez les consignes de Google pour les réaliser, vous avez toutes les chances de lui plaire.

Problème  ? Le SEO est un travail de bénédictin, très chronophage. Mais comme à l’agence nous sommes protégés par Saint-Benoît du Web, vous pouvez nous confier votre SEO, nous serons ravis de le prendre en charge.

Certains diront esthétique, joli, séduisant, agréable. Les mots sont d’ailleurs révélateurs. Ils traduisent bien l’idée que les goûts et les couleurs, ça va, ça vient, que chacun voit à travers son filtre, selon ses codes, ses références et sa sensibilité.

C’est bien pour cela que l’efficacité de la recherche de votre graphiste dépend pour beaucoup, et il ne faut jamais l’oublier, du fond et de l’expérience utilisateur que vous allez lui demander de mettre en scène. S’il n’a pas une idée, un message, un parcours… pour guider sa recherche, il risque fortement de tomber dans le concours de dessin, ce qu’il faut absolument éviter.

Vous devez donc (vous ou votre agence) lui fournir ce cadre, issu du diagnostic réalisé en amont. Bien entendu, pas question non plus de le lancer sans qu’il se soit au préalable connecté aux tendances et aux codes de votre secteur. Eux aussi doivent irriguer sa démarche.

C’est donc parce que vous aurez su nourrir votre graphiste que l’esthétique de votre site, aussi impalpable et éthérée fût-elle, sera à la hauteur des enjeux de votre projet.

Le concepteur s’assurait ainsi d’aller dans le sens du vent. Une méthode qui permettait aux meilleurs d’être dans le coup mais qui laissait à désirer en terme d’efficacité…

Depuis, nous l’avons déjà évoqué ici, pour se donner toutes les chances d’être en phase avec les besoins émotionnels de l’internaute, on a inventé la notion d’expérience utilisateur (UX). L’UX qualifie notamment le ressenti d’un consommateur lors de l’utilisation d’un service digital ou d’une application. Il fait appel à la perception et comporte donc des composantes factuelles mais aussi émotionnelles. Comment, dés lors, qualifier et mesurer cette expérience vécue par vos consommateurs et internautes dans l’utilisation des outils (sites et applis) que vous mettez à leur disposition ?

En testant sans relâche votre cible avec différentes méthodes. Le SUS, par exemple, est un test qui permet de recueillir le point de vue subjectif de l’utilisateur sur un site ou un service digital. Il l’invite à répondre à 10 questions en utilisant une notation sur une échelle en 5 ou 7 points allant de « Pas du tout d’accord » à « Tout à fait d’accord ». Une note globale est calculée selon une grille spécifique. C’est cette note qui validera l’UX du site et qui contribuera à le légitimiser.

Cette méthode est à mettre en écho à celle du tri de cartes dont nous avons déjà parlée qui contribue, elle aussi, à construire une UX pertinente.

On voit par là que l’une des tendances de la communication digitale est de s’inscrire dans une rationalité pour prouver la pertinence de ce qu’elle propose et être ainsi à la hauteur des enjeux économiques, politiques ou humains auxquels elle est de plus en plus clairement confrontée. Une nécessité absolue.

Après ces longs mais indispensables préliminaires, c’est l’un des meilleurs moments du processus de création… une sorte de 6^e ciel digital (le 7^e viendra un peu plus tard et, bien entendu, sera plus intense).

Pourquoi ?

Parce que ce site, pour lequel vous vous mobilisez si ardemment, va enfin prendre forme. Il s’agit ici de créer une maquette fonctionnelle (sorte d’embryon) qui va vous permettre de répartir dans l’espace du site tous les éléments sélectionnés au préalable. Il existe des outils pour cela. Votre agence saura vous orienter. Mais pour que votre plaisir soit plus fort, vous devez absolument vous mettre dans la peau de l’utilisateur.

Pensez expérience. Pensez fonctionnalité. Pensez engagement. Pensez-y très fort. Puis, quand c’est totalement inscrit en vous, passez à l’acte.
Refrsh se met au vert pendant les fêtes… et reviendra aussi Frsh mais encore plus Re à la rentrée.

Normal. Les 2 méthodes, le tri de cartes et le tree testing, ont pour but, via la description des contenus et de leurs interactions, de créer une arborescence efficiente. Commencez par le tri de cartes.

Sollicitez des collaborateurs qui représentent au mieux l’entreprise sur les enjeux du site. Au début du tri par cartes, les participants doivent identifier les termes, concepts, mots-clés, actions, etc. liés au produit et aux tâches qu’ils souhaitent réaliser. Ils sont ensuite retranscrits sur des cartes ou des post-it pour être triés puis classifiés. Cette matière vous permettra de bâtir une pré-arborescence que vous confronterez au process de tree testing.

Cet exercice consiste à simuler des tâches de recherche de contenus par clics successifs dans la pré-arborescence, afin de quantifier les résultats d’accomplissement des tâches, dans le but de valider une arborecence efficiente auprès des cibles.

Il est très important de mettre en place une cartographie du parcours client, par rapport à votre site internet actuel ou aux tendances du marché et de la concurrence. Plus votre site internet sera bien pensé, plus vous aurez de chances de voir le processus d’achat augmenter considérablement.

Il est quasi impossible, aujourd’hui, pour une marque d’exister sans une présence en ligne. Face à l’ensemble des plateformes digitales qui existent, réseaux sociaux, applications mobiles ou sites internet, votre produit ou service doit exister sur le web.

Pour répondre à ce besoin de visibilité, nos experts en marketing digital procède à une digitalisation du parcours en fonction des données clients et du processus d’achat habituel. Cela relève du Design Thinking, c’est toute la réflexion portée autour du parcours client digital. A partir d’une étude des mots clés et de l’expérience client actuelle reflétée par les avis clients, les experts en webdesign de déterminer les étapes du parcours client qui amènent le processus d’achat.

Définir un besoin utilisateur et apporter une solution client

Commencez par définir le périmètre de besoins et proposez à votre client un audit de l’existant. Une refonte de site e commerce est parfois indispensable face à l’accélération des tendances et l’amélioration constante des technologies du numérique. Faire un tour d’horizon de l’existant pour mettre en place un nouveau scenario. Ce scenario va déterminer le parcours utilisateur le plus adapté face aux besoins et attentes.

Développer un site e-shop implique d’être très attentifs aux mises à jour, qu’il s’agisse des stocks, des fiches produits, des offres d’achat, des événements. Tout ce qui peut permettre de mettre en avant votre marque, vos produits et services rapidement et avec sens apportera une véritable plus-value à votre site internet. Votre cible se sent écoutée et comprise grâce aux différents points d’interaction mis en place sur le site e commerce : des CTA, des fenêtres de discussions interactives, une lisibilité dans le parcours utilisateur.

Pour une expérience utilisateur et une expérience client parfaite, il ne suffit pas d’ajouter des fonctionnalités à votre site e-commerce. Il est indispensable d’opérer à un nettoyage profond du site : vérifier que les backlinks sont qualitatifs, supprimer les liens toxiques, des mots clés qualifiés, des titres H1 et H2 respectés, etc.

De l’expérience utilisateur UX à l’expérience client CX

Pour rappel, l’expérience utilisateur relève de l’UX, quand l’expérience client renvoie au CX. Quelle que soit leur définition, l’UX comme le CX relève de l’expérience vécue de la prise de contact et les interactions de la marque aux produits et services proposés.

Pour définir l’UX Design du site web ou de l’application mobile d’un client, trois points essentiels à définir : les usages des utilisateurs cibles et prospects, les besoins et émotions. L’intégralité de ces données est obtenue par une analyse poussée et des sondages de la cible, ses besoins et attentes. C’est une véritable cartographie du parcours client qui est dessinée. Elle retrace chaque habitude et permet d’anticiper des attentes et, pourquoi pas, créer des besoins, de l’intérêt, de la curiosité.

Le développement du parcours utilisateur est devenu impératif pour faire en sorte que votre marque propose une expérience client unique et différenciante.

Chacune des pages et zones de textes, d’illustration ou de vidéos sur votre site internet répond aux différents points de contact qui favorise le parcours client complet et intelligent. L’ user experience vient aussi diminuer votre taux de rebond : la vitesse à laquelle le visiteur, prospect ou client quitte votre site internet avant d’avoir finaliser son achat.

Le parcours utilisateur au service du score SEO

En plus de toutes les analyses et cartographies de site pour un parcours utilisateur parfaitement soigné et réfléchi, complétez et agrémentez votre site internet de contenus et mots clés intéressants. Une bonne position de la SERP ne se fait pas uniquement avec des mots clés, mais par un judicieux positionnement de ceux-ci à travers les pages du site.

En optimisant votre contenu SEO de façon à toucher votre cible, vous raisonnez en UX, plus précisément en Customer first. Chaque titre, chaque légende, chaque image, chaque page du site internet, tout est webdesigné pour susciter l’intérêt.

En plus d’un site internet au parcours utilisateur intéressant et stimulant, vous augmentez vos chances de réduire le taux de rebond des visiteurs sur votre site web. Plus longtemps il parcourra les pages de votre site internet, fiches produits, offres et actualités, mieux votre site ressortira dans l’algorithme Google.

Un bon score SEO améliore donc le niveau d’autorité de domaine, c’est la note donnée à votre site par Google. Celle qui détermine votre classement hiérarchique dans la SERP, autrement dit, dans les premiers résultats de la première page Google ou non.

L’ ux design exige une expérience utilisateur et un contenu de qualité. Malgré tout, ces éléments ne sont qu’une première étape pour augmenter la visibilité et la notoriété de votre site internet. Pour garder un bon positionnement une fois le site internet et le parcours utilisateur parfaitement pensés, vous devrez travailler son référencement. Autant d’éléments qu’il est impératif d’approfondir pour optimiser le processus d achat sur le site e commerce et l’intérêt de visite du site.

Pour aller plus loin dans le parcours utilisateur, apporter cohérence et fluidité à vos plateformes de communication digitales en créant d’autres formes d’intérêts auprès de votre prospect et de votre cible. En vous tournant vers les experts d’une agence digitale vous faites bénéficier à votre marque un accompagnement stratégique marketing de qualité.

FRSH est une agence digitale qui propose des solutions adaptées aux besoins de ses clients, au-delà du développement ou de la refonte de votre site internet, nous pouvons vous aider au développement d’une application mobile, vous créer des newsletters et campagnes publicitaires ponctuelles ou récurrentes. Toute votre stratégie de communication peut être confiée à nos équipes qui vous guideront et vous suivront pour faire de votre marque une marque au parcours utilisateur exceptionnel.