Nouveaux styles de menu déroulant d'en-tête / menu de notification

Ceci est fusionné → UX: Notification panel update by jordanvidrine · Pull Request #33795 · discourse/discourse · GitHub


MISE À JOUR :

Ceci est maintenant actif sur meta pour tous les utilisateurs

Résumé

Expérience pour un nouveau look et style pour les menus déroulants de l’en-tête ainsi que pour les styles des éléments de notification.

Nous supprimons le style de bordure « actif » des menus déroulants dans l’en-tête. Cette bordure complique le style lors de la création de thèmes.

Nous ajoutons de l’espacement et modifions le style de l’icône « actif » sur le menu de notification.

Captures d’écran

16 « J'aime »

Génial, cette expérience est passionnante ! J’adore le nouveau look ici Jordan :smiley:

Quelques commentaires initiaux : l’espacement semble un peu serré, pourrions-nous expérimenter avec un peu plus d’espacement ? Je pense que c’est parce que le rembourrage des boutons ✓ Dismiss est assez grand. Je pense que ce serait bien si nous les alignions avec le même rembourrage (0.75rem ?)

Quelque chose comme ça ? :

9 « J'aime »

Les titres des sujets me manquent vraiment. Quand il y en a un ou deux comme par des utilisateurs aux noms courts, il y a assez d’informations. Mais un ou deux mots du titre ne me suffisent pas.

10 « J'aime »

Merci pour vos commentaires à tous les deux. Les deux sont vraiment pertinents :+1: Je vais laisser plus de commentaires s’accumuler avant d’y répondre, mais soyez assuré que je les ajouterai à la liste.

7 « J'aime »

Quelques premières impressions :

Pour Default et Horizon :

  • Comme Keegan, l’espacement me semble un peu serré
  • L’absence d’ombrage dans l’espace négatif entre les éléments me donne l’impression que c’est plus chargé, comparé à quand tout cela se mélangeait

Spécifique à Horizon :

  • Sur Horizon, l’arrière-plan des éléments a une couleur - devrait-il y en avoir une ? (Sur Default, c’est maintenant gris).
  • Sur Horizon, les coins arrondis en haut à gauche me semblent bizarres… le conteneur semble plus net que les éléments à l’intérieur - sur Default, j’ai l’impression qu’ils correspondent mieux.
5 « J'aime »

J’ai trouvé que le compromis consistant à accorder plus d’espace aux anciennes notifications (que j’ai potentiellement déjà traitées) en échange de la perte du contexte des notifications plus récentes (que je dois encore traiter) est inattendu.

Cela rejoint ce que @moin a dit plus haut, et le design plus dense, comme l’a souligné @keegan, est en contradiction avec l’évolution vers moins de densité que nous visons avec des composants comme la barre latérale.

6 « J'aime »

[citation=“mcwumbly, post:5, topic:369574”]
Sur Horizon, les coins arrondis en haut à gauche me semblent bizarres… le conteneur semble plus net que les éléments à l’intérieur - sur Default, on a l’impression qu’ils correspondent mieux.
[/citation]

Ceci est dû au rayon de bordure plus grand défini par Horizon

[citation=“mcwumbly, post:5, topic:369574”]
Sur Horizon, l’arrière-plan des éléments a une couleur - devrait-il y en avoir une ? (Sur Default, il est maintenant gris).
[/citation]

Bonne remarque. C’est dû à un paramètre incorrect, je pense.

3 « J'aime »

Concernant l’espacement… qu’en pensez-vous ?

Ici, je limite le titre à une seule ligne, mais je permets au spécificateur d’avoir également sa propre ligne. J’ai également ajouté un remplissage gauche et droit du même espace pour correspondre aux boutons ci-dessous.

7 « J'aime »

Ceci s’écarte peut-être un peu trop de l’objectif de l’expérience, mais je pense qu’un problème plus important qui limite notre conception est le nombre de notifications que nous affichons. Je ne pense pas que nous ayons besoin d’afficher une page entière de notifications simplement parce que la hauteur du navigateur le permet. Les utilisateurs peuvent cliquer sur “afficher plus” et être dirigés vers /my/notifications lorsqu’ils ont besoin de tout voir.

:100: Je pense que c’est un pas dans la bonne direction, et nous pourrions éventuellement :

  • réduire le nombre de notifications que nous affichons
  • afficher plus d’informations par notification

