Page MenuHomePhabricator

Add language detection and selection to app onboarding
Closed, ResolvedPublic2 Story Points

Description

User story [New Multilingual reader]

When trying the Wikipedia app for the first time...
...I want to see all Wikipedia languages I read are pre-populated in the app...
...so that I save on time and effort required to set up multilingual content preferences manually.

Mocks of proposed designs

Invision prototype: https://wikimedia.invisionapp.com/share/F4GNQ7VWQXB#/288876322_FLOW-_Language_In_Onboarding

Redline mocks on Zeplin board will be tagged with Multilingual and Onboarding

Asset for new app onboarding screen illustration:


Notes on the design

  • For now, we are adding to the number of onboarding steps. It may be consolidated so languages is part of the first screen at a later point.
  • Suggested languages detected behavior and order is captured in task T191511: Detect and show suggested languages to Android app users
  • Any language that is already on in the list of app languages no longer appears in "Suggested"

Interaction flow steps (QA required )

Pre-conditions for all the following scenarios:

  • User's first system language is in English and one other language, e.g., Traditional Chinese
  • User has keyboard languages in the system languages (e.g., English and a Traditional Chinese variant), as well as a keyboard input for a 3rd language (e.g., French)
  • User is using the Wikipedia app for the first time
Scenario A: First time user going through onboarding
  1. User opens the Wikipedia app and sees the first onboarding screen
  2. User goes through the steps until they reach the step which show languages already detected and added to their app languages. Device and keyboard input languages are added by default.
  3. User selects to edit app languages from this screen.
  4. User deletes French from the list of app languages.
  5. User user taps to add another language. It is expected that the user sees French back in the list of 'suggested' languages.
  6. User adds another language, e.g., Afrikaans, to app languages and taps back. It is expected they will return back to the onboarding step with the new list of app languages shown (English, Traditional Chinese, Afrikaans).
  7. Upon completing onboarding, it is expected the user will see the feed content populated for languages selected. Opening Search should also show the 3 languages in a filter bar under the search field.
Scenario B: First-time user skips language selection during onboarding
  1. User opens the Wikipedia app and sees the first onboarding screen
  2. User taps to "SKIP" onboarding and is taken to the Explore feed. From here, they tap to view Wikipedia languages in 'Settings'. It is expected that by default, the Wikipedia languages will be comprised of languages that were detected in device and keyboard settings only.
NOTE: Please ensure bug T191106 is fixed whereby swiping through onboarding when the device is in an RTL languages is in the right direction.

Event Timeline

RHo created this task.Mar 28 2018, 11:21 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 28 2018, 11:21 AM
RHo updated the task description. (Show Details)Apr 3 2018, 12:32 PM
RHo updated the task description. (Show Details)
RHo updated the task description. (Show Details)Apr 3 2018, 1:18 PM
RHo updated the task description. (Show Details)Apr 3 2018, 1:33 PM
RHo updated the task description. (Show Details)Apr 3 2018, 1:36 PM
RHo updated the task description. (Show Details)Apr 5 2018, 10:13 AM
RHo updated the task description. (Show Details)Apr 6 2018, 3:12 PM
Charlotte set the point value for this task to 2.Apr 9 2018, 4:30 PM
RHo updated the task description. (Show Details)Apr 13 2018, 2:09 PM
RHo updated the task description. (Show Details)Apr 16 2018, 9:43 PM
RHo updated the task description. (Show Details)Apr 17 2018, 3:25 PM

Change 428853 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] [WIP] Add language detection and selection to app onboarding

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

@RHo this is ready for a design review..

@RHo hold off on review for just a bit longer... CR has revealed a few design related changes that are needed.

RHo added a comment.Apr 26 2018, 1:22 PM

hi @Sharvaniharan, a few functional and visual revisions on the patch above:

    • Functional:**
  • It is expected that if the user selects to add/edit languages from onboarding, they should return back to the onboarding screen (with changes shown), but actually the user is being taken to Explore and not finishing the rest of onboarding.
  • After adding a bunch of languages, the complete list of languages is not being shown in the onboarding screen.
    • Visual**
  • Placement of illustration, text and form elements should be as per other onboarding screens (at the moment they are not aligned correctly
  • Illustration is warped (note weirdness in the small a and the language icons in the background - I'm taking a look at the illustration now)
  • line-spacing for the title :Search and read..." should be increased by ~4dp (font style should be Roboto Medium 24sp with line-spacing 32sp)
Expected
Actual
RHo updated the task description. (Show Details)Apr 26 2018, 1:48 PM
RHo added a comment.Apr 26 2018, 1:51 PM

@Sharvaniharan - updated SVG & XML in the task description which should fix display issues on API22 (perhaps we could also review the support library, per https://stackoverflow.com/questions/48362219/vector-drawable-render-issue-on-lollipop-devices-api22 )

Change 428853 merged by jenkins-bot:
[apps/android/wikipedia@master] Add language detection and selection to app onboarding

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

hi @Sharvaniharan - the onboarding screens are still not as expected

  • The graphic is 15% from the top of screen (96dp on a Nexus 5)
  • Title text is anchored to be 32dp below the graphic
  • Description text is 8dp below the title text

Change 432281 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Tweak : Onboarding card changes

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

Change 432281 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak : Onboarding card changes

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

hi @Sharvaniharan - the space from the top of the screen is still not quite right. To clarify, the graphic should be 15% from the top of screen relative to the height of the device, (the 96dp on the Nexus 5 was an example only).
Nexus 7:

Also, have just noticed that the status bar should not be dark blue but semi-transparent.

@RHo can it be 15% excluding the statusbar?

Change 432693 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Tweak : Onboarding

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

Does the statusbar look ok?

RHo added a comment.May 14 2018, 2:19 PM

hi @Sharvaniharan - status bar looks good and tested on a tablet, distance also LGTM.

However, while testing another ticket I noticed something I missed earlier, the languages in the onboarding should respect RTL language display in the ordered list:

Expected:
Actual:

Change 432693 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak : Onboarding

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

Change 433202 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Fix: Explicity make the orderedList item TextView RtlAware

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

Change 433202 merged by jenkins-bot:
[apps/android/wikipedia@master] Fix: Explicity make the orderedList item TextView RtlAware

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

@RHo RTL update ready to review..

RHo added a comment.May 16 2018, 11:19 AM

LGTM
LTR language selected when device language is RTL:


RTL language selected when device language is LTR:

ABorbaWMF added a subscriber: ABorbaWMF.

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

Both scenarios are working now

Dbrant closed this task as Resolved.Jun 27 2018, 8:05 PM