Novos estilos de menu suspenso/menu de notificação no cabeçalho

Parece muito melhor quando há várias notificações destacadas.

2 curtidas

Sim, acho que gosto disso junto com a sugestão de Kris sobre o equilíbrio de avatar.

EDIT: Para fins de consistência, usei o mesmo espaçamento que temos para a barra lateral.

3 curtidas

Estilisticamente: Pessoalmente, prefiro o estilo quadrado original em vez do estilo de bordas arredondadas, principalmente devido a preferências pessoais e consistência com a forma como as outras caixas de popup da interface do usuário têm sido mostradas (ex: escrever). No entanto, isso é principalmente uma preferência estética.

Funcionalmente: Mais importante ainda, em uma situação sem destaques / todas as notificações lidas, os ícones dos botões à direita não são suficientemente diferenciados, na minha opinião, em comparação com a coluna de notificação à esquerda. Especialmente em uma situação sem notificações destacadas, é fácil para os ícones parecerem muito conectados com as informações à esquerda, dando a um novo usuário a impressão de que o ícone da direita está relacionado à notificação à esquerda. Isso se deve a uma combinação de três mudanças que removeram essa dica: 1) os ícones dos botões agora têm o mesmo tamanho / aparecem nas mesmas linhas (pelo menos na revisão original, não na captura de tela recente), 2) não há mais cor de fundo diferente para a coluna, 3) não há mais linha vertical separando-os. Como o nº 1 parece já estar resolvido, então talvez isso seja suficiente, mas estou um pouco incerto.

Mas ainda mais desafiador, isso também será mais confuso para o acesso à conta e para indicar ao usuário que a configuração da conta também é feita por meio deste menu, já que o comportamento do botão da conta na parte inferior mostra coisas completamente diferentes em comparação com o resto dos botões de notificação. (De forma mais geral, é super estranho ter acesso à conta e notificação no mesmo menu suspenso do cabeçalho, em vez de dois separados. No entanto, essa pode ser uma compensação justa, dadas as economias/limitações de espaço em dispositivos móveis).

TLDR da minha postagem: Eu recomendo que o ícone da conta tenha alguma diferenciação especial para que as pessoas o encontrem.

3 curtidas

Isso me lembra: embora provavelmente esteja além do escopo deste experimento, acho que melhoraria a UX do Discourse se as notificações fossem movidas para seu próprio menu (que poderia ter quatro abas/seções horizontais para curtidas, respostas, menções e selos).

Eu sinto que este também é um padrão bastante comum (por exemplo, no Youtube, Reddit, Twitter/Bluesky, etc., mas também em outros softwares de fórum como o XenForo).

4 curtidas

Concordo totalmente com você. Você está certo, está fora do escopo desta alteração. Separar o menu do usuário do menu de notificação seria uma ótima mudança para analisarmos.

3 curtidas

Sim, tenho tentado no celular esta tarde e a área de toque parece bem pequena, especialmente para as abas à direita.

4 curtidas

É isso que o Facebook faz…

Para mim, há vários aspectos que tornam isso um pouco problemático: (o que se soma a problemas anteriores que tivemos)

  1. Avatares muito pequenos
  2. Mar de azul quando há mensagens não lidas - o que agora é agravado porque a minúscula linha branca entre as notificações chama muita atenção.
  3. Destaque minúsculo no lado direito, difícil de clicar

Eu me pergunto se um caminho aqui é descartar o destaque azul e usar o “ponto azul” (que já usamos na barra lateral) para novas notificações.

Então, podemos tornar o avatar um pouco maior e restaurar o alvo de clique e o destaque do lado direito.

Não estou dizendo que vamos seguir o caminho completo do Facebook com avatares ENORMES, mas pode haver um meio-termo, desistir do “mar de azul” parece ser um fator de desbloqueio aqui, potencialmente.

4 curtidas

Para mim, eu gosto dessa mudança, mas o tamanho da fonte é muito pequeno. No menu de notificações, é de cerca de 13px, e o corpo principal do tópico tem 16px. Você pode vê-los juntos aqui:

