Avez-vous la Peur quand vous découvrez que votre prochain projet consiste à concevoir un tableau de données complexe et responsive ? 😨
Vous n’êtes pas seul, j’ai vu de grands designers trembler dans leurs bottes à l’idée de résoudre ce problème. Mais il n’y a pas de raison d’avoir peur ! Récemment, j’ai relevé ce défi de conception, et maintenant je suis ici pour partager quelques conseils qui m’ont aidé à arriver à une conception que nos utilisateurs adorent.
Il y a beaucoup d’options différentes de la façon de concevoir des tableaux, sans parler de la façon de les rendre réactifs. Les colonnes et les lignes peuvent se repositionner, se redimensionner, s’effondrer, se minimiser ou même disparaître lorsque la fenêtre du navigateur devient plus étroite.
Comme pour toutes les solutions de conception, la meilleure conception dépend de la façon dont vos lecteurs vont utiliser les données. Nous avons effectué des recherches sur les utilisateurs au début de ce projet pour fournir une certaine orientation et avons identifié que pour notre projet :
- Ces informations tabulaires seraient utilisées de manière égale sur un mélange d’ordinateurs de bureau, de tablettes et de dispositifs mobiles.
- Ces tableaux pourraient contenir de nombreuses colonnes de texte libre, ainsi que des chiffres.
- Certains éléments d’information importants devraient rester visibles à tout moment.
Avec ces connaissances de nos utilisateurs, voici les principaux éléments que j’ai abordés lors du développement d’un système de conception pour les tableaux de données à fort contenu textuel.
D’abord, déterminez de quel type de tableau il s’agit. S’agit-il d’un tableau de comparaison, où le lecteur compare les données entre plusieurs colonnes, ou d’un tableau de contenu, où les ensembles de données sont indépendants les uns des autres ?
Mon tableau ressemble plus à un tableau de contenu qu’à un tableau de comparaison. Identifier cela dès le début m’a aidé à comprendre quelles informations doivent rester à proximité dans la taille d’écran étroite.
Mobile first
La première version que j’ai conçue était la version pour écran étroit. Je l’ai intentionnellement examinée avant la version à écran large, car la visualisation des tableaux sur mobile est importante pour nos utilisateurs. Par conséquent, je devais trouver un moyen d’adapter des informations complexes et non linéaires dans un format vertical.
Je savais qu’il serait beaucoup plus facile de mettre le design à l’échelle lorsqu’il y a beaucoup d’espace horizontal, que de concevoir un beau tableau pour le bureau et de lutter pour qu’il reste lisible sur mobile. Cela signifiait également que je gardais les tailles cibles tactiles à l’esprit dès le début et que je ne comptais pas sur des actions comme le survol pour révéler les informations.
J’ai décidé de traiter le contenu plus comme une liste dans les vues étroites afin que les informations importantes restent très visibles et scannables.
Consistance du style
Les lignes doivent se repositionner lorsque la taille de l’écran change, donc j’ai utilisé le style pour aider à conserver la connexion entre elles. Par exemple, si les en-têtes de colonne sont en gras avec un fond gris, utilisez également ce même style dans la vue étroite. Cela aidera les lecteurs à remapper la nouvelle distribution des cellules.
La typographie est votre amie
Il est facile d’oublier vos principes typographiques lorsque vous avez beaucoup de contraintes, mais prendre une décision consciente pour optimiser la lisibilité sera une aide énorme pour vos lecteurs, surtout dans un projet comme le mien où les tableaux ont beaucoup de texte.
La typographie existe pour honorer le contenu. ~ Robert Bringhurst
Scanning
Faites en sorte qu’il soit facile de scanner rapidement en gardant le flux de lecture simple et clair. J’ai choisi d’avoir le texte de chaque colonne accroché au même bord afin que le lecteur puisse balayer le texte de façon linéaire.
Longueur de ligne
Tentez de ne pas compromettre la longueur de ligne du texte en écrasant beaucoup de colonnes dans un espace étroit, ou cela ralentit la vitesse de lecture. Je fixe une largeur minimale pour les colonnes de texte continu.
Étiquettes
Réfléchissez à l’endroit où placer les étiquettes pour qu’elles n’occupent pas une quantité excessive d’espace réel, mais fournissent tout de même un certain contexte à l’information.
J’ai placé les étiquettes au-dessus de chaque élément de contenu de cellule dans ma liste, où elles prenaient moins de place, plutôt que sur le côté. Et cela a rendu l’information plus facile à scanner aussi. J’ai stylisé les étiquettes différemment afin qu’il soit facile de distinguer la différence entre une étiquette fixe et un contenu variable.