17

Let's say a user adds some products to a cart and we'd like to distinguish the items that were just added compared to the items that were already in the cart.

Or a user uploaded some files into something like Google Drive and we'd like to visually distinguish the new files.

For example, in forums, it's very common to put the title of the thread in bold to indicate a new or unread post in that thread.

Are there any other conventions or research done about this?

6
  • Are the items in one list or they are nested lists in a list?
    – mahan
    Feb 28, 2023 at 8:29
  • 3
    Popular products that people use often have their own conventions, as you can see in the answers below. Frequent users will understand or get used to them. If there is a general agreed on convention, I wonder why you don't know it already or why it isn't mentioned in any of the answers. So it is safe to assume there isn't one that your users are guaranteed to understand. If you are looking for a way to advertise new items to people that aren't familiar with the application you will have to use more explicit, more descriptive methods like the NEW ITEM tag mentioned in one of the answers.
    – jazZRo
    Feb 28, 2023 at 12:38
  • @jazZRo I agree. I was hoping there would be some research in this area. As it is I don't know if I can mark any answer as correct.
    – Pier
    Feb 28, 2023 at 19:08
  • 2
  • 1
    @Pier Done! ux.stackexchange.com/a/145854/36618
    – bishop
    Mar 1, 2023 at 14:57

7 Answers 7

4

As evidenced by the answers here, and in other UX.SE questions, there are many ways to go about it. This gives us a hint that there are no standards, conventions, or guidelines to follow -- though it doesn't preclude those forming in the future.

The absence of such standards is not surprising: a list can have many representative forms -- bulleted, with or without images and thumbnails, descriptions, attributes, and so on -- and has to adapt its specific form to a variety of different environments and needs.

Thus, the best we can do is turn to research on generic ways to differentiate items in a list. In 2016, Nielson Norman Group measured that:

Users are roughly 37% faster at finding items within a list on a web page when visual indicators vary both in color and icon compared to text alone. If choosing between using color or an icon, icons with strong information scent perform better than color alone.

From this research, we can take away that if the attribute of "newness" is the most important differentiator in your list, then use variations in color and icon to highlight the difference. Color alone helps, but does not perform as well as both.

You can see that the examples in other answers use this technique, suggesting that common implementations follow the research.

When faced with this problem, my recommendation would be to evaluate your list's specific form and introduce variation in color and icon to highlight the most important attribute. If there are many important attributes, provide a way to sort and filter.

2
  • It's a real pity that IE didn't make it. We would have a de facto standard then, like with Windows. OK, for just a few years at least. Until the next version... Mar 2, 2023 at 3:00
  • 1
    And the obligatory xkcd.com/927. Mar 2, 2023 at 3:04
12

Microsoft uses an icon to show when something is new (rays that show "shiny"). Here's an example taken from their website: Microsoft OneDrive with a new file called FY Budget Projection

I'm not sure that there's a universally understood pattern for this, so testing with your particular audience might be good.

9
  • 16
    Would you interpret this as new if you wouldn't know it, especially at first sight? I wouldn't. Feb 28, 2023 at 0:12
  • 2
    Hence my recommendation to test.
    – Izquierdo
    Feb 28, 2023 at 14:48
  • 6
    I'd say it's a learned icon, for sure, but not impossible to deduce from context. Certainly in the context of an online storage service like OneDrive, a common workflow is to upload a file and see the file appear in the list, bearing this icon. After a couple times, I'd bet that many users will be able to guess that it's a "new item" indicator. Feb 28, 2023 at 15:11
  • 2
    When I first saw this icon it looked like a broken loading spinner. A blue dot is more indicative of "unread" or "new".
    – Tvde1
    Mar 1, 2023 at 11:42
  • 1
    Another consideration with blue dots is that they indicate that the user hasn't interacted with it yet - read the email, etc. A 30-day-old unread email might still have a blue dot.
    – Izquierdo
    Mar 1, 2023 at 15:15
12

Notification feeds (e.g. Gmail, Reddit, etc.) often use a different background color to indicate unread. That also gives you the option to adjust the color based on factors such as why or when it was added.

