7

I have two versions of my application:

  • online: Requires Internet connection to function properly
  • offline: Can be used offline, for instance in the plane

QUESTION: How to represent the fact that an app can be used offline?

Examples seen in the wild:

OfflineOfflineDivided lightening bolt

Comment asked for my device's connected/disconnected icons, here you go: Material Design connected/disconnected

  • 1
    Not sure if this helps, but this reminded me how Mirc has used a lightning bolt as "connect" icon and divided lightning bolt as "disconnect" icon. – Joonas Jun 5 '15 at 10:50
  • 1
    I'd suggest starting by researching what your target device(s) use to represent connected and disconnected, so that it'll be familiar to users. I suspect the best answer will be a WiFi icon and a crossed-out WiFi icon – user568458 Jun 5 '15 at 11:25
  • @Joonas: Added to the "Examples" section of the question, thanks! – Nicolas Raoul Jun 5 '15 at 11:43
  • That's a weird looking wifi icon IMO. I was going to say that an unplugged cable might be more well known, but these days that's probably not true. – curiousdannii Jun 5 '15 at 13:29
  • If a cloud is online... Could a puddle be offline? :) – Dom Jun 8 '15 at 15:44
2

Taking the line very literally. I don't think these are particularly convincing but perhaps it's food for thought.

available offline

0

The icons need to be contextual to your base use-case and the platform. Assuming the platform is a mobile-device and imagining a user-centric kiosk app, I would use variations on a theme:

  • An offline kiosk-user icon: kiosk-version or "offline" app icon Kiosk Version at 32px
  • And a wifi-required icon: Wifi-required version of app icon Wireless required version at 32px square

I would keep the message clear by modifying no less than 33% of the icon to indicate the difference, but no more than 50% to preserve continuity. Adding color would help, but if the requirement includes section 508 accessibility, color is a nominal factor.

-1

I think your idea of the book icon vs power button isn't bad. You could probably find something a bit simpler and easy to recognize at small size using the same concept.

My first idea was to use a battery for offline, even though it's used for power. On a website or app, it could make sense since everybody knows the laptop or device is unplugged when they see the battery icon. So maybe you can use that idea too.

And as other examples, I found these icons:

Icons for offline/online

You could use a laptop icon and maybe move the connection symbol in and out of it to mean it's online of offline. Or similar symbol and simply add the well known connection symbol or a electric plug symbol.

You could use different colors code as well to add more emphasis on the connection part of your icon; for example the connection part could be pale gray when offline, and colored when online.

People get used to these symbols, no matter what you'll choose. As long it's visible at small sizes.


PS: I didn't draw these icons, you'll need to purchase them or do your own version if you want to use them. Most of them are low resolution files from stock image sites, and some were modified slightly.

-4

guess what. I have a brilliant idea.

Draw the following text as icons:
"Online Version" and "Offline Version".

Tada, problem solved. Please upvote.

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • 1
    I'm sorry but your answer doesn't warrant an upvote, in fact I down voted it because I dont think it answers the OP's question. If you can make an example or expand on it I would be more likely to remove my down vote and upvote your answer. – Mᴏɴᴋᴇʏ Jun 5 '15 at 23:07
  • Not a bad idea in fact. We have actually considered adding "OFFLINE" to the offline version, with the unmodified icon referring to the online (normal) version of the application. We still hope to find a more graphical representation though. – Nicolas Raoul Jun 8 '15 at 1:29
  • 1
    This is the best answer so far. Try not to sound like a jerk and you'll get more votes. – plainclothes Jun 8 '15 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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