Page MenuHomePhabricator

Optimize counter element for different themes
Closed, ResolvedPublic

Description

Problem

The element of positive reinforcement/counter has display issues in the dark/black theme and needs to be optimized.

Screenshot_20210326-120832.png (2×1 px, 311 KB)

Solution

Designer precisely defines colors with Android theme guidelines, see image above.

Event Timeline

JTannerWMF triaged this task as Medium priority.Apr 5 2021, 2:22 PM

Thanks @cooltey, the colors look better in different themes now. Some things to optimize:

01) Please optimize the timing of the success checkmark. In the current implementation, the checkmark is completed but the copy still says Processing. The Great, keep going 👍 copy should be in sync with the success checkmark.

Screenshot_20210408-171354.png (2×1 px, 251 KB)

02) Please slightly reduce the thickness of the circle and checkmark — I guess it’s ~ 2dp now, maybe use 1.5dp for both? Let me know about the current value so we can optimize it if my guess is incorrect.

Screenshot_20210408-171354 copy.png (2×1 px, 251 KB)

03) There seems to be a gap between progress bar and background. Please remove the gap / border, see designs on Zeplin

DesignvsImplementation
add-images-11-black.png (1×720 px, 486 KB)
Screenshot_20210408-171503.png (2×1 px, 762 KB)

04) Change font to Roboto Medium here, see font_group_2 in the Android font guidelines

Screenshot_20210408-172712.png (2×1 px, 341 KB)

In T278528#6984374, @schoenbaechler wrote:

Thanks @cooltey, the colors look better in different themes now. Some things to optimize:

01) Please optimize the timing of the success checkmark. In the current implementation, the checkmark is completed but the copy still says Processing. The Great, keep going 👍 copy should be in sync with the success checkmark.

I tweaked a bit so that the Great, keep going 👍 will show up faster than before (1/2 sec faster). If it is still not good for you, I can write some extra code to make it in sync with the success checkmark perfectly.

02) Please slightly reduce the thickness of the circle and checkmark — I guess it’s ~ 2dp now, maybe use 1.5dp for both? Let me know about the current value so we can optimize it if my guess is incorrect.

The new width will make the animation circle (system component) and the actual circle with a checkmark look a little bit different, please let me know if it does not work for you.

03) There seems to be a gap between progress bar and background. Please remove the gap / border, see designs on Zeplin

Done.

04) Change font to Roboto Medium here, see font_group_2 in the Android font guidelines

Done.

@cooltey I don’t see these changes yet — please provide an APK link — thx!

Hey @cooltey, thx for the hard work on these. Some comments below:


1) It seems like the circle animation is still using the old thickness value (or is misaligned), see image of the loading state below:

Screenshot_20210419-132441.png (2×1 px, 451 KB)


2)

04) Change font to Roboto Medium here, see font_group_2 in the Android font guidelines
bold text

Screenshot_20210408-172712.png (2×1 px, 341 KB)

This has not changed yet, it’s still using Roboto Bold or some kind of faux bold.


3) Please custom illustration (arrow) from the designs on Zeplin here, it’s looks different and sizing is off:

ImplementationvsDesign
Screenshot_20210419-132818.png (2×1 px, 479 KB)
add-images-16.png (1×720 px, 321 KB)

4)

Please optimize the timing of the success checkmark. In the current implementation, the checkmark is completed but the copy still says Processing. The Great, keep going 👍 copy should be in sync with the success checkmark.

I tweaked a bit so that the Great, keep going 👍 will show up faster than before (1/2 sec faster). If it is still not good for you, I can write some extra code to make it in sync with the success checkmark perfectly.

Two things:

  1. Timing is better, but still a bit off. Would it be possible to write the extra code for the perfect sync (which sounded tempting in the first place 🤩) ?
  2. Minor: can the count number change to the new value after the progress bar animated completely? I think that makes more sense. Currently it changes before the progress bar animates.

5) Is there a way to adapt the color of the nav bar, per design spec on Zeplin?