Isso torna os itens muito mais difíceis de ler para mim, uma pessoa com visão já terrível :nerd_face: Seria bom se as fontes tivessem o mesmo tamanho.

9 curtidas

Não tenho certeza do que penso sobre o grande espaço abaixo dos ícones à direita… Acho que é exageradamente grande.

3 curtidas

Sim, senti o mesmo depois de um tempo. Agora voltou para 16px. Estou tentando imitar muito do espaçamento e dimensionamento na barra lateral. Junto com os estados ativo e de passagem do mouse.

Eu os voltei ao tamanho original.

Eu acho que esta é uma boa ideia em geral. Isso nos aproximaria ainda mais dos estados da barra lateral. Posso fazer uma tentativa nisso.

Você se importaria de elaborar como mover em direção a um ponto azul nos ajuda a tornar o avatar maior?

Também aumentei isso.

@sam

O que você acha disso? Foi uma mudança muito simples, possível sem nenhuma edição de modelo/núcleo, exceto pelo CSS.

Aqui está com a navegação no topo

2 curtidas

Esses designs de acompanhamento parecem ótimos!

Se optarmos pela navegação no topo, poderíamos tentar estilizar como os designs existentes que usamos em horizontal-overflow-nav em outras partes do core.

1 curtida

Isso parece muito semelhante ao menu que tínhamos antes da última atualização.

Isso já não causa confusão para os usuários no celular? (Por exemplo, quando as pessoas não conseguem encontrar o botão de administrador nas páginas de usuário). Se o último ícone estivesse escondido assim, seria muito difícil encontrar, por exemplo, o botão de logout.

4 curtidas

Ah sim, você está certo. Acho que deveríamos mantê-lo com a navegação à direita para evitar a confusão de transbordamento.

Na verdade, eu estava querendo apenas imitar o design estilisticamente. Acho que ainda poderíamos fazer isso enquanto ele estiver à direita. Apenas para que tenhamos uma divisão mais clara entre os filtros e a área de notificações.

Estava pensando em algo assim:

5 curtidas

Apenas pensando alto, outra ideia é que poderíamos diminuir as notificações de leitura:

Um precedente que já temos na lista de tópicos

5 curtidas

Posição dos Círculos

Eu prefiro (pessoalmente) os círculos de notificação à direita, acho que vale a pena experimentar os círculos à esquerda primeiro para ver como as pessoas se sentem, talvez seja natural e todos nós gostemos.

Barra de Navegação no Topo vs. Lateral

Eu prefiro muito mais a barra de navegação na lateral, é muito mais fácil de usar e clicar. Além disso, há grandes restrições de espaço.

Destaque da Barra de Navegação

Com a barra de navegação, prefiro manter a “caixa de destaque azul grande” em vez de encolhê-la como está agora, há alguma psicologia estranha em jogo para mim com as caixas de navegação minúsculas. Parece muito difícil de clicar, apesar de nenhuma mecânica ter mudado.

Meu cérebro está dizendo estranhamente: “tenho que acertar a caixinha minúscula para mudar a navegação”.


Meu raciocínio é que, quando as coisas estão visualmente menos agitadas, há um pouco mais de espaço para avatares maiores. Dito isso, acho que o tamanho atual que você tem está bom.

De qualquer forma, sinta-se à vontade para descartar esse feedback por enquanto.

5 curtidas

Ainda acho que precisamos encontrar uma maneira de ir de ponta a ponta com os itens destacados para corresponder aos nossos outros menus, fazemos isso em quase todos os lugares agora… Acho que a única grande exceção restante é a barra lateral

3 curtidas

Eu acho que a consistência é importante, mas o problema que estou encontrando é que, quando há muitos itens não lidos… parece um mar de azul, sem nenhuma delimitação entre os itens.

Com nossos menus, não mostramos muitos itens com destaque ativo. Geralmente… acho que é apenas um, ou até nenhum.

Talvez se avançarmos com os pontos azuis irregulares, isso não importará mais.

3 curtidas

Gostei da ideia que você apresentou aqui, Keegan, obrigado por compartilhar@!

2 curtidas

A última atualização está disponível aqui na meta.

1 curtida