Burger icon, three line menu, navicon… Bref il existe de nombreux termes pour nommer ce symbole.

Exemple d'un burger au sein même de notre blog !
Exemple d’un burger au sein même de notre blog !

Less is more !

Simple, distinct et omniprésent sur nos interfaces digitales, ce pictogramme a émergé suite à l’avancée des nouvelles technologies et des terminaux mobiles.

Bien entendu, la taille des smartphones étant beaucoup plus limitée, nous n’avons plus assez de place, ni de pixels pour afficher la globalité d’un menu de navigation tout droit sorti des années 2000.
Un arrangement a été trouvé sous la forme conceptuelle d’un hamburger, cette représentation imitant la liste de différents items.

Illustration autour du burger icon, source Nick Meloy
Illustration autour du burger icon, source Nick Meloy

 Sa création

Certains iront lui chercher une origine lointaine dans l’interface révolutionnaire d’un des premiers ordinateurs personnels commercialisés : le Xerox Star.

Pour illustrer ces propos, voici un article intéressant où nous avons le point de vue de Norm Cox (le concepteur même de l’interface du petit Xerox) sur la conception, la réalisation et l’interprétation de ce symbole.

Sans oublier la vidéo de cette fameuse bécane !

Du smartphone à l’écran d’ordinateur

Adopté aussi bien sur une application mobile que sur une version mobile d’un site web, le burger icon a, depuis peu, un réel impact sur les versions « ordinateurs ».  Il est devenu courant de voir un site web possédant un burger icon dès la version desktop. C’est le fruit d’une réelle stratégie basée autour de l’expérience de plus en plus nomade de nos internautes.

On risque donc d’en avoir à toutes les sauces ;)

Enfin, si comme moi rien que le nom de ce symbole vous donne faim, voici un petit lien qui devrait vous faire saliver :
http://pornburger.me/

 

Filtres

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec un *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>