ImplementationvsDesign
add-images-12.png (1×720 px, 405 KB)
Screenshot_20210419-134021.png (2×1 px, 607 KB)

Hi @schoenbaechler

1) It seems like the circle animation is still using the old thickness value (or is misaligned), see image of the loading state below:

Done.

2)
This has not changed yet, it’s still using Roboto Bold or some kind of faux bold.

Done

3) Please custom illustration (arrow) from the designs on Zeplin here, it’s looks different and sizing is off:

ImplementationvsDesign
Screenshot_20210419-132818.png (2×1 px, 479 KB)
add-images-16.png (1×720 px, 321 KB)

Could you please provide the vector file of the illustration? I cannot download it from the Zeplin and it is difficult to customize from the original vector file.

4)

Two things:

  1. Timing is better, but still a bit off. Would it be possible to write the extra code for the perfect sync (which sounded tempting in the first place 🤩) ?
  2. Minor: can the count number change to the new value after the progress bar animated completely? I think that makes more sense. Currently it changes before the progress bar animates.

I have changed the way of showing the progress bar and the text, and the animation and timing should be better now.
Demo: https://youtu.be/CAM2TXvwG1U

5) Is there a way to adapt the color of the nav bar, per design spec on Zeplin?

Done.

Thx @cooltey 👏

3) Please custom illustration (arrow) from the designs on Zeplin here, it’s looks different and sizing is off:

ImplementationvsDesign
Screenshot_20210419-132818.png (2×1 px, 479 KB)
add-images-16.png (1×720 px, 321 KB)

Could you please provide the vector file of the illustration? I cannot download it from the Zeplin and it is difficult to customize from the original vector file.

I updated the Zeplin screen with the svg asset

4)

Two things:

  1. Timing is better, but still a bit off. Would it be possible to write the extra code for the perfect sync (which sounded tempting in the first place 🤩) ?
  2. Minor: can the count number change to the new value after the progress bar animated completely? I think that makes more sense. Currently it changes before the progress bar animates.

I have changed the way of showing the progress bar and the text, and the animation and timing should be better now.
Demo: https://youtu.be/CAM2TXvwG1U

This looks perfect!

@cooltey and I were tweaking this in a Slack night session together right now (✨), these are things he’s going to look into on Friday:

  • Show the success screen (confetti) even longer than now (~ 1.5x longer than what we have now), let users have a moment of celebration here 🎉
  • When daily goal is reached, show the success tick (✅) a little longer (~ 1.5x longer), then show the bolt icon also for also ~ 1.5x longer

Thanks!

Timing looks good now @cooltey, thx! 🎯


Two things to optimize before we go out:

01) Per @JTannerWMF’s comment on #android Slack:

Quick question related to Image recs, I think we had the goal counter at 10, which is supposed to refresh each day, so essentially people will have the goal of completing 10 a day. In the Alpha I have, which may be out of date, the count doesn't refresh each day. Have we updated that logic?

02) This is related to 01): Jazmin and I realized that we need to be more clear in communicating what goal users have achieved. Especially since the goal resets daily. So instead of the You’ve reached the goal copy we should display You reached the daily goal.

Adding more context:

Ok so new update. When I went into 'Edits' it didn't update the daily counter. However when I started actually completing the task, the counter did reset, both within the workflow of the task and when I went back to the Suggested Edits homepage.

Thanks for updating the copy @cooltey, that looks good.

I noticed that there are still issues with the counter logic, see this video:

https://www.dropbox.com/s/04p0npq6kwkff0f/counter.mp4?dl=0

  1. The counter resets now, which is good. But it starts with 1 when accessing it on a new day. It should start with 0.
  1. Counter increases (+1), even when no choice has been made by the user. In the video I’m accessing the task via home screen and am tapping back. You’ll see that the counter increases. Please make sure to only increase it when users make a choice with the Yes, No, Not Sure buttons.

CC @JTannerWMF @Sharvaniharan @Dbrant @MattCleinman

Hi @schoenbaechler
This should be fixed now. Please wait at least 10 minutes to download the updated APK. Thanks!

Thanks @cooltey — tested it again — everything works now!