14

Offline Mode: Should we disable or hide inaccessible UI?

over 5 years ago from , StudyBlue

When an app goes offline, some functions will be inaccessible, while other functions will still work. How should we treat those inaccessible elements?

Hide them: "We should hide elements that don't do anything offline. Why waste pixels showing greyed out things that I can't use?"

Disable them: "We should just grey-out elements that you can't access offline. Don't disorient me with your disappearing UI."

Been wrestling with this for a while, thanks community!

19 comments

  • Miguel Solorio, over 5 years ago (edited over 5 years ago )

    There's nothing worse than hiding elements where users would expects things to be, even if they are inaccessible. It's like catching the bus at your regular stop, but when you arrive the stop is no longer there because "Well, this stop is closed this week, let's just remove it".

    Show a notice somewhere that is always visible, informing them that they are "Offline". I've seen apps that make sections accessible even during offline mode but will show a message after it fails to load content, because sometimes you're just going through a dead spot and you may re-connect. This also gives the user a sense of manual progression, like a reload button, because when it's disabled then you have to rely on the app to start working when your back online, but that isn't guaranteed or clear when you disable things.

    21 points
    • Nicholas HendrickxNicholas Hendrickx, over 5 years ago

      That bus stop sign comparison is great, I'll use that one to bring my point across next time.

      2 points
    • Devon LatzenDevon Latzen, over 5 years ago

      Thanks for a great analogy Miguel!

      Regarding apps that disable nothing, but throw an error when you press a button: I like the idea of giving the user a sense of control, however it might be frustrating to "guess and check" to find out what is still working.

      You make a really convincing point that we shouldn't be hiding things the user has come to expect. Even if the bus isn't coming, you should still know where it would be under normal circumstances. Communication seems to be the key here, let them know that things are disabled because they are offline, but don't make things disappear!

      0 points
  • Alec LomasAlec Lomas, over 5 years ago

    Firmly in the disable camp. Agree with the offline notification as well!

    3 points
  • Jake Archibald, over 5 years ago

    What does it mean to be offline? It could mean no signal to a router or cell tower, it could mean the router/tower has no connection to the ISP, or a broken proxy, or the destination server is down, or returning errors.

    Or an item in the chain could just be really slow, like infinitely slow.

    The device only knows it's offline if it has no router/cell connection. Other than that, the only way it can know it can get a response from the server is to try, and see what happens.

    Disabling items when you're certain there's no connectivity is ok, as long as the state change isn't disruptive visually, as the user may be moving in and out of connectivity frequently.

    Some actions don't need disabling, but can instead be queued, such as sending an email or chat message. The native Twitter app is pretty good at this.

    Not a lot of apps do offline well, so there's not a lot of user trust here, especially on the web, so if the connection is down, or an action fails, doing something to reassure the user that their data won't be lost is a real win.

    2 points
  • Ed AdamsEd Adams, over 5 years ago (edited over 5 years ago )

    I don't think this is really as simple as one or the other. If the application has an entire UI component — let's say a menu bar — that is useless if the app is running offline, then that part should probably be hidden. However, I can't really think of any apps where that's the case. There's almost always still some buttons in most apps that you can still interact with.

    I think it could be bad if some elements were hidden and in doing so ruined the layout and positioning of other elements.

    I often interact with bits of UI out of muscle memory — stuff I've tapped them so many times I just know where it is without reading. I bet most people do the same with apps on their home screen, you're used to X icon being in a specific place so you automatically put your finger there — and it'd be really annoying if the proverbial rug was swept out from under my feet. If I accidentally tap something else because the thing I wanted is in a different place because parts of the UI are hidden, that could be a UX issue.

    In those cases, I'd say disable.

    2 points
    • Devon LatzenDevon Latzen, over 5 years ago

      Thanks Ed, I like what you said about muscle-memory, that a user obviously isn't thoroughly examining the UI every time they use the app.

      1 point
      • Ed AdamsEd Adams, over 5 years ago

        I thought of another bit of muscle memory UI that's always frustrating: in Google Search when you want to go from Web to Images, but on occasion they put the Shopping button in the place where the Images button usually is. I just did it now and it irritated me enough to come find this thread and complain about it.

        1 point
  • Nicholas HendrickxNicholas Hendrickx, over 5 years ago

    This discussion comes up a lot when working on our product. It goes further than just the offline state of an app. Some user actions could enable or disable entire sections of a page.

    In most cases, we agree to go for the "disable approach", as it gives users a hint of which features or options can be available if they take the necessary actions. By disabling elements, you also create the possibility to explain why that element is disabled, right there in the context where it makes sense, since users can see what you are talking about, albeit disabled.

    1 point
  • Kevin SuttleKevin Suttle, over 5 years ago

    You're thinking about this in the wrong order. Assume the user is offline. Treat the network connection as a progressive enhancement layer.

    https://www.talater.com/upup/getting-started-with-offline-first.htmlhttp://offlinefirst.org/http://alistapart.com/article/offline-firsthttp://hood.ie/blog/say-hello-to-offline-first.html

    1 point
    • Devon LatzenDevon Latzen, over 5 years ago

      Very useful links, thanks Kevin. Mind-expanding quote from the Hoodie article: "We can't keep building apps...where a temporary disconnection or slow service is regarded as a problem and communicated as an error."

      1 point
  • Kurt Cunningham, over 5 years ago

    Disable. I also like to add a tooltip if it is a desktop application and inform the user that the feature was disabled because they are offline right now.

    0 points
  • Ryan MurphyRyan Murphy, over 5 years ago

    Disable, you want offline users to know what they're missing. obvs w/ a notification too.

    0 points
  • shown lva, over 5 years ago

    It seems like you’re listening up get Yankee just go away help strains ado around noon so that one more need kill ok one-gun care KU's last 1i need kill was conducted through here a little bit okay Runic who has awoken just d and I'm going to hit my boss okay area keep are to me yeah ha-ha Kids line seriously talk to climb I'll are clear here did not me of this are you kidding me that 43 rock are keep the media's huh okay some getting some permit anywhere from these yes on the cash he is I want some armor. http://www.idolizeadvancedeyeserumfacts.com/brain-r8/

    0 points
  • Todd SielingTodd Sieling, over 5 years ago

    In general, disable is better than hiding, for reasons many others are describing very well.

    If you have entire groups of functionality that all live together in the UI, you can hide them under a general label that says they are unavailable because you're offline. But if the unavailable functions are spread across the UI, you should definitely just disable and try to let people know why they're disabled.

    0 points
  • Jess Chen, over 5 years ago

    I'll go with the idea of disabling them. But just make sure you add an obvious notification/ icon/ message on top (or somewhere reasonable), to inform the user :)

    0 points
  • wojtek w.wojtek w., over 5 years ago

    I'd say hide them and show a message at the top: "You're currently offline. Some functions might not be accessible. They will be available once you reconnect to the internet."

    0 points
    • jeremy silverjeremy silver, 5 years ago

      I would still display a message that the user/device is offline and some features are disabled, but I would leave the UI intact to show which features are disabled.

      Hard to answer without knowing the app or features.

      0 points