Interface design for managing overlapping date periods

Question

I am trying to design an interface to manage which team a person belongs to at any point. I would like it to be really easy to make small changes (e.g. fix a start date for a previous team assignment, automatically adjusting the previous assignment to match).

My most recent design (see mockup below) is basically a table that shows all assignments, with edit links next to each record.

I also identify gaps where no team assignment is made (which could be due to mistakes or breaks between contracts) and give the option to create a new team. In this case the new Team dialog is populated with the dates of the gap.

This is the best way I could think of to get across all of this information (and options to edit) at a glance - but can you think of a better way?

I'm not sure about the usability of the table construct, but other options that I have tried (e.g. tabs or accordians for each assignment) tend to get unwieldy.

Answer 1

Summary: If you have sufficient real estate, create a calendar layout. Otherwise, your current list view works well (but it can use some improvements - see below).

Full answer:
Events that occur over a period of time (rather than instantaneously) can be displayed in 2 ways: 1) a list view (what you currently have) and 2) a calendar view with an appropriate scale (hours/days/months/etc). The list view is most efficient when it comes to screen real estate but calendar view is faster when looking up the status of a team or a person on a particular date.

As a list view, your mockup is good. You have plenty of white space, zebra stripes, and unassigned times are placed in the respective gaps. Though there are a few minor improvements that can be applied:

• Place Edit and Delete on the same side for consistency
• Start & end dates can be merged into the same cell even if you plan for some advanced sorting
• If the only editable attributes of an assignment are Team, Dates, and Roster Visibility then consider implementing inline editing instead of a separate edit view (see inline-edit for implementation patterns & practices)
• "Assign to a new team" sounds a bit better & more representative of the action than "Move to another team" (you can also change the verbs to "assign" from "add" in the other action links)

If you wish to change to a calendar view you have another 2 options: 1) traditional calendar and 2) calendar in a table.

A traditional calendar has 4-5 rows for weeks and 5 or 7 columns for days. It is very common to the majority of people and requires little to no training. Each assignment is represented as a line across the respective days like this:

A tabled calendar has days as columns and each row represents the team, to which the person is assigned. It is more efficient for the task of assigning people for full days because it allows for more information to be visible as well as bulk actions in some situations. However, it might require some training & getting used to. There are a few ways to interact with it, see Michael Zuschlag's answer to the question, from which I borrowed the screenshot:

Calendar views also have the advantage of clearly showing how many people are assigned to a team in total.

In the regular calendar view, it would look like this:

And in the tabled calendar the only difference will be in the meaning of the rows: they would become team members instead of teams. (I'm not giving a visual example since it looks the same as the previous one.)