Datepicker UX showing Quantitative Data

Question

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.

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:

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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}

Answer 5

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:

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.

Answer 6

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.

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.

Answer 7

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.