What is a good color indicator for showing upcoming dates?

Question

I have a web page that shows a list of due dates. i have it in a table like this:

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

I am making dates that are in the past (meaning "overdue") red color and bold. I also want to highlight "upcoming" date (within the next 30 days) and wanted to see what color would be good to represent that?

Red seem clear that there is an urgent issue to highlight but its less clear to me what the right visual is for highlighting an upcoming date (i could add a legend to be explicit I guess)

Answer 1

I would consider using the same convention that gmail and many other email programs use: Bold for new (or unread), regular with gray background for old (or read).

In your case you could use bold for upcoming, regular with gray bg for overdue.

There's an excellent answer on stackexchange demonstrating this pattern.

Answer 2

I would make it Green vs Red. Green if it's due today or any time later and Red if it's overdue.

I found this pattern in many apps, check Asana

Answer 3

Your list shows due dates for a certain Name/Job title...

Now, there are couple of things you would have to to check before assigning colors:

1. Are all the dates only visible when the due date is below 30? (judging by your question, ofcourse not but, still) if that is the case then all list items would be of the same color and it doesn't matter what color it is, meaning black(grey) is the color you go for on white background.

2. Who uses the list? This can also decide the color for ex- If certain person or designation sees the list and s/he is the only person who performs the actions then you can arrange the list as per due date and no need to mark a different color to the list.

And, if the users themselves use the list than they have to focus on only one item (list should be searchable) and no different color is needed.

3. What is the difference between a person with due 30 days and person with due 31 days? Is there? like you can only take the action when due date is whithin 30 dates? or something like that... if not, then color differentiation doesn't matter and you can use the same color for all.

4. And if there is a case I've missed and/or you want to use color is case 2(not needed really, use bold) or Case 3 than Green is the color you go for. Reason- Blue is reserved by convention for links, red is error/warning so, you're left with Green only.

Answer 4

I would consider following

1. I would not put them in one list and rather segregate them in following tabs

• "Due" since >= 30 days (if there is a 'fine' involved) colored in red
• "OverDue" since 0-30 days (due date passed but no fine involved) colored in pink just like your bounty
• "Upcoming" Dates colored in light grey

2. Give the user an option to see a flat list without segregation with default sorting on dates in descending order.

3. Give the user ability to search by user and dates.