4

I have a large collection of elements displayed in a calendar-like grid. These elements represent entities that can change over time, but many won't. The elements are rendered like cards, evoking a feeling of a of a cork board with 3x5 cards stamped into it in a neat grid, or a calendar with lots of sticky notes on it.

I want to be able to highlight those elements that have changed in the last 24 hours. I'd like it to be obvious if I'm looking for it, but not distracting or jarring if I don't care. I'm considering going about it in a few ways:

  • A color, one that will stand out against the sea of white boxes. I'd prefer to avoid a background color, as those are currently reserved for significant issues with the card.
  • A non-color icon or other indicator for the colorblind.
  • Placing this indicator in such a way that it's easily scannable - if there are 50 or 100 of these on the screen, I'd like it to be relatively easy to see those recently changed.

Icons considered:

  • Pencil - seems off, since this typically indicates that was ever modified, which isn't important here.
  • Check - seems off, because it tends to indicate "things are ok" or "everything is good"
  • Circle-clock - maybe?

What I don't need:

  • Just because the element has been modified (e.g., a 'pencil' icon) doesn't meet my need, editing and changing these cards are an acceptable task and not important in working on this problem. Only the recent changes need to be highlighted. (e,g, How to show that an element has been previously modified might be incorporated in some respects, but I think isn't the full answer.)

Some additional context:

  • The order of cards can change, and are significant.
  • Columns represent days. Rows represent priority within that day.
  • Cards can be dragged and dropped to re-order.

The application looks a lot like a Jira kanban view. (here's a generic image from an image search as an example):

A Jira backlog view

What might be a good way of allowing these elements to sufficiently stand out, without being too jarring?

4
  • 6
    Any visuals of the actual UI that you can share?
    – Ades
    Aug 27, 2021 at 9:04
  • 2
    A little more context could help. Can or can't the order of the cards change and why? So can you place recently changed cards on top or under a different category for example?
    – jazZRo
    Aug 27, 2021 at 11:28
  • Added some context. I'm hesitant to share shots of the actual UI, so I found something online that's similar.
    – Robert P
    Aug 27, 2021 at 19:51
  • 1
    A little colored dot in the corner could work. The little bit of color could stand out, without being too noticeable if you're not looking for it. Aug 27, 2021 at 20:22

2 Answers 2

4

Interesting question. I believe that you're almost on track, some slight re-adjustments are needed.

I want to be able to highlight those elements that have changed in the last 24 hours I'd like it to be obvious if I'm looking for it, but not distracting or jarring if I don't care

We have to deal with time here. You basically notify the user that an item changed.

  1. Mark the item with an icon to imply there is something different with this item. I'd use a DOT. It's minimalistic and many times used for notifications (you may have seen it with a counter inside).

  2. Add microcopy with a message: "Last edited 1 hour ago". I'd have it in light grey somewhere out of the way. You can also have it as a tooltip for the DOT, which would help the user understand what the DOT means.

I have a large collection of elements displayed in a calendar-like grid

  1. To see if an item changed could require scrolling or paging, so could be tedious to scan all changes if interested. So it would be a good idea to have a label with, for example: "X items changed last 24 hours".

Since this label will have to be visible as soon as you access the page or view, you can teach the user what the DOT icon means by having it next to the label. So next when the user encounters the symbol will know what it means.

A mega bonus would be to allow filtering the large collection of elements by those that have changed, since now you got this label.

  1. Dots should disappear once the change has been acknowledged by the user and the summary label/filter "X items ..." should decrease the count.

So with the summary label on top and the dot for each card would be enough, and would be usable by both color and non-color blind people. Anything else is an extra. You can give a color to the DOT or a subtle background color to the card.

This is probably what I would do, hope it helps.

1
  • I'm really liking these suggestions. Depending on the size and color it could be enough to draw the eye, be a distinct shape for the colorblind, and a color for those who are not. I really like having a tooltip for the "last edited ... " message, too. "Last edited yesterday, " "last edited Friday", etc. A filter would be great, too. This helps a lot! Thank you!
    – Robert P
    Aug 27, 2021 at 19:47
3

Could you add a button/option that specifically highlights what has actually changed? Then, if someone is looking for those events that would help them and not distract those who aren't.

It's a dilemma otherwise, subtle pretty much means not obviously noticeable - something like colour will be straight off noticeable (pre-attentive cue) whereas a small icon in the corner of each changed card might get passed over

PS. This might help your icon question if you go down that route --> An icon indicating something has changed or been edited? - but if there's room just to say 'updated' I'd say that, i18n etc not withstanding?

PPS Ah, I see you already looked at that question!

1
  • Thanks for the ideas! :)
    – Robert P
    Aug 27, 2021 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.