Open janl opened 10 years ago
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".
strikethrough wifi signal icon?
Or maybe just that:
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.
@m4p that's the kind of thinking I like the sound of.
But then it's still called "Offline first". Let me have a thought about it on the weekend.
Use the OS X Wi-Fi icon. Maybe even the animated version could come in handy.
How about a simple pause icon to avoid using offline too literally? http://thenounproject.com/search/?q=pause
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 https://github.com/offlinefirst/ux-examples/issues/1#issuecomment-33798140
- 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.
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.
As a possible design principle:
The icon should assert failure to communicate, not the lack of a network.
Because:
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:
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.
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.
There's also a collection of approaches to this at http://offlinestat.es.
@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.
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
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