O retorno à China coincidiu com o evento UXday organizado pelo Departamento de Experiência do Usuário do Baidu. O tópico de nossa discussão em grupo foram tabus ao usar guias.
O tópico que discutimos focou em um ponto: como lidar com abas enormes?
Primeiro, vamos revisar a história do Tab. A guia aqui é um termo geral para um tipo de elemento interativo, incluindo navegação em web design e uso em software de desktop, como navegadores. Os elementos interativos chamados guias geralmente possuem as duas características a seguir:
Tem significados de ação e status. Uma razão pela qual as guias são populares é que elas são fáceis de operar e, ao mesmo tempo, permitem que os usuários saibam claramente onde estão no momento (guia).
Do ponto de vista da arquitetura da informação, o conteúdo entre as guias geralmente não se sobrepõe. E a relação entre as abas deve ser igual e não deve haver afiliação mútua.
Portanto, em um sentido amplo, a maioria dos menus de navegação pode ser resumida em guias.
O uso de guias em web design é geralmente considerado pioneiro pela Amazon. Acredito que muitos de vocês leram o clássico artigo de revisão de LukeW: The History of Amazon's Tab Navigation (para a versão chinesa, clique aqui). A partir deste artigo, podemos ver que a navegação da Amazon evoluiu de apenas duas guias: Livro e Música para duas linhas de guias em seu auge em 2000. Obviamente, quando o número de abas aumenta, o método de interação com abas encontra algumas dificuldades.
Outro exemplo é a caixa de diálogo Configurações no Word 2003. Conforme mostrado na figura abaixo, quando há muitos rótulos e o espaço de exibição é limitado, a Microsoft precisa organizar os rótulos em duas linhas. Um grande problema com isso é que, quando a linha superior de rótulos é selecionada, como expressar a relação entre o estado selecionado e a página de conteúdo atual?
A abordagem da Microsoft foi criticada. Na imagem acima, quando o usuário clica na linha superior de rótulos, a linha superior troca automaticamente com a linha inferior para manter um relacionamento próximo entre os rótulos e a página de conteúdo. No entanto, esta abordagem torna a posição do rótulo muito inconsistente. Acredito que muitas pessoas tenham a mesma experiência confusa.
Em alguns outros softwares, como o Firefox 3 (conforme mostrado abaixo), ao clicar no rótulo da linha superior, a exibição do rótulo apenas muda para o estado selecionado. A vantagem disso é que a consistência da posição do rótulo é mantida, mas. algumas indicações de posição são perdidas.
Então, se múltiplas linhas de rótulos não são uma boa ideia, como você lida com muitas delas?
Uma ideia óbvia é mudar a disposição das etiquetas da disposição horizontal usual para a vertical. Geralmente essa disposição fica no lado esquerdo da visualização e pode ser na forma de ícones ou texto.
No entanto, existem alguns problemas com esta abordagem. Em primeiro lugar, se o nome do rótulo for muito longo, ele ocupará muito espaço valioso à esquerda, e esse espaço passa a ser o foco da atenção do usuário na tela e é um campo de batalha para estrategistas militares. Alguns sites colocam o texto verticalmente. Essa abordagem, especialmente para sites em inglês, é um desastre para a legibilidade. Se colocado no lado direito, pode interferir na barra de rolagem e não é fácil para os usuários perceberem. Em segundo lugar, quando não há muitas tags (considerando o número variável de tags), também é uma dor de cabeça colocar qual conteúdo nas tags.
Uma ideia é que, se houver alguma estrutura entre as tags, as tags poderão ser agrupadas. Em seguida, adicione um nível de navegação. O OneNote da Microsoft atingiu o auge nesse aspecto. Ele divide as informações em três níveis: bloco de notas, seção e página. Cada nível é representado pela navegação por guias. O resultado é que os lados superior, esquerdo e direito da página estão cheios de rótulos. ... A Microsoft é muito boa em lidar muito bem com a navegação de rótulos de três camadas usando gestalt (divisão à esquerda), marcação de cores (cor para seção e branco para página) e outras técnicas.
