Comment créer une table Web complexe

Les tableaux apparaissent souvent sur le Web, mais ils ne sont pas faciles à concevoir et à coder. Ce guide illustré explique l’anatomie de la table et explique comment construire une table, en gardant à l’esprit sa future élaboration.

Imaginez que vous concevez un système pour les chercheurs de données. Ou une application pour la gestion de l'énergie. Ou un tableau de bord pour les marchands de maïs. Peut-être que vous concevez quelque chose comme ça maintenant. Dans tous les cas mentionnés, les gens attendent des tables. Ce ne sont pas des sites fantaisistes inspirés par des sites d'inspiration de conception, mais des monstres d'apparence Excel avec des centaines de cellules et une interaction complexe

Dans ce cas, un concepteur est confronté à de nombreux défis. Par exemple, faire correspondre la conception avec les infrastructures frontales existantes ou lutter avec des données «inconfortables» qui détruisent la mise en page. Nous allons résoudre ces problèmes en procédant comme suit: systématisez les besoins, passez à l'atome et définissez l'interaction

1. Systématiser les besoins

Vous avez donc interrogé le public cible et déterminé ses besoins et ses désirs. Il est maintenant temps de rassembler les résultats et de les transformer en une structure d’interface. Par exemple, un utilisateur a déclaré: «Je dois voir comment mes données affectent d’autres parties de l’application». Ou tout en regardant une autre personne travailler avec un ancien logiciel, vous avez remarqué qu’il utilisait des raccourcis sans toucher la souris.

