919682 - Image cropping needs better discovery UI

Status: VERIFIED FIXED

(Webmaker Graveyard :: Popcorn Maker, defect)

Description

[Jacob [:Jacob]]

Got to playtest the new image cropping feature this weekend at Maker Faire, and sorry to say Scott, most folks didn't get it right away.

I didn't want to spend all the time letting them figure it out since they were trying to make something, so I explained and walked them through, but left on their own, it would have taken them longer than we want for them to understand how it works.

Basically there was two things that tripped them up:

1) When they tried to shrink the image, it started cropping, and they would say something like "hey why is my image disappearing?"

I'm wondering if we should keep the fixed aspect resize on by default and only engage in the cropping after a double click? I'm a little hesitant because I want people to discover the awesomeness of cropping, so maybe there's a better way to balance discover of resize vs cropping

2) After they double clicked to crop, they didn't understand how the two different boxes functioned, and would often try to resize the wrong handles

The semi-opaque image shading is apparently not enough. We can take a first step toward better distinction of the two boxes by giving noticeably different looking borders. Perhaps the image box itself should be red and the masking window box should be green.

Even better, the image box could start turning red on the bordered parts that go outside of the masking window(?)

You see what I'm saying though right?

Comment 1

[Scott [:thecount] Downe]

"I'm wondering if we should keep the fixed aspect resize on by default and only engage in the cropping after a double click?"

I actually totally agree with this. It is something I had at one point but removed because that's not how other programs do it.

Definitly something that should happen quickly.

I'm not sold on the second issue, but, can we move that into another ticket?

Comment 2

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/popcorn.webmaker.org/pull/222

Wow, love this kind of patch.

Huge win, very little work.

Comment 3

[Matthew Schranz [:mjschranz]]

Comment on attachment 808798 [details] [review]
https://github.com/mozilla/popcorn.webmaker.org/pull/222

You have no idea how much more I like using this with that change. I kind of hated that too while doing the initial review, but didn't make a fuss about it because that was what most cropping tools were like.

Comment 4

[Jacob [:Jacob]]

often you need to shrink the image first anyway before you start cropping so you can have room to make the actual crop and not get annoyed.

Nice going team!

Comment 5

[Scott [:thecount] Downe]

Staged: https://github.com/mozilla/popcorn.webmaker.org/commit/c5904335477e07732b45b094069b8b67dd56f714

Needs verification.