it-swarm-pt.com

Qual é a melhor experiência do usuário: uma tabela com rolagem ou uma tabela em tamanho real, permitindo que a janela do navegador faça a rolagem?

Qual é a melhor experiência do usuário:

  1. Uma tabela rolável usando configurações de css overflow em um DIV?
  2. Uma tabela de tamanho completo que permite que a janela do navegador faça rolagem?
11
7wp

Uma tabela em tamanho real que permite que a barra de rolagem do navegador (2) faça a rolagem dos dados é uma melhor experiência do usuário, pois várias barras de rolagem na mesma página tendem a confundir os usuários e são um pouco irritantes.

Obviamente, isso só se aplica se os dados sobre os quais estamos falando sobre rolagem forem o foco principal da página; nesse caso, seria aceitável ter uma barra de rolagem dedicada a essa parte da tela.

13
Ryan Shripat
  1. Várias barras de rolagem verticais na mesma janela do navegador podem ser confusas, especialmente ao usar uma roda de rolagem.
3
Mattias Kihlström

Desde que faça sentido no contexto da interface, qualquer um dos métodos pode ser usado. Porém, tento não usar DIVs de rolagem dentro de DIVs como regra geral, pois elas ficam confusas. Quando a rolagem do usuário atinge a parte inferior de um DIV, o navegador geralmente começa a rolar o próximo DIV ou a página, o que pode ser dissonante.

Na minha experiência, uma interface menos intricada terá uma menor curva de aceitação/aprendizado, todos os outros fatores iguais.

2
Matt

Eu diria que, se você tiver uma tabela muito grande de dados, a melhor maneira de fazer isso é usar CSS para definir o estouro de seu <tbody> tag na tabela. Dessa forma, seu cabeçalho (armazenado em <thead>) permanecerá visível, não importa quanto o usuário role. Isso proporcionará ao usuário uma experiência semelhante à que pode ser fornecida em um aplicativo padrão ao visualizar dados tabulares.

Eu acho que essa é a melhor solução porque, com muita rolagem, o usuário precisa se lembrar do que esses cabeçalhos de coluna são e, se você pode fazê-lo para que eles sempre possam ver os cabeçalhos, você definitivamente está dando a ele uma experiência melhor (Lembre-se das palavras imortais de Steve Krug - "Não me faça pensar").

2
Charles Boyung

Aconteceu com um exemplo perfeito de implementação muito ruim de uma janela rolável dentro da janela do navegador logo após ler esta postagem. Eu acho que é claro como isso é estranho de usar.

Primeiro tentei usar a barra de rolagem externa que rolava todos os cães para longe, movendo o mouse dentro da janela interna rola os cachorros, mas agora estou vendo apenas metade da janela e tenho que voltar para a primeira barra de rolagem para movê-la de volta. O conteúdo principal não deve ser relegado para um pequeno quadro interno como este.

2
scauer

Vá com a opção 2. A rolagem na rolagem sempre confunde os usuários e é irritante quando você chega ao fundo e a página voa para baixo.

Minha pergunta é: você tem alguma maneira de classificar os dados para que o conjunto de dados exibido seja menor? Escondendo-se com uma mistura de JavaScript e CSS ou usando algum tipo de script? A exibição de muitas linhas de dados nunca é tão amigável. A menos que o usuário entenda as maravilhas do ctrl + f, muito tempo pode ser desperdiçado rolando.

Você também pode adicionar cabeçalhos que flutuam no topo da lista enquanto rolam. Dessa forma, os usuários não precisariam voltar ao topo para descobrir quais são os nomes das colunas.

2
LoganGoesPlaces

Barras de rolagem geralmente aninhadas devem ser evitadas. O único momento em que eles realmente devem ser usados ​​é se você tiver controles abaixo da tabela que podem ser perdidos se a tabela for muito longa.

2
Tom R

Depende do uso que você imagina.

Existem muitas boas razões para evitar barras de rolagem aninhadas, mas também há casos em que a tabela deve ser rolada. Aqui estão alguns:

  1. Além da mesa, tudo o resto se encaixa na tela. Se esse for o caso, você não possui barras de rolagem aninhadas (ou seja, o navegador não as possui) e pode haver bons motivos para tornar apenas a tabela rolável.
  2. O principal uso da tabela é fazer referência a uma pequena parte dela em relação a outra coisa na página. Por exemplo, você deve preencher três informações com base em algo na tabela que o usuário deve procurar (o 'algo' é muito intuitivo para automatizar). Se você tornar a página inteira rolável, o usuário terá que pesquisar na tabela o que deseja e, em seguida, rolar até o topo para preencher as informações, pesquisar novamente etc. Se você tornar a tabela rolável, a parte 'preenchimento' da interface do usuário permanece na tela.
2
DJClayworth

a rolagem vertical permite que o navegador manipule a rolagem horizontal (você deve eliminar totalmente) use as configurações de estouro de css para manipular.

Estudos mostraram que o usuário não se importa de rolar para baixo, mas odeia rolar.

1
Sruly