6

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?

8
+50

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? – gurvinder372 Jan 30 '16 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. – Alexey Kolchenko Jan 30 '16 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. – gurvinder372 Jan 30 '16 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. – Alexey Kolchenko Jan 30 '16 at 19:38
5

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. – gurvinder372 Feb 10 '16 at 11:19
  • 1
    It's a shame that browser cache is still so hard to use. – icc97 Feb 10 '16 at 11:21
  • 1
    Browser local storage isn't hard to use and is very effective for the scenarios you've described. Great answer. – plainclothes Apr 12 '16 at 16:04
4

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. – gurvinder372 Feb 11 '16 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 '16 at 21:49
  • B.t.w. it's Progressive Disclosure not Progressive Enhancement, they are different things :-) – jazZRo Feb 11 '16 at 21:53
2

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? – gurvinder372 Jan 30 '16 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 '16 at 13:24
0

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

enter image description here

offline.js

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 – gurvinder372 Feb 11 '16 at 12:06
0

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, privacy policy and cookie policy

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