web-dev-qa-db-fra.com

Comment s'appelle ce menu latéral qui se trouve dans de nombreuses applications multi-touch, et d'où vient-il?

Il peut être trouvé par exemple dans l'application YouTube et Facebook. enter image description hereenter image description here

86
Lenar Hoyt

Je crois que le nom courant est un Menu Hamburger , comme référence à l'icône qui est couramment utilisée pour cela (ux-hamburger-drawer-icon.333-tr.s20, similaire au caractère Unicode ≡ U+2261 Identical To), et à la nature empilée des articles dans le tiroir. Tiroir hamburger et Barre latérale hamburger seraient également des termes reconnaissables pour la communauté UX .


Un peu de discussion sur ce que je pense être le bon usage du terme:

Le menu lui-même n'a rien de nouveau; Les menus de la barre latérale avec des liens vers diverses parties d'une application/d'un site sont utilisés de cette façon depuis le début du Web (et probablement ailleurs peut-être plus tôt). De plus, les boutons qui basculent le contenu caché ou permettent éventuellement de faire glisser pour révéler le contenu existent également depuis bien plus longtemps que les smartphones à écran tactile; le tiroir dans les anciennes versions de QuickTime Player et tiroir de nuancier du sélecteur de couleurs d'OS X en sont de bons exemples.

Ce modèle est alors mieux décrit comme la combinaison du menu du tiroir et de révéler/masquer les modèles de boutons d'une manière où:

  • Le contenu principal glisse hors du chemin ou reste visuellement en dessous, révélant le tiroir en appuyant sur le bouton ou en le faisant glisser,
  • Le contenu du tiroir est un méta contenu destiné à un accès temporaire (boutons de navigation, liste de contacts de chat, etc.),
  • Appuyez sur la zone de contenu principale partiellement visible pour fermer le tiroir,
  • Le bouton d'activation est toujours visible et apparaît dans l'en-tête/pied de page de "navigation" immédiatement à côté du côté sur lequel le tiroir apparaîtra.

Il existe (bien sûr) des variantes qui plient les directives ci-dessus - certaines implémentations peuvent uniquement permettre de toucher (et non de faire glisser) le bouton, ou la fonctionnalité tap-to-restore-main-content peut être omise lors de la présentation de la même application sur une plus grande - périphérique d'écran, ou le tiroir peut être utilisé de manière étrange pour quelque chose de non cliquable. Pour cette raison, les points ci-dessus décrivent la forme idéalisée et commune du modèle qui est rapidement devenu populaire et répandu.

