Approaches to indicate and handle new items from websocket on a live news feed

Question

• I have a live news feed that looks like this.
• I have data coming in continuously from websockets as long as you are on the page
• Currently I show a button when there are non zero new items and they get added to the top of the news list
• Let us say you get 5 new articles that could be anything but you are currently browsing only ETH articles as indicated on the page
• Notice currently that ETH is the selected tag as indicated near the search box. There are 1000s of tags + filter on the left and search box in question when adding new items from the websocket

Few questions

• First of all, would this be a decent way to indicate that there are new items?

• Secondly what happens when you are browsing ETH items and new items arrive that could potentially be anything (BTC/ETH..anything)? Do you add all of them? Do you only add ETH items, how will you indicate that there are other items that were not added?

• Similar thing can be said for search and the filter dropbox on the left. What happens if you are currently browsing results after searching for "china" in the search box and a new item arrives from the websocket that has nothing to do with China?

Answer 1

You should only display "5 new articles" button for the data that matches the exact combination of filters and search bar that the user has used. And don't display anything if it's not a perfect match. This way, you won't misinform the user by showing new articles that don't actually match their search criteria.

And to display new articles which don't match search criteria, you can redirect them to some other page like "Home page", something which has all the articles without any filters.

Another solution can be having a sidebar with all the 1000 Tags with a tag saying "5 new" but it would lead to endless scrolling which will make it practically useless.

Answer 2

You can try with tabs, taking ideas from SE

• Divide each heading into tabs, this way the update of each item can be seen in real-time with the numerical increment in the same tab (n-number)
• Tabs allow simultaneous work on each section

Answer 3

This is a quite common occurrence, and there are different ways to approach it.

One approach is the File Manager pattern: suppose you are searching for Paris. The search will return all files that match Paris, and it will even filter by file type (for example, paris.doc, vacations_in_paris.jpg, etc). If the search screen is open and you add another file containing the string paris, you'll see it added to the previous results with a short flash.

(Note: I don't have a Windows computer at hand, so this is for MacOS Finder. However, I'm quite sure Windows File Manager behaves similarly.)

Another approach is the Facebook pattern: if you do a search and reload the page after a bit, you may see different posts. This is especially noticeable if you select the "Recent Posts" filter.

Another option is to show a toast or dialog that reads something like "There are new posts". I don't have an exact example, but this site uses a similar approach, although not on filtered searches.

These are just a few examples, but there are more, including what I'll suggest for your specific case.

First of all, let's see the rationale. When you're reading a page with a list, you see a list in any given order. Users may be able to sort results, and the expectation is that they'll control their experience (in this case, how they view your page). When the page is static, this is quite trivial.

Now, in your case, where you're loading new items in asynchronous mode, users will probably be aware that new items will be added (or they will discover it immediately). You can provide a better visualization by making these new items flash or whatever visual cue you want to provide (some sites have a small clock or three dots animation).

Then you have the filters. But filters are always enabled. If there were no filters, all posts would load without any distinction. However, if the user has applied a filter, the expectation will be that new items fitting the filter criteria will load as well.

Why is this? Because, as I said, filters are always enabled. If users choose not to filter results, it will be exactly the same as choosing ALL. And if posts load for the ALL string, they should behave the same if the string is ETH, SOL, BTC, or whatever.

Additional Reading

• Designing Asynchronous APIs
• Always Show Results Asynchronously
• Announcing WebSockets & Filters Support