[go: nahoru, domu]

Page MenuHomePhabricator

Optimize image crop for image suggestions
Closed, ResolvedPublic

Description

Problem

Usability tests revealed, that images are sometimes cropped in a suboptimal way. E.g. on the above image, the animal is barely visible due to the image crop.

Screenshot_20210326-162651.png (2×1 px, 612 KB)
Screenshot_20210326-162806.png (2×1 px, 2 MB)
Proposed solutions
Variant AVariant B (blur)Variant C (background gradient)
add-images-08-image-crop-suggestion-01@2x.png (1×720 px, 413 KB)
add-images-08-image-crop-suggestion-02@2x.png (1×720 px, 449 KB)
add-images-08-image-crop-suggestion-03@2x.png (1×720 px, 432 KB)
ZeplinZeplinZeplin
  • Show the full image contained instead of a cropped image.
  • Use a similar technique to show the entire image as for the image tags task, see Zeplin
  • Variant A uses a grey background, Variant B uses a background blur, Variant C uses key colors from the image to create a gradient (similar to the Explore feed design in 'Because You Read')

Event Timeline

Hey @JTannerWMF and @Dbrant — please review the proposals (optimized feed image presentation) in the task’s description. Thanks!

scblr added a subscriber: iamjessklein.

(the variants are the result of a live design session with @iamjessklein 👋😅)

LGoto triaged this task as Low priority.Apr 5 2021, 4:06 PM

I ended up implementing Variant C. I do believe it's more pleasing to the eye, and I agree it's better to show the image fully (not cropped).

https://github.com/wikimedia/apps-android-wikipedia/actions/runs/722878752

Solid work @Dbrant — one question → is it possible to reduce the brightness of the colors a bit in dark and black theme? They’d be even more pleasing if darker. Thanks!

ABorbaWMF subscribed.

So far so good, have not seen the bad cropping as described above on 2.7.50355-alpha-2021-05-03