Na maioria dos softwares corporativos, é comum os usuários passarem bastante tempo manipulando dados em tabelas. Caprichar no design delas é uma ótima maneira de ajudá-los a trabalhar de forma mais rápida e confortável, produzindo mais e errando menos.
Recentemente, estive em um cliente e observei o sofrimento de um usuário ao mexer nas tabelas de um software pré-histórico, isso me impulsionou a escrever esse post com algumas ideias pra deixar essa atividade mais agradável.
1. PERMITA QUE OS REGISTROS SEJAM FILTRADOS
Coloque um campo de texto para que o usuário filtre o que está sendo exibido na tabela. Permitir que o usuário escolha o que ele quer ver de forma simples é uma grande forma de melhorar sua produtividade.
2. COLOQUE AS COLUNAS NUMA ORDEM LÓGICA DE LEITURA
Descubra qual é o dado chave na tabela e o coloque em primeiro lugar. Se coloque no lugar do usuário, pense: “em qual ordem os dados devem estar para que eu leia e entenda a informação de forma mais simples?”. Ou, ainda melhor, pergunte para o usuário qual ordem é melhor pra ele.
Tabelas cujos cabeçalhos não seguem uma ordem lógica fazem com que o usuário tenha que reler e pensar mais para entender a informação, aumentando seu esforço cognitivo e demorando mais para entender o que está ali.
3. FORMATE OS DADOS PARA FÁCIL ENTENDIMENTO
A formatação de números de telefone, documentos e datas fazem com que o usuário ganhe tempo e pense menos para entende-los.
Nosso cérebro consegue processar, de forma adequada, de 2 a 4 números/letras por vez. O que é mais fácil de ler? 1932126789 ou 19 3212 6789?
4. ELIMINE DADOS QUE NÃO SÃO ESSENCIAIS À PRIMEIRA VISTA
Quer dar um nó na mente do usuário? Encha a tabela com a maior quantidade possível de dados. Quer agilizar a produtividade dele? Descubra o que é relevante pra ele naquele momento e remova todo o resto.
Não tem problema se sua tela ficar com espaço em branco, não tem nada errado ou feio nisso, é muito mais agradável clicar mais e pensar menos. Não caia no mito de “menos cliques” == “mais produtividade”, pensar cansa mais do que clicar.
5. ALINHE TEXTOS A ESQUERDA PARA UMA LEITURA MAIS RÁPIDA
Nosso esforço visual é menor quando todas as linhas de texto começam no mesmo lugar. Centralize dados em colunas só quando todos possuírem o mesmo tamanho. Caso contrário, deixe tudo alinhado a esquerda para agilizar a leitura.
6. UTILIZE LINHAS EM ZEBRA
E quem nunca leu os dados da linha errada sem querer? Em uma tabela de muitas linhas, deixe-a zebrada! Uma leve diferença na cor de fundo entre uma linha e outra já ajuda muito na leitura!
7. DESTAQUE AS LINHAS AO PASSAR O MOUSE
Se a tabela tem muitos dados, você pode destacar uma determinada linha no instante em que o mouse passa por cima dela. Este tipo de destaque dá a possibilidade do usuário soltar o mouse em cima de uma linha enquanto faz alguma outra coisa fora do computador (pegar um documento, perguntar algo pra alguém) e, quando ele olhar de novo, não vai ter perdido o registro de vista.
8. USE BOTÕES MAIORES PARA AÇÕES CONTEXTUAIS
Ok, provavelmente, eu e você não temos problema em clicar nos pequenos ícones de 16×16 pixels na coluna de “ações” na tabela, mas nós só temos essa firmeza e precisão porque jogamos Counter-Strike, Call of Duty ou quaisquer outros jogos em primeira pessoa.
Lembre-se sempre que muita gente por aí vai sofrer pra mirar com o mouse em elementos muito pequenos. Se você tiver espaço, escreva o nome da ação, isso aumenta o espaço clicável e também deixa claro o que é aquela ação para o usuário.
9. DÊ O ESPAÇO NECESSÁRIO ENTRE AS LINHAS E DEIXE A FONTE GRANDE SUFICIENTE
Se você usa fontes muito pequenas ou em caixa alta, você aumenta o esforço visual do usuário. Se você deixa as linhas e colunas grudadas uma na outra, você aumenta o esforço visual do usuário e as chances dele ler a informação de forma incorreta.
Também é importante avaliar quando colocar os caracteres em CAIXA ALTA. A caixa alta faz com que leiamos o texto devagar e com mais atenção porque não é o padrão que nosso cérebro está acostumado. Se você coloca um texto em caixa alta, você está trocando velocidade por atenção. Pessoalmente, prefiro colocar tudo em caixa baixa.
10. SE TODAS AS LINHAS ESTÃO EM DESTAQUE, NENHUMA ESTÁ EM DESTAQUE
Evite tabelas que parecem um arco-íris. Dê um destaque em vermelho ou amarelo apenas para itens muito críticos. Se tudo está em destaque, então nada está. Essa regra vale para todo layout.
11. COLOQUE OS IDENTIFICADORES MESMO QUE ELES PAREÇAM DESNECESSÁRIOS
Se os registros da tabela possuem identificadores (ID), coloque-os como primeira coluna na tabela. Os usuários usam eles para referências offline; eles fazem anotações no papel referenciando os registros da tabela através do identificador; eles também os usam posteriormente para procurar os registros na tabela.
12. SÓ USE ÍCONES SE FOREM CONDIZENTES COM A AÇÃO
A ideia de usar ícones é fazer com que o usuário entenda o significado de algo sem precisar ler o texto. Se o seu ícone está confundindo mais do que ajudando, remova-o e deixe um texto no lugar.
13. LIBERE AS AÇÕES EM MASSA
Em tabelas com grandes quantidades de dados, ações em massa são uma ótima maneira de aumentar a produtividade do usuário e torná-lo menos suscetível a erros. Isto acontece porque quando nós repetimos um processo mecânico muitas vezes (clica e confirma, clica e confirma, …), começamos a fazê-lo no piloto automático, prestando cada vez menos atenção, sem contar que demora.
14. SELECIONE O CHECKBOX DA LINHA AO CLICAR NA LINHA
Uma dica para alegrar a vida do usuário ainda mais. Se os registros da tabela são selecionáveis, não obrigue o usuário a mirar no pequeno checkbox. Selecione aquele checkbox pra ele quando ele clicar em qualquer lugar da linha e dê um leve destaque nessa linha quando ela estiver selecionada; isto vai diminuir seu esforço visual e mecânico.
15. DEIXE O USUÁRIO ORDENAR OS REGISTROS COMO QUISER
Cada um de nós tem uma forma diferente de pensar e entender conceitos e processos. O usuário pode estar procurando por qualquer coisa ali (as vezes, até fora do contexto da atividade que está realizando). Dê poder para que ele ordene a tabela por todas as colunas e de forma crescente ou decrescente.
CONCLUINDO
As tabelas são bastante utilizadas em grande parte dos sistemas corporativos; investir na usabilidade delas é garantia de pessoas trabalhando mais rápido e tomando as melhores decisões, gerando mais valor para o seu produto.
Existe uma ideia simples por trás de todas essas ideias que é: dê sempre o máximo de poder e controle ao usuário, se esforce em passar a mensagem de forma clara e, o mais importante de tudo, converse com o usuário e veja o que ele diz que é melhor. Evite construir telas se baseando em “achismos” e adivinhações. Experiência do usuário não é usabilidade, é estar ao lado dele durante o desenvolvimento!
