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?

enter image description here

  • 1
    As noted, however, I like your overall design! Will all the various icon states you have now be clearly understood by the user?
    – Mattynabib
    Aug 16, 2016 at 16:08
  • @Mattynabib I do have a tooltip hover for those who aren't familiar, but the icon states should be fairly linear in regards to their actions etc :)
    Aug 16, 2016 at 16:10
  • 1
    @BryceSnyder This is a web-app, right? I like the clean look but how long before touchscreens detect my finger hovering for more information? I am concerned about the clarity of the icons on the left-hand side as I have never seen them used before, anywhere. Anyways as far as the overdue issue is concerned, I would opt for an overdue tag placed to the right of the date.
    – MonkeyZeus
    Aug 16, 2016 at 17:18
  • 1
    @BryceSnyder I'll have to give this more thought later and possibly come up with a suggestion using my MS Paint-fu skills, lol
    – MonkeyZeus
    Aug 16, 2016 at 17:55
  • 1
    MS Paint-fu incoming!. You can style this to your liking but I vouch for getting rid of ambiguous icons altogether and implementing a tag-ish system and allow the user to sort and/or filter
    – MonkeyZeus
    Aug 16, 2016 at 19:31

6 Answers 6


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.

  • 1
    The sort order is not a bad idea either. In fact, perhaps you could have a third category in your top bar that is just Overdue Tasks.
    – Mattynabib
    Aug 16, 2016 at 16:14
  • 9
    Good answer. I would also point out that color should not be the only indicator that something is to be noted. Aug 16, 2016 at 16:15
  • 1
    @EricStoltz very valid point. Urgency can be created by hierarchy, color, font choices and even how information is presented.
    – UXerUIer
    Aug 16, 2016 at 16:16
  • My image doesn't display the search functionality that is implemented. It allows the user to refine the search by hidden, overdue etc. This is a part of a SaaS being used for insurance companies; they are very strict on using specific date formats, otherwise, I would use that short-hand for sure!
    Aug 16, 2016 at 16:17
  • @BryceSnyder that's very important information right there. Thanks for the update!
    – UXerUIer
    Aug 16, 2016 at 16:25

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:

Highlight the overdue items in the task list

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.

  • 10
    Like it, but maybe highlight it in a light red instead of grey... The grey looks more like a hover effect
    – Cullub
    Aug 16, 2016 at 19:29
  • @cullub Example edited. Good suggestion! Aug 17, 2016 at 15:59

You may add a red rectangle next to the date. The size of the rectangle will vary according to the days overdue.

enter image description here

  • 11
    Bars like that usually indicate progress for me, and what happens if it's 100 days over due? does it span all the way to the end?
    – UXerUIer
    Aug 16, 2016 at 20:12
  • @Majo0od You have a point, it will be difficult for users to understand the meaning the first time. But once the users understand it, it will be very easy to use. They will be able to identify overdues and big overdues in one glance. If it is more than a 100 days you may add a symbol at the end of the bar i.e. three dots . Aug 17, 2016 at 5:05
  • 9
    I don't think the bar really works. It's confusing, and there is no frame of reference to indicate what a particular bar size means. Why not a bold red message that says "X days overdue!"?
    – user31143
    Aug 17, 2016 at 14:19
  • 2
    In my humble opinion accuracy is not an issue in this case. The user needs to identify tasks with small overdue, midium overdue, big overdue and very big overdue. Also, the screen has a lot of text and adding a text message will overload the screen. Aug 18, 2016 at 4:48
  • If the bars had black text overlaying them indicating the amount overdue then it'll be self-explanatory. I hope users will notice that majorly over due items will have longer red bars. You'll need to test out some extreme values though, and cap it in case someone uses this like they use e-mail (30 thousand unread messages? I have friends like that).
    – Nelson
    Aug 18, 2016 at 8:41

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.

  • I had thought about that as well, but I wasn't sure if I were making things too "Wordy" in a sense? The previous design seemed to have a lot of misused icons in said areas that had a hover to them which stated what was wrong; so I completely understand what you mean by not making them take another action...
    Aug 16, 2016 at 16:11
  • Yeah... I think if you can show a status in place, show it. You have room, and I think if making it a bit more wordy makes it pop out more, so much the better: there's an action needed! :-)
    – Mattynabib
    Aug 16, 2016 at 16:12

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

progress bars

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.

  • Pretty much if they are overdue the ship sinks, so they really don't want to get to that state because they are in fire-fighting mode then... I definitely think there needs to be more prominence added to the UX, I just can't decide how I want it to lead up to it yet... the filling bars don't do justice for me.
    Aug 17, 2016 at 17:53

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.