web-dev-qa-db-fra.com

Incohérences dans la direction du menu hamburger un problème mobile vs bureau?

Cette question ne concerne pas le placement des icônes de hamburger ni l'utilité.

J'ai remarqué sur plusieurs sites Web/applications que la direction dans laquelle l'icône du hamburger ouvre un menu diffère.

Cette différence est-elle liée à la taille de l'écran ou est-ce parce que les concepteurs les mettent en œuvre sans trop penser à la cohérence? Est-ce juste une préférence?

Voici quelques exemples:

http://www.squarespace.com/ Le menu Hamburger glisse du côté droit de l'écran (à n'importe quelle résolution d'écran)

enter image description here

http://getbootstrap.com/ (vue mobile) Le menu Hamburger glisse du haut de l'écran enter image description here

Google Chrome Le menu Hamburger glisse du haut de l'écran enter image description here

L'application Facebook sur le menu Hamburger iOS accède à un tout nouveau volet (pas d'animations) enter image description here

3
Mark Bubel

Le menu hamburger ou un curseur n'ont vraiment aucune cohérence. Les implémentations sont très différentes de la conception adaptée aux applications Web à l'application native plus de lien. Les deux implémentations utilisent la même icône, trois lignes horizontales, pour représenter une sorte de navigation, qui ne tient pas sur l'écran actuel. C'est équivalent à Microsoft more link, représenté par trois points ( ... ), pour ajouter plus d'options qui ne cadraient pas.

La raison pour laquelle le glissement vers la gauche ou le glissement vers la droite, en gardant la navigation dans le menu visible, n'est pas implémentée sur les appareils mobiles - cela glisserait sur la largeur de l'écran ou la taille de la police serait trop petite.

La popularité croissante de la mise en œuvre des menus rationalisera certainement le comportement dans les années à venir, mais aujourd'hui il n'y a pas de véritable convention. C'est la même chose sur la navigation d'une page Web. Comment voyez-vous la cohérence là-bas? Il n'y en a pas, mais les utilisateurs parviennent toujours à trouver leur chemin. La raison en est que le comportement du contrôle est le même. L'utilisateur attend une navigation supplémentaire et obtient une navigation supplémentaire. Où ou dans quelle direction n'est pas important.

3
Benny Skogberg

L'emplacement gauche ou droit du bouton de menu hamburger et de son conteneur coulissant n'est pas lié à une norme spécifique.

Il existe cependant des recommandations/règles de plate-forme, par exemple sur iOS, le guide de style de conception suggère de l'utiliser sur le côté gauche pour maintenir toutes les applications cohérentes.

Mais sur le Web, son placement est assez flexible, sans avoir besoin de le normaliser. Tant que vous gardez vos conceptions moins distrayantes en déplaçant la navigation et d'autres éléments de l'écran, disponibles sur demande, vous avez déjà résolu de nombreux problèmes de l'utilisateur!

0
Adrian S

L'icône de hamburger a été utilisée pour représenter des objets déplaçables dans le passé et dans les jours actuels. Par conséquent, la représentation classique de 3 barres horizontales ne doit pas être utilisée sans considération. Cela peut dérouter les utilisateurs de tout type de contexte. Ceux qui connaissent le mobile et ceux qui le découvrent.

Hamburger icon on a Scrollbar

Hamburger icon in Wunderlist

Hamburger icon in iOS7 Music app

0
Lorenzvs

La liste déroulante est la convention la plus ancienne et la plus établie. Le menu coulissant latéral a l'avantage de garder le menu plus compact - un menu déroulant pleine largeur, sur une tablette de 7 pouces, peut sembler inutilement grand et étalé. Bien sûr, une liste déroulante ne doit pas prendre toute la largeur, mais dans la plupart des cas, elle le fait.

Je pense que c'est principalement une question d'esthétique et où sont vos points de rupture. Notez que les deux exemples que vous donnez travail, ils sont à la fois utilisables et suffisamment compréhensibles. Le glissement latéral est moins conventionnel, mais semble un peu plus ordonné à la taille des comprimés. Si je parie que le slide-side a été créé en réponse à la popularité récente des tablettes de taille moyenne.

0
obelia

Cette différence est-elle liée à une taille d'écran?
Peut être. En fonction de la taille de l'écran et de l'espace d'écran disponible, il sera préférable d'afficher le menu à gauche, à droite, au-dessus de quelque chose, en déplaçant le contenu dans une direction, puis en affichant le menu à cet endroit (le menu latéral , sur mobile, sont représentés à l'aide d'une icône hamburguer a beaucoup de fois, jetez un œil: http://pttrns.com/categories/1-activity-feeds ).

Ou est-ce parce que les concepteurs les mettent en œuvre sans trop penser à la cohérence?
Je crois que la cohérence impliquée dans ce composant est qu'il ouvre un menu qui est une liste, comme "voici une liste de ce que vous pouvez faire", comment l'ouvrir est une question différente, et je ne 't croire qu'il y aurait un comportement par défaut concernant la direction puisque nous utilisons le composant sur des situations très différentes.

Est-ce juste une préférence?
Cela arrive définitivement. Pendant que vous concevez, il y a des aspects à propos de fonction auxquels vous penserez, comme la taille de l'écran, l'écran disponible l'espace, les informations présentées à l'écran, mais il y aura des choses plus subjectives comme votre goût ou esthétique.

Qu'est-ce qui pourrait influencer cette décision?

Le menu devrait-il être corrigé? Si tel est le cas, vous ne voudrez probablement pas qu'il soit placé au-dessus du contenu, peut-être voudrez-vous ouvrez-le de gauche à droite, en poussant le contenu vers la droite et en réduisant l'espace disponible pour lui.

Où se trouve le menu? Est-ce à droite? Peut-être voudrez-vous ouvrir le menu de droite à gauche, donc quand il est ouvert, le curseur sera déjà sur la zone de menu ou très près d'elle. Regardez votre exemple de squarespace.com , après avoir cliqué sur le menu, le curseur sera au-dessus des histoires! Vous n'avez pas besoin de trop bouger la souris, me semble efficace.

0
pcattai