UI pattern for editing temporal tables

Question

I'm writing a web interface to edit several values that change over time (for each employee, the changing attributes are role/division/workplace/type of contract/etc) and show the history of each change, and server-side validation.

The user must be able to add new values, amend previous ones, change dates between periods, and so on. I am proficient with Ajax/YUI and stuff but lacking on UI design.

I can't seem to remember a similar application right now, and I'm unsatisfied by paper prototypes.

Is it one table - more tables - a timeline -- how much magic goes there, and where..

Do you know of any described or implemented pattern to look at?

thanks

Edit: this is what I have done.

plain view

[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 are represented as years only for brevity.

The most common operation would be to click on [edit] and add a new set of values:

[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   |

By clicking on [2005], the row of current values becomes editable with select menus and calendar 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   |

The server receives two row's worth of values. To edit previous periods, delete the current one (acceptable tradeoff).

Here already I have several concerns.

• the "from" value of a row and "to" value of the preceeding row are linked and will change in unison if (and only if) they are the same. The user should see at a glance if there are holes between rows. (I don't display "to" if it's the same as the subsequent "from", but display an arrow like this ↖ - it's ugly)

• it's not clear how to terminate the current period (=> click on 2005, write a value in "to")

• it's not clear how to delete the current period (=> click on 2005, delete the value "from")

• the symbol for "infinite" is ugly and unclear

• validation for role, department etc.. depends on the contract but, from the users' point of view, they are actually orthogonal. Other things are even less related (e.g. weekly hours) but should still be validated together

• Methinks editing a table should be nonmodal..

Answer 1

Assuming that one is editing only a single employee's detail at a time, one could display the latest current editable data at the top of a page. This can be followed by the histories of changes in list, where only the changes from the previous version can be highlighted. When someone clicks on one of these history items, that item can be expanded and made editable, and the current editable one collapsed. For example, you can wrap everything up in within <li> elements in an <ol> and expand/collapse <li>s depending on which one is being edited.

Sorry for the generic answer :) If you can provide some more details (maybe a scan of a paper prototype you did), we can dig deeper into it.