I currently have a task list (displayed below) that I want to convey a way to represent that it is overdue. I don't want to add too many icons such as warnings etc, so I figured the best way may be to highlight the date in red, and when you hover over the date a tooltip displays that states "This task is overdue!".
Was wondering what may be a better way to show this state. Perhaps also include the task-state icon to be red?
Maybe you should think about the sorting first.
Overdue tasks shown first
If items overdue are fairly detrimental, those should potentially be grouped first on the top of the listing, maybe apply a grouping that will catch the user's eye. Currently, you might have a red date label, but what if the overdue item was thrown below the fold? Even worse, what if it was hidden under pages? Bringing them up will make it more noticeable and give a sense of urgency needed for something as critical.
Consider how you display due dates
Dates are hard to remember, people don't normally remember what day of the month it is, and to add more urgency, you might want to consider changing dates to "5 days left." For tasks that are overdue, might consider just showing "overdue" unless there is a strict policy on if a certain task is overdue a certain amount of days, then maybe tie days to that task.
Sorting or special text denotations are fine, but it isn't very easy for users to tell the difference at a quick glance. I think highlighting the overdue item would make it pop out the strongest:
The highlighting shouldn't be too drastic, even what I did here might be too much (I used #fff5f5). It should just be enough for the user to be able to quickly and easily distinguish the items.
You may add a red rectangle next to the date. The size of the rectangle will vary according to the days overdue.
This looks very good - why not just append the word "OVERDUE" in red to the date when you make it red? No need to make the user take an extra action just to know the status, you seem to have room on the date line. Then when they click the date it could take them straight to the situation that needs rectifying.
Building on DesignerAnalysy's answer you could use bars to show days/time left as well as overdue (my access to graphics tools is limited, but the following should give an idea):
Depending on the range of how far ahead tasks are planned you might only show these bars in, say, the week leading up to that task's deadline (in which case the bounding box would always represent 7 days, and you may not need explicit statement of the time left/overdue). If the box represented a month, you may want (6d) or (6 days) after the bars.
In addition to (or instead of) highlighting the entire overdue item as @Chase Sandman suggested, you could also highlight the date alone, by displaying it using white (or some other light) text on a stark red background. This will make it clear why the highlighting has been done (that it relates to the date) while also making it visually easy to notice.
And on hovering, you could display some text near the date such as "Overdue by N days" - making it actual on-page dynamic text makes it easier to read, without the transience problem of tooltips.
