Page MenuHomePhabricator

Add multiple language selection to app Settings
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
RHo
Mar 27 2018, 4:00 PM
Referenced Files
F18099017: image.png
May 9 2018, 1:42 PM
F18084508: Screenshot_1525807370.png
May 8 2018, 7:23 PM
F18084509: Screenshot_1525807366.png
May 8 2018, 7:23 PM
F18084504: Screenshot_1525807212.png
May 8 2018, 7:20 PM
F18084501: Screenshot_1525807215.png
May 8 2018, 7:20 PM
F18082948: Screenshot_1525800061.png
May 8 2018, 5:28 PM
F18082950: Screenshot_1525800218.png
May 8 2018, 5:28 PM
F18080754: image.png
May 8 2018, 2:22 PM

Description

User story [Existing Multilingual reader]

When using the Wikipedia app...
...I want to allow all languages I read to be set up in the app...
...so that I can access feed content in all the different languages in which I read Wikipedia.

Mocks of proposed designs

Invision prototype: https://wikimedia.invisionapp.com/share/F4GNQ7VWQXB#/288670075_FLOW-_Add_app_languages_in_settings

Redline mocks on Zeplin board - tagged with Multilingual and Add language in Settings

Notes on the design

  • Users see “Suggested” Wikipedia languages based on their detected languages in use on their device (see subtask T191511)
  • Order of languages has a bearing on the order in which it is shown in:
    • Search filtering
    • 'Preferred languages' list when seeing what 'Other languages' in which an article is available (see subtask T191515)
    • the Explore feed
  • We may want some notation/reminder that this is Wikipedia languages, not all languages.
  • When searching languages, it is shown as a list item as its native script and name as the first line, with the secondary line showing the name for the particular language in the system language. Ie:
Search language result display logicExample (if EN is the device language)
Line 1Native language nameFrançais
Line 2Name in device languageFrench
  • Proposed text for confirmation dialog:
FieldProposed textNotes/Alternatives
TitleRemove selected language(s)?Pluralization based on no. of languages selected
TextYou will only see content on the Explore feed and quick search filters for remaining Wikipedia languages.Showing a message about what happens to remaining languages avoids pluralization issue
Confirmation actionOK
Cancel actionCANCEL
  • User cannot delete all languages, there will be a dialog advising this is this is attempted
    • Proposed text for dialog when removing all text:
FieldProposed textNotes/Alternatives
TitleCan't remove all languagesor "Can't remove all Wikipedia languages"
TextKeep at least one Wikipedia language from which to search and read content.or "Keep at least one language to search and read Wikipedia in."
ActionOK

Interaction flow steps (QA required )

  1. User goes to Wikipedia languages in Settings.
  2. User taps to add a 2nd language “French”, a 3rd language, “Chinese (Trad)”, and a 4th language “Danish”.
  3. User changes the order so that it shows as Chinese as the 2nd language.
  4. User deletes “Danish”.
  5. User returns to the feed, and selects search.
  6. User enters a search for “Egg tart” and selects to view Chinese results
  7. Upon opening “蛋撻”, user selects to view the article in other available languages.
  8. User sees their the article in the available app languages first above “other languages”.

Notes for QA:

  • Confirm add, re-order and delete functions work as expected
  • Users may scroll or search for Wiki languages.
  • Check order of languages is respected in the Search filter, Explore feed, and Available in Other languages list

Subtasks

Related Objects

Event Timeline

Charlotte set the point value for this task to 5.Apr 3 2018, 4:50 PM
RHo updated the task description. (Show Details)

Change 426323 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] [WIP] Add multiple language selection to app Settings

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

@RHo

If a user wants to only arrange or delete the app languages, should the flow go like the following steps? (or did I miss something?)

Feeds page -> Settings -> Wikipedia Languages -> manage app languages

v.s.

Feeds page -> Settings -> Add a language -> select any language -> Wikipedia languages -> manage app languages

@cooltey - rearranging language order (step 3 screens) and deleting all languages (step 4 screens) are independent of Adding a language.

@RHo Thanks, but that's not what I would like to ask.

When a user click the Wikipedia language in the Settings page, what is the next screen of this action? In the mock design flow, the next screen is Add a language.

If a user only wants to rearrange or delete languages instead of adding languages, would it be better if the next screen is the Wikipedia languages?

Fullscreen_4_19_18__11_53_PM.png (1×681 px, 121 KB)
=>
Fullscreen_4_19_18__11_56_PM.png (1×740 px, 50 KB)

Hi @cooltey - the next screen should be the Wikipedia languages screen as per the steps in the task description. Let me take a look perhaps the click target Invision is messed up. You can see the numbered steps in the Zeplin though

Please refresh the prototype and try again, should be working properly now! But yes, your description is how it is meant to work right now (clicking on "Wikipedia languages" in Settings takes the user to the "Wikipedia languages" page)

Hi, @RHo.
Looks like the flow on clicking on the Wikipedia language in the Settings page still be linked to the Add a language page in the Invision prototype.

But that's fine, I've already got the answer now, thanks!

hey @cooltey - that's weird, maybe try again one more time?

Change 426323 merged by jenkins-bot:
[apps/android/wikipedia@master] Add multiple language selection to app Settings

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

hi @cooltey - it's a big ticket so all in all really good, some minor items requiring updates.

