1

enter image description here

  • 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?

3 Answers 3

2
+50

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. enter image description here

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.

6
  • so if there are 5 new articles and not a single one matches the currently set criteria, how will you inform them there are new articles but they dont match what you set?
    – PirateApp
    Dec 12, 2023 at 4:02
  • 1
    @PirateApp You wouldn't. If the user is only interested in articles related to ETH (at least for the moment), then they have no interest in knowing that a new article related to BTC has been published. That can wait until they navigate into a non-filtered view.
    – JHR
    Dec 12, 2023 at 18:37
  • @JHR so if they hop to a non filtered view, then they see all the new items without any notification of sorts? lets say you were on a non filtered view with 10 items, then spent 10 mins on the filtered view and 5 new items came in, now you go back to non filtered view and have 15 items, should you do anything to indicate that 5 new items came in?
    – PirateApp
    Dec 13, 2023 at 3:55
  • 1
    @PirateApp Yes. All navigation should display the newest data, unless there is a good reason to break the common navigation pattern for websites. To use an example: navigating to example.com/questions/tagged/user-expectation should show you the current (as of the time of navigation) list of user-expectation questions, and then live-update those. Navigating to example.com/questions/tagged/real-time-updates should show you the current (as of the time of navigation) list of real-time-updates questions, and then live-update those.
    – JHR
    Dec 13, 2023 at 12:51
  • 1
    @PirateApp Correct. You are of course free to break this pattern if you have a reason, but that is the general pattern for such interfaces.
    – JHR
    Dec 14, 2023 at 19:02
1

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

enter image description here

3
  • but i have 1000s of tags for each crypto, wouldnt it be a bad idea to make a 1000 tabs?
    – PirateApp
    Dec 6, 2023 at 15:37
  • I thought there were only two sections, just like the image in the question
    – Danielillo
    Dec 6, 2023 at 15:40
  • no it is per tag, current selected tag in the posted image above is ETH, it could be any other crypto though
    – PirateApp
    Dec 6, 2023 at 15:46
1

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.

enter image description here

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

4
  • i am sorry but i did not understand your answer. the list is not in any order. it has a very specific order at all times (sorted by pubdate of the news items) the question still remains unanswered for the most part. if you get 5 new items of BTC while you are browsing ETH, how will you indicate this?
    – PirateApp
    Dec 12, 2023 at 4:05
  • 1
    Like I said, YOU DON'T. You only list items that meet the criteria and nothing else. Why update BTC listings (or even worry about them) when the user is explicitly searching for ETH? So, once more: only display new items (at the top, if ordered by time) if the search string is ALL or matches any of the criteria. If a user searches for ETH and there are one or more items including ETH, then display them. If not, don't display anything.
    – Devin
    Dec 12, 2023 at 18:30
  • so there is not even an indication of any kind that new BTC items arrived when you are currently browsing ETH?
    – PirateApp
    Dec 14, 2023 at 4:17
  • 1
    Of course. Why would someone focus on BTC when their interest is solely in ETH? Including information about BTC adds unnecessary cognitive load without any benefit. If users are interested in other cryptocurrencies (or all) , they can specifically select that option. When users choose to filter their interests, this choice must be respected. This aligns with Rule 7 of Shneiderman’s Heuristics and Heuristics #3 and #4 of Nielsen.
    – Devin
    Dec 14, 2023 at 16:03

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.