Les mots du premier utilisateur parlent de la validation des entrées et des astuces. Vous devrez envisager de joindre des informations d’alerte ou d’aide à une table. Ou développez un système de couleurs significatives. Cela dépend du domaine et du modèle mental. L’observation du travail du deuxième utilisateur peut indiquer que vous devez concevoir toutes les actions accessibles au clavier. Et vous aurez probablement besoin de penser à des raccourcis plus profonds que juste [ Cmd + C ”et“ Cmd + V ”.

Voici quelques paires observation / hypothèse.

• « Je dois manipuler facilement des dizaines d'objets à la fois .»
  Autoriser la sélection multiple de cellules? Ajouter des cases à cocher pour sélectionner plusieurs lignes?
• “ Maintenant, nous faisons tous les calculs de cette façon .” [ Montre Microsoft Excel ]
  Excel est-il efficace à cette fin? Quelles fonctionnalités pouvons-nous emprunter?
• «[ Pouvons-nous savoir au préalable si ce nom figure déjà sur le serveur ."
  Validation des données à la volée? Messages d'erreur ou correction automatique?
• “ Habituellement, je saisis ces informations. C'est assez générique. ”
  Suggérer des valeurs par défaut, des modèles ou des modèles?

En conséquence, vous aurez une liste des besoins et des désirs des personnes. Les questions ouvertes sont utiles pour déterminer les besoins réels et filtrer les caprices:

«Qu'est-ce qui vous aide à travailler plus vite? Qu'est-ce qui peut faciliter votre choix? Comment cette fonctionnalité affecte-t-elle l'efficacité de votre travail? Qu'est-ce qui changera si vous ne pouvez pas faire X? ”

Alors, quelle est la prochaine étape? Il est maintenant temps de créer un squelette logique pour votre table. Un schéma de ce qu'il contient et est capable de faire. Si vous vous adressez directement au wireframing ou au prototypage, vous vous engagez sur la voie du diable consistant à dessiner sans cesse et à vous battre avec un héritage. C’est l’arbre des fonctionnalités. Et le bloc de construction de base de toute table est une cellule. Les cellules s'unissent en lignes et en colonnes, qui peuvent avoir des caractéristiques spécifiques différentes de celles de cellules séparées. Et enfin, nous allons à ces importants suppléments d'une table comme barre supérieure avec des boutons, des commandes au clavier et des erreurs de manipulation.

L'arbre de fonctionnalités vous empêche de faire plus de travail et vous aide à vous concentrer sur ce qui est important. Une arborescence de fonctionnalités bien organisée est également utile pour l'équipe de développement. Ils peuvent associer les fonctionnalités planifiées aux bibliothèques frontales disponibles et trouver le meilleur moyen de transformer les conceptions en code.

Dans l'un de mes projets, nous avons utilisé le framework Angular Material. Malheureusement, les tables angulaires étaient trop simples. Nous avons trouvé une bibliothèque ag-Grid qui prenait en charge nos fonctionnalités, mais avec une limitation. Il était impossible d'élargir une ligne et de placer des lignes d'enfants à l'intérieur. Nous avions révélé ce problème avant de déployer des efforts et d'ajuster la conception.

In A Nutshell

• Commencez à créer un tableau complexe avec la collecte et la hiérarchisation des besoins des utilisateurs. Prenons une solution qui ne soit pas une table, par exemple un graphique.
• Dessinez un diagramme en arborescence qui systématise toutes les fonctions nécessaires. Utilisez-le comme un plan pour la production de visuels.

Lecture recommandée : Modèles de conception de tableaux sur le Web de Chen Hui Jing

2. Go Atomic

Ainsi, les besoins et les fonctionnalités sont définis et vous connaissez les limites techniques. Il est temps de maquiller votre table. L'approche atomique consiste essentiellement à concevoir d'abord de petits composants d'interface utilisateur, puis à en assembler de plus grands. Nous allons progressivement passer des particules élémentaires telles que les polices et les couleurs à des modules aussi volumineux qu’un en-tête ou une colonne. J'ai délibérément choisi le style brutaliste strict pour les maquettes afin que nous puissions nous concentrer sur la fonction et non sur l'apparence.

Polices, couleurs, icônes

Ces éléments peuvent déjà être définis par le système de conception ou le cadre d'interface utilisateur que vous utilisez. Si vous créez une table pour un produit existant, vérifiez si sa palette de couleurs, ses polices et ses icônes répondent aux besoins de la table. Sur la photo ci-dessous, j'ai montré certaines des nuances de gris nécessaires aux cadres de tableau, aux lignes, aux remplissages et au texte. Les teintes rouges et bleues désignent des trucs d'avertissement d'erreur destructifs et d'actif activé activé. Les styles de texte doivent distinguer les informations principales et secondaires, les titres et le corps du texte.

Cells And Accessories

Lorsque les atomes de la table sont prêts, nous pouvons utiliser des molécules – différents types de cellules. En premier lieu, il est important de penser à l’avance aux états normal, stationnaire et actif de chaque élément. Ensuite, cliquez, désactivé et autres états.

Sur l’un de mes projets, nous avions huit types de cellules avec leurs propres interactions. Les plus simples sont les cellules de texte et numériques. Dans notre cas, il était autorisé à renseigner des cellules numériques avec un contenu non numérique, tel que «N / A» (non appliqué) et «N / C» (pas de contrôle). C'était la particularité du domaine. Les listes déroulantes et les sélecteurs de date sont plus complexes et comportent des éléments enfants. Enfin, nous avions des cellules de tableau représentant des commandes dans la ligne.

Les cellules peuvent avoir des accessoires tels que des info-bulles, des astuces d'entrée, des messages d'erreur, des espaces réservés, etc. À ce stade, elles sont statiques, mais le concepteur doit préciser plus tard la logique dans laquelle elles apparaissent (animation, délai, etc.).

Lignes et en-têtes

Lorsque les cellules sont conçues, vous pouvez créer des lignes et voir si différentes combinaisons fonctionnent bien ensemble. Une fois, j'ai conçu une table qui avait une logique d'édition complexe. Certaines des propriétés ont été fournies par les utilisateurs, tandis que d'autres ont été automatiquement calculées ou remplies avec des valeurs par défaut. Vous trouverez ci-dessous un mélange de cellules en lecture seule et modifiables dans une ligne.

Notez que le curseur est différent lorsqu'il survole des cellules en lecture seule et modifiables. En cliquant dessus, on sélectionne une ligne ou on passe en mode d'édition de la cellule modifiable.

Dans l'image suivante, vous pouvez voir que les utilisateurs peuvent sélectionner une ou plusieurs lignes:

Il est temps maintenant de penser à l’en-tête du tableau. D'après mon expérience, il est souvent impossible de contrôler la longueur du titre d'une colonne et de s'en tenir à une ligne. Même avec un bon rédacteur dans une équipe, vous ne garderez pas tous les textes courts. Certains tableaux nécessitent des titres techniques longs ou une localisation. Des phrases d'une ligne en anglais pourraient devenir deux ou trois lignes en grec, allemand ou hongrois. Par conséquent, j’ai montré différentes variantes:

Les utilisateurs de logiciels basés sur des données ont souvent besoin de trier et de filtrer. Cela les aide à trouver des informations précieuses dans les grandes quantités de données. Le défi du tri et du filtrage consiste à combiner les contrôles de tri et les boîtes de filtrage avec d’autres éléments d’en-tête – titres de colonne, unités de mesure, etc.

À la différence des cellules de tableau, les boîtes de filtres ont généralement l'icône «réinitialiser» à droite, ce qui permet aux utilisateurs de les désactiver explicitement et de voir le contenu non filtré.

Dans mon exemple, il existe trois types de filtres. Le filtre alphanumérique permet une recherche par lettres et chiffres. Il prend en charge les caractères génériques – nombre inconnu de caractères inconnus. Par exemple, si je tape 45 * A1 les lignes ayant des valeurs telles que 45A1 45982A1B 45A109B peuvent s'afficher et 096445-A1 .

Les caractères génériques sont une caractéristique délicate car ils dépendent des habitudes de la population. Lorsque j'ai conçu des tableaux pour des spécialistes techniques, nous avons attribué le signe astérisque (*) au nombre inconnu de symboles inconnus. Pour les analystes en assurance, j'ai choisi le symbole SQL traditionnel – le signe de pourcentage (%) – car ils y étaient habitués. Quant au filtre déroulant, il bascule entre un certain nombre d'options de texte, de nombres ou de plages de chiffres mutuellement exclusifs.

Le filtre du sélecteur de date a un calendrier et fonctionne comme son équivalent cellulaire. C’est bien d’autoriser les utilisateurs à entrer la date manuellement et à choisir dans le calendrier. S’ils savent ce qu’ils cherchent, il est beaucoup plus facile de taper que de cliquer.

Il est également important de formater automatiquement les entrées significatives et de ne pas déranger les personnes qui présentent des erreurs de type “format incorrect”. Sur l'un de mes projets, nous avons autorisé la saisie de dates telles que le 25/01/2017 6.12.17 et le 4 septembre 2016 ainsi que le filtrage par mois ou uniquement à l’année.

Colonnes

Les colonnes épinglées sont l'une des caractéristiques les plus fréquentes des tableaux complexes. En règle générale, les colonnes contenant des informations clés, par exemple les noms ou statuts d'élément, ne peuvent pas défiler.

Bien que les colonnes de tableau doivent s'adapter intelligemment à la taille du contenu, cela se produit lorsque le texte est tronqué. Dans ce cas, le redimensionnement des colonnes est utile. Les utilisateurs peuvent faire glisser le bord de la colonne et voir le contenu long. Ils pourraient également avoir besoin de compresser une colonne sans importance ou celle contenant un texte court.

Une autre façon de gérer des chaînes de texte longues est d'étirer une colonne en fonction du contenu le plus long ou de l'envelopper et de l'insérer sur plusieurs lignes. La première approche fonctionne mieux pour des chaînes de texte plus ou moins similaires. La seconde fonctionne mieux si voir le contenu complet est plus important pour les gens que de maintenir le tableau verticalement compact

Sur l'un de mes projets, nous avons défini les largeurs minimales des colonnes afin d'empêcher les tableaux de redimensionner de manière disgracieuse. Nous avons désactivé la compression des colonnes derrière une certaine largeur en fonction du type de contenu.

Barre supérieure

Qu'est-ce qui constitue un tableau? Cellules, colonnes, lignes. De plus, les tables complexes ont souvent une barre supérieure. Comme le reste des composants, la barre supérieure est constituée d'éléments plus petits – un titre et des commandes.

Ci-dessous, j'ai rassemblé la liste des commandes avec toute la variété des états, que nous avons utilisées dans l'un des produits. Nous avions des commandes d'icônes pour des métaphores évidentes telles que plus = add / create trash bin = remove arrow = move . Les commandes non génériques (par exemple, assigner, archiver, équilibrer) nécessitaient une dénomination textuelle explicite. De plus, certaines commandes étaient accompagnées d'un menu déroulant.

Nous pouvons maintenant essayer de combiner différents éléments et voir si cela fonctionne. En voici quelques exemples:

Bien sûr, ce n'est pas la liste ultime des caractéristiques et des éléments. Il diffère d’un projet à l’autre et peut inclure d'autres éléments, par exemple:

• Tri sur plusieurs colonnes,
• Ensemble de colonnes personnalisable (possibilité de les basculer);
• Lignes extensibles (une ligne parent peut avoir des lignes enfants);
• Opérateurs logiques pour le filtrage et la recherche (“et”, “ou”, “autre”, etc.).

Si vous hésitez sur les fonctionnalités à concevoir et celles qui ne le sont pas, voici un bon principe . C’est le rasoir d’Occam ou la loi de la parcimonie. Un concepteur ne devrait pas créer de nouvelles instances si celles existantes répondent aux besoins. Vous devriez «couper» les fonctionnalités geek, dont les utilisateurs pourraient théoriquement avoir besoin dans un avenir indéfini. Même chose pour les caractéristiques qui conviennent parfaitement à l'une des cent situations mais sont inutiles dans les quatre-vingt-dix-neuf cas restants

Tableau complet

Lorsque tous les blocs de construction sont prêts, vous pouvez assembler plusieurs tableaux à des fins diverses. . C'est une chance de repérer des incohérences. Le plus souvent, j'ai traité avec les trois types suivants:

Table en lecture seule

Le type de table le plus simple à créer puisqu'il ne montre que les données en l'état. Il n'y a pas d'options de filtrage ou d'édition. Le tri ou la hiérarchie des lignes peut aider à analyser de gros morceaux de données. Un tel tableau est utilisé pour montrer des données, informer les gens de quelque chose.

Tableau de recherche

Les cellules ne sont pas modifiables, l’en-tête comporte des zones de filtrage et des commandes de tri. Il est donc possible de sélectionner des lignes. De par ma pratique, de tels tableaux aident à trouver, comparer et sélectionner un ou plusieurs articles parmi une large gamme. Par exemple, filtrez cinq des six mille outils non pertinents d'un catalogue, puis choisissez l'un des outils nécessaires.

Table modifiable

Toutes les cellules ou certaines d'entre elles sont modifiables. Généralement, il n'y a pas de filtrage car l'ordre des lignes peut être personnalisé. Ces tables sont généralement accompagnées d'une barre d'outils et permettent d'effectuer des actions avec des lignes.

En bref

• Commencez par les composants les plus petits, puis progressivement vers les plus gros.
• Pensez à tous les états possibles pour chaque composant à l’avance.
• Utilisez le principe de rasoir d’Occam pour limiter le nombre d’éléments à un minimum.

Lecture recommandée : [19659113] Systèmes de conception de Alla Kholmatova

3. Define Interaction

Les blocs de construction ne suffisent pas pour créer un élément d’interface aussi complexe que celui d’une table. Un concepteur doit réfléchir aux «règles du jeu» et concevoir des principes et conventions logiques derrière la partie visuelle. Je vais décrire quelques points typiques à prendre en compte.

Données numériques

Combien de décimales le nombre devrait-il avoir dans votre tableau? Un, deux, cinq? Quel est le niveau de précision optimal? Je décide en fonction de la précision dont les utilisateurs ont besoin pour prendre la bonne décision. Dans certaines professions, la fluctuation entre 10932.01 et 10932.23 est importante, alors que dans d'autres régions, les chiffres 14 et 15 ne font pas vraiment la différence .

Voici un exemple de règles de données numériques que mon équipe a utilisées dans un produit d'ingénierie sophistiqué.

• Longueur
  Deux décimales (57,53 m, 3,16 km); des espaces sont utilisés en tant que milliers de séparateurs (403 456,56 m).
• Poids
  Deux décimales (225,08 kg, 108,75 t); les espaces sont utilisés comme milliers de séparateurs (12 032,17 kg).
• Monnaie
  Deux décimales (9,45 $); les virgules sont utilisées comme milliers de séparateurs (16 408 989,00 $).
• Diamètre
  Trois décimales (10,375 cm); pas de séparateurs.
• Latitude et longitude
  Huit décimales (26.4321121); signe moins utilisé pour la longitude ouest et la longitude sud (-78.05640132).
• Défaut
  Pour les unités non répertoriées ci-dessus – deux décimales (32,05 g / m³, 86,13 C °).

Encore une chose Nous avons considéré la différence entre les «vraies» données sauvegardées sur les serveurs et les données «approximées» de l'interface. Le système utilisait des nombres extrêmement précis avec des dizaines de décimales dans tous les calculs, mais les utilisateurs n’avaient pas besoin de les voir tout le temps. Nous avons donc décidé d'afficher le nombre de décimales décrit ci-dessus et d'exposer le nombre complet uniquement lorsqu'une cellule de tableau est active. Par exemple, un ingénieur pourrait entrer 134432.97662301 et, une fois appuyé sur entrez le tableau montrait 134 432,98 . Après un clic supplémentaire, l'ingénieur consulterait à nouveau 134432.97662301 .

Validation d'entrée

Contrairement à l'élément précédent relatif aux nombres, la validation est importante uniquement pour les tables modifiables. Il a deux aspects. Premièrement, les règles qui qualifient les données saisies comme valides ou invalides. Deuxièmement, les messages qui aident à corriger les données non valides ou les mécanismes qui les corrigent automatiquement. Habituellement, les règles de validation sont trop complexes pour être reflétées dans des maquettes ou des prototypes. Les concepteurs peuvent donc les documenter sous forme textuelle ou sous forme d'organigrammes.

Voici un exemple de modèle de message que j'ai utilisé une fois. Le texte entre crochets est dynamique et provient du moteur de calcul ou de la base de données.

• Devrait être supérieur à nombre de l'unité de mesure . Explication facultative .
• Devrait être inférieure à nombre unité de mesure . Explication facultative .
• Devrait être comprise entre numéro 1 et numéro 2 unité de mesure . Explication facultative .
• La valeur minimale doit être inférieure à la valeur maximale.
• La valeur maximale doit être supérieure à la valeur minimale.
• Les valeurs minimale et maximale ne doivent pas être égales.

Commandes

19659033] Les tables modifiables avec des barres d'outils nécessitent généralement un ensemble de règles lorsque les commandes de la barre d'outils sont activées et désactivées. Ces états peuvent dépendre du fait qu'une ligne est sélectionnée, du nombre de lignes sélectionnées, de la position ou du contenu de la ou des lignes sélectionnées et d'autres conditions. Vous trouverez ci-dessous l’un des nombreux moyens de documenter de telles règles logiques:

Nous avons donc un tableau contenant certains produits chimiques. Il contient des commandes telles que «Ajouter une ligne», «Déplacer vers le haut», «Déplacer vers le bas», Supprimer »,« Recalculer »et« Paramètres ».

Et voici la description des états de commande. Il s'avère que leur disponibilité dépend d'une ou de plusieurs conditions.

L'étape suivante consiste à définir le résultat de chaque commande. Par exemple, que se passe-t-il lorsque je sélectionne deux lignes distantes et que je clique sur «Déplacer vers le haut»? Ou quel est le résultat de cliquer sur "Recalculer"? Toutes ces questions doivent recevoir une réponse ou au moins être examinées à l'avance.

Conteneur et réactivité

Comment le tableau sera-t-il placé dans l'interface? Par exemple, occupera-t-il un peu d'espace dans un conteneur existant ou constituera-t-il un module distinct? Les réponses à ces questions dépendent totalement d'un produit et il est préférable de prévoir les problèmes éventuels et de définir les principes de manière approfondie.

Lorsque je conçois des applications Web, je pense généralement à au moins trois types de conteneurs pour les tables. Le cas le plus typique est celui où une grande table est le centre de l’écran et occupe le plus de place possible. Un tel tableau pourrait ne pas avoir son propre titre puisque tout l'écran est consacré à son utilisation. Les petites et moyennes tables peuvent devenir des modules autonomes d'un tableau de bord, ainsi que d'autres éléments tels que des graphiques, des diagrammes, des schémas. Dans ce cas, la barre supérieure d'une table joue le rôle d'en-tête de carte. Enfin, dans les applications d'entreprise de grande taille, les tables existent souvent dans des boîtes de dialogue contextuelles. Il doit exister des instructions judicieuses afin que les dialogues ne explosent pas à cause d’un contenu excessif.

La zone d’écran disponible est un autre aspect du placement d’un tableau dans l’environnement de l’interface utilisateur. La majorité des applications d'entreprise sont destinées à être utilisées principalement sur le bureau. La réactivité de la table se limite à un simple comportement d'étirement et de compression. En règle générale, les tableaux comportant beaucoup de lignes et peu de colonnes occupent 100% de la largeur disponible. En conséquence, les cellules sont réparties uniformément à l'écran et davantage de texte peut être affiché sans troncature du retour à la ligne. En revanche, d’énormes écarts apparaissent généralement entre les colonnes, ce qui contredit la loi de conception de la proximité. C'est pourquoi certaines applications utilisent des lignes entre les lignes ou la coloration zébrée blanche-grise pour rendre les informations plus lisibles.

Un meilleur moyen consiste à définir des largeurs rationnelles par défaut et à permettre un redimensionnement manuel si nécessaire. Pour la lecture d'un tableau, il est préférable d'avoir un espace vide à droite que des espaces entre les colonnes.

Si un tableau contient à la fois de nombreuses lignes et colonnes, les défilements horizontal et vertical sont inévitables.

L'essence clé du complexe table est grande, donnant ainsi une vue à vol d'oiseau des données. Malheureusement, je ne peux pas nommer une méthode vraiment efficace pour utiliser de grandes tables sur les écrans de smartphone. Les feuilles de calcul Excel et Google perdent leur pouvoir sur les petits écrans, bien qu'il existe des moyens efficaces de gérer les petits tableaux. Par exemple, convertir une table en un ensemble de cartes

Accessibilité

Même une table exceptionnellement lisse et agréable peut devenir un cauchemar pour les utilisateurs. Par conséquent, il est si important de suivre les principes d'accessibilité. Les directives pour l'accessibilité au contenu Web (WCAG 2.0) contiennent un chapitre sur les tableaux. La majeure partie du matériel concerne le bon codage; Cependant, un concepteur doit aussi beaucoup réfléchir.

Voici quelques considérations de conception majeures en termes d'accessibilité.

• Donnez un titre et préparez un résumé concis.
  Un utilisateur malvoyant devrait être capable de pour avoir l'idée d'une table sans traitement vocal de toutes ses cellules.
• Attention à la taille de la police.
  Bien qu'il n'y ait pas de taille minimale officielle pour le Web, 16 px (12 pt) est considéré comme étant optimale. De plus, un utilisateur devrait pouvoir l'augmenter jusqu'à 200% sans casser toute la mise en page.
• Tester les couleurs des personnes daltoniennes
  Le texte et les commandes doivent avoir un contraste suffisant avec l'arrière-plan. Un rapport de couleur de 3: 1 est requis au minimum (plus il y a, mieux c'est). De plus, la couleur ne devrait pas être le seul moyen de marquer les choses. Par exemple, les messages d'erreur ne doivent pas uniquement utiliser du texte rouge, une icône d'avertissement donnera des indices supplémentaires aux utilisateurs daltoniens.
