Agora que temos esses menus incríveis, pensamos em alguma forma de torná-los visualmente melhores? Sinto que há muito espaço desperdiçado (especialmente no mobile), o que também torna os alvos de clique muito menores.
Mobile
Desktop
E se fosse algo assim?
Isso poderia tornar os alvos mais fáceis de clicar e ler. Talvez pudéssemos começar isso como um experimento apenas para mobile, devido ao espaço extra?
Eu definitivamente gosto dele para a primeira aba. Talvez possamos começar a experimentar lá?
Para mim, o grande problema é a área de clique no primeiro aba em dispositivos móveis. Será que um ajuste simples no espaçamento ali já nos levaria a grande parte do caminho?
Tenho curiosidade em saber o que @awesomerobot acha disso. Concordo que aquele espaço em branco enorme é um pouco exagerado.
Acho que uma mudança maior é necessária aqui para o Mobile.
Gostaria que ficasse assim. 
Pelo que vale, não tive nenhum problema de usabilidade na primeira aba. Não que eu use essa aba frequentemente, mas não me lembro de jamais clicar errado em algo quando o faço.
Acho que isso é bom, mas seria interessante deixar o botão de sair isolado do restante. Pelo meu entendimento, você pode conectar-se a esse menu para adicionar opções, e pode ser confuso se o botão de sair mudar repentinamente do lado esquerdo para o direito ou vice-versa (mesmo que não mude com frequência).
Para mim, a coisa mais estranha é o espaço vertical em branco significativo no mobile em todas as abas, como @rishabh mencionou originalmente.
Duas opções baseadas nos mock-ups do @rishabh. Minha inclinação é para 3 colunas, mas isso limita o espaço para o texto (“entrar no modo anônimo” provavelmente pode ser encurtado e, de qualquer forma, não está ativado por padrão…)
Edição: embora, pensando melhor, 2 colunas seja provavelmente mais seguro para diferentes idiomas com palavras mais longas
“Entrar no Modo Anônimo” pode ser um texto no canto inferior direito, como “Sair.”
Quanto ao design, gosto um pouco mais da aparência compacta do estilo da terceira coluna.
Acho que o problema aqui é no mobile:
Acho que botões grandes podem funcionar aqui, mas talvez eu movesse o botão de “Sair” para o final e desse a ele largura total… Não sei…
No geral, a versão para desktop está razoável como está.
O desktop está bom, acho que essa mudança deve ser apenas para mobile.
Novo tópico? Essa discussão parece fora do assunto para o acesso rápido, que já foi concluído (e é ótimo) e não será afetado pelas últimas propostas.
Não entendo por que essas últimas mudanças são necessárias. Mas talvez eu tenha perdido alguma justificativa apresentada em outro lugar sobre por que “uma mudança maior é justificada para o Mobile aqui”.
Gosto de ter os menus de desktop e mobile iguais. Uso ambos e isso causa menos esforço para o meu cérebro.
Layouts com várias colunas geralmente são mais lentos de ler. Ícones são úteis, mas não tanto se botões forem adicionados ou removidos.
Se o espaço de aterrissagem for insuficiente verticalmente — e já ocupa a largura lateral do menu suspenso —, por que não temos botões com ícones para todos os menus?
Acredito que preencher o espaço branco vazio seja o principal objetivo. Eu aceitaria outras funcionalidades antes dos grandes botões propostos:
Sim, eu me inclino mais para a consistência (também é mais fácil de manter), mas tocar nos itens é uma experiência diferente de clicar neles… então, às vezes, layouts diferentes são necessários.
Não me preocupo muito com isso porque há poucos itens.
Talvez devêssemos? Temos que começar por algum lugar. Talvez o menu hambúrguer também pudesse ser convertido em ícones no futuro.
Não sou contra isso para alcançar a paridade com as abas no menu do usuário, mas suspeito que distintivos/convites não são realmente importantes neste contexto (os distintivos já estão no menu hambúrguer, a maioria das pessoas não usa convites), então podem ser mais ruidosos do que úteis.
Não faz muito sentido com 6 ou 7 itens.
Talvez eu esteja entendendo errado, mas elas já estão na mesma ordem (rascunhos e modos anônimos não têm abas completas na página do usuário, então isso quebra um pouco a sequência).
Isso passou pela minha mente, mas quero evitar por enquanto. No momento, todos esses menus são compostos inteiramente de coisas nas quais você pode clicar para ir a algum lugar ou fazer algo… não tenho certeza de que são o lugar certo para conteúdo puramente informativo?
Isso é um pouco complicado, porque na verdade, no máximo, este menu tem 7 ou 8 itens, e fazê-los caber em um iPhone X é diferente de fazê-los caber em um iPhone mais antigo ou em um Android. Acho que caixas de duas colunas são um melhor aproveitamento do espaço, mas ainda há espaço em celulares grandes.
Podemos ser bem elaborados e redimensionar dinamicamente essas caixas com base na altura da viewport? Se nossos objetivos são ocupar espaço e criar alvos de toque super fáceis, podemos exagerar. Isso provavelmente é extremo demais, mas isso ilustra que, mesmo indo para tamanhos grandes, ainda sobra espaço.
Se você quiser facilitar o alcance com uma só mão, idealmente todo esse menu deveria estar na parte inferior… (o estilo de abas não faz tanto sentido com esse layout, apenas um exemplo rápido). Aí você começa a complicar as coisas com a direção do conteúdo (a lista deve começar de baixo se o menu estiver na parte inferior? isso é um grande problema).
De qualquer forma, foi um pouco de divagação… Acredito que as caixas de ícones de duas colunas são um bom ponto de partida. Elas cumprem os objetivos de usar o espaço de forma um pouco melhor e tornar os elementos muito mais clicáveis.
Em vez de tentar preencher todo o espaço, por que não fazer com que o menu ocupe apenas o espaço necessário, em vez de usar a altura total? Ele já altera a altura dinamicamente no desktop. Existe algum motivo para não fazer o mesmo no mobile?
A altura total segue o padrão do aplicativo móvel de “menus de altura total que podem ser deslizados”. Se não fossem de altura total, não acho que ficaria tão claro que você pode deslizar para fechá-los (pelo menos o espaço em branco adicional serve como uma área de deslize adicional).
Isso seria uma grande melhoria e eu gosto de ter um precedente assim (não que a situação atual seja ruim).
É comum o suficiente que os usuários verifiquem seus rascunhos para justificar movê-los para uma guia própria no menu (em vez da guia de perfil), assim como notificações, favoritos e mensagens? Acredito que o uso seria relativamente incomum em comparação com as notificações, mas me pergunto como se compararia aos favoritos. Eu nem sabia que era possível visualizar todos os meus rascunhos até a mudança mais recente no menu, que os colocou na seção de perfil do menu do usuário, então me pergunto se torná-los ainda mais proeminentes seria ainda melhor.
Em breve, os favoritos serão muito mais úteis.
Olá Kris @awesomerobot, obrigado por todo o seu trabalho na UX.
A aparência de duas colunas está ótima.
Além disso, a posição mais proeminente para os rascunhos sugerida por @seanblue parece ser uma boa ideia. Eu a ignorei completamente… é útil e, no momento, está oculta.
Não tenho certeza se muitos usuários sequer vão para a esquerda do menu do usuário para ver se é clicável, já que as três abas à direita capturam toda a minha atenção.
Estava pensando que, como você pode estar codificando nessa área… se você pudesse adicionar classes CSS individuais à lista. No momento, todas têm a classe = “read”. Gostaria de poder ocultar algumas.
Estou criando um fórum privado e individual estranho para um cliente, onde os usuários não podem ver uns aos outros. Um pouco como @joebuhlig está tentando em seu tema.
Abraços
