Conception de tables réactives complexes dans WordPress

(Cet article est sponsorisé.) Les appareils mobiles peuvent être problématiques pour l’affichage de tableaux et de graphiques complexes qui, autrement, s’étireraient sur toute la largeur d’un ordinateur portable. écran de bureau. Cela laisse peut-être certains d'entre vous se demander s'il vaut même la peine de montrer des tableaux aux visiteurs de votre site Web pour les tablettes et les mobiles.

Mais cela n'a aucun sens. Dans de nombreux cas, un tableau n’est pas un choix stylistique pour l’affichage de contenu sur un site Web. Les tableaux sont des éléments essentiels pour la collecte, l’organisation et le partage de grandes quantités de données complexes et précieuses. Sans eux, l’expérience de vos visiteurs mobiles sera compromise.

Vous ne pouvez pas vous permettre d’omettre les données. Alors, que faites-vous à ce sujet?

Cela nécessite une solution plus stratégique. Cela implique de comprendre à quoi servent les données, puis de concevoir le tableau Web complexe d’une manière qui ait un sens pour la consommation mobile.

Un plugin de tableau WordPress appelé wpDataTables a permis d’éclairer la tâche. de la conception de tables compatibles avec les postes de travail et les mobiles, j’ai donc inclus des exemples de ces tables complexes tout au long de ce post. Continuez votre lecture pour explorer les possibilités.

Cas d'utilisation les plus courants des tableaux sur le Web

Il est très utile de présenter des données sous forme de tableau sur un site Web.

pourrait probablement trouver un moyen de traiter chaque point de données un par un ou de fournir un résumé de haut niveau des données dans leur ensemble. Cependant, lorsque les données sont traitées de cette manière, vos visiteurs ont trop de travail à faire, ce qui ne fera qu'entraver le processus de prise de décision.

Par contre, les tableaux sont parfaits pour organiser de grandes quantités de données. tout en offrant aux visiteurs un moyen plus simple de parcourir les données par eux-mêmes

En tant que tels, vos visiteurs auraient tout intérêt à disposer de jeux de données complexes présentés sous forme de tableaux, dans une grande variété de cas d'utilisation. 19659014] Listes des fonctionnalités

Il existe plusieurs façons d'utiliser les tableaux pour présenter les fonctionnalités des produits.

Pour les sites de commerce électronique, l'inventaire des produits est décomposé par ses fonctionnalités les plus pertinentes, permettant aux visiteurs de filtrer leurs résultats en fonction de leurs résultats.

Ce serait formidable pour tout grand fournisseur proposant des dizaines ou des centaines de produits similaires, qu'il souhaite que les clients puissent utiliser. filtrer et trier.

Vous pouvez également utiliser un tableau pour comparer les caractéristiques de votre produit directement avec celles de la concurrence. Ce serait mieux pour un marché tiers où les vendeurs vendent leurs produits.

Amazon comprend les types de tableaux suivants:

En affichant les données dans ce format, les clients peuvent rapidement faire une comparaison côte à côte de produits similaires pour trouver le

Tableaux des prix

Si vous concevez un site Web dans lequel des services ou des abonnements sont vendus à la place de produits, vous pouvez toujours utiliser des tableaux pour afficher les informations.

un bon exemple de cela sur le site Web BuzzSumo :

Même s'il y a moins de données à compiler, vous pouvez voir comment la structure de la table et l'empilement des services by-side aide réellement les visiteurs à prendre une décision d’achat plus éclairée et plus facile

Catalogues

Un catalogue est utile pour fournir aux visiteurs une liste classée par ordre alphabétique ou numérotée. Vous pouvez en utiliser un pour organiser un inventaire physique ou numérique, comme le montre cet exemple:

Cela serait utile pour les librairies, les bibliothèques et les sites Web disposant de leur propre référentiel de documents ou de contenu de référence.

Vous Les clients peuvent également utiliser un catalogue pour aider les clients à améliorer la précision de leurs commandes:

Ce type de tableau fournit aux clients les spécifications de base des produits disponibles pour s'assurer qu'ils commandent les bons types de pièces ou d'équipements. .

Best Of Lists

Il existe une multitude de ressources en ligne qui présentent un aperçu des listes des "Top" gagnants ou "Best Of". Les tableaux sont un moyen utile de résumer les conclusions de l’article ou du rapport avant que les lecteurs ne défilent pour en savoir plus.

C’est un site Web comme PC Mag (et, en réalité, n’importe quel site d’examen de technologie ou de produits. ) font vraiment bien:

Cela aide les lecteurs à se faire une idée de ce qui les attend. Cela permet également à ceux qui ont peu de temps de prendre une décision plus rapidement.

Tables de répertoires

