Usuário Yahoo! interface Blog (YUIBlog)

Resultados da pesquisa Padrão de Acordeão

Alguns meses atrás nós compartilhamos nosso pensamento atual no componente de navegação "acordeão" , e pediu que a comunidade de desenvolvedores web e designers que lêem este blog para dar uma pesquisa para nos ajudar a determinar padrões, práticas atuais, e outras diretrizes para incorporar em uma padrão de acordeão e fornecer informações para um componente Accordion YUI.

Eu tive algum tempo para rever e estudar os resultados e queria compartilhá-los com a comunidade como escrever uma versão "beta" do padrão e prepare-se para compartilhá-lo, assim, sem mais delongas, aqui estão os resultados (note que esta pesquisa não deve ser considerado estritamente científico).

Que responderam

Entrevistados identificaram-se das seguintes formas:

• Designer 21,4%
• Desenvolvedor 32,1%
• Híbrida (Ambos designer e desenvolvedor) 42,3%
• Nenhum dos 4,2% Acima

Distinções terminologia

Maiorias esmagadoras em todos os entrevistados concordaram que

• Acordeão e Menu Accordion significam a mesma coisa (73%)
• Acordeões e controles de árvore são duas coisas diferentes (89%)

Muitos comentadores descreveu a diferença entre acordeões e árvores ao longo destas linhas: "Controle Árvore geralmente implica uma profundidade de hierarquia que não é geralmente presente com um acordeão."

Uma pequena maioria disse que os painéis de Acordeão e dobrável referem-se a mesma coisa (60%).

Estas maiorias foram consistentes em papéis.

Apresentação de Acordeões

Uma sólida maioria (68%), disse que acordeões podem ser dispostos horizontalmente, bem como na vertical (e de fato o padrão é bem atestado na web). Pessoas sugeriram que as etiquetas em um acordeão horizontal deve ser escrita na vertical e / ou girado.

Uma maioria ainda maior (72%) disse que acordeões pode ter apenas dois níveis (isto se alinha com a distinção entre acordeões e árvores):

Uma pequena maioria (53%) disse que acordeões podem ser aninhadas dentro de outras acordeões. Os comentários escritos sugerem que a formulação da questão levou alguns a resposta que certamente é possível, mas não necessariamente desejáveis, fazendo sugestões, tais como: "Se você sarjeta adequadamente eles, isso seria possível, mas geralmente uma idéia terrível - tipo de como usar demasiados separadores e tê-los wrap em várias linhas. "

Esta foi uma das questões onde se descreve como designers e desenvolvedores tomaram lados opostos. 57% dos desenvolvedores e Híbridos concordaram que acordeões podem ser encaixados, enquanto que 64% dos Designers disse que não pode ser. (Nenhum dos Aboves 50/50!)

Se eu tivesse que adivinhar, eu diria que os desenvolvedores (e híbridos), mais intimamente ligada à forma como que o motivo pode ter sido expressando mais de um "você poderia fazê-lo ..." perspectiva, enquanto designers podem ter vindo a manifestar mais um "... mas você não deve" ponto de vista.

Como deve se comportar Acordeões

Uma pequena maioria (54%) acredita que acordeões deve permitir mais de um painel a ser abertas ao mesmo tempo. Ambos os comportamentos podem ser encontrados on-line, de modo a nossa impressão é que este comportamento pode depender mais dos limites do espaço de design e da finalidade do acordeão do que em um cobertor forma uma regra ou outra.

Esta questão também se dividem em linhas de identidade, mas de forma ambígua. Híbridos preferiu a uma regra painel-em-um-tempo por uma pequena maioria, enquanto Designers e Desenvolvedores e Nenhum dos Aboves concordaram que vários painéis são aprovados por maiorias ligeiramente maior.

A maioria muito maior (73%) acredita que um acordeão pode ter um estado completamente fechada (isto é, que não é necessário que haja sempre um painel aberto). O outlier é apenas que a Nenhum dos Aboves quebrou 60% para a posição de que deve haver sempre um painel aberto.

Commenters várias sugerido que é uma boa prática ter um painel aberto por padrão, e para esse painel para ser o primeiro, o mais recentemente utilizados.

Outro grande maioria (76%) acredita que o tamanho total de uma sanfona pode mudar conforme a necessidade, ao invés de ser restrito a um tamanho consistente. (É claro, existem contextos, tais como a tela de um dispositivo móvel, em que pode ser uma opção válida ou mesmo restrição de um projeto que um acordeão manter um tamanho consistente.)

A maioria muito pequena (51%) sugeriu que acordeões deve abrir ao clicar (ao contrário de em foco) e uma minoria quase tão grande (45%) disse que isso depende. Curiosamente, menos de 4% estavam dispostos a indicar os acordeões deve abrir em foco como uma regra.

Comentários escritos sobre esta questão ofereceu muita comida boa para o pensamento, tais como:

