How to best show users “unseen” stories

Question

Context - I have an application which shows a feed of stories, with new stories coming in live.

Definition - Seen: When a particular story card has come on the screen it is marked as "seen". User might or might not have interacted with the story using any button.

Problem statement -

User goes through the feed and scrolls through say top 4 messages out of 10 in his feed. Then closes the app. While the app was closed 3 new messages came in.

What can be the best way to show 6+3 un-seen messages next time he opens the app. Ensuring that he the 4 seen messages are not completely lost to him (i.e. he can still find it later if he wants to)?

Answer 1

Make sure you have a clear hierarchy between your stories.

There are three kinds of stories if I'm correct.

• Unseen stories
• Seen stories
• Read stories

In the examples below I've created three ways of displaying this.

• Unseen and seen tabs in your UI and a more prominent color for new stories.
• All stories in one list with clear hierarchy between the different kinds of stories.
• The same as example two but with labels.

Answer 2

You could user something like Twitter, for all the new stories.

The text should be more descriptive:

View all 9 latest stories

in your case. Probably, the user does not want to know the difference between 6 previous stories and 3 new stories. They just need to know what is seen and what is unseen.

Answer 3

I'd just show them all sorted chronologically. This way the user sees the newcomers at the top and then everything they saw during their last visit. For me, a changing order is the best way to get lost.

Use color and/or icons to distinguish new/unread/read. Add filters if needed (labeled with text and the same icons). Consider folding the less important stuff if the room is spare.

Just don't move things around. I'm happy that https://feedly.com doesn't do it.

Answer 4

• First of all - as other answer suggest - DO NOT change the order to be anything other than chronological. It's making the UI unpredictable ("where did the article I clicked a minute ago go?"), and if you demote read articles in the feed - you are likely to demote all the articles the user actually cared about and may want to read again, while promoting the articles that the user maybe willfully ignored.

• To promote old, unread articles, create an optional view which is filtered to only shows unread articles).

• Use two different markers do identify if an article is NEW or not, or READ or not. While "unseen + read" is not possible in theory, I feel it makes it less confusing to keep these attributes separated.

In example mockup below, a "new!" marker is shown on the articles that are new since the latest visit, and bold means the user has not read the article yet. The tab "Unread only" will show only the three unread articles. In both tabs, the order is chronological with the most recent articles on top.

You might want to have the "Unread" tab title to also include the number of unread articles, i.e. "Unread news (3)", some people find it nice and clean to get that down to a "0" :)