Modèle d'interface utilisateur pour l'édition de tables temporelles

Question

J'écris une interface web pour éditer plusieurs valeurs qui changent au fil du temps (pour chaque employé, les attributs changeants sont rôle/division/lieu de travail/type de contrat/etc) et montrent l'historique de chaque changement, et la validation côté serveur.

L'utilisateur doit pouvoir ajouter de nouvelles valeurs, modifier les précédentes, modifier les dates entre les périodes, etc. Je suis compétent avec Ajax/YUI et d'autres choses, mais manquant sur la conception de l'interface utilisateur.

Je n'arrive pas à me souvenir d'une application similaire en ce moment, et je suis insatisfait des prototypes de papier.

Est-il une table - plusieurs tables - une ligne de temps - combien magique y va, et où ..

Connaissez-vous tout motif décrit ou mis en œuvre pour regarder?

Édition: c'est ce que j'ai fait.

la vue

[edit] 
from | to | role  | department | contract | level | .... 
------+------+-------------+------------+------------+-------+---- 
2005 | ∞ | guru  | Buzz  | consultant | 4 | 
2002 | 2004 | ninja  | Bar  | employee | 2 | 
2000 | 2002 | code monkey | Foo  | temp  | 1 | 

dates sont représentés comme des années que par souci de brièveté.

L'opération la plus commune serait de cliquer sur [modifier] et ajouter un nouvel ensemble de valeurs:

[edit] 
from | to | role  | department | contract | level | .... 
------+------+-------------+------------+------------+-------+---- 
____ |  | _______  | _______ | _______ | _____ | 
[2005]| ∞ | guru  | Buzz  | consultant | 4 | 
2002 | 2004 | ninja  | Bar  | employee | 2 | 
2000 | 2002 | code monkey | Foo  | temp  | 1 | 

En cliquant sur [2005], la ligne des valeurs actuelles devient modifiable avec certains menus et calendrier widgets.

[edit] 
from | to | role  | department | contract | level | .... 
------+------+-------------+------------+------------+-------+---- 
____ |  | _______  | _______ | _______ | _____ | 
_2005_| ____ | _guru__  | _Buzz__ |_consultant_| _4_ | 
2002 | 2004 | ninja  | Bar  | employee | 2 | 
2000 | 2002 | code monkey | Foo  | temp  | 1 | 

Le serveur reçoit des valeurs de deux lignes. Pour modifier les périodes précédentes, supprimez la période en cours (compromis acceptable).

Ici déjà j'ai plusieurs soucis.

• la « de la » valeur d'une ligne et « à » valeur de la ligne sont liés et précédente changera à l'unisson si (et seulement si) ils sont les mêmes. L'utilisateur devrait voir en un coup d'œil s'il y a des trous entre les rangées. (Je n'affiche pas "à" si c'est la même chose que "suivant", mais affiche une flèche comme ceci it - c'est moche)

• il n'est pas clair comment terminer la période en cours (=> cliquez sur sur 2005, écrire une valeur « à »)

• on ne sait pas comment supprimer la période en cours (=> cliquez sur 2005, supprimez la valeur « de »)

• le symbole « infini » est laide et pas claire

• validation pour le rôle, département, etc .. dépend de la con mais, du point de vue des utilisateurs, ils sont réellement orthogonaux. D'autres choses sont encore moins liées (par exemple, les heures hebdomadaires), mais doivent toujours être validées ensemble

• Les modifications d'une table doivent être non modales.

Answer 1

En supposant que l'on édite un seul détail de l'employé à un moment, on peut afficher les dernières données modifiables en cours en haut d'une page. Cela peut être suivi de l'historique des changements dans la liste, où seuls les changements de la version précédente peuvent être mis en évidence. Lorsque quelqu'un clique sur l'un de ces éléments d'historique, cet élément peut être étendu et rendu modifiable, et l'élément éditable actuel peut être réduit. Par exemple, vous pouvez envelopper tous les éléments dans <li> éléments dans un <ol> et développer/réduire <li> s en fonction de celui qui est en cours de modification.

Désolé pour la réponse générique :) Si vous pouvez fournir plus de détails (peut-être une analyse d'un prototype de papier que vous avez fait), nous pouvons creuser plus profondément.