Les listes de données des sites Web de répertoires sont de plus en plus nombreuses et régulièrement mises à jour. Ce sont vos sites de vente de biens immobiliers, sites de voyage, annuaires professionnels et autres sites contenant de gros volumes de données complexes qui ne devraient pas être consommés sans tableau filtrable.

Exemple: cette liste d’appartements disponibles:

Il est ainsi beaucoup plus facile pour les visiteurs de voir toutes les options en un coup d'œil, plutôt que de devoir y aller l'un après l'autre. une à une entrée individuelle correspondant à une requête de recherche.

Données générales

Il existe d’autres listes de données qui sont trop complexes pour être gérées en tant que texte brut. Les données sportives, par exemple, doivent toujours être présentées sous le format suivant:

Vous pouvez voir comment cela permet de conserver toutes les données au même endroit et dans une liste interrogeable. Que les visiteurs recherchent les statistiques de leur équipe d'attache ou comparent les performances de différentes équipes de leur ligue sportive imaginaire, tout est en ordre.

Comment concevoir des tableaux complexes complexes

Quel que soit le type de données que vous " Lors de la présentation sur un site Web, l'objectif est de le faire clairement afin que les visiteurs puissent agir plus rapidement.

Il est maintenant temps de trouver le meilleur moyen de formater ces données pour les visiteurs mobiles.

Supprimer, Supprimer, supprimer

Si votre client a extrait ses données d'un rapport automatisé, il n'a peut-être pas fallu du temps pour nettoyer les résultats. Donc, avant de commencer tout travail de conception sur la table, je suggérerais de revoir les données qu'ils vous ont fournies.

Tout d'abord, posez-vous la question suivante: existe-t-il suffisamment de données pour justifier la création d'un tableau?

Si la liste est assez petite, il serait peut-être plus logique de laisser tomber le tableau.

Ensuite, passez en revue chaque colonne: chacune de ces colonnes est-elle utile?

Vous constaterez peut-être que certaines des colonnes incluses ne sont pas nécessaires et peuvent être supprimées.

Vous constaterez peut-être également que certaines colonnes, même si elles constituent une partie essentielle de la liste des spécifications de chaque élément, n’aideront pas les visiteurs à prendre une décision dans le tableau. Ce serait le cas si la colonne contenait un point de données identique pour chaque élément.

Enfin, adressez-vous à votre rédacteur ou à votre gestionnaire de données: existe-t-il un moyen de raccourcir les colonnes?

Les étiquettes et les données de la table peuvent avoir été écrit en entier, mais votre auteur aura peut-être un moyen de simplifier les réponses sans compromettre la compréhension.

Si possible, demandez-leur de faire leur magie pour rétrécir le texte afin que les colonnes ne prennent pas autant de place et plus être révélé sur mobile. Ne faites pas cela uniquement pour les utilisateurs mobiles. Même sur les écrans de bureau et de tablette où davantage d’écran est disponible, le raccourcissement des étiquettes peut aider à économiser de l’espace.