Abertura de um painel deverá exigir ação explícita. Se um acordeão tem vários painéis, abrindo em foco pode ser uma experiência chocante. Em vez disso, use uma dica de ferramenta para transmitir informações sintéticas sobre o que está no painel, e que o usuário explicitamente "clique" para abrir esse painel.

Depende da configuração de cada acordeão.

Coloquei estes exemplos juntos [ múltiplas , rollover ], de modo que o desenvolvedor pode realmente usar o "melhor ajuste" para cada caso de uso.

Além disso, deve haver a opção de usar rollover com regras diferentes: (mais aberto) ou (elementos devem ser abertas no mouseover apenas).

Para usos avançados, um acordeão deve abrir em foco durante as operações de arrastar e soltar. Em qualquer outra circunstância, você não pode confiar que o hover é intencional.

Acessibilidade

Por fim, pedimos uma pesca questão em aberto para quaisquer problemas de acessibilidade conhecido com acordeões e tem um monte de grandes respostas. (Para o nosso problema exemplo, a maioria das pessoas concordaram que fazer todo o rótulo clicáveis ​​e não apenas um pequeno ícone é importante.)

Aqui está uma amostra de insight outras sobre acessibilidade com acordeões:

Eu acho que é seguro assumir que uma interação Acordeão é uma interação avançadas. Muitos problemas de acessibilidade podem surgir.

1. Conteúdo está escondido atrás de painéis para que as pessoas não podem encontrá-lo.
2. Dependendo do tamanho da área clicável ou o gatilho para abrir / fechar os painéis que poderia haver problemas com a destreza manual necessária.

Acordeões deve abrir todos os painéis se o javascript não está disponível (apesar de que pode produzir um "flicker" para aqueles com javascript).

Depende se o conteúdo nos painéis escondidos está presente no DOM ou é recuperada após a abertura do painel. Se ele está sendo recuperado, o foco precisa ser colocado no painel do recém-inaugurado.

Bem, eu realmente acredito que o título deve ser clicáveis, especialmente se o conteúdo do elemento será carregado usando AJAX (assim como uma abordagem tabview), mas a realidade é que às vezes o desenvolvedor (deve ter) / (querem) para controlar a personalizar esse comportamento. Aqui está a lista de exemplos que eu criei para uma implementação widget acordeão com base em YUI 2.x, é provavelmente um dos componentes mais utilizados da extensão borbulhando YUI.

Tivemos um caso em que o 'label' do acordeão foi um link para um blog completo, e por isso não poderia ser acordeão-clickable. Nesse caso, escrevemos um ícone na fonte com js para fazer o trabalho. Desde que o ícone é suficientemente grande e / ou vem com um accesskey, não vejo uma grande dificuldade ...

Acordeão controles de servidor a finalidade dos lotes instalação de conteúdo em menos espaço. Uma vez que esta é uma preocupação visual, que seria bom para um leitor de tela simplesmente ler todo o conteúdo e ignorar o fato de que ele é exibido como um acordeão visualmente. É suficiente para um ícone a ser clicado para expandir um painel. Poderia haver uma opção de configuração para permitir que todo o rótulo para expandir um painel, ou pode ser deixada para o desenvolvedor de execução para anexar um ouvinte para o rótulo que chama um público "abrir" ou "expandir" a função de adicionar essa funcionalidade.

Basta pensar em um acordeão como uma exibição de guias. A área de etiqueta inteira painel deve ser clicáveis, mas se ele contém outros controles (por exemplo, a "demitir" ou o botão "fechar"), sugiro apenas a etiqueta (texto) ser clicáveis, ou pelo menos a área clikable apenas expandir até o interativo controles (ou seja, para uma legenda contendo um botão, a área acima, abaixo e "depois" do botão deve ser clicado).

Liberando o padrão Draft

Um comentarista questionou as limitações artificiais da pesquisa (um policial justo, se você me perguntar):

Eu não gostei desse levantamento. As perguntas não eram flexíveis o suficiente. Como um desenvolvedor designer /, acredito que todos os elementos da interface precisa ser adaptado para determinado site ou aplicação web. Fazer perguntas em preto e branco não deixa espaço para as diferenças óbvias entre os projetos. Alguns projetos precisam de uma regra dura e rápida, enquanto a mesma regra pode ser totalmente inapropriado para outro aplicativo. Para a maior parte, eu poderia ter respondido a cada pergunta com um "depende" de resultado.

Tenha certeza de que o padrão só recomendo cuidado eo código YUI será flexível e poderosa. A pesquisa não foi projetado para limitar as escolhas das pessoas, mas sim para recolher opiniões e preferências, por isso mesmo o feedback sobre não ter dura e rápida regras é útil.

Nós publicou uma versão beta do padrão de Acordeão na Biblioteca Padrão Yahoo! Design. Se você gostaria de dar feedback sobre o padrão, de forma de forma livre, por favor mande pelo relacionados ou visite o forum de discussão.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!