Wednesday, November 15, 2017

web app - Datepicker UX showing Quantitative Data


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.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...