Dans une grille, comment afficher les en-têtes de colonne longs
Lors de l'affichage des données dans une grille (chaque ligne contient un enregistrement, chaque colonne un champ d'enregistrement différent), le besoin d'espace vertical est facilement résolu par le défilement ou la pagination.
Nous manquons généralement d'espace horizontal plus tôt car le nombre de colonnes ou de données de colonne devient important. Ce sujet est déjà discuté ici: Comment afficher trop de données et ce n'est pas le point de ma question.
Certaines colonnes contiennent des données qui occupent un peu d'espace (une case à cocher, une date ou une icône), mais leur libellé d'en-tête est long. Le résultat est que la colonne devient large à cause de l'en-tête, pas des données, avec une perte évidente d'espace horizontal.
Il existe quelques solutions simples:
- trouver des textes d'en-tête plus courts
- encapsuler le texte d'en-tête sur plusieurs lignes
- afficher le texte d'en-tête verticalement
- afficher une abréviation avec une souris sur l'infobulle contenant l'étiquette complète
- utiliser une icône comme en-tête
Il y a des cas où aucune de ces solutions ne peut être appliquée, en gardant une interface utilisateur claire et facile à comprendre en même temps. Quelles sont vos solutions?
L'approche la plus utilisée que j'ai vue consiste à utiliser des points de suspension pour indiquer qu'il y a plus de texte, comme ceci:
Vous pouvez ensuite fournir une info-bulle au survol pour montrer à l'utilisateur le nom complet. Sous Mac OS, Apple essaie de condenser le texte dans un premier temps. Ils le font en réduisant l'espace entre les lettres et les mots. L'idée est de vous montrer autant de caractères que possible avant d'ajouter le Ellipsis en dernier recours.
J'ai vu une autre approche beaucoup plus élégante dans une application quelque part où ils estompent les dernières lettres affichables. Je ne me souviens pas du nom de l'application, mais cela ressemblait à ceci:
C'est évidemment plus de travail, mais ça a l'air plus moderne et plus classe. Je suis surpris qu'il ne soit pas encore devenu une fonctionnalité standard de Mac OS. En parlant de, Apple ne utilise la décoloration dans Spotlight pour vous montrer un long chemin de fichier:
En plus du chemin du fichier décoloré, consultez le fichier "YLListenerBase.cpp": vous pouvez voir qu'il est condensé si vous le comparez à son fichier .h. Le chemin du fichier avec l'effet de fondu se trouve en bas de la fenêtre.
Je pense que je l'ai suggéré dans un commentaire de l'autre question, mais pour récapituler ... Je suggérerais des icônes lorsque l'icône peut décrire avec précision la signification des colonnes.
Citation de commentaire sur l'autre question:
Par exemple. si vous avez une colonne qui ne contiendra qu'un seul caractère (par exemple O/N /?, ou 0/1/2/3 /? ou T/F) si vous pouvez utiliser une icône ou un texte abrégé dans l'en-tête, vous pouvez être capable de réduire considérablement la largeur de la colonne. par exemple. si vous avez une colonne "Numéro", l'utilisation de "#" à la place économisera de l'espace.
Votre liste est assez exhaustive. Il n'y a pas grand-chose d'autre à faire que de choisir ce qui convient le mieux à votre situation.
Si vos en-têtes sont composés de plusieurs mots, l'habillage est probablement la meilleure option. Vous pouvez également séparer le mot long occasionnel si vous utilisez une césure appropriée. Ne divisez pas les mots à des points arbitraires.
Vous avez généralement plus de chance d'obtenir des abréviations devinables que des icônes, sauf si les icônes sont déjà établies ailleurs dans l'application. Si vous n'utilisez pas d'abréviations établies, testez-les dans leur contexte pour vous assurer que les utilisateurs peuvent les deviner. Oui, utilisez les info-bulles que vous utilisiez des icônes ou des abréviations, mais ne vous y fiez pas pour une utilisation normale. Les abréviations n'ont généralement pas besoin de points, ce qui économise de l'espace.
Si vous affichez l'en-tête verticalement, vous obtiendrez une meilleure lisibilité en écrivant le texte latéralement, plutôt qu'en empilant les lettres les unes sur les autres.
Plutôt que d'afficher l'en-tête verticalement, "pliez" la colonne en haut et affichez le texte de l'en-tête selon un angle de 30 à 45 degrés. Maintenant, il suffit d'un léger coup de tête pour les lire. Cela ne fonctionne cependant que si vous avez un tas de colonnes adjacentes avec de longs en-têtes.
Pour certaines grilles, par exemple lorsque les valeurs de champ ont tendance à avoir la même largeur sur différents champs (par exemple, pour afficher un horaire de train), il est logique d'échanger des colonnes avec des lignes. Maintenant, les en-têtes de colonne sont des en-têtes de ligne, ce qui peut être aussi long que nécessaire sans gaspiller d'espace.
N'oubliez pas qu'il n'existe aucune loi interdisant le défilement horizontal dans une grille. Les utilisateurs le font depuis des années avec des feuilles de calcul.
Pourquoi ne pas utiliser un "nuage" empilé au-dessus de la colonne entend? S'ils sont vraiment si importants d'avoir longtemps, devenez fou:
________________ _____________
|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 |
Quelques bonnes solutions déjà mentionnées. Voici un autre à considérer: Utilisez des identificateurs de couleur, de nombre ou de lettre pour la colonne et une légende.