Cela peut être aussi simple que de changer le mot «Rang» en symbole numérique (#) et d’abréger les «Points». en tant que "Pts".

Même s'il ne semble pas qu'un mot puisse faire une grande différence, il ajoute la complexité et la longueur de vos tables.

Commencez par deux colonnes

Par défaut, les tables mobiles doivent toujours commencer par deux colonnes. C’est à peu près toute la largeur de l’écran qui le permet sans compromettre la lisibilité des données qu’il contient, il est donc préférable de commencer par les bases.

Lorsque vous opposez un tableau plein écran du bureau à son équivalent du mobile, vous pouvez voir comment il est facile d'identifier les deux colonnes à inclure. Par exemple, un tableau de statistiques mobile comprend une colonne pour le type d’élément et une pour les bénéfices réalisés avec chacun:

Cela ne signifie pas que toutes les autres données sont perdues sur le mobile. Vous devez simplement indiquer aux visiteurs comment ils peuvent développer la vue du tableau.

Dans cet exemple, lorsque les visiteurs sélectionnent l'icône en forme de globe oculaire au-dessus du tableau, ils ont la possibilité d'ajouter plus de colonnes au tableau:

En autorisant cette option sur mobile, vos visiteurs peuvent contrôler la façon dont ils consomment des données tout en sélectionnant uniquement les points de données qui sont le plus important pour eux.

Le résultat sera alors le suivant:

Bien que les utilisateurs doivent faire défiler l'écran à droite pour voir le reste du tableau, le contrôle qu'ils exercent sur les vues des colonnes permet de conserver cette une tâche raisonnable. Avec un seul défilement à droite, ils verront le reste du tableau:

C'est une bonne option pour les listes de produits pour lesquels la comparaison côte à côte est utile pour accélérer la décision. processus de création.

Utiliser un accordéon pour les entrées indépendantes

Vous pouvez également inclure une autre option, qui donnera aux visiteurs un meilleur contrôle sur la manière dont ils affichent le contenu du tableau.

Pour cet exemple, examinons une liste de monnaies cryptographiques disponibles:

Comme vous pouvez le constater, la valeur par défaut ne montre toujours que deux colonnes. Dans ce cas, toutefois, un clic sur le signe plus (+) révélera une nouvelle façon de visualiser le tableau:

Lorsqu'elles sont ouvertes, toutes les données qui forceraient les visiteurs à faire défiler à droite sont désormais visibles dans un seul écran. [19659005] Bien que vous puissiez certainement inclure un accordéon extensible dans n’importe quel tableau sensible que vous créez, il conviendrait mieux à ceux dans lesquels une comparaison directe côte à côte entre produits ou services n’est pas nécessaire.

[Vertical9014]

Tout comme vous voulez éviter que vos visiteurs aient à défiler au-delà des limites horizontales des pages du site Web mobile, vous devez limiter le défilement vertical qu'ils doivent également effectuer.

La consommation de données, en général, n'est pas suffisante. C’est toujours une tâche facile, de sorte que plus vous réduisez au minimum le travail qu’ils doivent accomplir pour s’y rendre, mieux ce sera.

Une des façons de limiter le défilement vertical de vos visiteurs est de casser une table avec des dizaines, voire des centaines de rangées dans les pages.

Rappelez-vous qu'il est facile de permettre aux visiteurs de faire défiler les pages. Un ensemble bien conçu de contrôles de pagination en haut ou en bas du tableau serait utile:

Cela serait particulièrement utile pour une poignée de pages. Rien de plus que cela et le processus de pagination peut devenir fastidieux.

Vous pouvez également inclure une fonction de recherche de table directement au-dessus:

Ceci permet un raccourci rapide lorsque vos utilisateurs ont une bonne idée de ce qu'ils recherchent et veulent sauter directement.

Incluez à la fois le filtrage et le tri pour des ensembles de données plus volumineux

Supposons donc que vous disposiez d’une liste très étendue de données. Vous ne voulez pas forcer les utilisateurs à faire défiler des dizaines de pages de tableaux, mais vous ne pouvez pas non plus vous permettre de supprimer les ensembles de données. Tout est pertinent.

Dans ce cas, vous allez rendre une partie du contrôle à vos visiteurs. Ainsi, leurs choix détermineront le pourcentage de la table qu’ils verront finalement.

Prenons par exemple cette liste d’OPC:

L'image ci-dessus est la vue par défaut que les visiteurs verraient s'ils faisaient immédiatement défiler la table. Cependant, ils pourraient trouver cela intimidant et décider que le filtrage des mauvais résultats améliorera la vue:

Ce qui est bien avec l'inclusion de filtres sur les tables mobiles, c'est qu'ils fonctionnent de la même manière que vos formulaires de contact mobile. Les visiteurs doivent donc pouvoir facilement se renseigner et se déplacer entre les champs, ce qui leur permettra d'accéder plus rapidement aux résultats qu'ils souhaitent visualiser.

Vous pouvez également améliorer l'affichage des résultats en utilisant la fonction de tri. Lorsqu'ils cliquent sur l'étiquette supérieure d'une colonne, celle-ci sera automatiquement triée par ordre décroissant.

Ces deux fonctions sont indispensables pour toute table que vous construisez, mais elles sont particulièrement importantes pour les visiteurs mobiles Vous n'avez pas le temps ou l'attention que vous voulez consacrer à vos tables.

Conclusion

Vous êtes ici parce que vous voulez une meilleure façon de présenter des tables complexes à vos visiteurs mobiles.

La clé pour bien faire les choses C’est en vous familiarisant d’abord avec les types de tables que vous pouvez créer. Même si les appareils mobiles limitent ce que l'on peut voir à première vue, cela ne rend pas impossible le partage de ce type de données avec eux.

Ensuite, vous devez renforcer le contrôle de l'utilisateur dans vos tableaux, afin que les visiteurs puissent choisir. ce qu'ils voient et comment ils le voient.

Enfin, vous feriez bien de trouver un outil spécialement conçu pour cette tâche complexe. Pour ceux qui construisent des sites Web avec WordPress, wpDataTables est un plugin de table WordPress capable de créer des tableaux et des graphiques réactifs. Peu importe la taille de votre ensemble de données, ou son cas d'utilisation, il vous permettra d'organiser et d'afficher rapidement et efficacement des tableaux sensibles sur votre site WordPress.

(ms, yk, il )