Como projetar uma mesa: guia pontual para acertar
O uso de tabelas e grades é comum ao projetar produtos digitais e painéis. As tabelas de dados ajudam a organizar uma grande quantidade de informações.
Eles apresentam dados de uma forma mais legível e compreensível. Eles também ajudam a enfatizar dados importantes e melhorar a visualização de dados.
As tabelas são frequentemente usadas como um componente de interface do usuário, mas muitos ainda cometem erros ao projetar tabelas de dados. Alguns designs de tabela estão cheios de ruído visual ou são muito complexos, resultando em uma experiência ruim para o usuário.
Obter o design de IU de tabela certo cria melhores visualizações e comparações de dados. Projetar tabelas da maneira correta as torna atraentes e melhora a legibilidade.
Este guia mostra como otimizar o design da tabela de dados e melhorar a funcionalidade da tabela.
Projetando tabelas de dados da maneira certa
Ao planejar um design de mesa, há duas coisas para trabalhar: o estilo da mesa e a funcionalidade da mesa.
Estilo de tabela
Alinhando dados da tabela
Para diferenciar texto de dados numéricos, alinhe o texto à esquerda e os números à direita. Esse alinhamento facilita a comparação de dois dados diferentes.
Os cabeçalhos de tabela também devem se alinhar com os dados da coluna para um design de tabela estruturada.
Algumas células da tabela podem ter várias linhas de texto, como descrições. O alinhamento vertical para tal conteúdo deve estar na parte superior.
Caso contrário, os dados da coluna não serão alinhados entre si.
Adicionando seção em destaque
Tabela de preços que você pode criar com wpDataTables
Uma seção em destaque é uma coluna, linha ou célula da tabela que o autor deseja enfatizar. Geralmente é aplicado a tabelas de preços ou ao comparar planos de assinatura.
Use uma seção em destaque para destacar informações importantes na tabela. Este pode ser o melhor plano de valor ou um elemento popular em uma lista, por exemplo.
Para criar uma seção em destaque, altere a formatação das células. Por exemplo, modifique a cor de preenchimento da célula ou o tamanho da fonte do texto para destacá-lo.
Aplicando cores
Uma tabela de dados não deve ter muitas cores. Use-os apenas para cabeçalhos de tabela, tendências negativas e positivas e seções em destaque.
Adicionar muitas cores cria ruído visual. Isso torna difícil distinguir elementos que precisam ser destacados.
Use tons de cinza mais escuros para a cor da fonte e tons de cinza mais claros para a cor da borda em vez da cor preta normal. O uso de tons mais suaves de preto o torna menos intenso, reduzindo o cansaço visual.
Aplique cores variadas ao diferenciar categorias ou ao enfatizar valores mais altos e mais baixos. Para enfatizar determinadas seções na tabela, use cores de preenchimento mais claras ou mais ousadas para destacá-las.
Cores de linha alternadas
Tabela com células de mesclagem que você pode criar com wpDataTables
A alternância de cores de linha melhora a legibilidade. Ele define dicas visuais, ajudando as pessoas a seguir uma lista de informações e conectar dados.
Isso é especialmente útil ao criar um banco de dados grande. Também funciona bem para pequenas tabelas de dados.
Crie um efeito de ‘listras de zebra’ alternando a cor de preenchimento branca com uma cor mais escura, como cinza claro. Se estiver usando outras cores, use uma cor de preenchimento clara e alterne-a com um tom um pouco mais escuro.
Usando fonte monoespaçada
Para um design de tabela mais estruturado, use um estilo de fonte monoespaçada para dados numéricos.
A fonte tabular ou monoespaçada tem largura e espaçamento fixos para cada caractere. Isso melhora a tipografia e a legibilidade.
Exemplos de fontes monoespaçadas incluem Courier, Courier New, Lucida Console e Monaco.
Para melhorar ainda mais a simetria, certifique-se de formatar dígitos no mesmo comprimento, como datas, por exemplo. Em vez de escrever 15/3/2019, formate a data como 15/03/2019.
Visualizando dados da tabela
Transforme dados de coluna em gráficos de barras horizontais. Isso ajuda a visualizar os dados e gerar uma visão geral.
Os gráficos de barras horizontais permitem que os usuários comparem conjuntos de dados e os interpretem com facilidade. Cada barra fica em uma coluna ao lado dos dados que representa, alinhada verticalmente e dividida em linhas.
A inserção de um gráfico de barras muitas vezes expande demais a coluna. Assim, considere mostrar barras apenas para visualizar valores importantes.
Outro método para visualizar os dados da tabela é usar mapas de calor.
Os mapas de calor ajustam a tonalidade da cor do plano de fundo da célula ou a cor de preenchimento com base no valor numérico da célula, criando um gradiente de uma cor. Quanto maior o valor numérico, mais escura se torna a cor de preenchimento.
Funcionalidade da tabela
Torne-o responsivo
Uma tabela de dados eficaz funciona bem em diferentes dispositivos. Ele deve exibir dados de maneira legível quando aberto em smartphones, tablets e laptops.
A visualização de tabelas em telas menores requer muitas mudanças no design da tabela. Um design de mesa criado em desktops grandes pode não funcionar em dispositivos menores.
Teste a tabela em dispositivos móveis. Certifique-se de que os usuários possam digitalizar as informações sem precisar rolar infinitamente.
Cuidado com colunas reduzidas e textos ocultos, pois isso resulta em uma experiência de usuário ruim.
Lembre-se, em telas menores, colunas estreitas são melhores. Existem diferentes maneiras de tornar as colunas mais finas.
Isso inclui o uso de ícones, abreviações, formato de número mais curto e dados numéricos arredondados. Portanto, 2,5 m em vez de 2.500.000 e 0,3 em vez de 0,3241.
Ativar a reordenação de colunas
Às vezes, tabelas de dados grandes são difíceis de ler devido ao seu tamanho e à quantidade de informações que contêm. Habilitar os usuários a reordenar as colunas permite que eles se concentrem nas colunas que precisam ler.
Isso também significa que eles podem fazer isso sem rolar para frente e para trás. Isso ajuda os usuários a minimizar a desordem, digerir pequenas informações e organizar as colunas de acordo com suas necessidades.
Considere ter uma altura de linha fixa
Tabela que você pode criar com wpDataTables
Se a tabela de dados contiver muitas colunas, ancore as primeiras colunas. Isso manterá o contexto enquanto os usuários percorrem o restante da tabela.
Ter colunas personalizáveis é altamente recomendado. Mas as linhas da tabela devem ter uma altura fixa para manter a simetria e evitar confundir os leitores.
Independentemente dos dados, a altura fixa da linha melhora o design e os visuais da interface do usuário da tabela.
Usando paginação para tabelas de dados longas
Tabela paginada que você pode criar com wpDataTables
Existe uma regra não escrita de que as tabelas de dados não devem ser maiores que uma tela de desktop. No entanto, isso não é possível se uma tabela de dados for longa.
Evite que tabelas de dados longas ocupem uma grande parte de uma página da Web e maximize o espaço em branco. Faça isso ativando o recurso de paginação.
Isso também serve para guiar os leitores pela tabela e ajudá-los a navegar.
Ao usar a paginação, inclua o número da página para mostrar quantas páginas existem e em qual página os leitores estão. Além disso, para fornecer mais controle aos usuários, permita que eles personalizem quantas linhas visualizar por página.
Incluir recurso de classificação de tabela
Permitir que os usuários tenham mais controle sobre a tabela de dados aprimora o design da interface do usuário da tabela. Se a tabela contiver muitas informações, uma maneira de ajudar os leitores a localizar os dados de que precisam é adicionar um recurso de classificação.
A classificação permite que os usuários organizem os dados de acordo com ordens lógicas específicas.
Isso pode ser alfabético, data e hora modificadas, ascendente, descendente e muito mais. Quanto mais opções, melhor.
Outra maneira de classificar os dados é incluir um campo de pesquisa. Isso permite que os leitores pesquisem dados específicos, como o nome de uma empresa, localização, produtos e muito mais.
Filtrando dados
Tabela com filtros que você pode criar com wpDataTables
Filtrar dados é outra maneira de aumentar a funcionalidade de uma tabela de dados. Os usuários podem digerir grandes quantidades de dados, entender tendências e criar comparações.
Eles também podem localizar certas informações e analisar dados complexos. Isto é especialmente verdade para tabelas de dados numéricos.
Certifique -se de que os usuários possam personalizar parâmetros ou conjuntos de filtros para determinadas colunas. Além disso, inclua uma opção de filtragem avançada para salvar o conjunto de filtros que eles criaram para uso futuro.
Mantenha o contexto, use cabeçalhos fixos e colunas congeladas
Ler uma grande tabela de dados requer muita rolagem vertical e horizontal. Para manter o contexto , ancore os cabeçalhos das colunas, bem como a primeira coluna ou as primeiras colunas.
O Microsoft Excel e o Google Sheets referem-se às colunas ancoradas como "congeladas".
Para facilitar a navegação na tabela, adicione uma seleção de linha completa. Isso permite que os usuários marquem linhas importantes à medida que rolam horizontalmente.
Isso pode ser complicado se a tabela tiver linhas expansíveis e pode resultar em um efeito diferente.
Considerações finais sobre como projetar uma mesa da maneira certa
Saber o que considerar ao criar um design de IU de tabela leva a tabelas eficazes. Isso permite que os usuários comparem dados e classifiquem informações, além de aumentar a legibilidade.
Aprender a projetar uma mesa permite que os designers reduzam o ruído visual e façam bom uso do espaço em branco. As dicas de design fornecidas aqui podem otimizar o design da tabela e os dados do usuário.
Seguir essas dicas melhorará o estilo e a funcionalidade geral da tabela. Além disso, eles ajudam a melhorar a experiência do usuário e a imagem da marca.
Se você gostou de ler este artigo sobre como criar uma tabela, confira este artigo sobre como criar uma tabela de dados.
Também escrevemos sobre alguns assuntos relacionados, como exemplos de tabelas de dados, exemplos de tabelas de preços, alternativas de DataTables, biblioteca de tabelas JavaScript, plugins de tabelas WordPress, como criar uma tabela no WordPress sem um plugin, como inserir uma tabela no WordPress, preços do WordPress plugins de tabela e como criar tabelas estatísticas no WordPress.