Acessível a navegação de grandes árvores de informação

Question

Estou desenvolvendo um site público que é o front-end para informações sobre condições médicas.

Depois que o usuário faz uma pesquisa (questionário com base) são apresentados com os resultados que são classificados em seções e subseções.

itens de informação podem ser atribuídas a ambas as seções e subseções.

Nas seções momento são representados por guias na parte superior e na tela e sub-seções de links em uma barra lateral. Os links a mudança da barra lateral, dependendo de qual seção é selecionado.

O problema é que os nomes de seção são bastante longa (várias palavras) e como resultado o comprimento combinado dos guias é muito grande para uma resolução de tela padrão (1024 x 768). Por isso, eles embrulhar e quebrar o layout da página. Também terá de adicionar guias adicionais no futuro.

Com este problema em mente eo fato de nosso público-alvo é bastante amplo, este é um site médico público, que opções estão lá para apresentar este tipo de informação de uma forma que é acessível e fácil de navegar para um usuário médio.

Answer 1

Quanto tempo são os nomes das subseções? Irá que caber no espaço para guias? É provável que você obter um melhor desempenho do usuário se você colocar os links de seção no menu barra lateral e as ligações subseção nas abas, ao invés do contrário. Consulte http://www.usability.gov/pubs/040106news.html .

A outra alternativa é colocar tudo no menu barra lateral. ligações Subsecção pode aparecem recuadas sob os seus links de seção. Você também pode considerar colocar os links subseção em uma coluna de seu próprio à direita da coluna de seção. Isso faz com que o estábulo secção menu, mas tem um monte de espaço horizontal que é talvez melhor usado para conteúdo. Em ambos os casos, a devida atenção ao design visual irá mostrar a atual seção, subseção, ea ligação entre eles.

Não deve haver um problema com a acessibilidade, desde que você está usando links para navegar para cada seção / subseção (talvez gerado programaticamente para cada página com base em um banco de dados relativo links para páginas).

Answer 2

Apenas o brainstorming algumas idéias:

• Use as caixas de combinação para permitir que o usuário selecione os (sub) seções, em seguida, exibir os itens de informação apropriada.
• Criar páginas separadas para cada nível de seção e fornecer um controle de migalhas para mostrar ao usuário onde ele / ela é na hierarquia da página.
• Criar algum tipo de menus desdobráveis ??que automaticamente esconder quando o usuário lê um item de informação.

Em uma outra pergunta sobre SO, me deparei com um link para Quince , talvez você pode encontrar alguma inspiração lá também.

Answer 3

Você pode tentar:

• Um menu iPod-estilo (em que subseções são páginas que voam pela direita escondida): http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

Ou, como Daan disse:

• Cascading caixas drop-down: http: //www.asp .net / AJAX / AjaxControlToolkit / Samples / CascadingDropDown / CascadingDropDown.aspx

A desvantagem com esses dois (mais uma exibição de árvore tradicional) é que as subseções não são visíveis até que você escolha uma seção. Se os usuários não sabem o nome da subseção eles estão atrás, então qualquer um destes será um bom ajuste.

Se, por outro lado, eles sabem o nome da subseção eles estão atrás, provavelmente é melhor dar-lhes uma caixa de texto de auto-completar para que eles possam digitar algumas personagens e ir diretamente a ele.