Você tem O Medo quando descobrir que o seu próximo projeto é desenhar uma tabela de dados complexa e responsiva? 😨
Você não está sozinho, já vi alguns grandes designers tremerem nas botas só de pensar em resolver este problema. Mas não há necessidade de temer! Recentemente me apresentei a este desafio de design, e agora estou aqui para compartilhar algumas dicas que me ajudaram a chegar a um design que nossos usuários adoram.
Existem muitas opções diferentes de como projetar tabelas, e muito menos de como torná-las responsivas. Colunas e linhas podem reposicionar, redimensionar, colapsar, minimizar ou mesmo desaparecer quando a janela do navegador se torna mais estreita.
Como com todas as soluções de design, o melhor design depende de como seus leitores vão usar os dados. Fizemos algumas pesquisas de usuários no início deste projeto para fornecer alguma direção e identificamos que para nosso projeto:
- Esta informação tabular seria usada igualmente em uma mistura de desktop, tablet e dispositivos móveis.
- Estas tabelas poderiam conter muitas colunas de texto livre, bem como números.
- Determinadas informações importantes devem permanecer visíveis o tempo todo.
Com estes insights de nossos usuários, aqui estão as principais coisas que eu abordei ao desenvolver um sistema de design para tabelas de dados pesados.
Primeiro, determine que tipo de tabela é. É uma tabela de comparação, onde o leitor compara dados através de múltiplas colunas, ou é uma tabela de conteúdo, onde os conjuntos de dados são independentes entre si?
A minha tabela é mais parecida com uma tabela de conteúdo do que com uma tabela de comparação. Identificar isto desde o início ajudou-me a compreender que informação precisa de permanecer muito próxima no tamanho da tela estreita.
Móvel primeiro
A primeira versão que eu desenhei foi a versão de tela estreita. Eu intencionalmente olhei para isso antes da versão de tela larga, pois visualizar as tabelas no celular é importante para os nossos usuários. Portanto, eu precisava encontrar uma maneira de encaixar informações complexas e não-lineares em um formato vertical.
Eu sabia que seria muito mais fácil escalar o design para cima quando há muito espaço horizontal, do que projetar uma bela mesa para o desktop e lutar para torná-la legível no celular. Isso também significou que eu mantive os tamanhos dos alvos em mente desde o início e não estava confiando em ações como pairar para revelar informações.
Decidi tratar o conteúdo mais como uma lista em vistas estreitas para que as informações importantes permanecessem altamente visíveis e escaneáveis.
Estilo consistente
As linhas precisam ser reposicionadas quando o tamanho da tela muda, então usei o estilo para ajudar a manter a conexão entre elas. Por exemplo, se os cabeçalhos das colunas estiverem em negrito com um fundo cinza, use esse mesmo estilo na vista estreita também. Isso ajudará os leitores a refazer a nova distribuição de células.
Tipografia é seu amigo
É fácil esquecer seus princípios tipográficos quando você tem muitas restrições, mas tomar uma decisão consciente para otimizar a legibilidade será uma grande ajuda para seus leitores, especialmente em um projeto como o meu, onde as tabelas têm muito texto.
Tipografia existe para honrar o conteúdo. ~ Robert Bringhurst
Digitalização
Faça com que seja fácil de digitalizar rapidamente, mantendo o fluxo de leitura simples e claro. Eu escolhi ter o texto em cada coluna pendurado na mesma borda para que o leitor pudesse digitalizar o texto de forma linear.
Comprimento da linha
Tente não comprometer o comprimento da linha do texto esmagando muitas colunas em um espaço estreito, ou diminui a velocidade de leitura. Eu defino uma largura mínima para colunas de texto contínuo.
Labels
Pense onde colocar etiquetas para não ocupar uma quantidade excessiva de imóveis, mas ainda fornecer algum contexto para a informação.
Pus as etiquetas acima de cada pedaço de conteúdo celular na minha lista, onde ocupavam menos espaço, em vez de estarem ao lado. E isso tornou a informação mais fácil de digitalizar também. Eu estilizei as etiquetas de forma diferente para que seja fácil distinguir a diferença entre uma etiqueta fixa e um conteúdo variável.