How can I improve this large grid of checkboxes?

Question

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:

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.

Answer 1

You could try the following idea:

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:

Answer 2

How about using multiple-choice combo-box:

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

Answer 3

• 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!

Answer 4

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):

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.

Answer 5

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!

Answer 6

• 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

Answer 7

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