How to indicate real-time constantly loading content?

Question

We're moving into more "next generation" web apps where the amount of reloading a page someone has to do is greatly diminishing in favor of real-time/reactivity.

I'm wondering if there's some sort of way to discourage people from reloading a page that's real-time. In other words, an icon or something really simple to say "Hey user, you don't need to hit reload because data on this page updates in real-time."

Let's say you have a list like this:

Most recent activity:

• So-and-so commented on your post 12 minutes ago.
• Another Person commented on your post 2 hours ago.

And just sitting on the page doing nothing, new entries will automatically appear:

Most recent activity:

• Someone New commented on your post 5 minutes ago.
• So-and-so commented on your post 17 minutes ago.
• Another Person commented on your post 2 hours ago.

My first thought was a spinning notched circle or three animated dots, but to me that would just look like a loading icon, and it might give the user the wrong idea, that data is still loading and they should wait for something.

Any thoughts on this?

Answer 1

This is something the web community needs to get used to. But right now, we're looking for a way to make the community get used to real time loading. To do that, we'll have to condition users not to click a button (sounds like reversed reallity, doesn't it?).

How it's done right now

Example from Stackexchange:

Example from Twitter:

UX Stackexchange, Facebook and Twitter (and a lot more social networks) use these types of notifications to inform the user that updated content is available. However, this only works when the content is updated quite often and quick enough before the user starts to hesitate weather to reload or not.

Options to consider

• A popup which informs new users about the real time loading.
• Using notifications like Twitter, Facebook, Stackexchange, etc. did.

With these options, you will have the best chance of alerting both patient and impatient users.

In the near future

The community will get used to auto reloading content, because it's appearing more often. Every email program and social network platform has it already built in.

Remember when you were working on a word document and your PC crashed? A couple of years ago, you would have to start over again if you hadn't saved the document every minute. Now, Word does that for you. And everyone knows Word does that now.

In short

Inform the user at his first visit that he can leave F5 alone. Then use notifications as soon as the real time loading did its job.

Answer 2

The exact design will probably depend on your page (e.g. how frequently the page actually updates). For example, if you're using a periodic poll (say, every 30 seconds), you can provide a visual indicator, such as a progress bar in a corner that reads something like "next update in X seconds", perhaps with a visual progress bar alongside it that that progresses in real time.

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

Alternatively, if you're streaming data (e.g. long-polling), you might consider using a ticker or perhaps even toast notifications (which seems to be increasingly popular). For example, one UX I wrote for an administration widget posted toast notifications in the lower-right corner to confirm that a user's action was accepted (or not), as well as notifications that the page's data had been refreshed.

^{download bmml source}

Toast notifications work particularly well because they're pretty easy to notice, and present a call to action. Clicking on the toast notification should probably scroll the updated element into the view port, and possibly do a short animation, like flashing a background color to a new color and fading back to the normal background over a second or so.

The only downside I see to using toasters is that if a page is very busy, you should limit toasts to every few seconds and/or aggregate them to avoid overwhelming the user (e.g. "three new comments were added" as opposed to mentioning every single one).

In short, if the polling time is really short (or is actually a stream), just notify the user of new data as it happens, or if it's a longer polling time, let the users know when they can expect the next refresh from the server.

Answer 3

I'll chip in another perspective on this. Even though it's a bit different than how social media like Twitter, Fb or StackExchange does it, I really like how real-time collaboration apps do this.

Google docs, for example.

Something going on is really, really clear here. Reloading the page doesn't even cross user's mind. For most of the time, at least.