Page MenuHomePhabricator

Update the Explore feed UI based addition of multilingual customization
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
RHo
Apr 17 2018, 6:24 PM
Referenced Files
F18831822: image.png
Jun 6 2018, 9:49 AM
F18831828: image.png
Jun 6 2018, 9:49 AM
F18831813: image.png
Jun 6 2018, 9:49 AM
F18831826: image.png
Jun 6 2018, 9:49 AM
F18831815: image.png
Jun 6 2018, 9:49 AM
F18824145: image.png
Jun 5 2018, 10:08 PM
F18824418: Tablet view .png
Jun 5 2018, 10:08 PM
F18824442: image.png
Jun 5 2018, 10:08 PM

Description

Background

This sub-task essentially separates the visual updates to the feed UI itself from the parent task to update the feed customization settings.

Proposed design

Invision prototype: https://wikimedia.invisionapp.com/share/F4GNQ7VWQXB#/288670073_FLOW-_ENABLE_SEARCH_IN_MULTIPLE_LANGUAGES

Redline mock on Zeplin: http://zpl.io/adM7Qkp

Interaction flow (QA required )

Pre-conditions: User's device language is English, with Wikipedia app languages set as 1/EN, 2/ZH-HANT, and 3/HE (Hebrew).

  1. Open the Explore feed with the above language pre-conditions.
  2. Scroll down the screen. It is expected that by default all available content will shown for all languages, grouped by card type (i.e., Trending will show 3 times in a row per day, once in EN, then ZH-HANT, then HE.)

Additional testing for QA:

  • Overflow items
  • Language agnostic cards are not repeated for each language (eg., Continue reading, Because you read, Picture of the day).
  • The last feed setting should be restored (e.g., If user selects to view only HE Wikipedia feed cards then leaves the app, the next time they return to the feed, they should still only see HE cards).

Notes on the design

  • Explore feed
    • RTL languages such as Hebrew (HE) show up with text aligned RTL in the feed
    • There are changes to the visual design of the feed and cards based on this update, namely:
      • (i) Language-depending cards show a tag denoting which language it is from when the option to view all languages in the feed is shown
      • (ii) Feed is more clearly delineated by day with a date heading separating each day's content
      • (iii) App bar background is 24dp shorter in height than the current background due to the inclusion of the date heading just before card content starts
NOTE: An enhancement allowing filtering by languages on the Explore feed itself is split into task T192153

Event Timeline

Change 428664 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] [WIP] Feed customization with multi-language support.

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

Change 428664 merged by jenkins-bot:
[apps/android/wikipedia@master] Feed customization with multi-language support.

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

Hi @Dbrant - missing a couple of items to be updated:

  • add a date heading separating each day's content
  • update the App bar background to be 24dp shorter in height

Customize multilang feed 11.png (480×720 px, 37 KB)

Also a minor quibble is that the little language tag is slightly darker in color than the expected Black@38% (in Light theme)

Artboard.png (161×507 px, 20 KB)

@RHo Can we talk for a moment about the necessity of the date heading?
All of the date-specific cards show the date directly in their own headers, which now becomes a repetition of the date heading above it. The standalone date heading consumes a fair amount of screen height, and pushes real content further down beyond the screen boundary. And once the date heading is scrolled away (which happens on the first fling), its purpose disappears entirely, and the user goes back to determining the date from the card headers, which was the original pattern to begin with.

A few additional questions about the logic of the date header:

  • What if the user rearranges the cards so that "Continue reading" cards appear above "News" cards. Do the date headings appear above the Continue Reading cards or the News cards?
  • Suppose the user arranges the cards in the order of: "Random", "Because you read", "On this day", and "Continue reading". Where should the date headings appear in this case?
  • Suppose the user enables only "Continue reading" cards. Are the date headers shown in this case?

hi @Dbrant - to clarify, the date heading appears for each day of the feed so it's not the case that it disappears on first fling, it's acting as an anchoring/signpost element throughout the feed.
Part of the reason for the repetition is that the date heading inside the cards are quite small at the moment and it is not easy to tell when you are in the previous day without reading every single header. I do actually want to update the card header design as a separate task, but did not do this now for the purposes of keeping this release contained.

  • What if the user rearranges the cards so that "Continue reading" cards appear above "News" cards. Do the date headings appear above the Continue Reading cards or the News cards?
  • Suppose the user arranges the cards in the order of: "Random", "Because you read", "On this day", and "Continue reading". Where should the date headings appear in this case?

The first date heading appears above all card content.

  • Suppose the user enables only "Continue reading" cards. Are the date headers shown in this case?

To keep it simple as per above, yes.

hi @Dbrant - just realized this is was not in the test builds, would be great if this is possible to add in a minor fix during to add date headers and add separate build links..

Feedback from user testing T192891 supports the need to provide better delineation of feed content items by day.

Change 436836 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Add current day header text on top of daily Feed cards.

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

@RHo ^ the patch to add this date header is now available; but just a quick note about the formatting of the date text:
The date format in the design (e.g. "Fri 1 June, 2018") isn't quite a "standard" date representation, and will be very difficult to replicate across all languages. A more standard representation which lends itself much more easily to other languages will be something like "Friday June 1, 2018". Will that be alright?

thanks @Dbrant - actually can we do this format Day, DD Mmm instead – ie. full day text, short month and omit the year?

@RHo That's still not really standard. Can it be Day, Mmm D?

Sure, just as long as month is short sgtm

Change 436836 merged by jenkins-bot:
[apps/android/wikipedia@master] Add current day header text on top of daily Feed cards.

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

hi @Dbrant - couple of minor tweaks to the subheader and app background:

  • app background should be 152dp height (Actual is ~8dp taller than expected)
  • Date has the same spacing as List subheadings (ie. vertically centered in a 48dp high cell, + 8dp padding on top)

image.png (478×1 px, 68 KB)

In addition, can the dates act to separate card blocks in the tablet/multi-column view?
Expected:

Tablet view .png (600×960 px, 29 KB)

Actual shows cards from different dates seemingly out of order when in multiple columns:

image.png (1×800 px, 435 KB)

Change 437644 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Design refinements to day header card in the feed.

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

Change 437644 merged by jenkins-bot:
[apps/android/wikipedia@master] Design refinements to day header card in the feed.

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

LGTM on Wikipedia v2.7.234-alpha-2018-06-06

Pixel 2
image.png (1×1 px, 826 KB)
Pixel 2 scrolled
image.png (1×1 px, 257 KB)
Nexus 7 Portrait
image.png (1×800 px, 372 KB)
Nexus 7 landscape
image.png (1×800 px, 278 KB)
Nexus 7 scrolled to previous day
image.png (1×800 px, 191 KB)
ABorbaWMF subscribed.

Looks good on 2.7.234-alpha-2018-06-07 on a few devices. Tried a few different language combinations as well.