web-dev-qa-db-fra.com

Un menu coulissant hors toile est-il utilisable lorsqu'il est placé en bas à droite plutôt qu'en haut à gauche?

Alors que j'entre dans les frameworks CSS (Toast, Yaml, Bootstrap, Foundation, etc.), je me suis accroché à la facilité d'utilisation des menus de navigation lorsqu'ils sont affichés sur des écrans plus petits, certains frameworks le convertissent en un

"liste déroulante"

dropdown

"liste déroulante sophistiquée"

sophisticated dropdown

"menu offcanvas"

offcanvas menu

Pour moi en termes de convivialité, je peux préférer le menu hors-toile pour les facteurs suivants:

  • Facile à remarquer plutôt qu'une liste déroulante html
  • Le contenu de la page est encore partiellement visible lors de la visualisation des éléments de navigation sans défilement vers le bas contrairement au menu déroulant sophistiqué

Maintenant, voici ma question: une navigation "DROITE" hors toile est-elle une bonne UX?

Basé sur l'article de Parham Aarabi :

Habituellement, les éléments de l'interface utilisateur de l'application sont placés en bas de l'application (le plus courant) ou en haut.

Cependant, la plupart des utilisateurs tiennent leur téléphone en utilisant leur pouce comme doigt principal pour toucher les boutons. Si l'utilisateur est droitier, le pouce atteindra plus facilement la région en bas à droite de l'écran (ou, pour les gauchers, en bas à gauche). Atteindre le coin supérieur de l'écran opposé au pouce est beaucoup plus difficile et plus intrusif avec le flux d'application, car l'utilisateur doit atteindre l'écran.

enter image description here

Donc, ce principe est également applicable dans les éléments de l'interface utilisateur Web (navigation)?

C'est une bonne idée d'avoir "DROIT" la navigation hors toile, et je placerai le enter image description here bouton "en bas à droite" de la fenêtre? cela semble-t-il reconnaissable?

Toute réflexion serait grandement appréciée.

3
Vincent

D'une part, les commandes en bas à droite sont plus faciles à viser avec le pouce droit. En revanche, les boutons hamburger, également appelés menus hors-toile, sont traditionnellement positionnés en haut à gauche. La question est donc: "Qu'est-ce qui est le plus important, la facilité de ciblage ou la convention culturelle?"

Voyons ce que Don Norman a à dire:

"Une convention est une contrainte culturelle, qui a évolué avec le temps. Les conventions ne sont pas arbitraires : elles évoluent, elles nécessitent une communauté de pratique. Ils sont lents à être adoptés, et une fois adoptés, lents à disparaître. Donc, bien que la Parole implique un choix volontaire, la réalité est qu'ils sont de réelles contraintes pour notre comportement. Utilisez-les avec respect. Ne les violez qu'avec de grands risques. " (c'est moi qui souligne)

--Don Norman, Affordance, conventions et conception (partie 2) ; voir aussi Affordances et Design

Maintenant, cela n'implique pas que chaque nouvelle conception doit suivre les conventions passées. Les concepteurs doivent rompre avec les conventions lorsque l'avantage net de passer à un nouveau comportement l'emporte sur le coût.

Ainsi, dans le cas présent, on soupèse l'avantage d'un meilleur ciblage par rapport au coût de la modification d'un comportement culturellement conditionné qui vit dans la mémoire musculaire de millions d'utilisateurs. Étant donné le temps et les efforts nécessaires pour changer les habitudes et les attentes établies, , il est peu probable que le déplacement du bouton hamburger améliore la convivialité dans l'ensemble.

De plus, si l'invocation du menu est peu fréquente, le déplacement du point d'entrée du menu vers un emplacement privilégié prive les contrôles plus importants et plus fréquents du même espace. ( Remarque: la carte thermique de ciblage ci-dessus est spécifique à la main droite. Le point chaud pour l'utilisation de la main gauche est en bas à gauche.)

2
akarve

Placer l'icône du hamburger et le bouton de retour sur le côté gauche de l'en-tête dans iOS est logique lorsque vous souhaitez regrouper toutes les fonctions de navigation en un seul endroit. Sur le côté droit de l'en-tête se trouvent d'autres fonctions comme l'édition ou le filtrage.

Supposons qu'un utilisateur sur un seul écran puisse: revenir en arrière, voir toutes les catégories de menu (icône de hamburger), rechercher et filtrer les résultats. Mélanger l'icône de hamburger avec des icônes de recherche et de filtrage ne sera pas une bonne idée à mon avis, car la fonction similaire devrait être regroupée, donc les fonctions de navigation devraient être affichées à gauche et l'option de filtrage et de recherche à droite.

0
steppenwolf