it-swarm-pt.com

Melhor interface do usuário para uma tabela HTML.

Frequentemente, preciso mostrar dados tabulares e quero toda a mágica. . . classificando colunas, paginação etc. Eu prefiro usar colunas nas quais você clica no nome da coluna e a classificação é feita para o usuário (geralmente usando javascript, embora seja mais difícil se você tiver paginação também, porque você classifica apenas os dados em a tela ou você a utiliza nessa coluna e as coloca de volta na primeira página?), mas como eu indico que ela foi classificada? Qual é uma boa dica de interface do usuário para isso? Como devem ser os nomes das colunas? Além disso, eu gosto de colorir todos os outros resultados com cinza, mas vejo alguém com uma tela com brilho muito alto e não é cinza o suficiente para que eles possam distinguir as linhas, mas se eu aumentar a quantidade de cinza, não haverá contraste suficiente para ler confortavelmente o texto em preto.

Quais são alguns exemplos de tabelas feitas corretamente?

6
tooshel

Tradicionalmente, "Classificar por" é indicado através das setas para cima/para baixo que representam a classificação crescente ou decrescente. Os nomes das colunas devem ter um nível de contraste mais alto que os valores, como texto em negrito ou fundo sombreado.

Pessoalmente, ao colorir linhas alternadas, geralmente fico mais claro do que escuro, porque o efeito fica mais pronunciado quanto mais tempo os usuários interagem com a tabela.

Aqui estão alguns ótimos exemplos de opções de layout de tabela: http://patterntap.com/tap/collection/tables

14
David Perini
  • Classifique os dados em toda a tabela, não apenas os dados na tela. Sim, eles terão que começar na página um da nova ordem de classificação, mas tudo bem - você esperaria entender as coisas se estivesse classificando por ID e, em seguida, na página 10 decidisse classificar por sobrenome?
  • Indique que ela foi classificada destacando o plano de fundo da célula do cabeçalho da tabela na coluna que está sendo classificada. Você pode ir ainda mais longe e destacar a coluna inteira. Use as setas para torná-lo ainda mais óbvio (e mais acessível) - setas apontando para a direita para não classificadas e uma seta para baixo para classificar, por exemplo.
  • Os nomes de colunas devem ser meramente distinguíveis como nomes de colunas. Costumo torná-los um pouco maiores e mais ousados ​​que o conteúdo da célula da tabela.
  • Pinte todos os outros resultados com cinza somente se for necessário, para aumentar a capacidade de digitalização de linhas individuais. Se é para isso que você está projetando, a compensação de diminuir um pouco a legibilidade geral é boa porque o usuário está digitalizando, não lendo. E, finalmente, é impossível projetar para cada brilho da tela; portanto, certifique-se de escolher um meio feliz e se atenha a isso.

Não tenho exemplos imediatos para você no momento, mas aqui está um exemplo de uma tabela que eu projetei para meu aplicativo Web que segue meus conselhos/preferências acima:

image of a table

5
Rahul

De uma perspectiva puramente visual, consulte http://www.datatables.net/ (plugin para jQuery). A tabela de amostra na página inicial possui os recursos que você mencionou já implementados.

Em termos de tecnologia, depende do que a sua tecnologia de back-end está usando. Se você estiver executando em um servidor .Net, os controles incluídos em ASP 3.5 e 4 são muito fáceis de começar a trabalhar como você descreve sem a dependência do jQuery e do plug-in.

4
Rob Allen

Confira grades ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-

Melhor interação do usuário de qualquer estrutura JS que eu já vi. Contamos com isso extensivamente para nossa aplicação em Marketo.

4
Glen Lipka

Se você precisar de um datagrid com "toda a mágica", tente dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

É uma das grades JavaScript mais poderosas que eu já vi.

2
Steve E.

Bem, se você deseja classificar nos dois sentidos, há a seta clássica para cima/baixo, como no Windows Explorer/gnome nautilus, eles geralmente são de uma cor mais escura que a célula.

alt text

1
dierre