web-dev-qa-db-fra.com

Représenter le flux chronologique dans un tableau

J'ai une application qui suit l'historique du logement des participants au programme. Le travailleur utilisant ce programme aura déjà ses informations de logement actuelles entrées ailleurs.

Normalement, j'utiliserais les informations actuelles pour indiquer l'ordre dans lequel se trouve la table. Si le courant est en haut, alors il passera du plus récent au moins. Si le courant est en bas, il listerait du moins récent au plus.

Housing history table

En plus de l'énoncer avec une description textuelle, existe-t-il un moyen de concevoir le tableau de sorte qu'il implique que les données seront entrées dans l'ordre chronologique inverse (c'est-à-dire le plus récent en haut)?

7
invot

Envisagez d'ajouter des instructions textuelles et un indicateur visuel sur le côté du tableau indiquant l'ordre chronologique des entrées. Je voudrais également permettre aux utilisateurs de réorganiser les entrées dans le tableau. Quelque chose comme ça:

enter image description here

Je pense que cette approche finit par être la plus efficace si vous devez vous en tenir à vos contraintes déclarées (pas de saisie de date, faible impact sur l'écran immobilier). Examinez la liste des techniques de réorganisation de l'interface utilisateur - l'exemple que j'ai ci-dessus est un peu grossier et il existe probablement une technique similaire qui s'adaptera aux technologies que vous utilisez.

7
Joshua Barron

Il suffit de l'étiqueter

Parfois, la meilleure solution est la plus évidente. Vous pouvez trouver toutes sortes d'astuces UI intelligentes pour renforcer l'ordre de tri, mais vous feriez mieux de simplement le préciser.

Sans y penser en détail, je vois deux façons de le rendre évident.

Contrôle de tri

Si possible, autorisez l'utilisateur à trier la liste en fonction d'une poignée de dimensions. C'est un ordinateur après tout, pourquoi les utilisateurs ne devraient-ils pas avoir un petit contrôle? Et un contrôle visible expliquera exactement ce qui se passe.

Étiquettes de ligne

Si vous ne souhaitez pas inclure un contrôle de tri (même si vous le faites), étiquetez chaque ligne ou ensemble de lignes avec un indicateur de date. Il n'a pas besoin d'être visible, il doit simplement être disponible lorsque les utilisateurs veulent comprendre la séquence.

Pour le dire visuellement ...

Wireframed example of recommendations

6
plainclothes

Vous pouvez utiliser l'opacité et le flou comme métaphore. Voir un exemple très rapide:

enter image description here

Étant donné que les souvenirs et le passé sont toujours flous (et que l'avenir est inconnu), il est relativement courant d'utiliser le flou graphique comme métaphore que vous souhaitez transmettre.

Cette approche est utilisée dans certains contrôles avec le même effet: vous pouvez voir le MAINTENANT, l'avenir devient incertain, le passé est flou:

enter image description here

enter image description here

ou, ce que vous ne choisissez pas, perdez le focus:

enter image description here

Comme vous pouvez le constater, il s'agit d'un moyen raisonnable de résoudre votre demande de manière graphique.

Maintenant, je suis sûr à 100% que ce que Nightning a suggéré dans les commentaires est la voie à suivre, et en tant que tel, vous devriez au moins le suggérer.

Faites également attention à vos entrées et éléments, il y a une charge cognitive élevée sur eux. À titre d'exemple, en ajoutant cette bordure de couleur à la bascule "expulsé", il semble que la personne ait été effectivement expulsée (alors qu'elle ne l'a pas fait).

2
Devin

OP a déclaré que "les champs de données n'étaient pas à moi de décider", ce qui m'indique une sorte de processus ayant échoué avec leurs développeurs front-end et back-end ... mais pour les autres personnes regardant ce problème, je pense que la meilleure solution est de donner des entrées de calendrier pour permettre à l'utilisateur d'entrer des dates.

UI with move in / move out date pickers

Ou si vous ne souhaitez pas autoriser les écarts dans les dates, vous pouvez simplement avoir une colonne pour la date d'entrée (ou de sortie) et déduire l'autre date.

1
Nathron

Puisque nous ne faisons qu'emprunter les idées des uns et des autres (grande discussion en passant, et je pense que cela m'a vraiment aidé à tirer mes propres conclusions), voici ce que je pense:

  • Étiquettes de ligne: les appliquer est beaucoup plus clair que de simplement fournir plus de texte, qui est au point de besoin plutôt que juste en haut ou en bas en bas
  • Déplacer les commandes vers le haut/bas: puisque l'utilisateur ne s'en souviendra pas nécessairement dans l'ordre chronologique, ou peut entrer quelque chose hors séquence accidentellement, cela lui permettra de déplacer les entrées afin qu'elles correspondent à la ligne Étiquettes
  • Repère visuel: ce n'est peut-être pas le plus pratique, mais j'aime l'idée de rendre l'entrée actuelle/actuelle plus visible, soit par une couleur plus brillante ou une taille plus grande, soit par une forme de surbrillance. Peut ne pas avoir besoin d'appliquer un traitement visuel aux autres entrées.

J'aimerais voir à quoi tout cela ressemble une fois assemblé, car cela pourrait finir par être un `` design Frankenstein '' qui ne fonctionne pas du tout ...

1
Michael Lai

Il y a quelques réflexions que vous devriez considérer pour cette situation.

  1. Déplacez cet ajout de logement vers le haut du tableau et assurez-vous que en-tête du tableau collant. De cette façon, sa position toujours visible et persistante quel que soit le nombre de lignes. Chaque fois que vous cliquez sur "Ajouter un logement" Mettez en surbrillance la ligne avec une crème légère

  2. En incluant simplement une colonne "Date de création", cela résoudra le problème croissant et décroissant, permettant à l'utilisateur de connaître le tri par. Je ne pense pas qu'il y ait un besoin de file d'attente visuelle, car le modal mental des utilisateurs est déjà formé ou conscient que le dernier est toujours au top.

  3. Enfin: testez le prototype avec des utilisateurs réels/représentatifs pour vérifier l'utilisabilité.

1
Chan