Blog du Collectif Freelance VanilleFraise

Visuel montrant la métamorphose du symbole de l'amburger en burger menu en Ux design

Ux Design | Menu Hamburger : icône appétissante ou indigeste ?

La navigation qui apparait à la demande d’un utilisateur est souvent représentée par une icône constituée de 3 barres horizontales empilées connue sous le nom de menu “Hamburger”. Le menu “Hamburger” est très à la mode, a beaucoup été utilisé ces dernières années et sans doute nombre d’entre vous savent ce qu’il représente aujourd’hui. Pourtant des tests utilisateurs ont montrés que tous les visiteurs ne comprennent pas spontanément la fonction de l’icône “Hamburger”. De plus l’utilisation de ce menu “Hamburger” demande une action supplémentaire pour déployer les items du menu. Cette action répétée peut décourager un utilisateur de naviguer sur un site web ou une apps mobile. Il faudra donc vérifier que cette navigation est pertinente dans l’utilisation qu’on en fait. L’intérêt du menu “Hamburger”, c’est qu’il laisse de l’espace libre pour le contenu (très pratique sur un écran mobile par exemple).

L’origine de l’icône “Hamburger”

Pour retrouver la trace du fameux menu Hamburger, il faut remonter à l’une des premières interfaces graphiques avec l’un des premiers ordinateurs personnel : le Xerox Star de 1981 . Son créateur, Norm Cox, avait pensé à un menu ressemblant à une simple liste avec trois lignes empilées. Le nom donné à cette icône était tiroir sur le côté ou menu latéral. Après ses débuts dans l’interface utilisateur du Xerox Star, le menu “Hamburger” a disparu pendant plusieurs années sans doute à cause de l’échec commercial qu’à connu cet ordinateur.

Visuel d'un Xerox Corporation Star, 1981 montrant l'utilsation d'un des premiers "hamburger" menu

Xerox Corporation Star, 1981

Le come-back de l’icône menu “Hamburger”

C’est avec l’arrivée des applications mobile que l’icône du menu “Hamburger” à fait sa réapparition. Une des première application où l’on retrouve cet icône c’est Voice Memos, une application iOS 3.0 qui vous permet d’enregistrer rapidement une note vocale. Un clic sur l’icône du Hamburger permet d’afficher une liste de notes d’enregistrements et de partages de mémos vocaux.

Menu "Hamburger"dans l'application Voice sur iOS 3

Menu “Hamburger” dans l’application Voice jusqu’à iOS 6

L’application la plus connue à adopter le menu de “Hamburger” était Facebook. Facebook à d’abord utilisé une icône de grille à deux rangées en 2008, pour évoluer vers une grille à trois rangées en 2009 et enfin à trois barres horizontale empilées en 2010. En 2009, l’icône du hamburger a également été utilisée dans Tweetie , la première application mobile de Twitter. Après cela, il n’a pas fallu longtemps pour que bon nombres d’applications Web ou mobile utilisent le symbole du menu “Hamburger”. En quelques années, des entreprises comme Google, Starbucks ou Disney utilisaient des menus “Hamburger” dans leurs applications et sites mobiles.
Alors la démocratisation du menu “Hamburger” par les sites mobiles et les applications, a-t-elle amenée les utilisateurs à adopter ce bouton pour afficher la navigation ?

Facebook : l'évolution du Menu "Hamburger"

Facebook : l’évolution du Menu “Hamburger” (Image crédits : Arstechina Appdevice vowe)

La remise en question de l’icône menu “Hamburger”

On comprend bien le succès de ce type de navigation à la demande puisqu’il permet de résoudre le problème de l’espace libre posé par la réduction de la taille des écrans. Cependant, dès 2014 des concepteurs ont commencés à remettre en question l’utilisation du menu “Hamburger”. On constate lors de tests utilisateurs et avec l’analyse des statistiques de consultation des sites que cette navigation peut entrainer une chute de l’engagement des visiteurs. L’une des problématiques vite révélée côté UX Design, c’est que les options de navigation cachées par ce type de menu sont beaucoup moins utilisées. La Phrase célèbre de Josh Constantine de TechCrunch résume bien ce problème : “Pour l’essentiel, ce qui n’est pas vu, n’est pas connu.”
Le design de l’icône pose aussi un problème car on s’aperçoit que les utilisateurs ne la reconnaissent pas forcément comme un symbole de navigation.
D’ailleurs en le remplaçant par une Tab Bars avec les 4 rubriques principales, Facebook voit très vite l’implication et la satisfaction de ses utilisateurs s’améliorer. Ces exemples, parmi tant d’autres, montrent bien l’importance que revêtent la conception et l’amélioration constante de l’expérience utilisateur.

Facebook : Tab bars Controller

Alors le menu “Hamburger”, plutôt pour ou contre ?

Plusieurs tests ont mis en évidence le manque d’engagement du menu Hamburger comparé à un bouton avec un label “Menu”, ou alors à l’affichage des items directement.
Selon les données de Moovweb, il existe encore des utilisateurs qui n’ont aucune idée de l’utilité du menu “Hamburger”. Le menu “Hamburger” n’est pas la solution parfaite mais il est devenu populaire dans l’expérience mobile et tend à devenir aujourd’hui de plus en plus identifié par les utilisateurs.

Les avantages du menu “Hamburger” :

  • Libère de la place sur l’écran avec le système du sidebar menu ou navigation “tiroirs”
  • Permet de visualiser l’ensembles des rubriques ou options une fois déployé
  • Donne la possibilité de proposer une navigation riche

