Missing UI convention: iconography and language to communicate offline state.

[janl]

Is there a generally accepted icon that represents “offline” that I might use in place of a 32px avatar? +@janl @jaffathecake — @Rem in https://twitter.com/rem/status/428949228917125120

@janl and offline doesn’t particularly mean “WARNING: YOU ARE OFFLINE” @jaffathecake — @Rem in https://twitter.com/rem/status/428949698050023425

[remy]

i.e. a "disconnected plug", to me, suggests something's wrong and I should plug it back in.

I'm thinking more: "you're in an offline mode".

[janl]

http://thenounproject.com/search/?q=offline via https://twitter.com/rem/status/428950428148305920

[benjaminfritz]

strikethrough wifi signal icon?

Or maybe just that:

[m4p]

maybe offline is just the wrong metaphor to start with. it might help to rather think along the lines of "unsynced" or "not yet published to the world" to come to better iconic representations that don't convey the "something is broken" idea.

[remy]

@m4p that's the kind of thinking I like the sound of.

[benjaminfritz]

But then it's still called "Offline first". Let me have a thought about it on the weekend.

[michielbdejong]

1. the unsynced part is similar to an unsaved document in a text editor or word processor. they often show the document name in bold, or with an asterisk before it - or only show the filename at the bottom when the document is saved. i like that last option there.
2. it's also similar to an unsynced Dropbox or GoogleDrive folder. they show up witih a sync icon when unsynced, and without it when synced.
3. you may also want to know if connectivity is low, even if you don't have unsynced changes. i like the "signal metre with a cross" idea/direction there, from @jakearchibald there (ref https://twitter.com/jaffathecake/status/429007677885140992)
4. the only one that's really important to be warned about is if connectivity is low and you have unsynced changes. what we did in https://github.com/remotestorage/remotestorage.js/ (ux design by @jancborchardt) is to grey-out the sync symbol, and write 'offline' next to it. that only works if you already have a sync symbol - it's applying the cross from 3. to the sync icon from 2. in a way.

[dannyhope]

Use the OS X Wi-Fi icon. Maybe even the animated version could come in handy.

[benjaminfritz]

How about a simple pause icon to avoid using offline too literally? http://thenounproject.com/search/?q=pause

[jancborchardt]

I would not use the Wi-Fi icon because, well, that stands for Wi-Fi.

What do you think about the iconography I suggested in offlinefirst/ux-examples#1 (comment)

• disabled: grey, with white double arrows in it
• syncing: blue, with white double arrows in it, smoothly and slowly spinning (spinning too fast will distract)
• online: green, with white checkmark in it
• error: red, with white x in it
• offline: grey, with white cut circle in it (or alternative »offline« symbol – grey because being offline is not an error so it should not be red)

Something like this:

The offline icon directly corresponds to the »sync« icon. Being the circle without arrows, two separated halves like a »disconnected« icon.

[gr2m]

As a user of an app, I don't actually care too much whether I'm working online or offline. I agree with what @michielbdejong says about unsynched changes, that's the only thing that has to be communicated clearly, and for that it would be nice to have some convention that could be used across apps. The icon could be independent of the reason why the data is not synced, but could have some additional, app/context-spefic information next to it, or show it as a tooltip or what not.

I didn't came up with an icon, so I show a bar in these cases in minutes.io

Especially when closing the window, the user should be aware that there are changes currently living only in this browser, on this device, that won't show up anywhere else, until it's synchronised.

[dannyhope]

As a possible design principle:

The icon should assert failure to communicate, not the lack of a network.

Because:

• We can’t truly know that there’s no network.
• (as @gr2m suggests) people care more about data failing to sync

[jancborchardt]

Yeah, the states »Everything is synced« and »Stuff’s syncing« and »Offline« are actually not interesting because everything’s fine. The only situations people need to know about are potential problems:

1. unsynced changes
2. you’re not connected to your account (which is very similar to 1.)
3. any sync/comm error which occurs when being online

[jakearchibald]

Completely agree with @dannyhope, communicate failures rather than state.

To be fair, that's what @remy was looking for in the original post. In that particular case I'd have just gone for the default "null" avatar, if the avatar is considered non-essential.

Is something fails to save/sync, you'd probably want something more descriptive than an icon, then the icon becomes redundant. If !navigator.onLine, their OS will already be showing an icon for that.

[deefactorial]

Google has a really good opensource icon set. http://google.github.io/material-design-icons/
I use the file icons. They are a series of cloud icons with up/down arrows to indicate push and pull replication and one with a slash to indicate offline status. The condition I display an error dialog is if the the user tries to logout with unsynced data.

[tlvince]

There's also a collection of approaches to this at http://offlinestat.es.

[brandondrew]

@jakearchibald data that has not yet replicated is not necessarily a failure. Wouldn't you want some (probably subtle) indication that there is data that needs to be pushed to the server? I think it's much safer to communicate state. It doesn't have to be in the user's face; it can be very unobtrusive. Failure, of course, needs to be much more in the user's face.

[victorCloudwebCl]

What about "local" (as in localhost) or "private"? I think if we focus in what is in there instead of what is missing (Sync, connection, published status) we can... Do more stuff