Problem
The element of positive reinforcement/counter has display issues in the dark/black theme and needs to be optimized.
Solution
Designer precisely defines colors with Android theme guidelines, see image above.
scblr | |
Mar 26 2021, 11:10 AM |
F34407457: Screenshot_20210419-132818.png | |
Apr 19 2021, 11:42 AM |
F34407455: add-images-16.png | |
Apr 19 2021, 11:42 AM |
F34407473: Screenshot_20210419-134021.png | |
Apr 19 2021, 11:42 AM |
F34407448: Screenshot_20210419-132441.png | |
Apr 19 2021, 11:42 AM |
F34407470: add-images-12.png | |
Apr 19 2021, 11:42 AM |
F34293425: Screenshot_20210408-172712.png | |
Apr 8 2021, 3:28 PM |
F34293329: Screenshot_20210408-171354 copy.png | |
Apr 8 2021, 3:28 PM |
F34293339: Screenshot_20210408-171503.png | |
Apr 8 2021, 3:28 PM |
The element of positive reinforcement/counter has display issues in the dark/black theme and needs to be optimized.
Designer precisely defines colors with Android theme guidelines, see image above.
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | JTannerWMF | T272872 [EPIC] Image Recommendations Android MVP | |||
Resolved | cooltey | T278528 Optimize counter element for different themes |
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.
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.
03) There seems to be a gap between progress bar and background. Please remove the gap / border, see designs on Zeplin
Design | vs | Implementation |
04) Change font to Roboto Medium here, see font_group_2 in the Android font guidelines
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.
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:
2)
04) Change font to Roboto Medium here, see font_group_2 in the Android font guidelines
bold text
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:
Implementation | vs | Design |
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:
5) Is there a way to adapt the color of the nav bar, per design spec on Zeplin?
Implementation | vs | Design |
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:
Implementation vs Design
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:
- 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 🤩) ?
- 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:
Implementation vs Design 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:
- 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 🤩) ?
- 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:
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
Hi @schoenbaechler
This should be fixed now. Please wait at least 10 minutes to download the updated APK. Thanks!