Page MenuHomePhabricator

Updates to article toolbar
Closed, ResolvedPublic

Authored By
scblr
Apr 22 2022, 2:04 PM
Referenced Files
F35147834: Screenshot_20220517-104841.png
May 17 2022, 8:51 AM
F35129474: Screenshot_20220511-103737.png
May 11 2022, 8:39 AM
F35129456: Screenshot_20220511-102521.png
May 11 2022, 8:39 AM
F35129459: Screenshot_20220511-102834.png
May 11 2022, 8:39 AM
F35119300: Screenshot_20220509-113037.png
May 9 2022, 9:33 AM
F35069020: thick.png
Apr 26 2022, 7:59 PM
F35069017: thin.png
Apr 26 2022, 7:59 PM
F35061598: image.jpg
Apr 22 2022, 2:04 PM

Description

Related tasks: T302883 + T302397

image.jpg (1×2 px, 1 MB)

We are moving ahead with **Variant B* from the usability tests. Details in T302883.


Todos
  • Set the order of buttons/icons in the toolbar to the same as in production. Or if users have already customized their toolbar, keep their preferences.
  • Fix these translation issues:
    • Default tooltips in the ‘Customize toolbar’ detail screen are not translated in most languages. Please update
    • Translate ‘Categories’ and ‘More’ into Arabic.
    • Hindi:
      • ‘Customize your toolbar’, ‘Edit history’ and ‘Categories’ are not translated.
      • Optimize ‘GOT IT’ translation in Hindi, participants had difficulties understand.
    • Japanese:
      • One participant mentions that the Japanese translation for ‘GOT IT’ means ‘ROGER THAT’. There might be a better translation (JA Male A #2)
      • Edit history is not translated.
  • Arabic: ‘Customize toolbar’ entry point in the menu (overflow menu at the top or bottom sheet) are inverted in RTL languages. Please make sure to fix
  • Make sure app bar stays visible when the onboarding tooltip is shown, otherwise it points to nothing.
  • Move ‘Customize toolbar’ tooltip closer to the place where you can tap, it’s currently too far away from the 'More' item.
  • Separator line above ‘Customize toolbar’ seems to be invisible in the black theme (ID Male A), needs to be verified and color adjusted.-

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

Event Timeline

@SNowick_WMF – tagging you here, per our 1:1 convo today.

Hi @scblr

Thank you for the ticket.

Regarding the divider line on top of "Customize toolbar", I feel the issue is more with thickness than color. Color looks fine to me. Currently I have thickness at 0.5dp, and it looks like this:

thin.png (2×1 px, 458 KB)

If I increase it to 1dp, it looks clearer... should we go with this?

thick.png (2×1 px, 371 KB)

Regarding translations, I suggest that we remove all translations we manually added for the sake of user testing, and let us organically get them from translatewiki as they come. Since that is how we normally go about translations. How do you feel about it?

That sounds good @Sharvaniharan. I’ll make sure to review localization once the ticket is in design signoff.

Hi @scblr
I have fixed all issues other than above mentioned translations and the hiding of app bar. This is only an issue because we made the tooltip not cancelable. Otherwise, on scroll the tooltip is cancelled. We usually cancel on scroll for other tooltips like watchlist. Could we please keep it like that? just to avoid unnecessary complication with other components. Or else, we can have it be non-cancelable and not worry about how the UI is affected. If you feel very strongly about this, I will try to have a work around, but just wanted to discuss it before jumping into fixing it.
Thank you :-)

Thanks @Sharvaniharan – one question before taking a look at the changes:

Is it possible to hide all tooltips when the app bar is hidden in the article? Basically keep it in sync with the visible/hidden state of the app bar. This means that if the app bar is visible, show the tooltip as well (until 'GOT IT' is tapped).

Hey @Sharvaniharan — were you able to look into this? 👇

Is it possible to hide all tooltips when the app bar is hidden in the article? Basically keep it in sync with the visible/hidden state of the app bar. This means that if the app bar is visible, show the tooltip as well (until 'GOT IT' is tapped).

Thanks!

Hi @scblr
I have fixed the toolbar visibility during showing the customize tooltip. However, it is important to have a non-cancelable tooltip for this solution to work [In this case we show an explicit Got it button and only when it is clicked we know that the tooltip is no more shown, but if this is not the case, we cannot detect when the tooltip was cancelled]. So if this solution works, let us make a small ticket to see other tooltips which might appear on the toolbar [ notifications and watchlist] and we can apply the same to them, and also will need to slightly change their design to have the got it button. We can discuss this on Monday if it is unclear why we need a new ticket for other tooltips.
Thank you for the patience while I worked on other priority tasks :-)

@Sharvaniharan — I’m seeing this in the latest APK? 🤔👇

Screenshot_20220509-113037.png (2×1 px, 704 KB)

Hi @scblr
Thank you for catching this. fixed it. Please check it out.

@Sharvaniharan THX 👍

01) There are still differences in icon colors across views. Can you update *all colors below* to use: color_group_9 for consistency 👇

Screenshot_20220511-102521.png (2×1 px, 374 KB)
Screenshot_20220511-102834.png (2×1 px, 217 KB)

02) Tapping the item that we are pointing to *should dismiss the tooltip*, see video below:

https://www.dropbox.com/s/qagsj8miz0ofpfr/screen-20220511-100147.mp4?dl=0

To summarize, only the 'GOT IT' button and the action we are pointing to should dismiss the tooltip.

03) Related to the bottom sheet updates → there’s a bug when switching the theme, see video below (CC @Dbrant):

https://www.dropbox.com/s/qufsrgbh9sv25yd/screen-20220511-103602.mp4?dl=0

04) Please update the color of these icons to color_group_9 for consistency as well

Screenshot_20220511-103737.png (2×1 px, 270 KB)

@Sharvaniharan would it be possible to make these changes today? (T306709#7920038)

We’re going to demo this at the product department meeting next week.

Thanks!

Hi @scblr
Sorry I did not see this on time.
It is done now. Please check it out.

Looks good to me now @Sharvaniharan — one last thing before moving on.

01) Please set the color of these labels to color_group_9 as well 👇

Screenshot_20220517-104841.png (2×1 px, 655 KB)

After this change, can it be merged to Alpha, please?

Thanks a lot for the complex & excellent work, Sharvani!

Hi @scblr,

This is now done and everything in alpha at this point in time, are now on the branch as well. So the APK is available at the same link - https://github.com/wikimedia/apps-android-wikipedia/pull/3229/checks.