Em uma grade, como exibir cabeçalhos de coluna longos
Ao exibir dados em uma grade (cada linha contém um registro, cada coluna um campo de registro diferente), a necessidade de espaço vertical é facilmente resolvida com rolagem ou paginação.
Geralmente, perdemos espaço horizontal mais cedo, à medida que o número de colunas ou dados da coluna se torna grande. Este tópico já foi discutido aqui: Como exibir muitos dados e esse não é o ponto da minha pergunta.
Algumas colunas possuem dados que ocupam pouco espaço (uma caixa de seleção, uma data ou um ícone), mas o rótulo do cabeçalho é longo. O resultado é que a coluna se torna larga por causa do cabeçalho, não dos dados, com uma óbvia perda de espaço horizontal.
Existem algumas soluções simples:
- encontre textos de cabeçalho mais curtos
- quebra o texto do cabeçalho em várias linhas
- exibir o texto do cabeçalho verticalmente
- exibir uma abreviação com o mouse sobre a dica de ferramenta que contém o rótulo completo
- use um ícone como cabeçalho
Há casos em que nenhuma dessas soluções pode ser aplicada, mantendo uma UI clara e fácil de entender ao mesmo tempo. Quais são as suas soluções?
A abordagem mais usada que eu já vi é usar uma elipse para indicar que há mais texto, assim:
Você pode fornecer uma dica de ferramenta ao passar o mouse para mostrar ao usuário o nome completo. No Mac OS, Apple tenta condensar o texto como primeiro passo. Eles fazem isso reduzindo o espaço entre letras e palavras. A idéia é mostrar o maior número possível de caracteres antes de adicionar o Reticências como último recurso.
Eu vi outra abordagem muito mais elegante em um aplicativo em algum lugar onde elas desaparecem nas últimas letras exibidas. Não consigo lembrar o nome do aplicativo, mas era assim:
Obviamente, isso é mais trabalhoso, mas com certeza parece mais moderno e elegante. Estou surpreso que ainda não tenha se tornado um recurso padrão do Mac OS. Por falar em, Apple faz use desbotamento no Spotlight para mostrar um longo caminho do arquivo:
Além do caminho do arquivo desbotado, consulte o arquivo "YLListenerBase.cpp": você pode ver que está condensado se o comparar com o arquivo .h. O caminho do arquivo com o efeito esmaecido está na parte inferior da janela.
Acho que sugeri isso em um comentário na outra pergunta, mas recapitulando ... Sugiro ícones quando o ícone puder descrever com precisão o significado das colunas.
Citação de comentário na outra pergunta:
Por exemplo. se você tiver uma coluna que conterá apenas um único caractere (por exemplo, S/N /?, ou 0/1/2/3 /? ou T/F), se você puder usar um ícone ou texto abreviado no cabeçalho, poderá ser capaz de reduzir bastante a largura da coluna. por exemplo. se você tiver uma coluna "Número", usar "#" economizará espaço.
Sua lista é bastante exaustiva. Você não pode fazer muito mais do que escolher o que for melhor para a sua situação.
Se os cabeçalhos tiverem várias palavras, o agrupamento é provavelmente a melhor opção. Você também pode interromper a palavra longa ocasional se usar a hifenização adequada. Não quebre palavras em pontos arbitrários.
Geralmente, você tem mais sorte em obter abreviaturas imagináveis do que ícones, a menos que os ícones já estejam estabelecidos em outras partes do aplicativo. Se você não estiver usando as abreviações estabelecidas, teste-as no contexto para garantir que os usuários possam adivinhar. Sim, use as dicas de ferramentas, esteja você usando ícones ou abreviações, mas não dependa delas para uso normal. As abreviações geralmente não precisam de períodos, o que economizará espaço.
Se você exibir o cabeçalho verticalmente, obterá melhor legibilidade escrevendo o texto lateralmente, em vez de empilhar as letras umas sobre as outras.
Em vez de exibir o cabeçalho verticalmente, "dobre" a coluna na parte superior e exiba o texto do cabeçalho em um ângulo de 30 a 45 graus. Agora é preciso apenas uma leve ponta da cabeça para lê-los. Isso só funciona, no entanto, se você tiver várias colunas adjacentes com cabeçalhos longos.
Para algumas grades, como onde os valores dos campos tendem a ter a mesma largura em campos diferentes (por exemplo, para mostrar uma programação de trem), faz sentido trocar colunas com linhas. Agora, os cabeçalhos de coluna são cabeçalhos de linha, que podem demorar o tempo necessário sem desperdiçar espaço.
Lembre-se de que não há lei contra a rolagem horizontal em uma grade. Os usuários fazem isso há anos com planilhas.
Por que não usar uma 'nuvem' empilhada acima da coluna? Se eles são realmente tão importantes por muito tempo, enlouqueça:
________________ _____________
|Super Long Title| |I'm also long|
^ ^
| Foo | Bar | | | Baz | | | FooBar |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
Algumas boas soluções já mencionadas. Aqui, mas outro a considerar: use identificadores de cores, números ou letras para a coluna e uma legenda.
