This task is about signifying to users:
- When they are offline in Wikipedia, and
- If they have offline compilations available (if any have been downloaded).
NOTE: Supported as a finding from usability testing conducted in T167129.
| Finding | Users in both studies found it unclear whether they were on/offline. |
| Proposed solution | It would be beneficial to include clearer messaging upfront. |
Proposed UI:
1. A card appears on the Explore feed when they are offline
See mock above (redline version on Zeplin: https://zpl.io/bolqgk2 )
- 2. An sub-status bar appears across the app advising the user that they are "Browsing offline".**
Per mock above, the status bar and sub-status bar is the Accent30 (dark blue) color globally in the app.
- Clarifying the expectation for the status & toolbar background color in the article stack both online and offline **
| (Light mode) Scenario | Initial Status bar (and sub-status bar) color | Status bar color transition upon scrolling down | Initial toolbar color | Toolbar color transition upon scrolling down | Toolbar color transition upon scrolling back up |
|---|---|---|---|---|---|
| Online in an article with a lead image | Transparent | rgba (0,0,0,.26) | Gradient scrim | N/A, toolbar scrolls off ![status and toolbar transition 1a [online-lead-img-scrolldown].gif (640×360 px, 550 KB)](https://phab.wmfusercontent.org/file/data/3s2gj3ix4aooywyicw6s/PHID-FILE-s7ndqao23gmd4637pod2/status_and_toolbar_transition_1a_%5Bonline-lead-img-scrolldown%5D.gif) | Base90 ![status and toolbar transition 1b [online-lead-img-scrollup].gif (640×360 px, 708 KB)](https://phab.wmfusercontent.org/file/data/s4fwahgyb3vnjcfmvllk/PHID-FILE-gx2aakr4mp4yxsoo2gwo/status_and_toolbar_transition_1b_%5Bonline-lead-img-scrollup%5D.gif) |
| Online in an article with NO lead image | Transparent | rgba (0,0,0,.26) | Base90 | N/A, toolbar scrolls off ![status and toolbar transition 2a [online-no-img-scrolldown].gif (640×360 px, 330 KB)](https://phab.wmfusercontent.org/file/data/xyqt4rljmtcpnu7qznch/PHID-FILE-gs4veixx5aoo5zy6ltng/status_and_toolbar_transition_2a_%5Bonline-no-img-scrolldown%5D.gif) | Base90 ![status and toolbar transition 2b [online-no-img-scrollup].gif (640×360 px, 314 KB)](https://phab.wmfusercontent.org/file/data/smpkyk32qbp4enzgczau/PHID-FILE-4gk6mg6m6ddsroe7pwxg/status_and_toolbar_transition_2b_%5Bonline-no-img-scrollup%5D.gif) |
| Offline in an article with a lead image | Accent30 | Accent30 | Gradient scrim | N/A, toolbar scrolls off ![status and toolbar transition 3a [offline-lead-img-scrolldown].gif (640×360 px, 524 KB)](https://phab.wmfusercontent.org/file/data/2f5fcicwjjnosuy5pm3c/PHID-FILE-bpvwh76niweoparqj54w/status_and_toolbar_transition_3a_%5Boffline-lead-img-scrolldown%5D.gif) | Base90 ![status and toolbar transition 3b [offline-lead-img-scrollup].gif (640×360 px, 743 KB)](https://phab.wmfusercontent.org/file/data/js4r3axdapsko2ytoqmd/PHID-FILE-cgmgrfqravlyudeippmg/status_and_toolbar_transition_3b_%5Boffline-lead-img-scrollup%5D.gif) |
| Offline in an article with NO lead image | Accent30 | Accent30 | Gradient scrim | N/A, toolbar scrolls off ![status and toolbar transition 4a [offline-no-img-scrolldown].gif (640×360 px, 322 KB)](https://phab.wmfusercontent.org/file/data/lbiee7liflsme3wryxsh/PHID-FILE-6mhuwlkuwlvly5xoql2b/status_and_toolbar_transition_4a_%5Boffline-no-img-scrolldown%5D.gif) | Base90 ![status and toolbar transition 4b [offline-no-img-scrollup].gif (640×360 px, 363 KB)](https://phab.wmfusercontent.org/file/data/cmoefrpejyh5zn5bqxoi/PHID-FILE-lhch7pm5433kvmkqgpxu/status_and_toolbar_transition_4b_%5Boffline-no-img-scrollup%5D.gif) |
| All other NON-article screens (offline or online) | Accent30 | Accent30 | Accent50 | N/A as toolbar remains fixed | N/A as toolbar remains fixed |
QA steps
Pre-requisite for card to appear in the feed is that the Offline Library contains one or more article packs.
- Open the app to the Explore feed, note that the regular feed cards should appear as normal (In the news, featured article of the day, etc)
- Go offline (turn on airplane mode). It is expected that the feed should now update to only show cards that can be interacted with whilst the user is offline - including the appearance of a "Manage Offline Library" card, as well as the 'sub-status' bar showing the user they are "Browsing offline".
- Delete all downloaded article packs from your Offline Library. It is expected that the feed should no longer show the "Manage Offline Library" card (since there is nothing to manage), but the sub-status bar showing "Browsing offline" is still showing.