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?

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:

enter image description here

Example from Twitter:

enter image description here

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.

  • I personally find this (e.g. "1 new question added", "an edit happened, click to load") annoying, because the notifications occur in places that may well be off-screen; I would have no idea that something happened if I hadn't observed the change in the page (e.g. here, the entire page scrolls down about 20 pixels when something changes, then I have to hunt to find it). However, it's definitely a common design and users are probably getting used to it. – phyrfox Aug 27 '15 at 1:06
  • Twitter and Facebook fixed this (indeed annoying) problem by placing the notification on the top part of the screen when the user is scrolling through the content. The placement of the notification in your post is effective too. I think the placement will depend on the design, as long as the user can see it wherever on the page he is. – Max de Mooij Aug 27 '15 at 1:13
  • This is a well thought and complete answer – Devin Aug 27 '15 at 1:18

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.

mockup

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.

mockup

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.

  • Very nice answer! – Devin Aug 27 '15 at 1:18

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.

enter image description here

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.