2

What kind of feedback is appropriate to inform the user that he's actually offline?

I need the feedback to be simple, clear, understandable, user-friendly and corporate. But I don't know the best way to do it.

In detail:

This is an expense report application.

Input fields are automatically saved at each modification. Users can create an expense report while offline, but some features do not work in this case. For example: calculating a cost per kilometer ride.

So I wish, in this case, inform them that they are offline and that their actions are still possible, but limited.

This is an application for all professionals, regardless of their business sector. So it will reach a wide audience.

I would like feedback for offline-mode corporate but not aggressive. I don't want it looking like an error message. The expense report creation must be pleasant for the user even if it's limited.

I don't know what kind of feedback message would do the best experience : should I use an icon? Should I use a simple feedback like "no connection" or a full explanation stating what the user can still do or not ?

Improve this question
4
  • 1
    In order to get a good answer on your question, could you please elaborate? What is your current approach? Are you looking for a warning message, or rather an indication such as an icon?
    – Bart Gijssens
    Jul 3, 2015 at 9:51
  • With the expansion, you've given more about what your app is, but you haven't narrowed the UX question. Showing examples of designs that you've tried, or just possibilities will go a long way to getting good answers.
    – JohnGB ♦
    Jul 3, 2015 at 18:01
  • If your application still has functionality when offline, an explicit message would be helpful to the user. If the application requires connection for any useful functionality, then a simple "no connection" would suffice.
    – mginn
    Jul 4, 2015 at 19:02
  • Do not show an popup. Show it like facebook does it as stated in the answer of ThaSaleni
    – BlueWizard
    Jul 4, 2015 at 21:11

7 Answers 7

Reset to default
2

Here's some examples from our good friends at Facebook and Gmail. Personally I like the facebook approach, but it's really just preference.

enter image description here

enter image description here

Improve this answer
1

Be as obvious and explicit as possible. Near the top have show the online/offline status. It's a relatively important status, so make it stand out (but no need to take up too much space):

mockup

download bmml source – Wireframes created with Balsamiq Mockups

or

mockup

download bmml source

The "More info" link will bring up a popup with text:

When you are offline you can continue to work but certain operations are not available: the database cannot be updated...

....when you connect back online you can...

....to connect back online...

Clear explanations in the language your audience understands.

In addition to this, when offline the controls for the unavailable operations will be disabled to reinforce the offline status and give the user an idea of what will be possible when online.

You want people to know their online/offline status, know what it means, and know how that can change that status. And not worry about it.

Improve this answer
1
  • Maybe even only show the box when the user is offline; if they are online, everything is working normally
    – mginn
    Jul 7, 2015 at 22:29
1

Yesterday I was using the Spotify mobile app, and I had this offline feedback : spotify offline interface

translation "Your are offline. The page "Parcourir" requires connexion. Connect and retry." (sorry guys for my terrible English, but I do my best)

So, it's not exactly the kind of solution I'm looking for, but this, and all people answered me here on ux.stackexchange, helped me to find the kind of feedback I wanted : sketch of offline feedback

The idea is : a feedback message appears with an animation, using icon and color to show the users that it is an important alert (but not an error) and saying "You are actually offline. All your modifications are saved (or are still automaticly saved ?), but the feature "blablabla" (name of the feature) requires connexion."

The idea is, the user understand what is still possible to do, and what is not, and so he's free to go one the expense report creation with limited features, or can quit without losing the actions already done to finish later.

Improve this answer
1

Google docs has something like this - off of the top of my head I think it says something like "Your changes will be synchronised when you are next online."

I think you've managed to come up with a great solution with your alert - I would have suggested an alert (not necessarily in any alarming colours) that appears either when the app is started (if no connection is present) or when they go offline. The user cannot continue until the alert is dismissed and it says something like:

"You appear to be offline. Your changes will be saved and synchronised when you are next online. Functionality that requires a connection will be disabled until the connection is restored."

Once the user has read and dismissed this you then only have to make the functions that require a connection appear disabled when no connection is available. To cover for those who dismiss the alert without reading it you could also trigger the alert to appear when the user tries to access one of the disabled functions.

Improve this answer
1

enter image description here

A message close to the header and an option to retry. Slack handles this pretty well.

Improve this answer
0

I greatly prefer how the GPS application Waze does this. If you consider that navigation apps are on and offline periodically, showing an aggressive message would be much less pleasing than dimming the background and describing some state in the message in a friendly way.

waze screen

In your case, the button could read "Enter Report Offline."

Improve this answer
-1

"Offline" is a system concept and does not directly relate to a user goal

AFAICT the users goal is to ensure their data is saved

  • If disconnected then can display "Last saved 30 min ago", "3 records queued for save" so a user knows what the status is of their data. Adding a disconnected icon to this can make it explicit as to why. Also if make this UI a selectable item means can explain more about why offline.
  • If connected then during an update can communicate "Saved" after each successful commit of a users data entry (number of different UI's e.g. toast / update animation icon / text label "saved")
Improve this answer
6
  • On the contrary "Offline" does relate to the user goal, which is to ensure their data is saved, and in a timely manner. If all they received is "Queued for save" when they accidentally left their phone on airplane mode, no indication is given that they need to connect to the network. Also, if the application is downloads data, notifying the user that they are offline is better than just trying to download forever.
    – mginn
    Jul 4, 2015 at 21:11
  • @milesper Connectedness has only indirect impact on data state. One can be offline and completely up to date, yes? User needs to make an inferral and mentally map between their work and a network connection state. Which is the cognitive overhead rather avoid. Take example is "if the application is downloads data, .... just trying to download forever." system retry behaviour is something user should not have to care about. Just tell user data is stale and you're working to fix that: "last refresh 2 hours ago - retrying"
    – Jason A.
    Jul 4, 2015 at 22:00
  • So it's better behavior to just keep failing to refresh than to inform the user that they need a network connection to access something?
    – mginn
    Jul 4, 2015 at 22:19
  • In the infrequent case where a user does not know why data is growing stale then likely behaviour is that when data gets 'worryingly stale' a user will attempt to press on the stale data display (or go to assistance menu). A UI there can have useful diagnostics and guidance to resolution. On the flip side saying "not connected" is only actionable in the obvious cases (i.e. Airplane mode). And these are the cases where the user will easily understand why data is growing stale in the first place.
    – Jason A.
    Jul 4, 2015 at 22:39
  • Not necessarily—a user might be offline for a non-obvious reason, such as their phone has auto-connected to a wifi network that requires some agreement in a browser before allowing connect (I know I use these frequently). If the data just never loads, the user may assume the problem is in the app. If a message informs the user that they are offline, they know to diagnose the problem
    – mginn
    Jul 7, 2015 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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