Les inconvénients du menu “Hamburger” :

  • Nécessite d’être identifié comme un menu
  • Demande une action supplémentaire à l’utilisateur
  • Masque le menu

Les solutions ou les alternatives au menu “Hamburger” ?

La solution pour ne pas dérouter le visiteur, c’est de conserver une navigation permanente. Cette navigation peut se faire sous forme d’onglets ou tab bars avec les items essentiels et un bouton ‘more’ afin de cacher des items moins importants. Pour un site mobile, on évitera de placer ces items dans le bas de la page pour ne pas se retrouver en conflit avec le navigateur. Pour une apps mobile on s’en tiendra aux standards de chaque système (en bas pour iOS et en haut pour Windows et Android).

Si vous devez conserver ce principe de navigation, pensez donc à afficher un label “menu” accompagnant l’icône  du “Hamburger”. La compréhension doit l’emporter sur le reste. Ajoutez éventuellement à l’affordance d’un tel bouton avec une bordure ou une ombre pour bien comprendre que c’est un bouton. Le simple fait de d’étiqueter le mot “menu” avec l’icône peut augmenter les interactions de 61% .

Une autre solution semble de démarrer en montrant à l’écran le tiroir de navigation ouvertCe principe d’UX Design permet à priori de s’assurer que les utilisateur connaissent toutes les vues et les options disponibles. Mais attention, le réseau social spécialisé dans la télé, zeebox a testé ce système en pensant résoudre le problème “hors de la vue, hors de l’esprit” et ce fût un désastre. A la vue de leurs analyses, les concepteurs ont restauré la navigation supérieure par défaut. Découvrez leur expérience à ce sujet.

test de principes de navigation de l’apps zeebox : Le résultat est probant, les utilisateurs cliquent d’avantage sur un des choix du menu affiché en haut plutôt que de choisir le menu hamburger couplé au logo.

Le collectif Freelance VanilleFraise espère que cet article vous sera utile et vous invite à visiter ce site pour visualiser des exemples de navigation responsives.

recherche-sketch-logo-linkydog

Création logo / identité visuelle : Méthodologie VanilleFraise

Découvrez la méthode VanilleFraise pour créer des logos et des chartes graphiques.

1ère étape : La phase préparatoire

Cette phase de préparation est primordiale pour comprendre les attentes de votre client et designer un logo réussi.
A ce stade il est important de poser les bonnes questions à votre client et de savoir l'écouter.

Lire la suite…

Tendance graphique 2016 la photo Flat Lay toujours à la mode

Mais c'est quoi le Flat Lay ?

Le flat lay (photo à plat » en français) c’est le fait d'agencer des objets sur une surface plate et de les prendre en photo directement vue du dessus.
C'est une sorte de flat design pour la photographie.
Voici un exemple comme tant d'autre que vous avez certainement pu voir dans les magasines de mode par exemple.

flat lay avec des accessoires de mode

L'agencement ci-dessus montre un exemple de prise de vue flat lay utlisé dans la mode vestimentaire

Lire la suite…

Logo Design Love

Vous concevez des logos ? Alors voici un livre à avoir absoluement sur ses étagères.

Il y a déjà de nombreux livres sur les Logos mais le Logo Design Love de David Airey c'est une vrai bible pour tous les designers de logo.
L'auteur nous donne les secrets d'un véritable processus pour la création de logo digne de ce nom.

Lire la suite…

color-ete-2016

Une gamme chromatique ludique pour 2016

Pourquoi ne pas allez chercher dans la mode des harmonies de couleurs ?

SS16 Gamme Couleur Printemps-Été 2016
Couleurs franches et pétillantes, ces nouvelles combinaisons explorent une gamme chromatique ludique.
Essayez ces harmonies de couleurs pour vos infographies ou vos design web & mobile.
A vous de jouer !
 

Lire la suite…

Quel logiciel faut-il choisir pour réaliser votre vidéo scribing ?

Vidéo Scribing ou Vidéo Telling : quel logiciel ?

Quel logiciel choisir pour réaliser avec succès une vidéo telling ou un storytelling au format vidéo ?

Vous avez certainement déjà vu ce type de video explicative présentant l’animation d’une main réalisant un ensemble de dessins de façon à décrire un service, un concept… elle est souvent accompagnée d’un fond musical et d’une voix off.
La vidéo explicative est un moyen efficace et originale de présenter votre société ou vos services. Une présentation vidéo pédagogique et dynamique facilite la compréhension et la mémorisation.
Vous souhaitez savoir quel logiciel utiliser pour réaliser une “vidéo scribing” ?
J’ai testé 3 solution qui ont toutes leur avantages.
Lire la suite…

Philippe Sebagh “graphiste-libre”

Portrait-Philippe-SebaghPhilippe Sebagh, un confrère professionnel à l'écoute !

J’ai rencontré Philippe Sebagh au salon salon informatique et multimédia VIPARIS. J’ai tout de suite apprécié son contact facile et sa vision très pro du métier de graphiste.

Depuis plusieurs années, il s’est installé en indépendant, après une carrière en agence de communication et m’a avoué être vraiment content d’avoir passé ce cap et de pouvoir travailler en direct avec ses clients.
 

Lire la suite…

Exemple de Style Tiles utilisé par le webdesigner freelance

#Style Tiles #Planche Tendance

Webdesigner Freelance, utilisez les « Style Tiles ».

Un processus solide qui peut jouer un rôle essentiel dans la réussite globale de votre projet web.
Dans cet article nous allons voir que le « Style Tile » est un livrable client qui permet de faire de ce dernier un participant plus actif dans le processus créatif.

Lire la suite…