• Évitez les petits contrôles ambigus.
  Les composants pouvant être cliqués sont considérés comme des éléments tactiles. sympa si elles ont au moins 40 × 40 px. Les commandes représentées par des icônes doivent être étiquetées ou avoir des info-bulles et du texte alternatif. Les concepteurs ne doivent pas abuser des icônes car les utilisateurs risquent de ne pas comprendre correctement les métaphores complexes.

Vous pouvez également utiliser des outils en ligne pour vérifier l’accessibilité, par exemple Wave . Il trouve non seulement les problèmes et les fonctionnalités d'accessibilité, mais les met également en évidence directement sur une page et explique comment les résoudre.

In A Nutshell

• L'unification et la mise en forme du contenu constituent également le travail du concepteur.
• Think beyond “ choses ", éléments de votre interface, et considérez les cas d'utilisation et les modèles fréquents.
• Lorsque tout à l'intérieur est cohérent et compatible, il est temps de réfléchir à la façon dont il s'intègre dans le reste de l'interface.

Conclusion

Nous ' Nous venons de parcourir le processus de construction d’une table complexe. Différents projets nécessitent des approches différentes, mais il existe un principe universel. Un concepteur doit faire en sorte que tous les éléments fonctionnent ensemble, quelle que soit leur combinaison. C’est pourquoi il est bon de commencer par cerner les besoins et créer d’abord de petits blocs. Et, bien sûr, tester avec les utilisateurs dès que vous avez quelque chose de cliquable et de réaliste.

Pour en savoir plus

(dm, ra, il)