Page MenuHomePhabricator

Update visual design of storage usage info panel in the Offline library, including dark mode display
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
RHo
Aug 11 2017, 12:12 PM
Referenced Files
F10416290: image.png
Oct 24 2017, 6:31 PM
F10416287: image.png
Oct 24 2017, 6:31 PM
F10182605: image.png
Oct 13 2017, 2:25 PM
F9959464: image.png
Oct 2 2017, 4:01 PM
F9958310: image.png
Oct 2 2017, 2:07 PM
F9032465: A06v - Offline libary with caption to settings.png
Aug 11 2017, 12:12 PM
F9032478: A06v - Offline libary with caption to settings.png
Aug 11 2017, 12:12 PM
F9032473: A06v - Offline libary with caption to settings - Dark mode.png
Aug 11 2017, 12:12 PM

Description

NOTE: Supported as a finding from usability testing conducted in T167129

Problem

Initial visual design of the storage info was hierarchically confusing since the headline data point (storage used by Wikipedia app) was not the first bar graph element. The bar chart was also not color contrast compliant.

Proposed update

Current:
A06v - Offline libary with caption to settings.png (1×720 px, 116 KB)
Proposed:
A06v - Offline libary with caption to settings.png (1×720 px, 115 KB)
Proposed in dark theme:
A06v - Offline libary with caption to settings - Dark mode.png (1×720 px, 114 KB)

Notes on update to design:

  • Simplified the file space used text to a single font-size and weight (Material Title style - Roboto Medium 20sp) in color Base10 (Light mode)/Base90 (Dark mode)
  • The text-string "used by Wikipedia" is shown in the same color as the file space amount
  • Stacked bars order shows amount of space used by the Wikipedia app first
  • Add a 0.5dp white right border on each bar to better visually distinguish between each bar
  • Bar colors are shown in graduated Base colors (Light: Base10 for Wikipedia --> Base30 --> Base100 / Dark: Base100 for Wikipedia --> Base30 --> Base10)
  • Similarly the space used by the Wikipedia app is shown first in the legend, with colors swatches updated accordingly
  • Simplified legend text to all use the same Material caption style (Roboto Regular 12sp) in same color (Light mode=Base10, Dark mode=Base90)

Event Timeline

Change 381001 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Tweak: Update Offline Library storage space used text

https://gerrit.wikimedia.org/r/381001

Change 381011 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Further updates to disk space usage UI

https://gerrit.wikimedia.org/r/381011

Change 381001 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak: Update Offline Library storage space used text

https://gerrit.wikimedia.org/r/381001

Change 381011 merged by jenkins-bot:
[apps/android/wikipedia@master] Further updates to disk space usage UI

https://gerrit.wikimedia.org/r/381011

Hi there, just a few visual design tweaks:

  • “used by Wiki…” text should be Caption style text (Roboto Regular 12sp)
  • missing outline around legend dots
  • unexpected white space appearing at start of bar chart (if Wikipedia space = 0, then there shouldn't be a bar which this is presumably the RHS white border for)
  • change right border on each bar to use color Base70 since the white is coming out too thicker in actual screenshots
  • In dark mode, the 'free space' bar color should be Base10 (#222)

image.png (642×1 px, 200 KB)

Also, per comment on task T166559#3548888 - the text string should be updated to "used by Offline Library"

Dbrant added subscribers: Mholloway, Dbrant.

@RHo

  • For the "free space" bar, is there a meta-color definition in our palette to which this color corresponds?
  • What's the color of the outline around the dots?

hi @Dbrant

  • Bar colors are from the WMF color palette but do not have 'meta-color' definition since they are a new component for chart color gradations.

If it makes sense to define now, I would propose the following - whereby we can use Chart_gray_shade1, Chart_gray_shade4 and Chart_gray_shade7 as the 3 bar chart meta-colors, so the "free space" color value on Light would be Base10, and on Dark Base100.

image.png (560×1 px, 89 KB)

  • Color outline on dots and bar chart can use Chart_gray_shade5 (i.e., Base70 on Light, Base30 on Dark).

Change 381822 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Final design tweaks to disk usage view.

https://gerrit.wikimedia.org/r/381822

Change 381822 merged by jenkins-bot:
[apps/android/wikipedia@master] Final design tweaks to disk usage view.

https://gerrit.wikimedia.org/r/381822

Hi @Dbrant - Everything looks good now except the border around the stacked bar chart:

image.png (440×2 px, 99 KB)

hi @Dbrant

image.png (560×1 px, 89 KB)

  • Color outline on dots and bar chart can use Chart_gray_shade5 (i.e., Base70 on Light, Base30 on Dark).

Change 385981 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Design tweak: disk usage bar color.

https://gerrit.wikimedia.org/r/385981

Change 385981 merged by jenkins-bot:
[apps/android/wikipedia@master] Design tweak: disk usage bar color.

https://gerrit.wikimedia.org/r/385981

LGTM on light & dark

image.png (1×1 px, 153 KB)
image.png (1×1 px, 159 KB)

Tested on Pixel (Android 8.0.0), Wikipedia v2.6.203-alpha-2017-10-23

If i need to verify this, I need some steps to find these screens pictured above.

hi @Nicholas.tsg - please see steps below:

  1. Go to the "Offline Library" (aka Offline Compilations) by selecting the overflow menu item on the Explore feed.
  2. Confirm the visual design on the default Light theme mode is as per design.
  3. Return to the Settings screen and switch the them to Dark.
  4. Confirm the visual design on the Dark theme is as per design.