I am designing a roster where each staff member can be assigned to a particular task for any 15 minute block throughout the day. In practice, there are usually two or three primary tasks, as well as a few breaks

e.g. On the Phone from 9am to midday, Lunch from Midday to 1pm, Processing Mail from 1pm to 5pm. 15 Minute Tea Breaks at 11 and 3.

Daily hours can fall anywhere between 8am and 8pm.

roster view

I am trying to design a slick interface for entering the tasks on a given day. I can think of two main options:

1: A list of tasks with start/end time text boxes, with a button for adding a new task. I would probably group it by Primary and Secondary tasks.

2: A table with selectable cells. When selection finishes, a menu to choose a task is displayed.

Can you think of any other simple way of editing this kind of information? Or can you think of a way of combining the two options without it getting too cluttered?

One common use-case I would need to account for is switching a staff member to a late shift - Basically just moving their start time forward, with all of the other tasks following suit. This is easy to do with the first model, not so easy with the second.

  • 1
    1. What does each row in the table represent? A single user? (e.g. 1st row is John, 2nd row is Mary, etc) If not, does it represent a day within a week for a single user? (e.g. 1st row is Monday, 2nd row is Tues, etc) 2. What do "S" "NT", F", and empty cells represent?
    – Jung Lee
    Commented Mar 6, 2012 at 2:06
  • Each row can either be a single user (if viewing all staff for a single day) or a weekday (if viewing a four week period for a user). "S", "NT" and "F" represent different task types, while empty cells are times when the staff member is not rostered.
    – Alex
    Commented Mar 6, 2012 at 2:32
  • I should also mention that the roster typically shows between 40 and 60 staff members for any given day, so it is cramming a large amount of information into a small space.
    – Alex
    Commented Mar 6, 2012 at 2:41
  • 1
    See Assigning hours on a duty roster for a similar question with a great answer
    – Rahul
    Commented Mar 6, 2012 at 8:34

2 Answers 2


One option that I would think I would find appealing to use is to have 2 main elements:

  1. A list of possible "tasks"
  2. A calendar

Then, the behavior is to:

  1. Drag/drop a task onto the calendar
  2. Stretch that task to cover the time-slots desired
  3. Drag/drop the lengthened task to re-position it as needed

Then, as tasks need to be rearranged, you can simply grab them and place them where needed.

I think I saw, in a demo video, that the new version of Basecamp has a similar feature in it's calendar, but I don't remember for sure. If I'm remembering correctly, however, I know that I liked how it worked and found it to be an incredibly intuitive way to rearrange tasks.

  • +1 But I would also allow OP's second option. Select the time slot(s) first, then upon mouse up, allow the task to be selected. It is the way that many calendar software packages allow you to add appointments. Commented Mar 6, 2012 at 7:47
  • Yes, there's no reason that other interaction methods couldn't be layered over the top of my suggested behavior. In fact, I would encourage having the 2nd style of interaction if only to have a more keyboard-accessible interface. In general, I'm a big supporter of having a highly intuitive, visual interface as the default but also having alternative interfaces available as well for power users to do certain specific things more quickly if they can be incorporated in a way that does not get in the way or clutter the existing UI.
    – cdeszaq
    Commented Mar 6, 2012 at 13:56
  • I like the idea of the calendar, but having played around with a couple of implementations I think that the Multiple-Appointments paradigm of the calendar isn't quite right. I think I may try and take aspects of the calendar design (the drag-and-drop and resizing) and customize it so that Primary tasks can't overlap (but breaks can). Then add resize handles between tasks such that making one larger will reduce the relative size of the other.
    – Alex
    Commented Mar 6, 2012 at 23:22
  • Yes, that would be a good way to enforce appointments not overlapping if that is a requirement. Not all applications have such a requirement, so I didn't put it in my original suggestion.
    – cdeszaq
    Commented Mar 7, 2012 at 13:56

For starters I really like your interface ,even though it has more colors than what I normally use in an interface,its very clean and it gives me all the information I need.However the challenge I see with this approach is:

1) If you have a lot of cases where different work is being done in 15 minute intervals ,say Tea from 11:00-11:15,email from 11:15-11:30,Phone call from 11:30-12:00 and so on,you are going to have a lot of clustered icons if you go for the visual route

2) You are going to be pressed to define icons in your system for every work item the user might do.

The approach I might take are is similar to the excellent approach recommended by cdeszaq where I would provide users to select the coloumns and stretch them as needed and use a dropdown list to fill in details about the task to be performed.However since I would add two additional features to it which are :

  1. Allow the user to specify certain icons for certain tasks (or build them within your system e.g. the teacup so that those time slots will be defined by those images or text if the user defines) - The reason I would prefer this is because people are visual in nature and having a visual representation of what to do would make it much easier than having to scan large blocks of text
  2. While you can allow users to select tasks from a dropdown,also give them the flexibility of a free form text box which allows them to define their own tasks and give them an option to save it as an option (this might involve some development effort as you dynamically updating the dropdown so you might need to consider the cost benefit analysis of that)
  • Thanks for the tips - With regards to your challenges, the use-case of the application should mean they aren't a problem. Generally we only specify the broad nature of the task, and staff are put on a single task for at least a few hours at a time. Thanks for the comments on the interface - I find that grouping like tasks by colour allows for the fastest identification, and then the letters/icons are just extra info if specifics are required. I wanted Lunch and Tea Breaks to pop out so I used an icon for them.
    – Alex
    Commented Mar 6, 2012 at 23:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.