Page MenuHomePhabricator

Design and build indicators for "offline" mode
Closed, ResolvedPublic

Description

We want to indicate to readers when they are browsing offline, as functionality will be different than the full site. This could include color changes, snack bar, greying out some features, etc.

Right now, we have a snack bar that says "offline," but do we want something more overt?

We'll be educating readers on how this works as they're using it, so it's important that it be clear.


When Offline
https://zpl.io/ZFd824

When online
https://zpl.io/19VJYX

  • Bar shows
    • Only shows in the article page
  • different bars for offline and online

Event Timeline

atgo renamed this task from Polish "offline" snack bar and determine if we want more offline indicators to Design and build indicators for "offline" mode.Oct 17 2016, 9:37 AM
atgo created this task.
atgo triaged this task as Medium priority.Oct 17 2016, 6:12 PM
Nirzar updated the task description. (Show Details)
Nirzar moved this task from Sign-off needed to Blocked on the New-Readers board.

Proxying comment from T148392: Finish "saved" screen:

@Nirzar What happens to the offline bar when you're not on an article? No chevron, no opening drawer?

That's the only missing piece.

Also, @Nirzar @atgo what happens when you click "Update now"?

Nothing? Spinner? Close drawer?

What happens to the offline bar when you're not on an article?

I changed the text in the bar to be "readng offline" instead of offline browsing to suggest this article is being read offline. the bar is specific to article page that is from your saved pages.

bar is not a persistent indicator of you being offline.

what happens when you click "Update now"?

my bad.. a spinner would be good with "last updated text changing to "updated just now" if the device is offline, we can disable the "update now" button.

Jhernandez moved this task from Blocked to Doing on the New-Readers board.

After a chat with @Nirzar this needs some more thought, given there seem to be two aspects to this bar, one being the connectivity status (online / offline) and the other one signifying again that the page is saved and was loaded from memory and not network.

I expressed my concerns that 'Reading offline' seems to imply that you don't have an internet connection, when in reality you may have it, but the article came from memory.

From description, this task is about the connectivity status:

We want to indicate to readers when they are browsing offline, as functionality will be different than the full site. This could include color changes, snack bar, greying out some features, etc.

Right now, we have a snack bar that says "offline," but do we want something more overt?

We'll be educating readers on how this works as they're using it, so it's important that it be clear.

But with the new mocks it is removing the connectivity status thing (given it'd only show on article pages if the page is saved), so it seems like this needs more discussion for the moment (cc @atgo)

I'm moving this back to product until everything is clarified.

The feature as currently implemented and live is this:

  • I'm losing and gaining internet connection while on-site
  • Wait for a few seconds

offline-bar.gif (593×349 px, 41 KB)

Nirzar updated the task description. (Show Details)
Nirzar moved this task from Sign-off needed to Blocked on the New-Readers board.

Updated the designs to address concerns raised here. the description has new mocks

@atgo @ovasileva is this planned? need to move it to product backlog or engineering backlog. done from design

This should be fixed by 80a4bb7e4 and it is deployed.

Going to be testing. Please test it out @atgo @Nirzar

looks great! Thanks Joaquin.