Estamos construindo uma plataforma baseada na Web em que o painel principal mostra uma tabela de dados para os usuários visualizarem e analisarem. À medida que desenvolvemos essa ferramenta, parece que estamos adicionando mais e mais colunas e estamos ficando sem espaço horizontal em resoluções de tela menores (estamos vendo alguns agrupamentos de dados). É importante que o usuário visualize todas as colunas de uma só vez, portanto, a ocultação de colunas está um pouco fora de questão, assim como a rolagem horizontal (por solicitação do chefe e porque a rolagem horizontal é uma droga mesmo assim). Eu queria saber se alguém sabia de uma interface de usuário inteligente para tabelas com muitas colunas.
EDITAR
Abaixo está uma captura de tela do layout da tabela. Infelizmente, por questões de segurança, tive que desfocar os títulos das colunas. Este exemplo possui linhas com praticamente nenhum dado, mas em uso elas terão muitos dados que se expandirão mais do que seus respectivos títulos de coluna. Em resposta a algumas das respostas, é imperativo que o usuário veja todas as colunas, pois todas são necessárias para analisar os dados para tomar determinadas decisões. Todos os dados são numéricos, exceto as três primeiras colunas. Obrigado novamente por qualquer feedback.
Ok, então eu vejo que o upload desta imagem realmente não faz justiça ... ocupa toda a largura da tela com resolução de 1680x1050 (22 ") e conforme os dados são preenchidos nas colunas, a coluna esquerda com o texto diminui um pouco para baixo.
EDIÇÃO 2 Eu só queria agradecer as ideias incríveis de todos. Só posso selecionar uma resposta, mas muitas de suas idéias se mostraram muito úteis e podem acabar no produto final. Obrigado novamente!
Como todos os dados após as três primeiras colunas são numéricos, você pode arredondar para que a largura de cada coluna tenha apenas quatro caracteres.
Full Length Shorter Tiny
------------ ------- ----
$143,573.39 $143.6k 144k
112.54% 112.5% 113
198,220,329 198.2m 198m
Você pode decidir qual versão exibir com base na quantidade de espaço disponível. Os afortunados de ter monitores maiores ainda receberiam tudo. A apresentação seria degradada normalmente para monitores menores
Obviamente, quando o conteúdo de uma célula for abreviado, você deverá mostrar o valor total em uma dica de ferramenta.
Atualização: @Oskar apontou nos comentários que mostrar números com diferentes magnitudes dificulta a comparação visual. Então, aqui está uma variação no caso de comparar valores relativos ser mais importante que precisão.
Revenue
($millions)
------------
143.6
93.2
0.3
< 0.1
(O cabeçalho neste exemplo é mais amplo que os dados, mas como outros apontaram, isso pode ser resolvido inclinando os cabeçalhos em um ângulo de 45 graus.)
Você pode tentar exibir várias linhas por registro, por exemplo:
Você também pode dar um passo adiante, tornando cada linha uma visão resumida que pode ser expandida para que o usuário possa ver o registro completo, por exemplo:
Na foto acima, a usuária está interessada nas informações completas de Mary Jane, e clica no triângulo ao lado do nome para ver o registro completo.
Além disso, eu discordo de sua premissa de que "a ocultação de colunas está um pouco fora de questão". Se realmente houver isso muita informação, o usuário vai querer esconder algo. Você pode querer tê-los todos visíveis por padrão inicialmente; mas deve haver uma maneira de o usuário ocultar algumas colunas enquanto continua.
Se as colunas estiverem aumentando as linhas, você pode tentar colocá-las como colunas
Parece muito com o caso em que o cliente/gerente de produto deseja tudo na tela principal vs. tudo o que você necessidade na tela principal.
IMHO, uma tela de painel deve fornecer ao usuário uma visão geral de tudo ... mas para obter detalhes sobre uma parte disso (por exemplo, o aumento de 275% nas vendas nesta semana), o usuário deve "detalhar" os dados para ver a (s) tabela (s) de informações de onde as vendas vieram.
A complicação excessiva da exibição "principal" para tentar mostrar muitas informações acaba falhando à medida que o usuário se perde em uma faixa de dados. Os exemplos abaixo são apenas coisas aleatórias que encontrei no Google, mas na tela A você mal consegue decidir por onde começar - vs. Tela B, onde o conteúdo é organizado de maneira organizada em visões gerais.
exemplo de dados avassaladores:
exemplo de dados simples e fáceis de digerir:
A tabela é uma boa maneira de apresentar grande quantidade de dados. No entanto, com mais de 5 colunas, as tabelas rapidamente se tornam ilegíveis. Se seus dados estiverem mudando em tempo real, como você diz, o usuário provavelmente não poderá tomar sua decisão a tempo, se tiver que examinar 15 colunas diferentes ao mesmo tempo.
O Google sabe melhor que a consideração mais importante ao analisar uma grande quantidade de dados é a classificação. Você precisa classificar por sua relevância para o usuário. Cada pedaço de dados pode ser importante, mas alguns são mais importantes que os outros, você precisa identificar qual é o mais importante e quais não, isso depende muito do objetivo do negócio.
Algumas colunas são mais importantes que as outras:
Um muito comum erro ao classificar, é classificar por alguma ordem arbitrária inútil, como ordem alfabética ou data ou valores numéricos. A ordenação estática e consistente é útil se você precisar pesquisar valores, mas você deve deixar o computador fazer a pesquisa por você . Em vez disso, na maioria dos casos, você deseja ordenar por sua relevância.
Alguns destes podem ou não se aplicar ao seu caso:
Você precisa identificar essas metas para seus usuários e fazer uma classificação ponderada de seus dados e colunas de acordo. Se você não identificou quais metas são as mais importantes para seus usuários, você não está realmente criando . Depois de identificar quais dados são mais importantes, você pode ocultar alguns dos dados menos importantes, abreviá-los ou abstraí-los em ícones. Os ícones são fáceis de absorver, e seu usuário não deseja gastar três segundos lendo um 8221 e 1463 se puder gastar um décimo de segundo olhando para "círculo verde" e "cruz vermelha".
Destaque valores interessantes. O usuário pode estar interessado apenas em transações com um determinado valor em um determinado campo. E o usuário pode saber que nunca tocaria em transações muito altas ou muito baixas para sua preferência; você pode filtrá-los para que o usuário nem precise vê-los. Você pode até ocultar uma coluna inteira, se o usuário disser que não tem uso para a coluna.
quais dados o usuário realmente precisa ver?
Se ao menos pudéssemos obter uma resposta direta para isso. Em vez de "depende".
Continuo a me deparar com esse problema e, toda vez que procuro no Google, acabo aqui na excelente pergunta de Jason.
E há muitas respostas excelentes, mas sinto um meta-tópico que todos parecem contornar, mas acho que vale a pena desembalar.
Ao enfrentar situações como essa, acho útil dar um passo atrás e garantir que tenhamos uma boa apreciação da diversidade de intenções do usuário em nosso sistema. Desenhei um diagrama simples para ilustrar o que quero dizer:
Aqui estou considerando duas coisas:
Por exemplo:
Se soubermos que todas as manhãs os gerentes de vendas revisam seu pipeline de vendas por valor e data de fechamento, podemos criar um painel para isso e saber que ele deve estar "sempre à mão" todas as manhãs. Isso é o que eu chamaria de definido e caso de uso difundido .
Quando vemos analistas de investimento despejando as ações em seu portfólio, sabemos que estão constantemente avaliando suas posições usando uma variedade de técnicas padrão, mas não podemos determinar em nenhum momento exatamente como estão fazendo a avaliação. Isso é especialmente verdade se for em resposta a um estímulo externo (como uma ligação de um colega no pregão ou uma matéria do Financial Times). Isso é o que poderíamos chamar de indefinido ainda difundido .
Talvez saibamos que os chefes de departamento são responsáveis por gerenciar seus custos e orçamentos. Mas entendemos o que gerenciando exatamente implica? E isso pode mudar com o tempo - por exemplo, no início do ano, a empresa poderia se concentrar na participação de mercado e na otimização da receita, enquanto no quarto trimestre todos estavam focados na redução de custos. Isso pode levar a diferentes tipos de revisão e ação. Este cenário eu poderia chamar indefinido e efêmero
E assim por diante .. Eu acho que você entendeu.
Decidindo onde focar
O quadrante superior direito é obviamente o melhor lugar para se trabalhar como designer. Podemos definir o que os usuários realmente precisam e nos esforçar para criar a melhor experiência para eles. Podemos eliminar todo o lixo em nosso aplicativo que não agrega valor à experiência. Podemos ganhar prêmios se fizermos bem ;-)
Infelizmente, o mundo é um lugar bagunçado. As chances são de que nossos usuários estejam em todo o gráfico. E isso pode mudar de minuto a minuto.
Nossa resposta usual, e ainda o melhor conselho que você ouvirá, independentemente da disciplina (programadores, designers, empreendedores), é simplesmente o foco. In extremis: faça uma coisa e faça bem.
Se você está iniciando ou trabalhando em um MVP, isso é fácil e auto-selecionável ("nós criamos isso somente para usuários que desejam fazer o X").
Para todos os outros, estou sugerindo que, em vez disso, precisamos avaliar primeiro qual quadrante (s) os usuários desejam e precisam trabalhar dentro e usá-los como uma lente para concentrar nosso esforço. Se nossos usuários trabalharem no Quadrante D, mas estamos tentando forçá-los a uma solução no Quadrante A ... não será bonito, e os usuários sempre vencerão no final.
O verdadeiro Jason provavelmente seguiu em frente, mas muitos de nós têm nossos dias em que somos Jason. A partir de sua descrição, parece que a suposição/proposição inicial é que os usuários de Jason são todos do Quadrante C - sempre muito ocupados fazendo coisas que não podemos definir facilmente com os conjuntos de dados que fornecemos.
Em outras palavras, clássico trabalhadores do conhecimento . Nós particularmente lutamos para construir sistemas para essas pessoas, porque elas sabem e respondem a muitas coisas que nossos computadores pobres não têm idéia.
Não é surpresa que a humilde planilha ainda seja suprema em lugares como departamentos de finanças. Depois que os sistemas ERP são concluídos com todo o processamento da transação, a maior parte do trabalho restante fica diretamente fora do quadrante superior direito ... e uma planilha ainda é a melhor tela em branco para trabalhar com dados .
Então o que nós podemos fazer? Eu sugeriria duas estratégias paralelas
OK, talvez a maior parte do trabalho precise ser feita na exibição de pseudo-planilha. Mas talvez não tudo. Quando captamos indicações de uso generalizado definido, podemos criar especificamente para isso (outra visualização, página do painel ou punch-out).
Há muitas boas respostas e comentários já anexados a essa pergunta que estão de alguma forma chegando a isso: como encontrar a gema do quadrante A na bagunça do quadrante C?
Como encontramos gemas em bruto?
Mas, com sistemas como esse, geralmente é um sonho tubular taylorista pensar que podemos eventualmente reduzir tudo a um conjunto puro de casos de uso em que podemos projetar soluções do quadrante A.
Se não conseguirmos atingir objetivos finais completos e bem definidos, talvez ainda possamos dar grandes saltos, concentrando-nos em melhorar a jornada dos usuários?
Concentre-se em acesso e preços
Portanto, não sabemos exatamente o que os usuários estão tentando fazer, mas podemos melhorar sua capacidade de acessar e manipular nossos dados. Por exemplo:
Foco em microferramentas
Não sabemos toda a história do que você está tentando alcançar, mas podemos fornecer partes do quebra-cabeça. Por exemplo:
Concentre-se em agregar valor aos dados
Não sabemos exatamente como nosso pessoal está transformando nossos dados em Information-Knowledge-Wisdom , mas devemos procurar oportunidades para melhorar continuamente o valor que podemos adicionar aos dados.
por exemplo. hoje eu só lhe dou números de produção brutos, amanhã posso lhe dar isso mais a mudança desde ontem/semana passada/mês passado.
Portanto, embora as pessoas provavelmente ainda estejam no controle da extração de conhecimento e sabedoria, talvez possamos melhorar a apresentação de informações em vez de apenas dados.
Sei que você selecionou uma resposta, mas queria trazer algo que considero muito importante: dados versus informações. Eu tenho pensado muito sobre isso recentemente, então está na frente das minhas carnes.
O que você está fazendo é mostrar dados. É cru, tudo parece realmente importante, mas, na realidade, a maioria das pessoas não precisa ver os dados. O que eles realmente precisam é de informações geradas com base nos dados. Você mencionou em um dos comentários que os usuários podem "ver um gráfico quando passam o mouse sobre a linha", e acho que isso é inverso. Os dados brutos devem estar disponíveis sob demanda, mas a exibição padrão deve analisar os dados e mostrar as informações resultantes.
Isso não quer dizer que os gráficos sejam a escolha correta, mas uma exibição alternativa das principais descobertas de todos esses dados pode ser um caminho mais sábio. Conceitualmente, isso é mais difícil de desenvolver, mas tornará o produto final mais uma ferramenta útil do que simplesmente um local para procurar coisas. A pergunta a ser feita aos usuários é "o que você quer saber quando vê essa tela?"
O que fazemos é dividir a tela basicamente em duas partes. A metade superior mostra detalhes sobre o item atualmente selecionado, a metade inferior mostra a grade com uma lista paginada de itens disponíveis.
Os controles da guia são usados para exibir visualizações de detalhes/coleções do que chamamos de detalhes/coleções aninhadas. Eles são formados por relacionamentos de chave estrangeira.
Espero que isso ajude um pouco.
Um exemplo em que posso inspirar algo é página de classificação do MLB.com , que é uma tabela com muitas colunas, mas a interface de personalização é instantaneamente intuitiva (para mim - e não tem como objetivo um público técnico). Você provavelmente não deseja o limite arbitrário do MLBAM para o número máximo de colunas que pode ter, é claro.
O maior problema da interface do usuário com a ocultação de colunas geralmente é recuperar a coluna oculta - a menos que a tenham corrigido recentemente, "reexibir" é realmente difícil de encontrar no Excel, por exemplo.
Estou um pouco surpreso, porque ninguém sugeriu o padrão Master-Detail ainda.
Temos exatamente o mesmo problema em vários de nossos próprios produtos: muitas colunas para caber em uma tela; no entanto, todas as informações serão relevantes em alguns casos de uso.
Na verdade, decidimos fazer o que você descartou: cortar o número padrão de colunas visíveis para cerca de 5-6 atributos cuidadosamente selecionados para cobrir 90% dos casos de uso. Para a linha selecionada, no entanto, exibimos todos os atributos em um painel de propriedades no lado direito da tela. O usuário vê os atributos mais importantes do maior número possível de linhas na tabela e o maior número possível de atributos para a linha selecionada no painel de propriedades.
O usuário ainda pode adicionar/remover colunas da tabela, assim como no Windows Explorer, se considerar outras colunas mais importantes do que as escolhidas por nós, ou até mesmo ignorar o painel de propriedades e recorrer à rolagem horizontal, se o usuário decidir que é o que ela realmente quer.
A introdução do painel de propriedades tem algumas vantagens bacanas:
Perdoe que os rótulos sejam alemães, mas deve passar a ideia:
Hardware com certeza, mas eu sugeriria a configuração de vários monitores de commodities. Dois 19 "em comparação com o único 24" são dramáticos quando se trabalha com tabelas ou planilhas amplas.
Além disso, fuzzify/normalize colunas críticas (colunas que indicam ao usuário que análises adicionais precisam ser executadas e possivelmente ação adicional). Agrupe por esses valores difusos.
O outro truque pode ser incorporar colunas "fixadas" para que, à medida que o usuário rolar para a esquerda ou direita, as colunas fixadas sejam arrastadas para o extremo oposto da tela com base na direção da rolagem.
Eu acho que você precisa conversar com seu chefe sobre esse. exibir todas as colunas e todas as linhas irá desorganizar a tela além do utilizável. É como pedir para estacionar um caminhão no estacionamento de um passageiro. Não termina bem para o caminhão e o estacionamento.
O que você deve se perguntar e o cliente são as etapas que o usuário executará para avaliar todos os dados. Qual é a decisão baseada primeiro e depois o que precisa ser verificado. A partir disso, você pode começar a entender como o usuário estará usando seu aplicativo. Depois de saber que você pode otimizar os dados e apresentá-los em um relatório gerenciável.
pelo que vejo no seu exemplo, os dados gerais não podem ser capturados em uma exibição. isso significa que o usuário terá que ir e voltar entre os dois espaços de comparação. Isso pode resultar em uma decisão errada, porque os dados são lidos incorretamente. erros nos negócios em que você está trabalhando podem custar muito dinheiro. dizendo ao cliente que ele provavelmente entenderá que você precisa evitar esses erros pintando uma imagem mais clara.
OPÇÃO: Se você estiver comparando linhas de dados, sugiro que dados mínimos na visão geral e a seleção de alguns para comparar criarão um relatório com todos os dados comparados adequadamente (gráficos, números ou qualquer outro auxílio visual).
OPÇÃO ALTERNATIVA: Vá para o seu chefe, diga que você fará do jeito dele, mas coloque um desenho alternativo na mesa. Quando chega a hora e as hordas de usuários irritados estão à sua porta, você lembra que você criou um design alternativo. política em tecnologia nunca é minha favorita. mas às vezes é apenas necessário!
Talvez você possa agrupar colunas de baixo valor (ou seja, valores no intervalo [0..100)) em sub-colunas.
Ao invés de:
| Description | Count | Mean | Sum | Foo | Bar |
| Lorem ipsum | 1 | 2 | 3 | $ 1.00 | +0.2% |
Apresentar como:
| Description | Totals | Foo | Bar |
| | C / M / S | | |
| Lorem ipsum | 1 : 2 : 3 | $ 1.00 | +0.2% |
Onde ":" é um separador de sub-coluna e C/M/S significa "Contagem/Média/Soma" (ou quaisquer dados exibidos aqui).
Se os valores absolutos dos dados não forem importantes, você poderá transformar porcentagens em ícones de barras empilhadas.
Se uma coluna for a porcentagem de outra coluna, você poderá usar o plano de fundo da coluna de destino como uma barra de progresso. De fato, dependendo da variedade de domínios de dados, o plano de fundo da célula pode indicar qual valor ela contém e eliminar o prefixo da moeda e/ou a formatação supérflua.
Não sei se você tem permissão para fazer isso, mas que tal não usar uma tabela? Mostre uma lista de itens, veja um exemplo de lista de filmes:
* Movie title 1 *
Cast: actor a, actor b
Year: 2000 Runtime: 100 min Rating: 75%
* Movie title 2 *
...
Aqui estão algumas idéias:
A verdadeira questão é esta: que dados o usuário realmente precisa ver? Todas as linhas preenchem todas as colunas dos seus dados? O meu não, mas está longe de ser um tipo de exibição de matriz "esparsa".
1) vista olho de peixe
Já pensou em uma visão de olho de peixe? Difícil encontrar uma boa solução javascript, mas Java applets são fáceis de encontrar.
2) dicas instantâneas
Apenas mostre os dados numéricos concisos (com precisão variável com base no intervalo) e exponha os títulos das colunas ao passar o mouse? Você pode/precisa destacar células de interesse e deixar o usuário passar o mouse sobre elas para ver qual coluna elas são
3) agrupamento
Agrupe itens com colunas semelhantes preenchidas em grupos e crie várias tabelas com itens semelhantes, deixando de fora as colunas não preenchidas de cada tabela. Na verdade, você não precisa saber previamente como agrupá-los ... Você pode criar um bitmap ou hash com colunas preenchidas para cada linha e depois classificar/agrupar as linhas em conjuntos de colunas comuns. Um algoritmo alternativo é simplesmente classificar por número de colunas preenchidas. Descobri que isso funciona muito bem e ajuda a identificar grupos facilmente, e expõe inconsistências menores muito bem.
Como regra, você não deve estar à vontade de todos os desejos de seus usuários. É seu trabalho como profissional reimaginar suas necessidades de maneira a resumir de maneira adequada e eficiente as massas de dados. Os computadores são ótimos em reunir hordas de dados e os humanos são ruins em interpretar esses dados. Resista, com toda a sua força, jogando tabelas não formatadas e não resumidas na tela.
Considere pesquisar no Google - a maioria das pesquisas normalmente retorna milhões de hits. Mas você já navegou além da primeira página? Se você é como a maioria, quase nunca. O que você faz se não encontrar sua resposta na primeira página? Você reformulará sua pergunta e restringirá os resultados até que seu destino apareça na primeira página.
Siga o exercício de Pesquisa do Google ao pensar no seu aplicativo. Apenas raramente é apropriado listar um despejo não filtrado de registros.
Outro exemplo - considere os contatos ou faixas de música no seu iPhone. Eu ficaria muito surpreso se você não tocasse imediatamente o rolador de letras à direita e pulasse para a seção em ordem alfabética. A lista completa e completa de registros existe mais para doces (mostre a rolabilidade do telefone) do que qualquer outra coisa.
Agora, tudo isso também pode ser aplicado aos dados que você mostra horizontalmente (número de colunas). Descubra uma maneira criativa e intuitiva de resumir esses dados. Um benefício adicional de pregar isso é que essas são as coisas que tornam um aplicativo agradável de usar. Adicione o suficiente desses ajustes e polimentos pensativos e o aplicativo se torna "divertido" de usar.
No mínimo, você está pensando sobre o problema; isso é mais do que a maioria dos desenvolvedores. Boa sorte!
Eu só tenho que jogar meus dois centavos aqui, apesar do fato de que essa pergunta é tão antiga.
Se você tiver um monte de dados que são TODOS necessários para o usuário tomar decisões, obviamente há um processo de tomada de decisão baseado nesses dados. Em vez de colocar o ônus no usuário para tomar essas decisões com base em dados brutos, o que você provavelmente deve focar é descobrir como processar esses dados brutos de uma maneira que seja mais útil para o usuário.
Por exemplo, se você tiver as colunas A, B, C, D e E, e A precisar ser atualizado quando B e C forem menores que D, mas maiores que E, em vez de mostrar a todos os usuários todas essas colunas, basta ter uma única coluna que exibe se essa condição é atualmente verdadeira ou não.
Em vez de inundar seus usuários com dados, você precisa estabelecer uma camada de lógica de negócios que use esses dados. Não apenas simplificará bastante a complexidade da sua GUI, mas seus usuários provavelmente ficarão extremamente agradecidos por facilitar a vida deles. Você deve sempre tentar identificar tarefas mais fáceis para computadores do que para pessoas e descarregar a responsabilidade por essas tarefas no computador.
Como não sabemos por que os usuários precisam ver todas as colunas ou por que seu chefe acha que eles querem ver todas as colunas, você se livra de algumas soluções de colunas. Aqui está o meu. Possibilitar aos usuários selecionar, ordenar e salvar suas preferências para as colunas que desejam. Tenho certeza de que há um número significativo de usuários que gostariam de ver apenas 5 colunas. O verdadeiro problema é que todos eles não querem ver os mesmos. Eventualmente, eles terão tantas colunas que uma barra de rolagem horizontal será exibida. Meu palpite é que esses 'viciados em planilhas' não se importam. Eles vão se sentir em casa.
A primeira coisa que vem à mente são as colunas redimensionáveis. Como você diz que todas as colunas devem estar visíveis, e os dados devem estar em um formato de tabela. Os nomes das colunas podem estar em um ângulo de 45 graus, para que sejam facilmente identificáveis e, ao mesmo tempo, ocupem menos espaço.
Faça com que seja dinâmico, pois você controla quais colunas são exibidas e, em seguida, usa padrões inteligentes. Um bom exemplo disso é o Ferramenta externa de palavras-chave , onde você pode adicionar/remover/classificar colunas à vontade. Com colunas dinâmicas, você pode comer seu bolo e o chefe pode comê-lo.
Eu concordo com Erwin em relação aos gráficos. Sparklines podem ser apropriados.
Aqui está uma discussão concisa desse tipo de coisa no site de Edward Tufte:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00002r&topic_id=1
Eu tive esse problema exato, com mais de 25 colunas. Todos os dados de texto, sem números. Basicamente, é um enorme inventário com caminho para muitos campos.
Atualmente, as teclas de seta para cima e para baixo ainda selecionam a linha, mas as teclas esquerda e direita ocultam e exibem uma coluna de forma que toda a tabela se mova para a esquerda.
Juntamente com uma pesquisa realmente agradável, esta solução não é ruim.
Obviamente, a visualização padrão é totalmente personalizável pelo usuário.
Na verdade, também encontramos esse problema com a exibição de muitos dados em uma tabela e o usuário precisa ver mais colunas diretamente, em vez de rolagem horizontal.
O que sei possível solução e o que também tentamos em nosso design:
Alguém tem uma solução ou ideia mais especial?