Liste déroulante pleine largeur vs barre latérale gauche sur mobile
Je suis à un stade assez précoce de la création d'un thème réactif Wordpress. J'ai une barre d'en-tête fixe de base et je travaille actuellement sur un panneau de navigation de gauche. Je prends une certaine inspiration du KDE Kirigami HIG.
La barre d'en-tête fixe est déjà sensible; le nom de l'entreprise disparaît et le logo de l'entreprise devient centré sur de petits écrans. J'ai un menu hamburger sur la gauche et le panneau de navigation sera toujours affiché sur les appareils plus grands, sauf si quelqu'un clique sur le bouton du menu hamburger (à l'avenir).
Je n'avais pas encore commencé à travailler sur les points d'arrêt de la navbar sur mobile lorsque je l'ai testé et découvert qu'il ressemblait déjà à un menu sur mobile:
A titre de comparaison, ma maquette originale du menu mobile:
Du point de vue de l'utilisabilité, quels sont les avantages et les inconvénients d'avoir un menu déroulant du haut par rapport à la diapositive de gauche? Quelques-uns qui me viennent à l'esprit:
Avantages de la liste déroulante:
- Apparemment plus facile à programmer
- Garde le contenu principal visible pendant la navigation
Inconvénients de la liste déroulante:
- Incompatible avec la conception du bureau
- Pas de possibilité de glisser vers la droite pour ouvrir (le bouton de menu est en haut à gauche, mauvais pour les droitiers sans glisser)
- Pas aussi différent du contenu principal de la page
Avantages du menu de gauche:
- Similaire à Android Material Design et KDE Kirigami design
- Conception de site Web mobile commune
- Propice à glisser
Inconvénients du menu de gauche:
- Utilisation moins efficace de l'espace vertical
Utiliser le menu de gauche (tiroir latéral)
J'expliquerai les raisons ci-dessous de chacune de vos observations
Avantages de la liste déroulante:
Apparemment plus facile à programmer Cela n'a rien à voir avec la convivialité, c'est un problème d'implémentation. Vous saurez quelles ressources vous avez pour construire ceci, mais du point de vue des utilisateurs, ce n'est pas un problème.
Conserve le contenu principal visible pendant la navigation Cela peut être vrai dans votre cas, où vous ne disposez que de quelques éléments. Mais de manière générale, si vous avez une bonne quantité d'articles, le scénario sera le même ou pire: le menu de gauche offre une possibilité sur ce qu'il faut faire, mais un menu couvrant toute la toile peut dérouter certains utilisateurs qui ont accidentellement touché le bouton de menu
Inconvénients de la liste déroulante:
Incompatible avec la conception du bureau C'est exactement le point: le mobile n'est pas le même que le bureau, donc vous devez fournir une expérience conçue pour le mobile, pas forcer un bureau cloner pour des raisons de cohérence. Pendant que nous y sommes, la cohérence peut être obtenue en utilisant des couleurs, des polices, des images et autres. Mais si vous avez un menu hamburger, les utilisateurs s'attendront à ce que cet élément agisse comme prévu, quelle que soit la cohérence (ce qui n'est pas vrai). Les deux options seront également "incohérentes", et c'est l'idée
Aucune possibilité de faire glisser votre doigt vers la droite pour ouvrir (le bouton de menu est en haut à gauche, mauvais pour les droitiers sans glisser) Ceci est une très bonne raison de ne pas utiliser cette version, comme vous l'avez dit.
Ne se distingue pas du contenu principal de la page Exactement. Ceci est lié à ce que j'ai mentionné ci-dessus lorsque vous considérez cela comme un pro
Avantages du menu de gauche:
Similaire à Android Material Design et KDE Kirigami design C'est un énorme pro!
Conception commune de site Web mobile Idem!
Propice au glissement Je ne pourrais pas le dire mieux!
Inconvénients du menu de gauche:
Utilisation moins efficace de l'espace vertical Bien au contraire. L'idée des menus hors toile ou sidedrawer est d'interrompre momentanément le flux afin de fournir se concentrer sur une tâche que l'utilisateur doit effectuer (par exemple: choisir une page à parcourir). Une fois cette tâche effectuée, le menu disparaît, fournissant des indices sur ce qui s'est passé et ce que vous avez fait pour vous rendre à un nouvel emplacement. L'espace vertical n'est pas affecté du tout puisque l'élément est LITTERALLY hors toile
Et ce ne sont là que quelques-unes des raisons, basées sur vos propres observations. Il y en a beaucoup plus (par exemple, en traversant votre pouce tout le long de l'écran au lieu de glisser pour fermer un menu! ).
Toutefois...
Si vous n'avez que 4 articles et que vous savez qu'ils ne seront pas plus que cela, je vous suggère de les rendre visibles à tout moment et d'oublier les menus cachés, ils sont prouvé qu'il affecte mal l'UX