Page MenuHomePhabricator

Collected “Suggested Edits” Design Feedback for `2.7.50282-alpha-2019-06-11`
Closed, ResolvedPublic

Description

Wow, I have to say I’m impressed with your efficiency and high quality output @Sharvaniharan @cooltey & @Dbrant. Image caption editing is already pretty solid in the Alpha (`2.7.50282-alpha-2019-06-11).

This is collected design feedback for the current state of “Suggested edits“ with the new image caption editing features. It has yet to be prioritized and distributed to the corresponding subtasks. An alternative approach would be to handle all of this as a new task, as @Dbrant suggested in our 1:1 today. What do you think @Charlotte?

  • 1) Couldn’t publish once due to this error message below. The error appeared after translating an image caption from English to German (File:AtomicRooster_Devils1998.jpg).

  • 2) Image loading on review screen is currently pretty slow, can we improve it (e.g. by delivering an image with lower resolution)? Or can we use the same loading indicator as for image publishing when there’s no image yet?

  • 3) Image loading in bottom sheet is slow, can we improve it (e.g. by delivering an image with lower resolution)?

  • 4) Edit button is currently hard to tap. It regularly hid all of the UI elements when I tried to tap the edit button. Can we increase touch target size to make this more convenient? Maybe some experimenting needed on a real device to make this work well.

  • 5) ”An error occurred” message appears from time to time in the feed.

  • 8) Show unstructured description in bottom sheet as additional helper

  • 9) Allow pulling up the bottom sheet. Currently it’s only possible to tap it when collapsed:

  • 10) Make article description design consistent with image caption bottom sheet (see Zeplin)

  • 12) Line height does not correlate with designs. It needs to be 1.5 (24sp) of the font-size (16sp). See Zeplin. Plus, is there a padding on the right side or this just an unfortunate situation in this screenshot?

  • 13) Output links in in black and without underline (text-decoration). Currently, it indicates that these are tappable which is not the case.

  • 14) Font-size is different from designs. Needs to be 24sp, see Zeplin.

  • 15) Gap is too wide/card is not high enough, needs to be 32dp, see Zeplin.

  • 16) Button font-weight needs to be medium, it’s to thin currently. Plus, right padding needs to be 20sp to balance out visual center.

  • 17) Remove placeholder image from this screen. In general, try to not use that illustration/image anymore since we moved away from it (T218201)

  • 18) I’m wondering if we could not cut the card here and make it overlap. Basically move the card to the front so it’s not cut off when dragged.

  • 19) Always display this information below the unlocked tasks and remove the bottom part of the message/unlock criteria (Locked until you’ve made...) when users haven’t set multiple languages yet. Unlock criteria is only relevant once multiple languages have been set.

  • 20) Opacity of icons varies, it needs to be material_theme_de_emphasised_color (#000 38% in light mode)

  • 21) Increase bottom padding of extended FAB to 24dp (it’s currently implemented according to the specs but it visually sits to low)

  • 23) Incorporate gradient to avoid cut off text in feed cards (see T224500)

  • 24) Adapt dropdown background-color to suggestions_background_color

  • 26) Stretch separator lines to full width in bottom sheets

  • 27) Image format should be 16:9 and can we deliver higher resolution images on tablets? It’s currently very pixelated.

  • 28) Stretch bottom sheet to full-width on larger viewports.

  • 29) I have some input on how to improve the current feed animation when going back to the previous card. It currently feels a bit counterintuitive. Whoever takes on this task, can we have a quick chat about this video together? (yes I know, it’s mirrored – let’s chat! 🙃).
  • 30) I realized that we’re still using the “legacy” interface to edit descriptions when coming from article pages. Can we update it to use the new UI?
  • 31) Should we lower this number to 15 as well and remove “verified“ from the copy since we’re moving into the direction of immediate unlocking @Charlotte? (CC: Mholloway) [see T225635#5253643]

Event Timeline

Re: point 19 @schoenbaechler - I'd like to leave the thresholds for adding/translating article descriptions as they are right now, until we see the impact of the new thresholds on vandalism/reverts for image captions.

Next quarter - meaning, very soon - we can rethink the thresholds altogether, and what happens to users when one of their edits gets reverted. (For example, if someone has already made 500 good edits, just 1 of their things getting reverted doesn't mean they should lose access to the feature entirely!)

I am also perfectly happy for all the design feedback to be handled as part of one task as @Dbrant suggested so that we don't have 5 million tickets floating around everywhere. Most of these changes are quick enough that one person should be able to knock them all out presumably.

schoenbaechler added a subscriber: Mholloway.
schoenbaechler updated the task description. (Show Details)
schoenbaechler added a subscriber: Mholloway.
schoenbaechler added a subscriber: Sharvaniharan.
Charlotte triaged this task as High priority.Jun 12 2019, 9:31 PM
Charlotte added a subscriber: Mholloway.

@Dbrant - Not totally ready for dev yet since there may be more to come. Check back in tomorrow. :)

schoenbaechler added a subscriber: Mholloway.

It should be more or less ready (for dev) now @Charlotte, also made a first pass at prioritizing the list!

Mholloway updated the task description. (Show Details)Jun 13 2019, 5:21 PM
Mholloway removed a subscriber: Mholloway.

I noted the discussion about the description edit suggestions unlock threshold. :)

Hi @schoenbaechler, I have the following questions:

  1. Couldn’t publish once due to this error message below. The error appeared after translating an image caption from English to German (File:AtomicRooster_Devils1998.jpg).

Could you please provide the actual Commons URL for the file? I cannot find the exact file you've mentioned.

  1. Make article description design consistent with image caption bottom sheet (see Zeplin)

What's the design after opened the bottom sheet? For current "Preview dialog" design, the thumbnail is still on the left side and without the up arrow icon on the bar.

  1. Gap is too wide/card is not high enough, needs to be 32dp, see Zeplin.

Unfortunately, there's no more information could be shown on the card since it is not able to get the other information now. If we set up a minimum height for the card, it will have a large empty space on the bottom.

This comment was removed by schoenbaechler.
schoenbaechler added a comment.EditedJun 17 2019, 11:27 AM
  1. Couldn’t publish once due to this error message below. The error appeared after translating an image caption from English to German (File:AtomicRooster_Devils1998.jpg).

Could you please provide the actual Commons URL for the file? I cannot find the exact file you've mentioned.

Hmm, I think there’s probably no Commons page @cooltey, it’s hosted on Wikipedia. Is that the reason why it didn’t work? Here are the relevant links though:

If yes, we have to hide the translation CTA as well for files that are not hosted on Commons.

10 Make article description design consistent with image caption bottom sheet (see Zeplin)

What's the design after opened the bottom sheet? For current "Preview dialog" design, the thumbnail is still on the left side and without the up arrow icon on the bar.

Added the designs to Zeplin: https://app.zeplin.io/project/57a120b91998d8977642a238/dashboard?seid=5d0774c6303cad19e866566d

  1. Gap is too wide/card is not high enough, needs to be 32dp, see Zeplin.

Unfortunately, there's no more information could be shown on the card since it is not able to get the other information now. If we set up a minimum height for the card, it will have a large empty space on the bottom.

I see, let’s leave it like that for now. Just for clarity: the cards are vertically centered in the article description feed. Is it the same behavior for the image caption feed? That would be good.

Thanks!

Hmm, I think there’s probably no Commons page @cooltey, it’s hosted on Wikipedia. Is that the reason why it didn’t work? Here are the relevant links though:
...
If yes, we have to hide the translation CTA as well for files that are not hosted on Commons.

Makes sense. I think it is a bug needs to be fixed.

I see, let’s leave it like that for now. Just for clarity: the cards are vertically centered in the article description feed. Is it the same behavior for the image caption feed? That would be good.

Yes, they have the same gravity for both article description and image caption.

Hey @ABorbaWMF - heads up that there is some design feedback here, so if you encounter any of these issues, no need to send the individual tickets to "did not pass QA"

cooltey added a comment.EditedJun 21 2019, 5:53 PM

Hi, @schoenbaechler and cc @Charlotte:

  1. Update copy, according to copy master doc

Does there have the proper messages for the unlocking dialogs without specifying numbers of edits? Feedback from @Dbrant: https://github.com/wikimedia/apps-android-wikipedia/pull/381#pullrequestreview-252836046

  1. Allow pulling up the bottom sheet. Currently it’s only possible to tap it when collapsed:

The bottom "bar" view and the bottom sheet view are not the same views, so it requires extra logic of implementing it (and probably less smooth on the animation)

  1. I’m wondering if we could not cut the card here and make it overlap. Basically move the card to the front so it’s not cut off when dragged.

It is possible to do but not recommended. The other solution is to implement a standard horizontal swiping animation so it will not touch the toolbar.

  1. Use correct “Add image caption” illustration here, check Zeplin for the correct one.

For the "Translate image caption" illustration, looks like the SVG file is incomplete. https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5ced4a994c2e6c1db09f55b6

  1. Line height does not correlate with designs. It needs to be 1.5 (24sp) of the font-size (16sp). See Zeplin. Plus, is there a padding on the right side or this just an unfortunate situation in this screenshot?

The padding on the right side is just a regular line break because of the dash -

  1. Increase bottom padding of extended FAB to 24sp (it’s currently implemented according to the specs but it visually sits to low)

Friendly reminder: in Android, text size we use sp, and view size we use dp.

Hey @cooltey!

  1. Update copy, according to copy master doc

Does there have the proper messages for the unlocking dialogs without specifying numbers of edits? Feedback from @Dbrant: https://github.com/wikimedia/apps-android-wikipedia/pull/381#pullrequestreview-252836046

Good one – I updated the copy master doc with more generic messaging for image captions.

  1. Allow pulling up the bottom sheet. Currently it’s only possible to tap it when collapsed:

The bottom "bar" view and the bottom sheet view are not the same views, so it requires extra logic of implementing it (and probably less smooth on the animation)

I think the idea of having the article always at hand is really enforced with this animation. Could you explore in trying out some transitions for it? Here’s some inspiration from YouTube or Maps. Oh, a “dumb” question from someone who doesn’t know the code: Do we need different views to achieve this effect?

  1. I’m wondering if we could not cut the card here and make it overlap. Basically move the card to the front so it’s not cut off when dragged.

It is possible to do but not recommended. The other solution is to implement a standard horizontal swiping animation so it will not touch the toolbar.

Ok! I’m in favor of making it a standard horizontal swiping animation since the UI arrows at the bottom indicate this as too. Can we try it out and see how it feels? Maybe we need to tweak animation transition times a bit? Here’s an example of a smooth swiping animation.

  1. Use correct “Add image caption” illustration here, check Zeplin for the correct one.

For the "Translate image caption" illustration, looks like the SVG file is incomplete. https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5ced4a994c2e6c1db09f55b6

Argh, you’re right! Updated the screen that contains a complete illustration: https://app.zeplin.io/project/57a120b91998d8977642a238/screen/5ced4a994c2e6c1db09f55b6

  1. Line height does not correlate with designs. It needs to be 1.5 (24sp) of the font-size (16sp). See Zeplin. Plus, is there a padding on the right side or this just an unfortunate situation in this screenshot?

The padding on the right side is just a regular line break because of the dash -

Alright, all good then...

  1. Increase bottom padding of extended FAB to 24sp (it’s currently implemented according to the specs but it visually sits to low)

Friendly reminder: in Android, text size we use sp, and view size we use dp.

Thanks for the reminder! 👍

cooltey added a comment.EditedJun 24 2019, 11:48 PM

Thanks for the response, @schoenbaechler.

  1. I realized that we’re still using the “legacy” interface to edit descriptions when coming from article pages. Can we update it to use the new UI?

Sure, we can. Do we want to have the "review" screen and remove the full screen "publish successful" dialog as well? Or, just update the edit UI with bottom sheet bar?

I think the idea of having the article always at hand is really enforced with this animation. Could you explore in trying out some transitions for it? Here’s some inspiration from YouTube or Maps. Oh, a “dumb” question from someone who doesn’t know the code: Do we need different views to achieve this effect?

I can try it.

  1. Stretch bottom sheet to full-width on larger viewports.

Does the general link preview dialog in "add/translate article description" also need to be full-width dialog?

schoenbaechler added a comment.EditedJun 25 2019, 7:49 AM
  1. I realized that we’re still using the “legacy” interface to edit descriptions when coming from article pages. Can we update it to use the new UI?

Sure, we can. Do we want to have the "review" screen and remove the full screen "publish successful" dialog as well? Or, just update the edit UI with bottom sheet bar?

Can we keep the full overlay for the first article description edit and show the toast after the second edit? I feel like the overlay is quite helpful in a first edit.

  1. Stretch bottom sheet to full-width on larger viewports.

Does the general link preview dialog in "add/translate article description" also need to be full-width dialog?

Yes, that would be great. Please let me know if you need any design input.

Thanks @cooltey

cooltey added a comment.EditedJun 25 2019, 8:29 PM

Hi, @schoenbaechler
A comment from @Sharvaniharan talking about letting the LinkPreviewDialog becomes full width everywhere in the app.
https://github.com/wikimedia/apps-android-wikipedia/pull/404#pullrequestreview-254222940

Please notice that some of the bottom sheets are native components (from Google API) such as "Share link"

If you think it is doable, please create a ticket of doing it.


  1. Allow pulling up the bottom sheet. Currently it’s only possible to tap it when collapsed:

About the pullable bottom sheet:
Now the bottom sheet we're using now is a "Modal bottom sheet" (https://material.io/design/components/sheets-bottom.html#modal-bottom-sheet), which means it would be closed by touching on other views.

If we need to implement the pullable bottom sheet, which will need a "Standard bottom sheet" (https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet).

For that, we will need extra time to create the standard bottom sheet for "Image preview" and "General link preview". If we want to do it, create a new ticket for it might be a good idea.

Thanks for the infos @cooltey, will think about it.


On another note – noticed some issues while using the app today (maybe you’re still working on it) – just FYI:

01) Dropdown content is hidden by card:

02) Update caption label text, according to specs in T225874

03) Apply the same right margin to the components in the edit caption interface

cooltey added a comment.EditedJun 27 2019, 12:22 AM

Thanks for checking, @schoenbaechler. Now the rest of the design changes can be reviewed now (except the bottom sheet stuff we've talked about above)

01) Dropdown content is hidden by card:

Not sure why but I am not able to reproduce this. Maybe it got fixed by other patches.

02) Update caption label text, according to specs in T225874

Would it be fixed by @Sharvaniharan? Please see T225874#5287370

03) Apply the same right margin to the components in the edit caption interface

Sure! https://github.com/wikimedia/apps-android-wikipedia/pull/414

schoenbaechler added a comment.EditedJun 27 2019, 10:57 AM

Hey @cooltey, thanks for working hard on this.

QA from first round

I was not able to check these dialogs. Can we add a trigger to the dev settings so dialogs/notifications can be reviewed? Thanks!


Did not pass design review since it’s still the same. Please update.


  • 8) Show unstructured description in bottom sheet as additional helper

Did not pass design review, since the label needs to be changed to Image description. Once an Image caption (singular!) has been added by users, we should hide Image description in this view to avoid confusion.


  • 20) Opacity of icons varies, it needs to be material_theme_de_emphasised_color (#000 38% in light mode)

Did not pass design review. The color when unlocked needs to be color_group_28 (material_theme_de_emphasised_color). When locked, it needs to be color_group_25.


Did not pass design review since the awkward spaces between labels still exist and separator lines are not stretched to full-width.

Also, the space above and below image does not correlate with design specs.


  • 30) I realized that we’re still using the “legacy” interface to edit descriptions when coming from article pages. Can we update it to use the new UI?

Did not pass design review since the UI has not been changed since the last review.


Second round

  • 31) Can we remove File: from image names? It does not add any value.


  • 32) Can we make sure to use the updated labels (see Zeplin) Especially within the image caption feature, it’s essential to have the language both the description and caption label as a lot of images have descriptions in another language than specified in the app. Also it’s not yet aligned (but I think you’re still working on that).


  • 33) To language is not tappable. Similar to From it needs to show all languages that are set in the app and update according to the users selection.

https://www.dropbox.com/s/4i1nfeas0qnklg9/to-langugage-is-not-tappable.mp4?dl=0


  • 34) Image format on tablets in landscape does not feel appropriate. There is a lot of space above and below the card. Can we use another image ratio, one that is using more height than it does currently?


  • 35) @Charlotte just updated the copy for the unlock dialogs/notifications, see copy master doc (CC: @Dbrant since he spotted the incorrect grammar). Please update it with:

You unlocked the “Add image captions” task
Thanks for all your image caption edits! Since we see you like adding captions to images, we’ve compiled a list of images missing captions. Could you help us improve Wikipedia?

You unlocked the “Translate image captions” task
Congratulations on your many image caption edits - we’re amazed! You’re using the app in multiple languages, so we’ve compiled a list of images needing caption translations. Could you continue to help us improve Wikipedia?


schoenbaechler added a comment.EditedJun 28 2019, 8:30 AM

Not quite sure why this task has been moved to design signoff, as most of the issues still exist @cooltey.

Checked on 2.7.50282-alpha-2019-06-28:

  • 06) Did not pass. Same feedback as last time. Can’t check the dialogs due to missing dev setting.
  • 07) Did not pass. Same feedback as last time. (Outdated labels: "Caption images" -> "Add image captions", "Add captions to images" -> "Add missing short captions to images")
  • 11) Did not pass. Same feedback as last time. Can’t check the dialogs due to missing dev setting.
  • 08) Did not pass. Same feedback as last time.
  • 20) Did not pass. Same feedback as last time.
  • 30) Did not pass. The UI looks good, but the article description is not stored after adding.
  • 30b) Can we remove the info icon from the review screen? (I like how you added it to the edit screen though as it gives users context).

  • 30c) Noticed that when there’s no image description yet, it’s displayed as in the screenshots below. For this scenario, I suggest to add a CTA in addition to the edit button: "Add image caption (%language)". If the unstructured description is empty, we should also hide it completely
  • 31) Did not pass. Same feedback as last time.
  • 33) Did not pass. Same feedback as last time.
  • 34) Did not pass. Same feedback as last time.
  • 35) Did not pass. Can’t check the dialogs due to missing dev setting.
  • 36) Did not pass. Same feedback as last time.
  • 25) Looks good, as per our discussion on Slack.
  • 32) Looks good!

Hi @schoenbaechler.

Most of the feedback was fixed and the PRs were merged, and you are welcome to review the changes.

The following list shows the feedback (PRs) has not been merged and will let you know when they get merged.

  • 20) Opacity of icons varies, it needs to be material_theme_de_emphasised_color (#000 38% in light mode)
  • 33) To language is not tappable. Similar to From it needs to show all languages that are set in the app and update according to the users selection.
  • 34) Image format on tablets in landscape does not feel appropriate. There is a lot of space above and below the card. Can we use another image ratio, one that is using more height than it does currently?
schoenbaechler added a comment.EditedJul 2 2019, 10:51 AM

Thanks @cooltey, we’re almost there! 👊Here are the remaining issues. I also added 20) 33) and 34) to the list as they’re not merged yet and it will make reviewing easier next time.

  • 06) Dialog copy looks good, but there’s a difference in behavior when tapping “Yes, let’s go”. They should lead users directly to the respective feed. Currently, “Yes, let’s go” in the notification/dialog for “Add image captions” and the dialog for “Translate image captions” lead users to the Suggested edit overview page.

  • 07) Labels look good but I noticed that there’s a situation where the “lock copy” for “Translate article descriptions” does not work anymore:

As you can see on the screenshot, I’ve made 53 contributions. The lock message of “Translate article descriptions” says: Locked until you’ve made 50 verified contributions, which is confusing. Please change the copy to: Locked until you’ve made 50 verified article description contributions (updated copy master doc).

  • 20) *not merged yet* Opacity of icons varies, it needs to be material_theme_de_emphasised_color (#000 38% in light mode)

  • 30) Stumbled upon the issue below several times (after tapping the “Add image caption (Deutsch)” CTA in the gallery view and trying to add the German image caption (CC’ing @Dbrant as he might have an idea why):
  • 30c) I’m fine with your proposed solution (This file does not have a description) for this as long as we hide the “Image description” field completely in edit mode (it does not provide any value):
  • 33) To language is not tappable. Similar to From it needs to show all languages that are set in the app and update according to the users selection.

https://www.dropbox.com/s/4i1nfeas0qnklg9/to-langugage-is-not-tappable.mp4?dl=0

  • 34) Image format on tablets in landscape does not feel appropriate. There is a lot of space above and below the card. Can we use another image ratio, one that is using more height than it does currently?

  • 36) Line height looks good now, but there are no top and bottom margins in expanded mode:

Please apply the same top margin as we use in collapsed mode (also: use the same value for bottom margin):

  • 37) It seems that the tap target of the CTA in the gallery view is very hard to tap. Can you confirm that it’s at least 48dp high?

Note:

As you can see on the screenshot, I’ve made 53 contributions. The lock message of “Translate article descriptions” says: Locked until you’ve made 50 verified contributions, which is confusing. Please change the copy to: Locked until you’ve made 50 verified article description contributions

Update the string to Locked until you’ve edited %d article descriptions (verified) as we discussed.

Hi @schoenbaechler

There are #20, #30, #30c, #36, #37 waiting to be merged, and the rest of the feedback items are merged and ready to be checked.

schoenbaechler added a comment.EditedJul 4 2019, 1:37 PM

Thanks @cooltey; 06), 07), 33) and 34) look good. I love the improved tablet experience! Marked them as done in my previous comment: T225635#5299612.

Btw., did you find out what was causing the issue below @cooltey?

  • 30) Stumbled upon the issue below several times (after tapping the “Add image caption (Deutsch)” CTA in the gallery view and trying to add the German image caption.

Hi @schoenbaechler

All the PRs were merged and now it's ready for design sign off again :)

  1. Stumbled upon the issue below several times (after tapping the “Add image caption (Deutsch)” CTA in the gallery view and trying to add the German image caption.

The reason why causes the issue was:

  1. The article you read was a German article, so the file name from the API output will become something like Datei:Palazzo4.JPG
  2. If we use Datei:Palazzo4.JPG as the file name for the Commons, we will get a non-exist page error. Because the file was uploaded to Commons and the correct file name should be File:Palazzo4.JPG
  3. https://commons.wikimedia.org/wiki/File:Palazzo4.JPG vs https://commons.wikimedia.org/wiki/Datei:Palazzo4.JPG

Hey @cooltey, quickly checked the remaining issues (20, 30, 30c, 36, 37) after a good night eating dinner with my family in Bella Italia 🇮🇹. Moving this to QA signoff. Thanks for the hard work & have a great week!

Thanks for checking the changes during your vacation, @schoenbaechler. Hope you have a wonderful vacation.

Ok I think I have this one covered, at least mostly. Looks good to me on 2.7.50282-alpha-2019-07-08

Dbrant closed this task as Resolved.Jul 11 2019, 3:52 PM