I'm doing a usability pass on a scheduling application. Users specify when they are available to work (by hour and day), and then a supervisor needs to select which of those users are assigned to specific hours.

Here is a sample from the current production application:

Grid of scheduled data

It is so large it doesn't fit on any screen (it goes all the way down to 4pm in this example). How can I make this type of input easier on the supervisor so that they don't have to scroll around and rely on memory (who's assigned to what hours already and what not)?

Some simple solutions so far are;

  • Highlighting all cells that a user belongs to when hovering over their username
  • Expanding the initials to the first name + last initial, however this has made the grid even larger

However the application is still extremely difficult to schedule hours for the supervisor.

  • 1
    Is there a reason why the supervisor needs to see all days at once? Also, is there a reason why the schedule should not be planned automatically by the computer, given the availability and the number of workers needed each hour of each day? If you can relax these constraints, then the supervisor's job -- and the interface -- gets much easier.
    – Erion
    Commented Nov 27, 2013 at 10:13

7 Answers 7


You could try the following idea:
enter image description here
The features are:

  • Full worker name
  • Gray dots show availability of worker at hours
  • Large clicking area (the whole cell)
  • Easy interaction style
  • Easy visual analysis of work load for each user
  • Supporting manager decision on assigning which could be based on user qualification

To save the space you could use tabs for each day.

Please, take a look at the interaction style:
enter image description here

  • 21
    How did you make these demos? They are very good! Commented Nov 27, 2013 at 14:33
  • 6
    @user1477388 Thank you. I've used Excel for table and Xara Designer for animation. Commented Nov 27, 2013 at 14:44
  • 2
    I would also recommend variation on the colors across rows (you'll probably want a pre-approved color palette) and the ability to sort or filter the people listed.
    – zzzzBov
    Commented Nov 27, 2013 at 18:52
  • 1
    You can also add a toggle between day and worker view. See either the schedule for a single day and the different workers (as in the example), or the schedule for a single worker and different days. Then the supervisor can make sure a single worker is assigned a reasonable number of hours per week (in case they check this with the current layout).
    – Jan Fabry
    Commented Nov 29, 2013 at 21:18
  • 1
    This is an incredibly elagent solution. Thumbs up for that man. I like how the clutter is instantly reduced and much easier to scan.
    – UXerUIer
    Commented Dec 3, 2013 at 17:13

How about using multiple-choice combo-box:

multiple-choice combo-box

As you can see, it will save space and bring order to your data.

  • I agree, having the users in a multi-select drop down box will make the page one-tenth the height and clear up all the chaos currently being displayed.
    – sn3ll
    Commented Dec 2, 2013 at 19:56
  • These are good points, but keep in mind that you're losing the ability to see worker availability for more than one day at a time. That might be important if the supervisor wants to be able to see patterns visually. (E.g. making sure everyone has reasonable total availability with enough of it during "prime" hours. Or, trying to be nice in assigning continguous/convenient times to as many workers as possible.)
    – Jon Coombs
    Commented Feb 6, 2016 at 0:13
  • Test with the users! (Based on the limited information you have provided, this is what I suggest.)

  • One day at a time: Let the user schedule employees for all time slots only for one day at a time. This way you will have more horizontal space available and the cell width can be used to display the employee names. This should help ease the cognitive load to the user (supervisor) as they can read from left to right for a given time slot. This may also give you enough space to show full names of available employees.

  • Cheat sheet (if you still have to use employee initials): To the right of the screen, you can show a cheat sheet listing the initials and the full names of all employees.

  • Alignment: Usually, center alignment can be more difficult to read. You should have the employee initials left aligned with the check boxes.

  • Contrast: Use contrasting background colors for the row backgrounds.

  • Test with the users, again!


I would agree with @uxer and layout it out one day at a time, then use a next/previous or date selector to select the day. Similar to what a calendar app would do.

Also, I would maybe reconsider using the checkboxes and go with a multi select box with tagging similar to this (http://jquery-plugins.net/chosen-select-box-enhancement-plugin-for-jquery-and-prototype):

enter image description here

This way you can save some room and still show the people who are scheduled to work quickly without the mess of all those checkboxes. You really just want to see who is scheduled to work that day, you don't need to display the entire list - only when you need to select them.


I agree with all of @uxer's points. I'd also like to add:

  • Alphabetize or otherwise sort the employees. Its hard to scan through the list.
  • Allow a supervisor to schedule shifts instead of individual hours. I think that's how supervisors typically schedule people, but you can always ask!

• align checkboxes vertically
• align equivalent checkboxes horizontally so that for example all HHL options are on the same lines. Basically, make a table, with blanks when options don't apply
• alternate the colours of the rows of the above table


To add to the other answers,

  • Display full names or at least last/family names with initials for first/given names
  • List the last/family name first (eg Smith, John)
  • Left-align the text because it's easier to scan than right-aligned text

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.