Display expanded information

Question

Today we have a simple table which is used to display time off entitlement for users - it is pretty simple and works well.

We now need to expand this as there will be multiple types of time off and each row will display its balance etc and Carryover and Time off in lieu will move to their own type so how best can we show this?

If we just list them all it looks like the below and it looks ugly plus it takes up a lot of space (consider that there could be 10 time off types and not just 4, for example):

Our thinking is to show something the current single line option containing a rolled up total for each column and then have an expand "button" which then will expand the table to show all the options.

Can anyone think of a better way of doing this?

Thanks

Answer 1

Seeing that you also have some sort of redundancy when you add a new 'time off' (why do I have to select the type from a drop-down when I have all the types already listed above?), I'd propose a more integrated solution:

The workflow would be as follows:

1. At first you have a compact object that still gives you key information at a glance. This easily supports 10 rows or more.
2. You can open and collapse individual Type rows, and see whats going on in there. There you have a detailed list of all the important numbers.
3. Right in that very same element, you can also enter new holidays.

That way you can make the decision whether to give that holiday or not after looking at the numbers – and then do the booking at the same place.

Answer 2

People prefer choosing a departure and destination before choosing an airline company

It appears that your interface is reflecting the point of view of the employer not the employee.

Simplifying it goes like this : the employee wants to take some days off and the employer wants to know what type of days off.

Therefore I propose this workflow :

1. Browse a calendar and a balance
2. Choose the first day of the period
3. Maybe choose the last day of the period
4. Allocate the days according a dynamic balance with the different types of time off (Only the true balance is helpful here)
5. Send a request or inform whomever needs to be informed

Roughly something like that (steps 4 and 5):

^{download bmml source – Wireframes created with Balsamiq Mockups}