{"id":227941,"date":"2022-09-30T16:26:00","date_gmt":"2022-09-30T13:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227941"},"modified":"2022-11-09T00:10:20","modified_gmt":"2022-11-08T21:10:20","slug":"comment-concevoir-une-table-guide-pratique-pour-bien-faire-les-choses","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-concevoir-une-table-guide-pratique-pour-bien-faire-les-choses\/","title":{"rendered":"Comment concevoir une table\u00a0: guide pratique pour bien faire les choses"},"content":{"rendered":"\n

L’utilisation de tableaux et de grilles est courante lors de la conception de produits num\u00e9riques et de tableaux de bord. Les tableaux de donn\u00e9es aident \u00e0 organiser une masse d’informations.<\/strong><\/p>\n

Ils pr\u00e9sentent les donn\u00e9es de mani\u00e8re plus lisible et compr\u00e9hensible<\/strong>. Ils aident \u00e9galement \u00e0 mettre en valeur les donn\u00e9es importantes et \u00e0 am\u00e9liorer la visualisation des donn\u00e9es.<\/p>\n

Les tableaux sont souvent utilis\u00e9s comme composant d’interface utilisateur, mais beaucoup font encore des erreurs lors de la conception des tableaux de donn\u00e9es. Certaines conceptions de table sont pleines de bruit visuel ou sont trop complexes, ce qui entra\u00eene une mauvaise exp\u00e9rience utilisateur.<\/p>\n

Obtenir la bonne conception d’interface utilisateur de table cr\u00e9e de meilleures visualisations et comparaisons de donn\u00e9es. Concevoir des tableaux de la bonne mani\u00e8re les rend attrayants et am\u00e9liore la lisibilit\u00e9.<\/p>\n

Ce guide montre comment optimiser la conception des tables de donn\u00e9es et am\u00e9liorer les fonctionnalit\u00e9s des tables.<\/p>\n

Concevoir des tableaux de donn\u00e9es de la bonne mani\u00e8re<\/strong><\/h2>\n

Lors de la planification d’une conception de table, il y a deux choses sur lesquelles travailler: le style de table et la fonctionnalit\u00e9 de table.<\/p>\n

Style de tableau<\/h3>\n

Alignement des donn\u00e9es du tableau<\/h4>\n

Source des images<\/a><\/p>\n

Pour diff\u00e9rencier le texte des donn\u00e9es num\u00e9riques, alignez le texte \u00e0 gauche<\/strong> et les nombres \u00e0 droite<\/strong>. Un tel alignement facilite la comparaison de deux donn\u00e9es diff\u00e9rentes.<\/p>\n

Les en-t\u00eates de tableau doivent \u00e9galement s’aligner sur leurs donn\u00e9es de colonne pour une conception de tableau structur\u00e9.<\/p>\n

Certaines cellules de tableau peuvent contenir plusieurs lignes de texte,<\/strong> telles que des descriptions. L’ alignement vertical<\/strong> d’un tel contenu doit \u00eatre en haut<\/strong>.<\/p>\n

Sinon, les donn\u00e9es de la colonne ne seront pas align\u00e9es les unes avec les autres.<\/p>\n

Ajout d’une section en vedette<\/h4>\n

\"Comment<\/a><\/p>\n

Tableau de tarification que vous pouvez cr\u00e9er avec wpDataTables<\/a><\/p>\n

Une section en vedette est une colonne, une ligne ou une cellule d’<\/strong> un tableau que l’auteur souhaite mettre en valeur<\/strong>. Il est g\u00e9n\u00e9ralement appliqu\u00e9 aux tableaux de tarification ou lors de la comparaison des plans d’abonnement.<\/p>\n

Utilisez une section en vedette pour mettre en \u00e9vidence les informations importantes dans le tableau. Cela pourrait \u00eatre le meilleur plan de valeur ou un \u00e9l\u00e9ment populaire parmi une liste par exemple.<\/p>\n

Pour cr\u00e9er une section en vedette, modifiez la mise en forme des cellules.<\/strong> Par exemple, modifiez la couleur de remplissage de la cellule ou la taille de la police du texte pour le faire ressortir.<\/p>\n

Appliquer des couleurs<\/h4>\n

\"Comment<\/a><\/p>\n

Un tableau de donn\u00e9es ne doit pas avoir trop de couleurs.<\/strong> Utilisez-les uniquement pour les en-t\u00eates de tableau, les tendances n\u00e9gatives et positives et les sections en vedette.<\/p>\n

Ajouter trop de couleurs cr\u00e9e un bruit visuel. Cela rend difficile la distinction des \u00e9l\u00e9ments qui doivent \u00eatre mis en \u00e9vidence.<\/p>\n

Utilisez des nuances de gris plus fonc\u00e9es<\/strong> pour la couleur de la police et des nuances de gris plus claires<\/strong> pour la couleur de la bordure au lieu de la couleur noire habituelle. L’utilisation de nuances de noir plus douces le rend moins intense et r\u00e9duit la fatigue oculaire.<\/p>\n

Appliquez des couleurs variables lors de la diff\u00e9renciation des cat\u00e9gories ou lors de la mise en \u00e9vidence des valeurs les plus \u00e9lev\u00e9es et les plus basses. Pour mettre en valeur certaines sections du tableau, utilisez des<\/strong> couleurs de remplissage<\/strong> plus vives ou plus audacieuses pour les faire ressortir.<\/p>\n

Couleurs de lignes altern\u00e9es<\/h4>\n

\"Comment<\/a><\/p>\n

Tableau avec des cellules de fusion que vous pouvez cr\u00e9er avec wpDataTables<\/a><\/p>\n

L’alternance des couleurs des lignes am\u00e9liore la lisibilit\u00e9.<\/strong> Il d\u00e9finit des rep\u00e8res visuels<\/strong>, aidant les gens \u00e0 suivre une liste d’informations et \u00e0 connecter des donn\u00e9es.<\/p>\n

Ceci est particuli\u00e8rement utile lors de la cr\u00e9ation d’une grande base de donn\u00e9es. Cela fonctionne \u00e9galement bien pour les petites tables de donn\u00e9es.<\/p>\n

Cr\u00e9ez un effet \u00abrayures z\u00e9br\u00e9es \u00bb<\/strong> en alternant la couleur de remplissage blanche avec une couleur plus fonc\u00e9e telle que le gris clair. Si vous utilisez d’autres couleurs, utilisez une couleur de remplissage claire et alternez-la avec une teinte l\u00e9g\u00e8rement plus fonc\u00e9e.<\/p>\n

Utilisation d’une police \u00e0 chasse fixe<\/h4>\n

\"Comment<\/a><\/p>\n

Pour une conception de tableau plus structur\u00e9e, utilisez un style de police \u00e0 chasse fixe pour les donn\u00e9es num\u00e9riques<\/strong>.<\/p>\n

La police tabulaire ou \u00e0 espacement fixe a une largeur et un espacement fixes<\/strong> pour chaque caract\u00e8re. Cela am\u00e9liore la typographie et la lisibilit\u00e9.<\/p>\n

Courier, Courier New, Lucida Console et Monaco sont des exemples de polices \u00e0 espacement fixe.<\/p>\n

Pour am\u00e9liorer encore la sym\u00e9trie, assurez-vous de formater les chiffres de la m\u00eame longueur,<\/strong> comme les dates par exemple. Au lieu d’\u00e9crire 15\/3\/2019, formatez la date comme 15\/03\/2019.<\/p>\n

Visualiser les donn\u00e9es du tableau<\/h4>\n

\"Comment<\/a><\/p>\n

Transformez les donn\u00e9es des colonnes en graphiques \u00e0 barres horizontales.<\/strong> Cela permet de visualiser les donn\u00e9es et de g\u00e9n\u00e9rer une vue d’ensemble.<\/p>\n

Les graphiques \u00e0 barres horizontales permettent aux utilisateurs de comparer des ensembles de donn\u00e9es et de les interpr\u00e9ter facilement. Chaque barre se trouve dans une colonne \u00e0 c\u00f4t\u00e9 des donn\u00e9es qu’elle repr\u00e9sente, align\u00e9es verticalement et divis\u00e9es en lignes.<\/p>\n

L’insertion d’un graphique \u00e0 barres agrandit souvent trop la colonne. Par cons\u00e9quent, envisagez d’afficher des barres uniquement pour visualiser les valeurs importantes.<\/p>\n

Une autre m\u00e9thode pour visualiser les donn\u00e9es d’un tableau consiste \u00e0 utiliser des cartes thermiques.<\/strong><\/p>\n

Les cartes thermiques ajustent la nuance de couleur de l’arri\u00e8re-plan de la cellule ou la couleur de remplissage en fonction de la valeur num\u00e9rique de la cellule, cr\u00e9ant ainsi un d\u00e9grad\u00e9 d’une seule couleur. Plus la valeur num\u00e9rique est \u00e9lev\u00e9e, plus la couleur de remplissage devient fonc\u00e9e .<\/strong><\/p>\n

Fonctionnalit\u00e9 du tableau<\/h3>\n

Rendez-le r\u00e9actif<\/h4>\n

\"Comment<\/a><\/p>\n

Une table de donn\u00e9es efficace fonctionne bien sur diff\u00e9rents appareils. Il doit afficher les donn\u00e9es de mani\u00e8re lisible<\/strong> lorsqu’il est ouvert sur des smartphones, des tablettes et des ordinateurs portables.<\/strong><\/p>\n

L’affichage des tableaux sur des \u00e9crans plus petits n\u00e9cessite de nombreux changements dans la conception des tableaux. Une conception de table construite sur de grands ordinateurs de bureau peut ne pas fonctionner sur des appareils plus petits.<\/p>\n

Testez le tableau sur les appareils mobiles<\/strong>. Assurez-vous que les utilisateurs peuvent parcourir les informations sans avoir \u00e0 faire d\u00e9filer ind\u00e9finiment.<\/p>\n

M\u00e9fiez-vous des colonnes r\u00e9duites et des textes masqu\u00e9s, car ils entra\u00eenent une mauvaise exp\u00e9rience utilisateur.<\/p>\n

N’oubliez pas que sur les \u00e9crans plus petits, les colonnes \u00e9troites sont pr\u00e9f\u00e9rables.<\/strong> Il existe diff\u00e9rentes fa\u00e7ons de rendre les colonnes plus minces.<\/p>\n

Cela inclut l’utilisation d’ic\u00f4nes, d’abr\u00e9viations, d’un format num\u00e9rique plus court et de donn\u00e9es num\u00e9riques arrondies.<\/strong> Donc 2,5m plut\u00f4t que 2 500 000 et 0,3 plut\u00f4t que 0,3241.<\/p>\n

Activer la r\u00e9organisation des colonnes<\/h4>\n

\"Comment<\/a><\/p>\n

Les grands tableaux de donn\u00e9es sont parfois difficiles \u00e0 lire en raison de leur taille et de la quantit\u00e9 d’informations qu’ils contiennent. Permettre aux utilisateurs de r\u00e9organiser les colonnes leur permet de se concentrer sur les colonnes<\/strong> qu’ils doivent lire.<\/p>\n

Cela signifie \u00e9galement qu’ils peuvent le faire sans avoir \u00e0 d\u00e9filer d’avant en arri\u00e8re<\/strong>. Cela aide les utilisateurs \u00e0 minimiser l’encombrement, \u00e0 dig\u00e9rer de petits \u00e9l\u00e9ments d’information et \u00e0 organiser les colonnes en fonction de leurs besoins.<\/p>\n

Envisagez d’avoir une hauteur de ligne fixe<\/h4>\n

\"Comment<\/a><\/p>\n

Table que vous pouvez cr\u00e9er avec wpDataTables<\/a><\/p>\n

Si la table de donn\u00e9es contient de nombreuses colonnes, ancrez les premi\u00e8res<\/strong> colonnes. Cela conservera le contexte<\/strong> pendant que les utilisateurs feront d\u00e9filer le reste du tableau.<\/p>\n

Avoir des colonnes personnalisables est fortement recommand\u00e9. Mais les lignes<\/strong> du tableau doivent avoir une hauteur fixe<\/strong> pour maintenir la sym\u00e9trie et \u00e9viter de d\u00e9router les lecteurs.<\/p>\n

Quelles que soient les donn\u00e9es, la hauteur de ligne fixe am\u00e9liore la conception et les visuels de l’interface utilisateur du tableau.<\/p>\n

Utilisation de la pagination pour les longues tables de donn\u00e9es<\/h4>\n

\"Comment<\/a><\/p>\n

Table pagin\u00e9e que vous pouvez cr\u00e9er avec wpDataTables<\/a><\/p>\n

Il existe une r\u00e8gle non \u00e9crite selon laquelle les tableaux de donn\u00e9es ne doivent pas \u00eatre plus longs qu’un \u00e9cran de bureau<\/strong>. Cependant, cela n’est pas possible si une table de donn\u00e9es est longue.<\/p>\n

Emp\u00eachez les longs tableaux de donn\u00e9es d’occuper une grande partie d’une page Web et maximisez l’espace blanc. Pour ce faire, activez la fonction de pagination<\/strong>.<\/p>\n

Cela sert \u00e9galement \u00e0 guider les lecteurs<\/strong> dans le tableau et \u00e0 les aider \u00e0 naviguer<\/strong>.<\/p>\n

Lorsque vous utilisez la pagination, incluez le num\u00e9ro de page<\/strong> pour indiquer le nombre de pages et sur quelle page se trouvent les lecteurs. De plus, pour donner aux utilisateurs plus de contr\u00f4le, permettez-leur de personnaliser<\/strong> le nombre de lignes \u00e0 afficher par page.<\/p>\n

Inclure la fonction de tri de table<\/h4>\n

\"Comment<\/a><\/p>\n

Permettre aux utilisateurs d’avoir plus de contr\u00f4le sur la table de donn\u00e9es am\u00e9liore la conception de l’interface utilisateur de la table. Si le tableau contient beaucoup d’informations, une fa\u00e7on d’aider les lecteurs \u00e0 localiser les donn\u00e9es dont ils ont besoin est d’ajouter une fonction de tri.<\/p>\n

Le tri permet aux utilisateurs d’ organiser les donn\u00e9es<\/strong> selon des ordres logiques sp\u00e9cifiques.<\/strong><\/p>\n

Cela peut \u00eatre alphab\u00e9tique, date et heure modifi\u00e9es, ascendant, descendant, etc. Plus il y a d’options, mieux c’est.<\/p>\n

Une autre fa\u00e7on de trier les donn\u00e9es consiste \u00e0 inclure un champ de recherche<\/strong>. Cela permet aux lecteurs de rechercher des donn\u00e9es sp\u00e9cifiques telles que le nom d’une entreprise, l’emplacement, les produits, etc.<\/p>\n

Filtrage des donn\u00e9es<\/h4>\n

\"Comment<\/a><\/p>\n

Tableau avec des filtres que vous pouvez cr\u00e9er avec wpDataTables<\/a><\/p>\n

Le filtrage des donn\u00e9es est un autre moyen d’augmenter la fonctionnalit\u00e9 d’une table de donn\u00e9es. Les utilisateurs peuvent dig\u00e9rer de grandes quantit\u00e9s de donn\u00e9es, comprendre les tendances et cr\u00e9er des comparaisons.<\/p>\n

Ils peuvent \u00e9galement localiser certaines informations et analyser des donn\u00e9es complexes. C’est particuli\u00e8rement le cas pour les tableaux de donn\u00e9es num\u00e9riques.<\/p>\n

Assurez-vous que les utilisateurs peuvent personnaliser les param\u00e8tres ou les ensembles de filtres<\/strong> pour certaines colonnes. Incluez \u00e9galement une option de filtrage avanc\u00e9 pour enregistrer le jeu de filtres<\/strong> qu’ils ont cr\u00e9\u00e9 pour une utilisation future.<\/p>\n

Maintenir le contexte, utiliser des en-t\u00eates fixes et des colonnes fig\u00e9es<\/h4>\n

\"Comment<\/a><\/p>\n

La lecture d’un grand tableau de donn\u00e9es n\u00e9cessite de nombreux d\u00e9filements verticaux et horizontaux. Pour conserver le contexte , ancrez les en-t\u00eates<\/strong> de colonne ainsi que la premi\u00e8re colonne ou les premi\u00e8res colonnes.<\/strong><\/p>\n

Microsoft Excel et Google Sheets qualifient les colonnes ancr\u00e9es de "fig\u00e9es"<\/strong>.<\/p>\n

Pour faciliter la navigation dans le tableau, ajoutez une s\u00e9lection de ligne compl\u00e8te.<\/strong> Cela permet aux utilisateurs de marquer des lignes importantes<\/strong> lorsqu’ils d\u00e9filent horizontalement.<\/p>\n

Cela peut \u00eatre d\u00e9licat si le tableau comporte des lignes extensibles et peut entra\u00eener un effet diff\u00e9rent.<\/p>\n

R\u00e9flexions finales sur la fa\u00e7on de concevoir une table de la bonne fa\u00e7on<\/strong><\/h2>\n

Savoir ce qu’il faut prendre en compte lors de la cr\u00e9ation d’une conception d’interface utilisateur de tableau conduit \u00e0 des tableaux efficaces. Ceux-ci permettent aux utilisateurs de comparer les donn\u00e9es et de trier les informations,<\/strong> et augmentent \u00e9galement la lisibilit\u00e9<\/strong>.<\/p>\n

Apprendre \u00e0 concevoir une table permet aux concepteurs de r\u00e9duire le bruit visuel et de faire bon usage de l’espace blanc<\/strong>. Les conseils de conception fournis ici peuvent optimiser la conception de la table et les donn\u00e9es utilisateur.<\/p>\n

En suivant ces conseils, vous am\u00e9liorerez le style g\u00e9n\u00e9ral et la fonctionnalit\u00e9 du tableau. De plus, ils contribuent \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur et l’image de marque.<\/p>\n

Si vous avez aim\u00e9 lire cet article sur la conception d’un tableau, vous devriez consulter celui-ci sur la cr\u00e9ation d’un tableau de donn\u00e9es.<\/a><\/p>\n

Nous avons \u00e9galement \u00e9crit sur quelques sujets connexes tels que des exemples de tableaux de donn\u00e9es, des exemples de tableaux<\/a> de tarification<\/a> ,\u00a0 des alternatives DataTables<\/a>, une biblioth\u00e8que de tableaux JavaScript<\/a>, des plugins de tableaux WordPress<\/a>, comment cr\u00e9er un tableau dans WordPress sans plugin<\/a>, comment ins\u00e9rer un tableau dans WordPress<\/a> ,\u00a0 la tarification WordPress<\/a> plugins de table et<\/a> comment cr\u00e9er des tables statistiques dans WordPress.<\/a><\/p>\n

Source d’enregistrement: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Les tableaux de donn\u00e9es aident \u00e0 organiser une masse d’informations. Ce guide montre comment concevoir une table de donn\u00e9es et am\u00e9liorer la fonctionnalit\u00e9 de la table.<\/p>\n","protected":false},"author":1,"featured_media":180135,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,832,841,862],"tags":[1167],"class_list":["post-227941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-guide-pour-les-debutants","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/227941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=227941"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/227941\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/180135"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=227941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=227941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=227941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}