I'm designing a collab app that will include a datepicker widget to allow users to select the due date for a task. Our data shows that users systematically select the days where they have less workload. Due to this I believe it would be useful to show in the datepicker the number of tasks due on each day.

I've tried unsuccessfully to find patterns of datepickers displaying both the day label along with quantitative data (like the number of tasks) so I came up with a couple design of my own. One uses a heatmap approach to convey the workload for each day. The other use a tiny progress bar like graph. Both design are supposed to allow to determine at a glance if a day has none, 1, 2, 3, or more tasks associated. For additional reference the side pane shows the task list for the selected or hovered day.

Heatmap variation

Progress bar variation

If anyone knows of any datepicker design that show quantitative data per day please let me know. Alternatively I would appreciate your comments regarding which of the datepickers above seems more useful to find out the less busy day.

EDIT: I've tried all suggestions below. From my perspective the one that works best is combining suggestions from user39437 and Matt Lavoie into one as follows:

Alternative design

However after some consideration, my conclusion is that the pure heatmap approach seems more effective to determine the least busy spots than all other versions as it only requires pure visual processing. All other representations require additionally some degree of cognitive effort to decode the symbols into values and compare them within a range. I mean to do some testing on the prototype but that's still a few months away. Thank you all for your input.

  • 1
    Can we please stop calling UI UX? UI is a subset of UX and an interface is not a UX. The user experience is set by the whole user experience, not an interface element. Jan 3, 2014 at 11:43
  • The question is about the user experience of this particular interface element.
    – DA01
    Jan 8, 2014 at 2:32
  • Be wary of the designs below that try to communicate "fullness". In reality, the number of tasks we can usually do in one day varies widely depending on the type of task, the person, unscheduled issues, etc. What if I have five tiny tasks to do? IMO a heat map is actually the better metaphor. Jan 9, 2014 at 16:12
  • @SamPierceLolla : You are right. Knowing the number of tasks does not give us the full picture. That's why we supply a side pane with the breakdown. It does give a hint though...
    – Jay Mann
    Jan 10, 2014 at 10:15

7 Answers 7


I like both ideas, although I'm leaning more towards the second design because it better illustrates the idea of fullness (of schedule) which is what you're trying to convey.

In the first design, the days with more tasks are more prominent than the ones with less tasks, which is the opposite of what the user is going to be looking for (less busy days).

If I were to change the first design, I would try fading the busy days so that less busy days become easier to spot. The degree of transparency should increase as the day gets busier (or, to put it another way, becomes unavailable for new tasks).

  • I'm not really sure the darker tones are more prominent to the eye. At least in the calendar above you can immediately spot the empty days. Besides I think the standard convention is to assign darker tones as the value increases.
    – Jay Mann
    Jan 3, 2014 at 11:17
  • @JayMann when I look at your first design above, I notice the darker boxes before the lighter ones, don't you? I agree, darker tones do convey higher values (I didn't suggest otherwise in my answer). When I look at your first design above I get a very clear idea of how busy my schedule is, but what I really need in order to complete the task in-hand is to see availability. It seems to me that I'm getting the opposite of what I want.
    – myajouri
    Jan 3, 2014 at 12:01
  • Hum, what I see at first glance are the empty spots. But I guess I could be trained or conditioned in a way. I think I'll have to test also color schemes...
    – Jay Mann
    Jan 3, 2014 at 12:55

You're trying to relay the "fullness" of a day but neither visualization provides that information at a glance. The heatmap needs a key, and the horizontal bar feels more like a progress indicator.

A pie, while widely panned, is a common indicator of "fullness".

Here's a quick mockup to give some flavor. It works great with your defined rule of 0 to 4 tasks.

enter image description here


I would suggest a combination of the two.

The first is great for instantly knowing which days have something but shades require looking at a key which is user friction

The second is great for knowing quantity but is somewhat busy so seeing which days have something at a glance is not as clear (although it is relatively clear)

A combo approach would be all days with something have the blue shade and also have the small bar at the bottom - I think that would be visually clean and intuitive at a glance

Nice idea by the way on the bar


What about using dots? It is very similar to the bar graph, but doesn't give the same feeling of waiting (a progress bar is usually something you watch fill up). The dots convey the same information, but not the "progress"ness of the bar.

Also, I used background color to represent today's date, and border to represent selected day. Two different things that wont overlap each other.


download bmml source – Wireframes created with Balsamiq Mockups

  • IMO, your idea is the best solution, because it shows the absolute numbers of tasks.
    – sysscore
    Jan 8, 2014 at 10:27

You asked whether there are other datepicker designs that show quantitative data per day.

Here's a screenshot of the Scheduling Assistant from MS Outlook:

Screenshot of Scheduling Assistant from MS Outlook

The Room Finder on the right works in a very similar way to your example, only it's showing availability based on time rather than planned tasks for that day.

My example isn't great as there's not much of a range of availability on the different days, but you can see that if I'm trying to arrange a meeting with the chosen attendees, 7th Jan is a poor choice; w/c 3rd Feb is 'fair' and the days in between are 'good'. 22nd Jan is the currently selected day.

I'm aware this isn't a full answer, as it doesn't comment on your two proposed examples. However, it may be useful as an example of a UI that tries to address a similar problem.


I saw your post and revision based on suggestions. There is still more room to play around.

Instead of offering an new UI element, leverage an existing one: The date number. enter image description here

In this mockup, I made the date size represent the availability. My first thought was to reverse the sizes but the bigger dates take precedence are more clickable.

I am sure you can work on prominence with color too.

You have a cool concept for adding information density to the calendar. This may achieve what you are looking for with out adding bloat.

I hope it is a good direction.

  • This approach is a nice idea but bad for legibility and cluttered
    – sysscore
    Jan 8, 2014 at 10:25
  • It is sure a nice idea to play with, but not in its current state. I find that assigning a busyness meaning to date size is very counterintuitive and if I was just clicking around this application without previous knowledge, I would be puzzled by the size difference, but it would take me a very long time to guess what causes it.
    – Rumi P.
    Jan 8, 2014 at 11:03
  • And I thought it was the best thing since the $300 million dollar button! :) Yes, my mockup merely represents a possible direction, certainly not a finished product. And I had fun playing with it. I too worry the big numbers are counter-intuitive. I expect a full day to be big numbered, yet the small number recedes... bother... this is one of those cases where whatever solution you go with, observation will surprise you. Good luck
    – Itumac
    Jan 9, 2014 at 15:52

I think your second design is the most successful, but I'd suggest a couple of tweaks.

The whole point of the date picker is to simplify the process of selecting a date.

The problem of the first design is that, even though the heatmap is useful, on top of the datepicker, users will have to process colors and legends that illustrate what the coloring means. The color legend is also located to the right below the tasks, instead of being closer to the calendar, so it's very likely to be the third element you'll focus on the calendar to establish the relationship.

The second design let users focus more on what is important (the date) right away, and allows them to know that the days that have blue bar "have something".

I would simplify this second design by removing the gray bar from the dates where there are no tasks, so that you only have an amount of blue if there are tasks. That would definitely allow users to understand the least busy days easier.

  • Charles I tried removing the grey bar but it was much more confusing. Regarding the heatmap legend it is clearly a burden, but it will be used 2-3 times at most. However the datepicker itself will be used thousands of times after that, so I think it is an acceptable deal for the user.
    – Jay Mann
    Jan 9, 2014 at 8:50

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.