11

I am writing an app which heavily depends on having a connection to the host.

The app works fine with no connection it just doesn't send anything up or down.

Because it's a business type app the users NEED to be able to easily see when they have a connection.

I was thinking of using something simple like...

  • Red = no connection to internet.
  • Yellow = connection to internet but no connection to host.
  • Green = connection to host.

I was thinking of something really simple like putting a coloured circle into the status bar but I'm not sure that's even possible. (currently a question on SO).

I am looking for suggestions of other possible ways of doing this. Currently I'm just changing the colour of the navigation bar (until I can find something better). Changing the nav bar is too garish and confusing when using.

2
  • Is there any default data shown when there is no connectivity?
    – Mervin
    Jan 17, 2013 at 16:11
  • Yes, data is cached when it is downloaded so that it can be used when offline. The problem is that the app sends info back to the server and in the client spec they require some way of knowing when a connection is available.
    – Fogmeister
    Jan 17, 2013 at 16:14

8 Answers 8

13

You shouldn't rely on just color for this. Most colorblind people cannot differentiate red and green, especially on very small icons. One possibility is to have some sort of network connectivity symbol to show when the connection exists and put a large red "X" over it when the connection is off. Use color to reinforce the symbol shape. Even spell out "Connected" and "Disconnected" if you have the space.

4
  • Thanks, I'll give some thought to that. It may make it easier than my original approach too :D
    – Fogmeister
    Jan 17, 2013 at 16:19
  • +1 for the special char and simplicity (connected/disconnected only, without any semi-states like connected to internet but not to the host). Jan 18, 2013 at 13:47
  • 1
    Just another note on this. I was demoing the app to one of the guys at work. He asked me why it was downloading data when it didn't have a connection because the nav bar was red. The nav bar was actually green (he's red green colour blind). I definitely will be using something other than colour to display this now. :-)
    – Fogmeister
    Jan 18, 2013 at 21:05
  • 1
    Nothing like directly observed evidence to reinforce the concept! ;-)
    – obelia
    Jan 18, 2013 at 21:14
4

You should ask yourself what you expect the user to do with the knowledge of being connected or disconnected.

Will the user experience inconvenience when disconnected? Does he have to adjust his behavior when he is disconnected?

You mention the state of being online, but disconnected with the service. Unless there is a way for the user to remedy this, I would not show this state at all.

I have recently designed a business app that works on- and offline and syncs whenever a connection is present. The user is never notified of the connection unless it impacts his actions (in which case we halt him and notify him that his lack of connectivity is an issue).

3
  • If the app was my own I would agree entirely. As it is I've managed to get down to this from previously having an "offline mode" where the user has to restart the app to put it into "online mode". The spec is now that the user has to know what state the app is in all the time.
    – Fogmeister
    Jan 18, 2013 at 15:48
  • I see. In that case I support Obelia's approach. On a side note. You are able to put something on top of the iOS status bar. The Gmail app does it on launch to show you a short 'Updated' message. However, it's good practice not to hide or obscure the status bar too long.
    – Martin
    Jan 21, 2013 at 8:23
  • Thanks, I'll look into an icon over the status bar or something.
    – Fogmeister
    Jan 21, 2013 at 8:45
2

What are your constraints within the app with regards to adding additional gui elements? I would personally incorporate a few simple icons that change when other stages of connectivity are reached.

A grey dot for no connectivity.

The grey dot faded with a circle of dots around, each one turning amber in succession and then fading out to represent a connection being formed.

The dots around fading out and the center dot turning green as a connection is made.

This way a lack of connection is subtle but noticable, people will be aware when a connection is being made and the transfer to a full connection is subtle, simple and effective.

Of course this depends on your constraints.

2
  • Thanks. The only problem with adding a GUI element to the "actual" screen is that the app uses several screen to navigate around and I don't want it to crash into other UI. I could possibly create a class to subclass... Hmm... I'll have a think. Thanks
    – Fogmeister
    Jan 17, 2013 at 16:32
  • Would it be possible to drop opacity on certain areas to reflect connectivity? Full blown colour for full connectivity and a faded interface otherwise?
    – Jon Hick
    Jan 17, 2013 at 16:38
2

A few years ago, when faced with the same issue, I settled upon a pair of icons which looked like a cable (e.g. a power extension cord) with a plug in the middle.

  • Disconnected: the plugs were pulled apart showing that it was unplugged.
  • Connected: they were plugged together.
  • No Internet: the plug on one side was completely gone, leaving only a plug on the other side (with nothing to plug into).

The users never had any questions about that ... the symbols seemed natural enough.

You can also use color (light green for connected, pink for disconnected) but you should not rely upon color.

2

Although not a direct answer to your question, I would like to pose two learnings from my experience with the creation of SalesChamp, a network-dependent app:

1) In the context of the app it doesn't really matter to the user whether she can connect to the internet but can't connect to the host. In both cases the app can't synchronize. It does matter if you want to explain to the user that the app server is down (so to notify her that she can't do anything about the problem), but most platforms already notify the user of this (like the connection bars in the top-left corner on iOS). Using multiple colours / statuses is potentially confusing. Simply state that the app can't sync and then offer a way to the user to find out more if she wants.

2) When doing business apps (or any other type of app that handles important data), make it absolutely clear that there is unsynced data. Just notifying that the connection to the server is down is not enough, the user won't know if there's unsynced data or not. It could be that the data was sent before the connection went down. Make it clear that there's unsynced data and allow a way to re-sync.

See the example button below, which we only show when there are records that couldn't be synchronized automatically:

Example of a synchronize button with indicator of number of unsynchronized records

1

Like the other answers given, using color alone does not seem to be enough.

How about a tri-state icon with three areas that represent the user, the internet, and the app server? (each connected by plugs / cables / lines)

So, to model the cases you mentioned:

User--World--Server
User==World--Server
User==World==Server

Color could reinforce the states.

1

You need to deside what does depend on connectivity - data, actions, etc. If data, user should know that data is obsolete or unreliable so indication should have influemce on displaying data. If action, user should see that some actions (buttons, etc.) are unavailable. And so on. Application can have some icon or image reflecting connectivity status somewhere in right bottom of status bar, but it's some kind of diagnostics but not really important information. Important information is not about reason but about functionality and data.

0

It appears to me that you only have two states: connected or not connected. Three colors doesn't make sense, especially since the middle state (partially connected) means essentially not connected.

As others have suggested, I would have a connection symbol that has a normal state, and an error state that perhaps turns red when there's no connection.

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.