Não há melhor maneira de exibir muitos dados do que usar uma tabela. A visualização de tabelas em telas de desktop é fácil, mas difícil ao visualizá-las em telas de dispositivos móveis. Uma tabela de dados se expande horizontalmente e não cabe em um espaço tão apertado.
Qual é a melhor maneira de exibir uma tabela grande de dados em pequenas telas de smartphones? Muitos designers lutam para resolver esse problema. Eles propuseram soluções potenciais, mas nenhuma oferece uma experiência de usuário ideal. Para responder a essa pergunta, você precisa entender o propósito das tabelas e sua estrutura de informações.
Colunas do carrossel
As tabelas são úteis porque permitem que os usuários comparem diferentes valores de dados. Os dados principais que eles desejam comparar são a primeira coluna, o nome de cada item a ser comparado (Key ID Value). O restante das colunas são os valores que diferenciam cada um dos itens.
Isso significa que os Key ID Value devem sempre permanecer fixos para que os usuários sempre possam vê-los. Os usuários não terão um ponto de referência ao visualizar outros valores sem essa primeira coluna visível. No entanto, os valores nas demais colunas não precisam ficar o tempo todo visíveis.
Como é impossível ajustar todas as colunas visíveis na tela, devemos poder substituir cada uma das colunas de dados para comparar com cada um dos itens listados na primeira coluna. Por esse motivo, é melhor usar os botões do carrossel para trocar os cabeçalhos das colunas.
Apenas o cabeçalho da segunda coluna será trocado à medida que os usuários clicarem nas setas. Cada clique permite que eles visualizem uma nova coluna de valores, para comparar. Conforme eles rolam para baixo na tabela, os cabeçalhos das colunas "ativas" no momento devem permanecer visíveis para fornecer contexto.
A terceira coluna é a coluna de controles que também ficará fixa. Ele contém os botões do carrossel para trocar os cabeçalhos e os botões para visualizar os detalhes de cada linha.
Visualização de folha modal
As tabelas não servem apenas para comparar valores de cada linha. Eles também são úteis para analisar todos os dados, de cada uma das colunas, de cada item (análise individual de uma linha). Como é impossível exibir todas as colunas da tabela simultaneamente, você deve usar uma folha modal.
Uma folha modal permite que os usuários visualizem confortavelmente cada valor de cada atributo quando clicam para visualizar um único item. Um ícone de “olho” é usado para significar uma visão detalhada de todos os valores de cada uma das linhas. Quando os usuários clicam nele, a folha modal desliza para cima da parte inferior da tela. Ao mesmo tempo, todos os dados de cada coluna deste item são visíveis na folha moda ao mesmo tempo.
Se os usuários precisarem editar um valor específico, eles clicarão no ícone de edição no canto superior direito. Fazer isso ativará o modo de edição, onde todos os valores de dados se transformarão em campos de texto. Depois que terminarem de editar, basta clicar no ícone de check para voltar ao modo de somente leitura. Para cancelar a edição feita, a opção seria clicar no "X".
Excluir, Filtrar, Pesquisar
Nem todos os controles de interface precisam estar na própria tabela de dados. Existem outras ações que você pode colocar junto à tabela, se necessário.
Por exemplo, colocar excluir, filtrar e pesquisar acima da tabela permite que os usuários gerenciem os dados de maneiras adicionais. Para excluir dados, eles marcarão as caixas de seleção à esquerda de cada linha e, em seguida, clicarão no botão excluir. Essa abordagem permite que os usuários excluam dados em massa.
Cartões de dados
Uma tabela de dados pode não ser a melhor maneira de exibir seus dados se você não tiver tantos registros. Considere usar cartões de dados quando tiver uma quantidade limitada.
Os cartões de dados permitem comparar e visualizar todos os valores de atributos simultaneamente sem clicar em um botão. No entanto, a desvantagem é perder os cabeçalhos das colunas superiores e o layout da tabela. Em vez disso, os cabeçalhos são repetidos para cada registro e fixos a cada tipo de dado.
Esteja ciente que os cartões de dados podem ocupar muito espaço vertical. Os usuários terão que rolar mais para visualizar os registros, se houver muitos. Mais valores de cada atributo também aumentarão o tamanho dos cartões.
Se seus usuários precisarem comparar vários valores de cada atributo simultaneamente, use cartões de dados. No entanto, usar a abordagem de colunas de carrossel funcionará para a maioria, pois a comparação de dados entre cada item por linha é a abordagem mais comum.
Conclusão
Ao compreender a finalidade das tabelas de dados e sua estrutura de informações, você pode criar um design ideal para telas móveis. Os usuários usam tabelas para comparar e analisar dados. Portanto, o design móvel permite a comparação através da fixação da primeira coluna e a substituição livre das demais. Permite uma análise detalhada exibindo registros em planilhas modais.
Uma tabela de dados de desktop tem algumas vantagens sobre uma móvel, mas isso é adaptável. Quando o espaço é limitado, você precisa aproveitar ao máximo a tela. Nem sempre você pode exibir tudo em uma tela, mas sempre pode selecionar por exibir o que é mais útil e relevante.
Comments