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?


6 Answers 6


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

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

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

enter image description here

  • Thanks, these images are quite helpful. However, this only satisfies the first requirement. Any idea about next 3? Jan 30, 2016 at 18:53
  • @gurvinder372 Sorry if it wasn't clear. For the rest three requirements I supposed to use Details link, which opened a dialog with all tech info. I don't like the idea of displaying all the technical details constantly. Jan 30, 2016 at 19:06
  • Ok, got it. Somehow I still want to tell the user about pending-offline-created-records without him clicking on any link, so that he/she knows that some data has to be synched out. Jan 30, 2016 at 19:10
  • @gurvinder372 then you can have this info on the top mini-panel (sync icon and the number of records to sync). But make sure, users really need this. Jan 30, 2016 at 19:38

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.

  1. 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:

enter image description here

  1. When was his/her browser storage last updated

That should be answered by 2. I think.

  1. 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.

enter image description here

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.

enter image description here

Markers are removed when the data is synchronized

  • Thanks, +1 for user shouldn't really notice that they are offline and useful images. Feb 10, 2016 at 11:19
  • 1
    It's a shame that browser cache is still so hard to use.
    – icc97
    Feb 10, 2016 at 11:21
  • 1
    Browser local storage isn't hard to use and is very effective for the scenarios you've described. Great answer. Apr 12, 2016 at 16:04

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

And when some changes were made but not uploaded yet:
enter image description here

Details can be shown in a hover balloon or dropdown or whatever suits your needs: enter image description here

  • Wow! Your last pic is awesome, almost does the job. I will check on the Progressive enhancement part. is it really necessary to bother users with all the connection details all the time? You would be surprised that how much users don't want surprises to happen after they click on submit. Feb 11, 2016 at 17:03
  • I get your point. Can you inform about the offline status when they try to submit? It is better than trying to form the habit of checking the connection status. Also note that too much details can form inattentional blindness (or see this UX question for an example)
    – jazZRo
    Feb 11, 2016 at 21:49
  • B.t.w. it's Progressive Disclosure not Progressive Enhancement, they are different things :-)
    – jazZRo
    Feb 11, 2016 at 21:53

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.

  • Thanks, with respect to your last paragraph, any suggestions on where to show it to show this information? Jan 30, 2016 at 19:03
  • that depends on how the rest of the app looks like. maybe top or bottom, above everything else?
    – Liviu A
    Jan 31, 2016 at 13:24

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

enter image description here


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

Static notification

  • Dimshik, I am not looking for how to implement rather what to implement. Can you update your post to include that info. Thanks Feb 11, 2016 at 12:06

Outlook handles this on the statusbar at bottom.

Working Offline

enter image description here

Working Online

offline working

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.