Page MenuHomePhabricator

Build onboarding tooltips for Watchlist
Closed, ResolvedPublic

Description

👨‍🎨 Check out the latest designs for this task on Zeplin.


1.2.
watchlist-onboarding-01.png (1×720 px, 416 KB)
watchlist-onboarding-02.png (1×720 px, 558 KB)
  1. Show onboarding tooltip in the article
    • Copy: Keep track of what's happening to articles you are interested in. Tap the overflow menu and select Add to Watchlist to see changes to an article.
  2. Trigger this tooltip after users seen the article tooltip and go back to the main screen.
    • Copy: Find articles and pages you previously added to your watchlist in the More menu under Watchlist.

APK download
https://github.com/wikimedia/apps-android-wikipedia/pull/2157/checks

Event Timeline

LGoto triaged this task as Medium priority.Dec 7 2020, 5:04 PM
scblr updated the task description. (Show Details)

Thanks @cooltey — the tooltips look great. In regards to functionality/timing, these things need to be optimized:

01) The article tooltip appeared when I wasn’t logged in. It should only appear when users are logged in.

02) The tooltip on the home screen that points to “More” should appear once users are back on Explore for the first time (after adding an item to the Watchlist in the article in the same session). Currently, it shows up in the second session (for me, after exiting/closing the app).

@cooltey

01) The article tooltip appeared when I wasn’t logged in. It should only appear when users are logged in.

02) The tooltip on the home screen that points to “More” should appear once users are back on Explore for the first time (after adding an item to the Watchlist in the article in the same session). Currently, it shows up in the second session (for me, after exiting/closing the app).

I used this version and both issues still persist 👇

https://github.com/wikimedia/apps-android-wikipedia/suites/1789210123/artifacts/34244207

Also, it seems like the link to the latest Alpha is currently down:

https://github.com/wikimedia/apps-android-wikipedia/releases/download/latest/app-alpha-universal-release.apk

Hi @schoenbaechler

The Watchlist has been merged to the master branch, and now you can check the changes in the latest Alpha. (and it is up now).

@cooltey

Looks good and works well now. The one thing I had issues with occurs in this situation:

Screenshot_20210114-120840.png (2×1 px, 345 KB)

It seems like taps on the overflow menu are not registered as such. Can you optimize that tapping the overflow menu actually dismisses the tooltip (and maybe even opens it right away) ? I think it’s crucial as people are going to want to tap the overflow menu when they see this tooltip and it’s currently pretty inconvenient.

Also, the tap target size of the overflow menu seems insufficient, can you confirm that it’s at least 48dp x 48dp ?

Thanks!

It seems like taps on the overflow menu are not registered as such. Can you optimize that tapping the overflow menu actually dismisses the tooltip (and maybe even opens it right away) ? I think it’s crucial as people are going to want to tap the overflow menu when they see this tooltip and it’s currently pretty inconvenient.

Done!

Also, the tap target size of the overflow menu seems insufficient, can you confirm that it’s at least 48dp x 48dp?

Updated and done!

I am seeing the dialog cut off at the bottom on some devices on 2.7.50339-alpha-2021-01-25

Tested on Samsung Galaxy x10 on Android 10 and on One Plus 8 on Android 10

Screenshot_20210125-104659.jpg (2×1 px, 413 KB)

Screenshot_20210125-104720_Wikipedia Alpha.jpg (3×1 px, 682 KB)

Screenshot_20210125-102205.jpg (2×1 px, 800 KB)

Screenshot_20210125-103134_Wikipedia Alpha.jpg (3×1 px, 1 MB)

Hi @schoenbaechler

Since the tooltip library does not support an auto measurement of the height of the content, so it would require extra codes to set the tooltip height dynamically based on the devices' resolution.

I created a PR that makes the content in the tooltip scrollable, which is an easier fix. Please let me know if it works for you.

Update:

The latest tooltip library has still not fixed the issue, will keep tracking it.

The stable version of the tooltip libraryry has been released and it fixes all issues. Move the ticket to Code review.

Tested on 2 devices on 2.7.50348-alpha-2021-03-22

On the Oneplus on Android 11, the explore feed tooltip text is a bit low:

Screenshot_20210323-095528.jpg (2×1 px, 487 KB)

It looks ok on Galaxy 10 on Android 10:
Screenshot_20210323-104538_Wikipedia Alpha.jpg (3×1 px, 758 KB)