Page MenuHomePhabricator

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

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

RHo created this task.Mar 27 2018, 4:00 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 27 2018, 4:00 PM
RHo updated the task description. (Show Details)Apr 2 2018, 5:25 PM
RHo updated the task description. (Show Details)Apr 2 2018, 5:43 PM
RHo updated the task description. (Show Details)Apr 3 2018, 1:29 PM
Charlotte set the point value for this task to 5.Apr 3 2018, 4:50 PM
RHo updated the task description. (Show Details)Apr 5 2018, 10:30 AM
RHo updated the task description. (Show Details)Apr 5 2018, 10:33 AM
RHo updated the task description. (Show Details)
RHo updated the task description. (Show Details)Apr 6 2018, 3:11 PM

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

RHo added a comment.Apr 20 2018, 5:26 AM

@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?

=>

RHo added a comment.Apr 20 2018, 7:13 AM

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

RHo added a comment.Apr 20 2018, 7:16 AM

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!

RHo added a comment.Apr 20 2018, 4:21 PM

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

@RHo It works now! Thanks!

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:
  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:
    (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
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)

  1. Re-order icon is darker than expected

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

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)

  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

Dbrant added a subscriber: Dbrant.May 2 2018, 2:29 PM
  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.

RHo added a comment.May 2 2018, 2:53 PM
  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:


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).

RHo added a comment.May 3 2018, 5:27 PM

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

  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)

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


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

cooltey added a comment.EditedMay 8 2018, 5:28 PM

@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?

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

RHo added a comment.May 9 2018, 1:42 PM

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

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

RHo added a comment.May 9 2018, 3:47 PM

@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?

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

@RHo Patch has been merged, let me know if any changes needed.

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

ABorbaWMF added a subscriber: ABorbaWMF.

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

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