Je suppose que l'une des raisons pour lesquelles ce modèle n'était pas apparu sous cette forme plus tôt (et pourquoi il mérite d'être distingué des autres modèles) est qu'avant les smartphones à écran tactile, la conception de l'interface utilisateur n'était pas aussi souvent limitée au plein écran de taille fixe. En raison de cette nouvelle contrainte, le concept du contenu principal glissant temporairement hors de l'écran et la nature modale du menu ont été jugés nécessaires, ce qui a accru les avantages de masquer l'encombrement visuel inutile et de fournir un menu qui peut être de n'importe quelle longueur sans refonte. Cela a probablement aussi aidé le fait que l'approche UIToolbar d'Apple d'un bouton "Plus" n'ait résolu qu'à moitié un problème de brassage.


Le premier endroit où je me souviens avoir vu un tiroir de la barre latérale de ce type était dans l'application Tweetie, aujourd'hui disparue, pour iPad. webOS a également eu des tiroirs comme celui-ci pendant un bon moment, mais je ne pense pas avoir utilisé le bouton "hamburger" ni la taille de tiroir à largeur fixe. Je n'ai pas de réponse définitive pour vous sur celui-ci, mais le . nombre . sur . ouvert . source . bibliothèques . pour . fabrication . ces . genre . sur . barre latérale . menus . sur GitHub semblent pointer vers l'application Facebook iOS comme vous l'avez mentionné, et vers Path.

Je suppose que Facebook/Barre latérale/Menu/Tiroir de style chemin pourrait être considéré comme un terme courant, même si je prédis que les références aux noms de sociétés deviendraient antiques avant trop longtemps.

81
Slipp D. Thompson

Panneau latéral Comme mentionné sur appadvice

L'application dispose d'une interface assez élégante et utilise le panneau latéral pour la navigation.

23
FrankL

Le modèle de mise en page lui-même (pas l'icône du burger) est connu comme ' Off Canvas '. Luke Wroblewski a écrit à ce sujet dans un article sur Modèles de disposition multi-périphériques .

... le motif Off Canvas pour la disposition multi-appareils profite de l'espace hors de l'écran pour garder le contenu ou la navigation caché jusqu'à ce qu'une taille d'écran plus grande le permette pour qu'il soit visible ou qu'un utilisateur prenne des mesures pour l'exposer. Ce modèle apparaît dans quelques conceptions de sites Web mobiles et applications mobiles natives distinctes.

Il a été implémenté dans des cadres tels que Zurb Foundation .

Si vous avez utilisé l'application iPhone de Facebook (ou Path, ou un certain nombre d'applications qui suivent maintenant cette convention), vous avez vu un panneau hors toile dans une application native. Vous appuyez sur un bouton et un panneau glisse à partir de la gauche (ou selon la façon dont vous le regardez, le panneau principal glisse hors du chemin).

Et couvert dans des articles tels que Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern by Smashing Magazine:

Le menu déroulant hors toile a pris le relais comme modèle de navigation principal pour les dispositions mobiles - même certaines dispositions de bureau ont sauté à bord. Et pour cause: un menu hors toile est un excellent moyen de maintenir le contexte tout en donnant à l'utilisateur beaucoup d'informations supplémentaires.

22
Matt Obee

Pour expliquer ce que @matt_d_rat a écrit,

Il y a n excellent article ici à ce sujet, mais il a été initialement conçu par Norm Cox pour la station de travail Xerox Star en 1981! Cette icône est à peu près aussi ancienne que le concept de l'interface graphique elle-même!

Pour le voir en action regardez cette vidéo et passez à environ 21 minutes.

Xerox Star Workstation - Hamburger Menu!

21
CBarr

Selon le site des développeurs Android et spécification Google Design il est connu sous le nom de tiroir de navigation .

12
Shruti

Après une discussion connexe qui a commencé le Quora , Geoff Alday a creusé un peu plus dans les origines de l'icône elle-même et a découvert que Norm Cox est l'homme crédité de la conception de l'icône pour la station de travail personnelle Xerox Star, qui a été introduit en 1981.

Dans une conversation par e-mail entre Cox et Alday, Cox révèle comment l'icône est née et les contraintes de conception sous lesquelles ils travaillaient. Alors qu'aujourd'hui l'icône est affectueusement appelée l'icône du hamburger, Cox révèle la blague intérieure de Xerox pour l'icône;

Nous avions l'habitude de dire aux utilisateurs potentiels que l'image était un "évent" pour garder la fenêtre fraîche.

8
matt_d_rat

Navigation latérale est un terme proposé, comme indiqué ici: http://www.androiduipatterns.com/2012/06/emerging-ui -pattern-side-navigation.html

C'est une lecture intéressante, ce qui explique pourquoi cela apporte une innovation aux mécanismes de navigation des applications.

Il répertorie également d'autres termes candidats:

  • Menu de l'application Fly-in
  • Faire glisser la navigation
  • Barre de navigation coulissante
  • Menu des diapositives
4
Dvir Adler

J'ai entendu à la fois le menu hamburger et menu volant. Dans mon environnement de travail à Austin, le menu déroulant est le terme le plus couramment utilisé.

3
Tom

Cela s'appellerait un "Menu Hamburger".

Avid Media Composer (une suite de montage vidéo professionnelle qui n'a pas changé son interface utilisateur depuis des décennies) a des menus qui ont une icône similaire qu'ils appellent "menus hamburger". Il est possible que ce soit le Origine du nom.

2
BrianMojo