10
  • 6
    Example on your screen right now: the Stack Exchange inbox.
    – Barmar
    Feb 28, 2023 at 14:30
  • 1
    @Barmar: Which still confuses me every now and then, as I sometimes think "color = unread; white = normal".
    – user1686
    Feb 28, 2023 at 19:16
  • 1
    @user1686 What exactly do you mean by that? If there are unread answers/comments in your inbox there's a white-on-red overlay to the inbox icon with the number of new, isnt' it? Or are there different skins available for SE sites? ... afa ... I just checked my profile but I didn't find any skin setting(s). Feb 28, 2023 at 19:28
  • 1
    @GeroldBroser: It's not always the topmost ones that are still "new" (unread), as it's deliberate that they're not all automatically marked as seen. As a result, sometimes it has white (unread) items at the middle or bottom and gray (read) ones at the top. For comparison, the other inbox right next to it – the received points popup – has the complete opposite color scheme, with new items having a colorful background while the rest of the popup is white, so it has white (read) items at the bottom and blue (unread) ones at the top...
    – user1686
    Feb 28, 2023 at 19:45
  • 1
    @Barmar & user1686: Ah, it's about the inbox drop-down's backgrounds. I thought it was about the inbox icon's colors. Thx for clarifying! Yes, red for read, white for unread is counter-intuitive. Red is the strongest warning color – AFAIR/K stemming from blood: If you see it (outside slaughterhouses, medical care or the like) something went (more or less terribly) wrong. Immediate action is required. Feb 28, 2023 at 20:39
12

No research but I'd prefer some sort of tag (e.g. NEW ITEM or NEW IN CART [Thx @wizzwizz4, for the hint!]) or clear text: New item in cart. I'm not sure whether bold text can be easily distinguished from normal one by visually impaired and on all conceivable devices.

And bold text can mean different things in different apps: selected for further action, highlighting a special offer, item with personal discount or, well, new item at this place... you name it.

Acoording to Visual Indicators to Differentiate Items in a List: "Both [icon and color] Is Best".

3
  • I'd prefer the more verbose wording "new item in cart" instead of just "new item". Someone might understand "new item" to mean a newly launched product instead of an item that was just added to their cart. Mar 1, 2023 at 22:05
  • @CaveJohnson You're right. I thought of that already, too. And I usually prefer verbose wording, as well. (Personal motto: More info is better than less.) But since the tag becomes almost twice as broad then... It'd be almost like a (small) banner. :) Mar 1, 2023 at 22:12
  • @wizzwizz4 Good point! Mar 2, 2023 at 10:14
7

In Apple's Mail app, unread, therefore new messages are denoted with a blue circle next to the email subject line.

1
  • > unread, therefore new I'd say that's a pretty big leap. An item may remain unread for years, and you can't conclude that is new. I think the other direction makes more sense (new, therefore unread) and even that will not be true as soon as you open and read it Mar 3, 2023 at 12:01
3

Mail applications (for example, the Apple Mail application) sometimes used a colored dot to indicate a new (or unread) message.

enter image description here

1

I've seen a many-pointed star used for this, e.g.: 🟓 (perhaps not rendered correctly due to your browser missing according font - click on the link to view it). A similar symbol is commonly used on retail packaging to attract attention to new features.

Unicode also offers🗦These🗧emphasis rays. Similar symbols are often used to highlight changes in comic strips and visual novels.

Or even a simple (or fancier) exclamation mark.

6
  • 3
    The "many-pointed star" (Officially: heavy twelve pointed black star) isn't rendered correctly (in FF 102.8.0 [01F7D3 in square] and Chrome 110.0.5481.100 [empty upright rectangle]) here. It can be seen at amp-what.com/unicode/search/%F0%9F%9F%93 though. Feb 28, 2023 at 15:01
  • works fine here in both. maybe you need more fonts.
    – Jasen
    Feb 28, 2023 at 19:10
  • 1
    you can still use the symbols, using graphics instead of fonts, or use a webfont etc
    – Jasen
    Feb 28, 2023 at 20:14
  • 1
    Re: "need more fonts", SE is forcing system fonts, so depending on the OS, it might not display well.
    – Andrew T.
    Mar 1, 2023 at 10:55
  • 1
    To avoid display issues with Unicode symbols, the best solution is probably to just post an image (which could also serve to show the symbol as it's actually used in practice, in context with surrounding UI elements, which is often useful).
    – NotThatGuy
    Mar 2, 2023 at 16:44

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.