Meilleure interface utilisateur pour un tableau HTML.
J'ai souvent besoin de montrer des données tabulaires et je veux toute la magie. . . tri des colonnes, pagination, etc. Je préfère utiliser des colonnes où vous cliquez sur le nom de la colonne et le tri est fait pour l'utilisateur (généralement en utilisant javascript bien que ce soit plus difficile si vous avez aussi la pagination parce que vous triez uniquement les données sur l'écran ou le placez-vous par cette colonne puis remettez-les à la première page?) mais comment puis-je indiquer qu'il a été trié? Quel est un bon indice d'interface utilisateur pour cela? À quoi devraient ressembler les noms des colonnes? De plus, j'aime colorer tous les autres résultats avec du gris, mais je vois quelqu'un avec un écran dont la luminosité est trop élevée et ce n'est pas assez gris pour qu'ils puissent distinguer les lignes, mais si j'augmente la quantité de gris, il n'y en a pas assez de contraste pour lire confortablement le texte noir.
Quels sont quelques exemples de tableaux bien faits?
Traditionnellement, "Trier par" est indiqué par des flèches haut/bas qui représentent le tri croissant ou décroissant. Les noms de colonne doivent avoir un niveau de contraste plus élevé que les valeurs, comme un texte plus audacieux ou un arrière-plan ombré.
Personnellement, lors de la coloration des lignes alternées, je deviens généralement plus clair que sombre, car l'effet devient plus prononcé plus vos utilisateurs interagissent avec la table.
Voici quelques excellents exemples d'options de disposition de table: http://patterntap.com/tap/collection/tables
- Triez les données dans l'ensemble du tableau, pas seulement les données à l'écran. Oui, ils devront commencer à partir de la première page du nouvel ordre de tri, mais ce n'est pas grave - vous attendriez-vous à pouvoir comprendre les choses si vous triiez par ID, puis à la page 10, vous avez décidé de trier par nom de famille?
- Indiquez qu'il a été trié en mettant en surbrillance l'arrière-plan de la cellule d'en-tête de tableau dans la colonne en cours de tri. Vous pouvez aller encore plus loin et mettre en évidence toute la colonne. Utilisez des flèches pour le rendre encore plus évident (et plus accessible) - des flèches pointant vers la droite pour non triées, et une flèche pointant vers le bas pour triées, par exemple.
- Les noms de colonnes doivent simplement pouvoir être distingués comme des noms de colonnes. J'ai tendance à les rendre légèrement plus gros et plus audacieux que le contenu des cellules du tableau.
- Colorez tous les autres résultats avec du gris uniquement si vous devez le faire afin d'augmenter la numérisation des lignes individuelles. Si c'est pour cela que vous concevez, alors le compromis de diminuer légèrement la lisibilité globale est bien parce que l'utilisateur numérise, pas lit. Et en fin de compte, il est impossible de concevoir pour chaque luminosité d'écran, alors assurez-vous de choisir un juste milieu et de vous y tenir.
Je n'ai pas d'exemples immédiats pour vous en ce moment, mais voici un exemple de tableau que j'ai conçu pour mon application Web qui suit mes conseils/préférences ci-dessus:
D'un point de vue purement visuel, consultez http://www.datatables.net/ (plugin pour jQuery). Le tableau d'exemple de la page d'accueil contient déjà les fonctionnalités que vous mentionnez.
Côté technologie, cela dépend de ce que votre technologie principale utilise. Si vous utilisez un serveur .Net, les contrôles inclus dans ASP 3.5 et 4 sont très faciles à faire fonctionner comme vous le décrivez sans la jQuery et la dépendance du plug-in.
Découvrez les grilles ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-
Meilleure interaction utilisateur de n'importe quel framework JS que j'ai vu. Nous comptons beaucoup sur lui pour notre application chez Marketo.
Si vous avez besoin d'une grille de données avec "toute la magie", essayez dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
C'est l'une des grilles JavaScript les plus puissantes que j'ai vues.
Eh bien, si vous voulez trier dans les deux sens, il y a la flèche classique haut/bas comme dans Windows Explorer/gnome nautilus, elles sont généralement d'une couleur plus foncée que la cellule.