Cette conception que j’ai trouvée sur Dribbble par exemple, a un bon ratio entre le nombre de notifications / les informations sur chaque notification / la densité.

10 « J'aime »

Ah ouais, j’aime vraiment cet affichage.

3 « J'aime »

J’ai aussi remarqué que les avatars sont moins recouverts par l’icône dans votre capture d’écran que dans la mienne. Choisir « plus petit » pour la taille du texte dans les préférences semble en être la cause. Peut-être que c’était déjà le cas auparavant, qu’une plus grande partie de l’avatar était recouverte parce que j’avais changé la taille du texte, mais maintenant les avatars sont plus recouverts qu’avant. (Je préfère toujours l’ancienne version avec seulement l’icône, donc ça ne me dérange pas.)

À titre de comparaison : avec l’expérience et en mode sans échec

Et certaines icônes sont en retrait

3 « J'aime »

Pensées ?

3 « J'aime »

Je pense que nous avons besoin de plus d’espace autour des notifications, cela corrigerait également ce désalignement :

image

Ces rayons peuvent-ils être identiques ?

image

Je ne pense pas que l’arrière-plan gris fonctionne bien pour indiquer le nouveau et l’actif… nous utilisons habituellement le tertiaire pour les états nouveau et actif et le gris pour le survol.

image

Les icônes me semblent un peu trop petites maintenant, je plisse les yeux pour en distinguer certaines.

image

image

Avez-vous des idées sur la façon dont cela fonctionnerait avec les changements du menu de recherche ? nous sommes récemment passés en pleine largeur sur les faits saillants là-bas, donc cela semble un peu étrange de revenir à des boîtes.

7 « J'aime »

J’aime le changement de style de l’onglet en général.

Un autre endroit où il faudrait un peu plus d’espacement : la cible de clic pour les onglets sur mobile est très petite

C’est assez difficile d’appuyer dessus.

3 « J'aime »

Pour être honnête, je n’ai pas aimé et je préfère l’ancien agencement.

  • Comme d’autres l’ont dit plus haut, l’agencement est trop chargé. La capture d’écran ci-dessus améliore cela.
  • Le rayon des bordures et l’espacement entre tous les éléments donnent l’impression que la liste est plus chargée. Cela ajoute du bruit visuel à l’information :

  • Les couleurs d’arrière-plan pour les éléments non lus ne rendent pas aussi bien dans d’autres palettes de couleurs. Ils ont tous l’air grisâtres et ont perdu leur accent de couleur.

Ancien :

Nouveau :

  • Puisque nous n’avons plus de bordure séparant les notifications des icônes, le désalignement entre celles-ci et les éléments donne l’impression que quelque chose ne va pas, surtout sur la première icône.

  • Les icônes sont trop petites et en mode mobile, l’espacement est incorrect. Il est plus difficile de cliquer sur la bonne icône. J’ai déjà accidentellement cliqué sur une notification au lieu de l’icône, deux fois.

[quote=“keegan, post:9, topic:369574”]
Cela s’écarte peut-être un peu trop du but de l’expérience, mais je pense qu’un problème plus important qui limite notre conception est la quantité de notifications que nous affichons. Je ne pense pas que nous ayons besoin d’afficher une page entière de notifications juste parce que la hauteur du navigateur le permet. Les utilisateurs peuvent cliquer sur « Afficher plus » et être dirigés vers /my/notifications lorsqu’ils ont besoin de tout voir.
[/quote]Je ne suis pas d’accord. C’est bien que nous profitions de la fenêtre d’affichage disponible.

[quote=“keegan, post:9, topic:369574”]
afficher plus d’informations par notification
[/quote]Ce serait bien.

7 « J'aime »

Je fusionne certains changements. Voici la dernière itération.

comment l’avatar serait-il aligné en haut pour qu’il soit toujours plus proche du nom d’utilisateur ? Je me demande si les avatars centrés sembleraient un peu “décrochés” si j’avais beaucoup de notifications sur deux lignes… comparaison très approximative

1 « J'aime »

J’ai essayé cela en local et ça m’a paru “bizarre”, mais je peux l’implémenter ici pour voir ce que tout le monde en pense.

1 « J'aime »

Pouvez-vous essayer d’augmenter l’espacement entre les éléments pour qu’il corresponde au remplissage extérieur afin de voir ce que vous en pensez ?

1 « J'aime »

1 « J'aime »