web-dev-qa-db-fra.com

L'utilisation du bouton hamburger dans la conception de documents Google est-elle un exemple d'une mauvaise expérience utilisateur?

J'ai constamment trouvé de nombreux problèmes avec le bouton hamburger, comme:

  1. Les gens ont tendance à montrer beaucoup d'options avec eux.
  2. Il faut au moins deux fois plus de tapotements pour changer de section.
  3. Le bouton Hamburger n'est pas non plus très reconnaissable comme bouton de menu pour les anciennes générations.
  4. Les menus de hamburger sont terribles pour illustrer où vous êtes et où vous pouvez aller.

Quelqu'un peut-il préciser pourquoi la conception matérielle de Google suit "l'icône du hamburger" si c'est si gênant? J'ai essayé beaucoup de choses, mais je n'ai pas pu comprendre.

Edit: Défendez vos réponses avec des exemples et la prime vous appartiendra. Merci!

PS: Je parle spécifiquement des applications mobiles et non des sites Web mobiles.

11
steve

Tout d'abord, je préfère l'appeler un "navicon", m'aide à éviter les problèmes de faim pendant les heures de travail.

Deuxièmement, tous vos points ne concernent pas réellement l'icône du hamburger (3 & 4). Les autres concernent davantage le tiroir de navigation en général.

Quoi qu'il en soit, commençons ..

  1. Les gens ont tendance à montrer beaucoup d'options avec eux.

    Beaucoup d'options ne seront pas un problème tant que les importantes sont en haut et au-dessus du pli.

    Exemple:

    Boîte de réception Google - Tiroir de navigation http://i.picresize.com/images/2014/12/17/j9z4.png

    Toutes les étiquettes importantes sont en hauteur (vous pouvez même choisir celles qui sont les plus importantes) et sont séparées par des séparateurs. Les paramètres et l'aide et les commentaires sont également fixes.

  2. Il faut au moins deux fois plus de tapotements pour changer de section.

    Je ne suis pas tout à fait sûr de ce que vous entendez par là, mais je suppose que vous voulez dire:

    • appuyez sur 1: ouvrez le menu
    • touchez 2: sélectionnez l'élément de menu

    Sinon, comment pourriez-vous résoudre ce problème?

    • Liste déroulante en haut: 2 taps
    • Menu en haut: 1 robinet, beaucoup de défilement pour accéder au contenu
    • Menu en bas: 1 robinet, beaucoup de défilement pour accéder au menu

    La meilleure solution (imo), est un tiroir de navigation. Ne vous gêne pas lorsque vous n'en avez pas besoin et apparaît lorsque vous en avez besoin.

  3. Le bouton Hamburger n'est pas non plus très reconnaissable comme bouton de menu pour les anciennes générations.

    Je ne suis pas d'accord. Il y a eu des études (votre ami de Google) qui prouvent qu'il figure parmi les icônes les plus reconnaissables pour un menu (en général).

    Bien avant qu'il ne soit même utilisé pour la navigation, il était utilisé comme icône pour trier les listes. Le saut du "menu" au "menu de navigation" est assez petit et assez évident. La seule chose qui me dérange un peu, c'est que l'icône ne représente pas le mouvement du tiroir de navigation. Il n'est pas du tout clair d'où le menu pourrait provenir.

  4. Les menus Hamburger sont terribles pour illustrer où vous êtes et où vous pouvez aller.

    Si vous souhaitez suivre les mouvements de l'utilisateur, utilisez le fil d'Ariane.

    Pour le "Où puis-je aller?": En utilisant des panneaux pliables (clarté vs robinets), des séparateurs et/ou des retraits peuvent vous aider à faire du chemin.

12
Vince Caregnato
  1. Ce n'est pas forcément un problème avec un menu caché, plus l'architecture des informations du site éventuellement.

  2. Cela pourrait ne pas avoir autant d'importance que nous le pensions, avec la "règle des trois clics" - http://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3 -clicks

  3. L'icône du hamburger commence à être reconnaissable, cette question est utile - Les tests utilisateurs ont-ils révélé que les "trois barres horizontales" pour le menu principal sur mobile sont généralement comprises?

Personnellement, je l'associe toujours au mot "Menu" pour renforcer ou aider à définir la signification de l'icône.

  1. Je préférerais m'en remettre à la chapelure.

ÉDITER:

Cette réponse pourrait donner une histoire d'origine au menu hamburger, que vous trouverez intéressant - Comment s'appelle ce menu latéral qui peut être trouvé dans de nombreuses applications multi-touch, et d'où vient-il?

Aussi cet article sur l'application zeebox , bien que je ne sois pas sûr que les résultats soient les mêmes maintenant.

4
Stephen Keable

Un bref aperçu de l'histoire de ce symbole: il a été conçu par Norm Cox pour la console Xerox Star, en 1981. http://gizmodo.com/who-designed-the-iconic-hamburger-icon- 1555438787https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83?utm_content=buffer8m40s&utmws_source = tampon

