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

No geral, acho que estamos progredindo muito aqui, o lado direito está funcionando, mas acho o contraste em coisas lidas muito difícil de ler e ver, pois o cinza é um pouco triste.

Compare com este artefato interativo (clicável, experimente)

Eu gosto um pouco da última opção, pois é clara e organizada, mas as duas primeiras também parecem boas.

Opiniões? (e o que aconteceu com o Nathan… que avatar :slight_smile: )

(também o raio de borda reduzido parece um pouquinho melhor)

4 curtidas

Hoje alguns dos designers e eu fizemos um emparelhamento e iteração nos estilos. É aqui que chegamos.

  • Trazer de volta o fundo azul, mas um pouco mais suave.
  • Manter a nova estilização “read” para imitar listas de tópicos
  • Diminuir o destaque de fundo “active” do item de navegação ativo
  • Manter o fundo do círculo azul para ícones de não lidos


Sam, eu também gosto das duas primeiras opções que seu artefato mostra. Vou investigar mais sobre elas. Por enquanto, acho que nossa iteração mais recente nos coloca em um ponto onde a diferenciação está um pouco mais clara.

Para avançar, acho que precisaríamos de alguns ajustes no template e na cópia.

CSI ENHANCE

Parece normal

6 curtidas

O último parece muito bom! Comunica o status não lido claramente, mas ainda é muito leve. Da mesma forma, gosto do primeiro (embora eu não ache que o círculo azul seja necessário, então, em comparação, o último vence). Todos os outros designs são “demais” para o meu gosto pessoal.

No celular, estou recebendo um fundo “avermelhado” em vez de azul.

Estou achando o cinza claro muito difícil de ler, parece desbotado. Talvez possamos tentar apenas cinza na decoração do avatar?

O contraste aqui é simplesmente muito, muito difícil para os olhos, especialmente no texto que não está em negrito.

Acho que é por isso que o Gmail acabou usando font-weight para a delimitação.

Também no desktop, estou recebendo 2 azuis diferentes, o que é confuso.

Sim, estou achando esse feedback interessante. Deve ser devido à proximidade, negrito, espaçamento e menor largura do texto.

Estou usando a mesma cor para significar “lido” que as listas de tópicos usam.

Dito isso, acho que o fundo do ícone também tem algo a ver com isso, é por isso que gosto da sugestão do @keegan aqui:

Mais uma opção que estou querendo implementar é o título inline com descrição. Algo assim:

Isso é ao passar o mouse? Ou a lista está realmente mostrando 2 cores diferentes de fundo azul em itens diferentes?

Este, sim, duas cores diferentes. Você precisa obter uma conta para exigir aprovação no local para ver isso.

1 curtida

Ah ok, os estilos estão sendo aplicados a não lidos. Adicionarei um pouco de CSS para direcionar este também.

Você pode enviar uma captura de tela do fundo avermelhado no celular?

1 curtida

As últimas atualizações estão no ar há alguns dias. Gostaria de saber o que todos aqui acham delas.

Eu geralmente estou bem com isso, mas há algo naquele texto cinza claro que ainda me incomoda. Eu ainda prefiro em preto. Podemos tentar isso? Deixe o ícone cinza, mas mantenha o texto em preto nas notificações lidas?

Exceto por isso, prefiro essa estilização à nossa original. Ainda acho que vale a pena explorar algumas opções mais radicais, mas como uma iteração, parece bom.

Também @lindsey, uma grande mudança que deveríamos pensar é fazer os avatares aparecerem por padrão, não estamos fazendo isso e muitas instalações padrão têm essa experiência padrão menos que ideal:

As mudanças que @jordan.vidrine fez aqui são refinamentos em vez de reimaginar, o que é bom

  • A seleção parece um pouco melhor
  • O estilo distinto do ícone para lido vs. não lido parece melhor
  • Os links azuis nas notificações são um ponto fora da curva, é bom ter isso em preto.
3 curtidas

A alteração foi mesclada.

1 curtida

Hã, não tentamos isso em algum momento recentemente? Pensei que tínhamos tentado e decidido não prosseguir por algum motivo. Mas gosto muito da ideia, o menu de notificações é muito mais interessante e informativo com os avatares.

2 curtidas

Eu acho que um bom compromisso aqui é começar por ativá-lo por padrão em novas instalações.

Eu acho que a grande razão pela qual adiamos são as personalizações que as pessoas fizeram.

1 curtida

@jordan-vidrine Sinto que podemos habilitar este experimento globalmente no meta (e fixar este tópico), e ver se alguém reclama, no geral acho que onde estamos é melhor do que nosso padrão.

@lindsey o que você acha?

É uma mudança evolutiva que é sutilmente melhor de algumas maneiras.

3 curtidas

Feito!

Habilitado para todos os usuários trust_level_0.

3 curtidas

Ainda acho a diferença entre branco sobre azul e preto sobre branco mais fácil de reconhecer do que a diferença entre branco sobre azul e branco sobre cinza escuro

Talvez seja porque o ícone é o primeiro lugar para onde olho.
É mais importante para mim do que o avatar. Porque quem disparou a notificação também está lá como texto, o que me notifica está apenas lá para posts movidos, caso contrário, o ícone é o único indicador.

2 curtidas

Algo mudou em relação à fonte ou ao tamanho do ícone? Minha primeira impressão é que eles estão um pouco maiores agora, mas isso pode ser devido ao espaço em branco adicionado. Isso cria uma pequena incompatibilidade entre os ícones de notificação e os ícones do menu.

Além disso, o preenchimento à direita parece um pouco grande demais para mim.

Nota lateral: Estou usando o dimensionamento do navegador para 90% (não tenho certeza de como isso causaria algum problema, mas os navegadores são estranhos às vezes :smile: ).

A última (e provavelmente final) iteração está agora ativa. Estou definindo um lembrete de favorito para mim mesmo para a próxima semana para mesclar se não houver mais comentários.

2 curtidas

Obrigado por evoluir este recurso bacana. É muito melhor do que era há mais de um ano.

Devo admitir, no entanto, que não estou completamente convencido com o uso de uma nova quebra de linha completa antes do elemento detalhado.

No meu caso atual, você pode ver quanto espaço é economizado pelo detalhe começando logo após o nome de usuário e a separação é alcançada em qualquer caso pelo tipo em negrito do nome de usuário contra o peso menor do detalhe.

Mas se mantivermos a capacidade de modificar isso via CSS, estou satisfeito.

1 curtida

Sim, definitivamente deveria ter uma classe.

1 curtida