How to indicate that an element is "new" in a list

Question

I was wondering if you had any clever idea of how to show that an element in a list is new.

In my case I'm displaying a list of documents and I want the user to see which ones are new since their last visit on that page.

I can think of 2 ways:

• By adding a "new" label or badge (but I really want to avoid that)
• By putting text in bold and background lighter that for other documents so it stands out. For example it's what Gmail does to show which emails are new since last time.
• By choosing a different background colour for those items. In my case we are really limited with colours...

Can you think of any other way? Have you got examples to show?

In my case new elements will always be at the top of the list.

Many thanks

Answer 1

I suggest you to show the 'added date' as additional attribute (column) to the documents and color the date of the new entries:

Alternatively you can set the text of the date bold.

Answer 2

As it happens with Gmail interface, the 'newness' of unread emails is differentiated by a momentary 'new' tag that hides itself after a few seconds. That's how gmail tells today's unread emails apart from yesterday's unread emails. However, this doesn't apply to your case.

The solution to my mind is a simple timestamp, visible in each row, for example '2 hours ago'. Background colour variations can help but they are not the most accessible options out there.

Since you are putting the newest messages at the top anyway, the timestamp would help differentiate how new the item is.

A simple horizontal line below the last 'new' item could also help in visually differentiating new from the old. In your case, I presume the user doesn't need to interact with the items, and the 'newness' will be gone once the page is refreshed.

Answer 3

"If you want sex just say it"

Or in other words - convey information in the clearest, and most direct and concise way (rather than using nth degree semantics).

Visual features will constitute nth degree semantics.

You stated that new documents are always at the top of the list. If new documents are indeed of real interest to users, just give it to them:

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

Answer 4

I'm against of using "new", that does not add enough value to an updated item in a list that frequently has added items. Using timestamps like: "1h", "2d" is going be an standard, so people can recognize it, they have the same experience in their social networks app such as facebook, twitter, and gmail, you can also see this representation form in Android and iOS. So by using this feature next to a title of the list item, we can let users quickly catch that this is new and also it is newer than the other item. So a lot of valuable information just with 2 characters: "1s" (1 second ago)

Answer 5

I love this way: Transform the background of element to a light yellow and fade it to the default background color after some seconds.

Answer 6

You could use a faded background animation (I think Wordpress uses it in the admin panel).

It would work as follows:

1. The user lands on the page the page
2. The new items in the the list are highlighted by a background colour (and perhaps even the label new)
3. Over a period of 3 seconds (or less) the highlight and the new label fade to the background colour of the other items (presumably white) never to be seen again

The user can then interact with the list with all items being visually equal whilst being notified of which are new.

Since this relies heavily on short term memory success depends on how many items the list has, how many new items are added and how important it is for a user to remember which items are new.

Answer 7

There may be a problem with defining new to the user.

Users typically comprehend a date/time for posting, and a freshness seal.

You can define a new that is different than that, but you can't expect your users to see it the same way, and that can be a problem for product owners if that isn't what they want new to mean.

If you over complicate that, you may end up confusing them. I've heard of it described like buying milk.

• Has it been opened?
• Whats the expiration date?

Except when the something doesn't expire, use the most relevant date, when you received it, or when it was shipped.

I like the color coding idea for things that arrived today, or replacing the date part with Today when the relevant date is today.

For that freshness seal, I'd just go with what people are used to. Look to Outlook, iphone mail, gmail, or inbox for inspiration for that. You want to be intuitive, and being intuitive usually corresponds with conforming to the expectations that the major players have established.

Answer 8

By adding a "new" label or badge (but I really want to avoid that)

Well, you could add an "old" label or badge and apply it to all the -other- documents.

Seriously, if you are going to display the newer documents first anyways, you can simply use a vertical divider with an "older documents" a label. Or a plain vertical divider without a label, I'm sure 99% of users will figure out what that means after only a few times using the site.

Answer 9

It depends on the application.

Here is a general list of techniques that can be used, mixed, or not applied at all to indicate the user that content is new:

1. Apply bolded type
2. Decrease or increase font size
3. Adjust, increase, or decrease spacing between new content
4. Append or prepend "new" label to new content
5. Append or prepend message, with count of new items by list of content
6. Format timestamps in relative, friendly way to the user's current time

The first question you should ask is whether to include "new" elements in your UI in the first place. Do your users benefit from knowing the new content that has recently been added? If so, in what context? The way users interact with new content varies for every app. Users also vary widely in their perception of modified content; some users may well interpret bolded text as "changed" or "modified content", while others may interpret such text as content which has not been saved yet; moreover, some users may become confused or flustered at changes between items on the list.

If, after usability research, you determine that including new elements does, indeed, help the user, then work out the specific user flow. Try to isolate a couple user stories. Ultimately, there is no substitute for performing user research, and any combination of the above techniques may prove to be the most beneficial to your users.

Look at the following table, which employs method 6, and ask yourself if you can immediately find the newest content:

Sometimes, simply stating the modified date of a record is sufficient to convey its "newness". But ultimately, conveying the newest records will depend on the application.