Presenting real-time data stream

Question

I am displaying a real time twitter stream using websockets.

The way I am doing currently is just appending the new tweet to a division.

Depending on the activity,the stream becomes unreadable due to the speed at which it is updated.

What are the options to present a stream which will be updated very rapidly and yet keeping it readable?

Answer 1

It is hard to make it readable for fast frequencies. And even if you do it well, there will be a frequency limit for every user. So you will either have to limit/funnel the speed, or accept that all tweets are not going to be read.

Instead, an idea could be to divide them in two parts:

1. A flowing view for visual effects, with mini versions of the tweets, only to communicate the frequency, and
2. A readable view with all text and details, making one selected tweet readable at a time.

I imagine the readable view as a callout from the flowing view. Imagine a map or 3D globe (kind of like this), showing mini versions everywhere on the spinning earth, and has a big "readable window" that presents tweets one at a time, automatically, long enough for users to read it. You do not need a map or globe to do this, a normal list would also work:

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

The trick is to make it obvious that the readable view "rotates" more or less randomly and that you cannot expect it to display everything if the frequency is high. A user could also select a mini version of the tweet from the flow, to read it, as a feature.

If you choose to let tweets be selected and fade out, make sure they are delayed long enough for a user to finish reading after it faded out, or is easily reselectable to load back into the readable window again, in case the user did not finish reading it.

Answer 2

This approach may help:

• Keep an area static in view so that the user can read it.
• Have a list of new feeds swap underneath or next to static area.
• Update new feeds list in intervals that give the user time to notice and click on it (e.g. 10 seconds).
• If the user clicks on something, move it and its area to static view.
• Have back/forward buttons in static view, so user can return to previous list and then back to current one.
• Let users control the speed of the new feeds updates.
• Let users control size of each of the two sections and/or ratio between them.

Answer 3

1. Instead of treating each tweet equally, consider filtering the stream:

   • Are they friends/followers of the user?
   • Do they have many followers?
   • Is the tweet a long and possibly interesting question, or is it just a retweet of an existing tweet without additional commentary?
   • Are they a customer (or have ever tweeted you before, such as for support)?

2. When you display the stream:

   • The real-time display of important tweets does not have to be precisely chronological. For example, if there is space for 3 "important" tweets to appear at a time, and the first one was in the middle of the screen, the next one should appear in the spot below (or above) instead of pushing up the list like a typewriter. This way, the tweet doesn't jump out from under the reader's eyes.
   • Display a tweet for enough time to be readable, and add more time if multiple important tweets are on the screen at once, as the user may have to finish reading another one first.
   • Fade out the tweet (not linearly from 100% to 0% visibility, but from 100% to 90% also adjusting colors) to provide feedback about how new a tweet is, since the top one might be the oldest or newest at any given time.
   • Consider having a queue of important tweets that buffers important tweets to be displayed two or three screens later, adjusting the algorithm in real-time to be less selective or more selecting depending on how fast the stream is coming.
   • You will want a way to notify the user that an "unimportant" tweet was detected. The effect could be a subtle fade of the background of the screen whenever each time a tweet rolls in. Whenever a high number of tweets is detected, it may be useful to display the throughput, e.g. 25 tweets/sec instead, but not otherwise.

3. Consider allowing the user to see a history:

   • An interactive approach allows the user to click or tap a button to view the tweet history, with a tab to choose to display between important tweets or all tweets (in either case, ordered by time.)

   • An automated approach to "recycle" an older tweet from the history into the real-time display is useful in case a user missed a tweet the first time. Such recycled tweets should appear on the real-time display in a different color and/or shape to separate them from real-time tweets.

These ideas should make the real-time display useful and engaging to the user, whether the stream is full of content or not at the time. Hope you find it useful!