How to tell user if they are offline or online?

Question

App is browser based and is using local storage to facilitate offline working (no internet dependency for limited functionality) and faster response (data is available locally so less network calls).

Some transactions can be performed without internet while other transactions always need internet. User needs to synch-out (flush out locally created records) and synch-in (download updates) from time to time.

I need to communicate to the user (in a non-intrusive manner so that he/she can continue working while being aware of the details)

• Whether he/she is offline at the moment,
• For how long he/she has been offline,
• When was his/her browser storage last updated,
• and How many records have been created locally without internet and they are still pending synch-out?

How do I achieve this? Are there any UX studies and best practices for this problem?

Answer 1

In the Online mode the App works as intended, so you need no to highlight normal mode.

For Offline mode consider two cases:
1. An operation doesn't depend on network connection.
The App displays small non-intrusive notification, so user flow doesn't break.
All the tech details, like Offline time, Number of pending records are available in the dialog, which appears on Details.

2. An action depends on network connection.
The App displays dialog with description, so user clearly understand the limitations.

Gmail provides good examples of dealing with offline mode:
1. You can browse the mails or compose the new one.At that time Gmail displays non-obtrusive notification:

.
2. But when network connection is crucial, Gmail says it clearly:

Answer 2

I don't know about offline UX studies but I'm pretty sure that in the ideal circumstance the user shouldn't really notice that they are offline. Everything should just work as normal, be saved in offline storage and then be synced automatically once they're online.

Mobile applications are pretty awesome at syncing and not caring whether you are on/off line. My primary example would be Evernote as that's what I use the most offline on my mobile.

1. whether he/she is offline at the moment

For starters - here's a nice big list of offline states. But other's here have answered that question well enough.

2. For how long he/she has been offline

This is done pretty simply by saying 'last saved X seconds / minutes ago', Google docs kind of does this but hides it under a tooltip:

3. When was his/her browser storage last updated

That should be answered by 2. I think.

4. and How many records have been created locally without internet and they are still pending synch-out?

Evernote has a nice touch for this, they treat it as though its 'waiting to be synced'. I've been seaching for the mobile UI for this but haven't found it, this is what it looks like. Where this is the document / notes overview.

Edit: I came across this very useful and detailed article about Offline or Online (UX):

With reference to the document refresh icon I was showing, that's actually effectively called a 'dirty' document, which equally can be applied to fields in a form:

Dirty records

When a record has been edited, but not yet synchronized back to the server database, it is considered to be “dirty.” Inherited dirty occurs when a child record has been saved, but not yet synchronized.

After an edit or new record is saved, markers are used to indicate:

• “Dirty” records (default is bright orange triangle).
• Record has been saved, but not yet synchronized.
• New records (default is blue tri- angle).
• Record that has been added and saved, but not synchronized.
• “Inherited dirty” records (default is pale orange triangle).
• Parent of a “dirty” child.

Markers are removed when the data is synchronized

Answer 3

Are there any UX studies and best practices for this problem?

Maybe Progressive Disclosure is the UX term you are looking for. Because, is it really necessary to bother users with all the connection details all the time? I can understand that when data needs to sync between devices it is useful for users to see directly if the data is “in the cloud” and available on other devices. But the details can be hidden by default and only exposed when needed. How this is best designed is hard to tell without any further details about the context etc. But to give you an idea how to implement this:

A small icon that tells it is in sync:

And when some changes were made but not uploaded yet:

Details can be shown in a hover balloon or dropdown or whatever suits your needs:

Answer 4

Is the offline/online status linked to the user or the app? it feels like it's more user related than app related.

In this case, for the online/offline part, you can do something similar to how instant messaging apps do it. For example facebook has a green dot when a user is online and time since the user was online when s/he's offline.

For the browser storage and records number, the seem more app related so i would add them somewhere next to the logo or maybe as a status bar which is always visible.

Answer 5

Here is a nice implementation of what you are looking to achive

offline.js

And here is the same library with a static notification in the left down corner.

Static notification

Answer 6

Outlook handles this on the statusbar at bottom.

Working Offline

Working Online