Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
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 Nov 27 '13 at 10:13
add comment

7 Answers 7

up vote 99 down vote accepted

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

share|improve this answer
18  
How did you make these demos? They are very good! –  user1477388 Nov 27 '13 at 14:33
5  
@user1477388 Thank you. I've used Excel for table and Xara Designer for animation. –  Alexey Kolchenko Nov 27 '13 at 14:44
1  
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 Nov 27 '13 at 18:52
    
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 Nov 29 '13 at 21:18
1  
Thank you, @Majed! It's the good example of a UI designer role in a project. –  Alexey Kolchenko Dec 3 '13 at 17:19
show 2 more comments
  • 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!

share|improve this answer
add comment

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!
share|improve this answer
add comment

• 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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 Dec 2 '13 at 19:56
add comment

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
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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