Maintenant que nous avons ces menus géniaux, avons-nous réfléchi à des moyens de les rendre plus attractifs ? J’ai l’impression qu’il y a beaucoup d’espace gaspillé (surtout sur mobile), ce qui rend également les zones cliquables beaucoup plus petites.
Mobile
Bureau
Et si on essayait quelque chose comme ça ?
Cela pourrait rendre les zones cliquables plus faciles à atteindre et à lire. Peut-être pourrions-nous commencer par une expérience réservée aux mobiles, grâce à l’espace supplémentaire ?
Je l’apprécie vraiment pour le premier onglet. Peut-être pourrions-nous commencer à expérimenter là-bas ?
Pour moi, le principal problème concerne la zone de clic sur mobile dans le premier onglet. Je me demande si un simple ajustement de l’espacement à cet endroit ne suffirait pas à régler l’essentiel du problème.
Je suis curieux de connaître l’avis de @awesomerobot à ce sujet. Je suis d’accord, l’énorme espace blanc est un peu excessif.
Pas opposé à des changements plus importants, mais passer à deux colonnes est une amélioration super simple.
Je pense qu’un changement plus important est justifié ici pour Mobile.
J’aimerais que cela ressemble à ça. 
Pour ce que cela vaut, je n’ai rencontré aucun problème d’utilisabilité dans le premier onglet. Ce n’est pas que j’utilise souvent cet onglet, mais je ne me souviens pas avoir jamais cliqué à côté lorsque je l’ai fait.
Je trouve cela bien, mais il pourrait être bon d’isoler le bouton de déconnexion du reste. À ma connaissance, vous pouvez vous connecter à ce menu pour ajouter des options, et cela pourrait prêter à confusion si le bouton de déconnexion passait soudainement du côté gauche au côté droit ou inversement (même si cela ne change pas souvent).
Pour moi, le point le plus gênant est l’espace vertical blanc important sur mobile dans tous les onglets, comme @rishabh l’avait initialement mentionné.
Deux options basées sur les maquettes de @rishabh. Je penche pour la disposition en 3 colonnes, mais cela limite l’espace pour le texte (« activer le mode anonyme » peut probablement être raccourci et n’est pas activé par défaut de toute façon…)
Édit : en y réfléchissant, la version 2 colonnes est probablement plus sûre pour les différentes langues avec des mots plus longs.
“Activer le mode anonyme” peut être un texte en bas à droite, comme “Déconnexion”.
Pour le design, j’aime un peu plus l’aspect compact du style de la troisième colonne.
Je pense que le problème vient ici du mobile :
Je suppose que de gros boutons pourraient fonctionner ici, mais dans ce cas, je déplacerais peut-être la déconnexion en bas et lui donnerais toute la largeur… Je ne sais pas…
Dans l’ensemble, la version bureau me semble correcte telle quelle.
Le bureau est correct, je pense que ce changement ne devrait concerner que les mobiles.
Nouveau sujet ? Cette discussion semble hors sujet pour l’accès rapide, qui a déjà été finalisé (et c’est tant mieux) et qui ne sera pas affecté par les dernières propositions.
Je ne comprends pas pourquoi ces derniers changements sont nécessaires. Mais il se peut que j’aie manqué une justification présentée ailleurs expliquant pourquoi « un changement plus important est justifié pour la version mobile ici ».
J’aime avoir les menus de bureau et mobile identiques. J’utilise les deux et cela sollicite moins mon cerveau.
Les mises en page multi-colonnes sont généralement plus lentes à lire. Les icônes sont pratiques, mais moins si des boutons sont ajoutés ou supprimés.
Si l’espace d’accueil est insuffisant verticalement — ce qui correspond déjà à la largeur latérale du menu déroulant — pourquoi n’avoir pas des boutons icônes pour tous les menus ?
Je suppose que l’objectif principal est de remplir l’espace blanc vide. Je me contenterais d’autres fonctionnalités avant les grands boutons proposés :
Oui, je penche vers plus de cohérence (plus facile à maintenir aussi), mais toucher les éléments est une expérience différente de cliquer dessus… donc parfois, des mises en page différentes sont justifiées.
Je ne m’inquiète pas trop de cela car il y a très peu d’éléments.
Peut-être devrions-nous ? Il faut bien commencer quelque part. Peut-être que le menu hamburger pourrait aussi être remplacé par une icône plus tard.
Je ne suis pas opposé à cela pour atteindre la parité avec les onglets du menu utilisateur, mais je soupçonne que les badges/invitations ne sont pas vraiment importants dans ce contexte (les badges sont déjà dans le menu hamburger, la plupart des gens n’utilisent pas les invitations), donc ils pourraient être plus bruyants qu’utiles.
Cela n’a pas vraiment de sens avec 6-7 éléments.
Peut-être que je mal compris, mais elles sont déjà dans le même ordre (les modes brouillon et anonyme n’ont pas d’onglets complets sur la page utilisateur, donc ceux-ci perturbent un peu l’ordre).
Cela m’a traversé l’esprit, mais je veux m’en tenir pour l’instant. Pour le moment, tous ces menus sont composés exclusivement d’éléments sur lesquels vous pouvez cliquer pour aller quelque part ou faire quelque chose… Je ne suis pas sûr qu’ils soient l’endroit idéal pour du contenu purement informatif ?
C’est un peu délicat car, en réalité, ce menu comporte au maximum 7 à 8 éléments, et les faire tenir sur un iPhone X n’est pas la même chose que de les faire tenir sur un ancien iPhone ou un appareil Android. Je pense que des boîtes en deux colonnes constituent une meilleure utilisation de l’espace, mais il reste encore de la place sur les grands téléphones.
Nous pourrions être très élaborés et redimensionner dynamiquement ces boîtes en fonction de la hauteur de la fenêtre d’affichage ? Si nos objectifs sont d’occuper l’espace et de créer des zones de clic super faciles à toucher, nous pourrions vraiment en faire des tonnes. C’est probablement trop extrême, mais cela illustre le fait que même en agrandissant énormément, il reste encore de l’espace.
Si vous souhaitez viser une accessibilité à une main, idéalement tout ce menu devrait se trouver en bas… (le style d’onglets n’a pas autant de sens avec cette mise en page, c’est juste un exemple rapide). Ensuite, vous commencez à compliquer les choses avec les directions de contenu (le début de la liste devrait-il se trouver en bas si le menu est en bas ? C’est un vrai casse-tête).
Bref, c’est un peu un long discours… Je pense que les boîtes d’icônes en deux colonnes sont un bon point de départ. Cela permet de mieux utiliser l’espace et de rendre les éléments beaucoup plus faciles à toucher.
Au lieu d’essayer de remplir tout l’espace, pourquoi ne pas faire en sorte que le menu ne prenne que l’espace nécessaire, plutôt que d’utiliser toute la hauteur ? Il ajuste déjà sa hauteur dynamiquement sur ordinateur. Y a-t-il une raison de ne pas faire de même sur mobile ?
La hauteur totale suit le modèle de l’application mobile de « menus défilables sur toute la hauteur ». S’ils n’étaient pas sur toute la hauteur, je ne pense pas qu’il serait aussi clair que vous puissiez les balayer pour les fermer (à tout le moins, l’espace blanc supplémentaire sert de zone de balayage supplémentaire).
Ce serait une énorme amélioration et j’aime bien un tel précédent. (Ce n’est pas que la situation actuelle soit mauvaise).
Est-il suffisamment courant que les utilisateurs consultent leurs brouillons pour justifier de les déplacer dans un onglet dédié du menu (au lieu de l’onglet profil), tout comme les notifications, les favoris et les messages ? Je suppose que cela serait relativement peu utilisé par rapport aux notifications, mais je me demande comment cela se comparerait aux favoris. Je ne savais même pas qu’il était possible de consulter tous ses brouillons avant que le changement de menu le plus récent ne les place dans la section profil du menu utilisateur, donc je me demande si les rendre encore plus visibles ne serait pas encore mieux.
Les signets deviendront bientôt beaucoup plus utiles.
Bonjour Kris @awesomerobot, merci pour tout votre travail sur l’UX.
L’aspect à deux colonnes est super.
De plus, la position plus visible pour les brouillons suggérée par @seanblue semble être une bonne idée. Je l’avais complètement oubliée… c’est utile et actuellement caché.
Je ne suis pas sûr que beaucoup d’utilisateurs aillent même à gauche du menu utilisateur pour voir s’il est cliquable, car les trois onglets à droite captent toute mon attention.
Je me demandais, comme vous codez peut-être dans cette zone… si vous pouviez ajouter des classes CSS individuelles à la liste. Car actuellement, toutes ont la classe = “read”. J’aimerais pouvoir en masquer certaines.
Je crée un forum privé et individuel étrange où les utilisateurs ne peuvent pas se voir. Un peu comme @joebuhlig tente de le faire dans son thème.
Salutations
