5

I'm trying to figure out what elements to in an alert show when a web application is offline.

Gmail shows all three elements I'm considering: the Status, a Reconnect Countdown, and a Manual Reconnect option.

Gmail message: not connected

Trello has a Status message and reconnects quickly (a few seconds), skipping the Countdown and Manual Reconnect.

Trello message: Attempting to restore connection.

Toggl has the best implementation I've seen. Their alert displays the Status and a Manual Reconnect link.

Toggl message: you are offline

And next to unsynced additions they show an alert icon. Hovering on the icon shows a message explaining that the item is unsynced, and clicking the icon attempts to sync the item.

Toggl unsynced item

I like the idea of having a Manual Reconnect option: it gives the user a sense of agency if they are back online and don't want to wait for the automatic reconnect attempt. This is my current alert:

Offline message

What I'm trying to figure out is whether the Reconnect Countdown (in my alert, the "Checking in…" line) is useful or whether it's unnecessary clutter? The alert is responsive and I hide the countdown on mobile. I'm trying to squeeze the 'Reconnect now' link onto mobile though.

Improve this question
6
  • 2
    Can you use this application in any way when not connected?
    – DasBeasto
    Aug 21, 2015 at 13:57
  • Yeah it's a simple personal project I'm doing to learn node.js. The page I have an mind is a survey editor in which you can add and remove elements to your heart's content when offline (it's JavaScript-driven) and when you're back online it will just send whatever your survey looks like to the server. The other pages are survey results pages in which I have already implemented automatic live updating of results upon reconnection.
    – firasd
    Aug 21, 2015 at 14:03
  • @ Firas Durri I don't think you need to notify anything, and "reconnect now" will only upset people because they arent an avid tech user, they wont realize that they are not of control in reconnect now process. It auto connects when signal is there. Just like apple does with texts it will just highlight the fact that the text was not sent. you can put " will send when connected" if you absolutely must but i think overall it is understood that can't send at the moment due to obvious network restrictions.
    – Stanley VM
    Aug 21, 2015 at 14:09
  • I think a 'try now' button is redundant if your connection picks itself up after a while. It's more a 'fallback' for big applications not to get upset when purely computer illiterate people complain.
    – insidesin
    Aug 21, 2015 at 14:31
  • 1
    Maybe add the option to save changes locally and sync them with the online app when the user next connects?
    – Yvonne Aburrow
    Dec 22, 2015 at 10:28

4 Answers 4

Reset to default
1

I see one problem with not having the "Checking in..." line: there is no feedback provided to the user weather his request to reconnect was "sent" or not. If you just stay with the 'Offline' label in case of failure then the user may figure that this "button" just doesn't work, or that "something is stuck". If you took Gmail as example, the counter value there is doubled with each unsuccessful reconnect request (either manual or automatic).

So, as I see it, if you decide to give the user the manual reconnect option, you should also take care of the feedback issue in some manner.

Improve this answer
0

First, be sure to provide some feedback to the user: I like the "you are offline" message. Second, give the user the idea of being in-control: the button "reconnect" is good (even if an auto-re-connector technically would do the best job). Third: the system should try to re-connect automatically (as gmail does). Just in case the user is not in front of the screen. When he will come back the system will run routinely: not bad ux provided. My opinion is to have, where possible, a contact point with the help online. It gives the idea that the user is not alone. Best would be an help through a twitter account

Improve this answer
0

In your situation the count down might be unnecessary. Especially since the app is going mobile, the user would want as little clutter as possible on their (possibly tiny) screens. A solution to indicate that changes weren't saved back to the server would be a good addition as you and Yvonne suggest.

Improve this answer
0

I recently found a great example that demonstrates how to alert offline status that shows reconnecting countdown using Offline.js

enter image description here

and Offline.js Static notification.

enter image description here

Related discussion could also be found here: How to tell user if they are offline or online?

Improve this answer

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.