Functional
  1. When there’s only one language, neither the re-order icon nor the remove overflow should be shown:
    image.png (560×712 px, 53 KB)
  2. In “Add a language” - when search is invoked and a search term entered, tapping on the device button to hide keyboard should not exit the user from search:
    hammerheadM4B30Zrho05012018235530.gif (960×540 px, 654 KB)
    (open full screen to see animated gif of unexpected behavior)
  3. When user invokes the action to remove a language, the “+ Add language” action should not be shown
    image.png (524×718 px, 53 KB)
Copy-related
  1. Settings screen - setting should be updated to Wikipedia languages (plural)
  2. Remove languages dialog - should support plural forms rather than using “(s)” (same as bug T192554)
  3. Fix inconsistent capitalization of language names - all languages in Latin script should be capitalized following English capitalization rules (e.g, français should be shown as Français)
Visual
  1. “Your languages” and “All languages” subheadings should use standard list subhead style - Roboto *Medium* 14sp (/24sp line-height) (at the moment it looks like it is using Bold)
  2. List subheaders should be 56dp in height (48dp + 8dp top padding)
  3. Language order number should also be Roboto *Medium* 14sp (at the moment it looks like it is using Bold and smaller than expected)

image.png (1×798 px, 110 KB)

  1. Re-order icon is darker than expected

image.png (492×362 px, 17 KB)

  1. Checked languages should have an Accent90 background (in Light theme)

image.png (396×748 px, 19 KB)

12 Dialogs - use standard dialog text styling - Subhead secondary - Roboto Regular 16sp with 24 line-height (at the moment the line-height is narrower than expected)

image.png (886×692 px, 108 KB)
image.png (898×694 px, 120 KB)
  1. Add languages screen: (a) search icon should be 4dp further away from RHS edge; and (b) update list subheader style and padding as per Wikipedia languages feedback

image.png (864×726 px, 95 KB)

  1. Add languages screen: (a) search icon should be 4dp further away from RHS edge

This is the standard distance at which the OS places the rightmost icon in the toolbar. If we need to override this distance in all of our toolbars, it should probably be a separate task.

  1. Add languages screen: (a) search icon should be 4dp further away from RHS edge

This is the standard distance at which the OS places the rightmost icon in the toolbar. If we need to override this distance in all of our toolbars, it should probably be a separate task.

Derp, that's annoying because it means their own guidelines are not being followed:

image.png (1×822 px, 59 KB)

Let's keep the distance for now if that's the standard.

Change 430520 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Tweak: Add multiple language selection to app Settings

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

Hi, @RHo

12 Dialogs - use standard dialog text styling - Subhead secondary - Roboto Regular 16sp with 24 line-height (at the moment the line-height is narrower than expected)

Looks like our other dialogs in our app does not apply the standard dialog text styling.

Found only one dialog in the "My list" page that applies the style (When trying to remove an article that exists in multiple reading lists).

Hi, @RHo

12 Dialogs - use standard dialog text styling - Subhead secondary - Roboto Regular 16sp with 24 line-height (at the moment the line-height is narrower than expected)

Looks like our other dialogs in our app does not apply the standard dialog text styling.

Found only one dialog in the "My list" page that applies the style (When trying to remove an article that exists in multiple reading lists).

Thanks @cooltey - can we apply this standard dialog text style here and throughout the app?

@RHo
Sure. I've opened a ticket for that.

Change 430520 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak: Add multiple language selection to app Settings

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

hey @cooltey - still some remaining feedback items from before:

  1. When there’s only one language, neither the re-order icon nor the remove overflow should be shown:

Re-order icon is still showing

image.png (450×690 px, 46 KB)

  1. Fix inconsistent capitalization of language names - all languages in Latin script should be capitalized following English capitalization rules (e.g, français should be shown as Français)

This is now fixed in this flow, but not being applied everywhere in the app (eg. T191515)

image.png (1×1 px, 135 KB)

  1. List subheaders should be 56dp in height (48dp + 8dp top padding)

image.png (570×1 px, 139 KB)

There is now a new visual tweak required as the language and icons should be vertically centered.

@RHo
Actually the item layout that has been implemented is vertical-centering the text and icons.

I adjust the section header height, does these look better?

Screenshot_1525807366.png (1×1 px, 65 KB)
Screenshot_1525807370.png (1×1 px, 58 KB)

Change 431827 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] [HOLD] Tweak #2 : Add multiple language selection to app Settings

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

hi @cooltey - list subheader is still not quite right:

image.png (482×1 px, 113 KB)

(plus the re-order icon is still shown when there's only 1 language, but assume you're onto that in another patch)

@RHo
Actually the item layout that has been implemented is vertical-centering the text and icons.

I adjust the section header height, does these look better?

Screenshot_1525807366.png (1×1 px, 65 KB)
Screenshot_1525807370.png (1×1 px, 58 KB)

Thanks @cooltey - section headers LGTM now. Just missing the removal of the re-order icon when there's only 1 app lang!

Change 431827 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak #2 : Add multiple language selection to app Settings

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

LGTM on Nexus 5 (6.0.1), Wikipedia v2.7.232-alpha-2018-05-10
moving QA for further testing

ABorbaWMF subscribed.

Looks good to me on 2.7.232-alpha-2018-05-15

Tested on a few devices (Pixel, Hauwei, and MotoX)