Ainsi, non seulement le symbole du hamburger existe depuis assez longtemps pour devenir au moins partiellement conventionnel, mais il a également été conçu pour un système avec un espace d'écran limité, tout comme ceux des téléphones mobiles. C'est un bel héritage, et je pense que c'est une bonne forme pour l'utiliser.

Vos questions:

1. Les gens ont tendance à montrer beaucoup d'options avec eux.

Oui, car sa fonctionnalité est contextuelle.

2. Il faut au moins deux fois plus de tapotements pour changer de section.

Je ne sais pas de quel cas vous parliez ici.

3. Le bouton Hamburger n'est pas non plus très reconnaissable comme bouton de menu pour les anciennes générations.

La génération plus âgée a tendance à lutter avec beaucoup de choses.

4. Les menus de hamburger sont terribles pour illustrer où vous êtes et où vous pouvez aller.

Comme leur objectif est contextuel, ils peuvent fonctionner comme la barre latérale dans le système d'exploitation, montrant l'emplacement de l'utilisateur ou comme le Dock dans le système d'exploitation, affichant le menu.

Cela étant dit, je ne compterais sur le hamburger que si mon TA est au moins partiellement connecté à Internet, sinon j'y ajouterais une étiquette. http://www.creativebloq.com/mobile/10-mobile-behaviours-and-designing-them-81412606

2
Zoe K

Le menu hamburger est un peu paresseux car il existe d'autres méthodes pour accéder au menu et la plupart des applications n'ont pas vraiment besoin d'un ensemble d'options de débordement.

Un bon exemple d'application qui fonctionne? Chrome, car il a 14 fonctions intégrées dans le même menu. Pour une application comme Chrome où il y a une tonne de fonctionnalités mais 99% des utilisateurs doivent accéder à 1% d'entre eux par jour en moyenne, cet ensemble d'actions est inutile. Sauf lorsqu'il ne l'est pas.

Le menu de débordement de YouTube est différent en ce qu'il n'est pas vraiment un menu de débordement (bien qu'il utilise le hamburger stupide, probablement parce qu'il est reconnaissable). Mais y accéder est différent; appuyez sur le bouton ou balayez vers la droite. De nombreuses applications font la distinction pour balayer les options de débordement, généralement sur la page d'accueil (sur iOS en utilisant la fonction glisser pour revenir en arrière, sur Android la fonction de menu de la barre latérale gauche). Ce sont de bonnes utilisations car ils sont pour débordement.

Alors qu'est-ce que le débordement? Ce sont toutes les options/fonctions dont un utilisateur d'application peut avoir besoin parce qu'elles sont importantes, mais la plupart du temps ne le seront pas. Fonctions avec des cas d'utilisation rares mais vitaux. S'il s'agit d'une nouvelle petite application mobile, elle n'a presque certainement pas besoin d'un menu de débordement. S'il s'agit de presque n'importe quelle application de bureau, il y en a probablement une intégrée et répartie dans les menus Fichier, Modifier, Afficher, etc. largement intégrés dans l'interface utilisateur du bureau grâce à Microsoft et Apple.

Google ne tue pas le design car Google adore les fonctionnalités. Google est la société tout en phase bêta. Ainsi, de nouvelles fonctionnalités et fonctions sont ajoutées, pas éditées car la plupart des gens n'en ont pas besoin comme Apple en a. Donc, Google les a dans les applications qui en ont besoin et parvient à s'adapter à presque toutes les fonctions qu'une application peut éventuellement avoir. Hourra!

1
Jamezrp

Le hamburger n'est pas destiné à montrer où vous êtes, et à peu près tous les sites Web et applications mobiles l'utilisent comme icône de menu, il est donc très facilement identifiable.

Pour montrer à un utilisateur où il se trouve, vous pouvez utiliser le fil d'Ariane.

Deux fois plus de taps que quoi? Si vous faites référence à un menu de bureau, c'est un oui et un non, en fonction de celui-ci, il a des listes déroulantes, etc.

0
Evan

La considération clé est que la conception matérielle est une interface utilisateur de plate-forme (multi) . Ce n'est pas une interface utilisateur d'application. En tant que tel, il y a quelques considérations

  • la spécification peut raisonnablement définir des paradigmes que les utilisateurs devront apprendre
  • la capacité d'une approche d'interface utilisateur unique à évoluer vers des exigences de navigation grandes et/ou complexes signifie que davantage d'applications peuvent s'adapter à la conception cohérente
  • une séparation claire de la navigation/de la tâche principale/de la tâche secondaire de manière cohérente pour toutes les applications d'une plate-forme serait une expérience utilisateur considérablement bénéfique, bien au-delà d'un clic supplémentaire dans certains cas
  • d'autres parties de la spécification gèrent les exigences UX comme emplacement actuel
0
Jason A.

Les menus en général sont plus susceptibles de réduire l'engagement du contenu qu'il contient.

Si vos éléments de navigation sont hors de vue, ils sont plus susceptibles d'être hors de votre esprit.

Si l'engagement est essentiel à votre navigation, utilisez des onglets (jusqu'à 5). Plus de 5 onglets valent la peine d'utiliser les menus et leurs icônes.

0
Mike Milla