Page MenuHomePhabricator

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

Assigned To
Authored By
RHo
Mar 28 2018, 11:21 AM
Referenced Files
F18295954: Screenshot_1526467791.png
May 16 2018, 11:19 AM
F18295955: Screenshot_1526469500.png
May 16 2018, 11:19 AM
F18252865: image.png
May 14 2018, 2:19 PM
F18252862: image.png
May 14 2018, 2:19 PM
F18173073: 2.png
May 11 2018, 9:00 PM
F18173072: 1.png
May 11 2018, 9:00 PM
F18170353: image.png
May 11 2018, 5:38 PM
F18079789: image.png
May 8 2018, 1:09 PM

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 updated the task description. (Show Details)
Charlotte set the point value for this task to 2.Apr 9 2018, 4:30 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 hold off on review for just a bit longer... CR has revealed a few design related changes that are needed.

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
Lang onboarding-02.png (1×720 px, 731 KB)
Actual
Screenshot_1524744317.png (1×1 px, 419 KB)

@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

image.png (1×1 px, 1 MB)

  • 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:

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

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

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:
image.png (140×224 px, 19 KB)
Actual:
image.png (570×976 px, 560 KB)

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

LGTM
LTR language selected when device language is RTL:

Screenshot_1526469500.png (1×1 px, 1 MB)

RTL language selected when device language is LTR:
Screenshot_1526467791.png (1×1 px, 443 KB)

ABorbaWMF subscribed.

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

Both scenarios are working now