A visual metaphor for offline enabled webapps to communicate their state with the user.

offlinefirst / ux-examples

A collection of UX/UI examples of handling “offline” well or not well at all

http://offlinefirst.org

Apache License 2.0

166 stars 2 forks source link

A visual metaphor for offline enabled webapps to communicate their state with the user. #1

Open ryanramage opened 10 years ago

ryanramage commented 10 years ago

It would be nice to have a consistent way across apps to visually represent the state of offline/online, etc. I did a pretty poor prototype here: http://garden20.github.io/sync-status-icon/

Some definitions of states:

disabled: The user has not enabled offline support yet. The site/app acts like a traditional app.
online: The user has enabled offline support, and the backing store is available
offline: The user has enabled offline support, and the backing store is unavailable
syncing: The user has enabled offline support, the backing store is available, and data is replicating back and forth.

gr2m commented 10 years ago

it would be cool if we could somehow use the favicon for it, what you think? :)

That won't help for mobile as they usually don't show it, but if the icon becomes convention, why not use it on the favicon on bigger screens? I'd love to give that a try, I think modern browsers even support anymated gifs / pngs these days

gr2m commented 10 years ago

oh nice, check http://lab.ejci.net/favico.js/, works in Chrome & Firefox :)

jancborchardt commented 10 years ago

@ryanramage it seems strange that the rotated offline icon looks like a »log out« or »shut down« symbol. The offline icon as a whole also looks a bit cryptic.

Additionally, in the state changes, we should pay attention so it also works when you are color blind. That is, ideally both color and form change.

Maybe instead we just work with a colored circle, white icons in it:

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: sync-icons

What do you think?

tara-gibbs commented 10 years ago

Maybe the syncing icon could be animated so that it's clear that something is happening in the background?

gr2m commented 10 years ago

somewhat related: https://github.com/hubspot/offline – a little script + themable UI for online/offline indication

gr2m commented 10 years ago