What is the best way to show the crop window?

I have seen two popular approaches. A center aligned crop window which appears to be a random selection of the image.

enter image description here

Or cropping handles are at the image corners.

In both the cases, the users have to adjust the crop themselves.

Are there any studies or articles about it? I suspect platforms like Instagram/Snapchat must have taken something into account.

  • If a company hires a designer, and they're deeply and widely personally experiential in nature, have deliberately built an enormous base of anecdotal experience, have profound and wide insight into, empathy for and consideration for and of the experiences of others, and perceive all things from many points of view, why would they need a study to determine this? And if the person posing as a designer is not this, why do they consider themselves a designer? Because they're a UX Designer?
    – Confused
    Jan 9 '17 at 11:23

In my opinion showing the handlers in the corners of the (original) image might make some users miss them.

By showing a cropped area by default the user understands he has to select a portion of the image and where are the handlers (/edges) he has to interact with.

Also if the app has a predefined ratio for the output, limiting it in the cropping frame helps acknowledge it and prevents extra actions.

  • 1
    Showing the crop handles within the image boundaries does make the functionality more obvious and, with user studies, eventually a pattern of commonly cropped areas and sizes should start to appear meaning the default area could be the most commonly used area. Jan 9 '17 at 10:25
  • What might be annoying about this approach to some people is that when you just want to crop it on one side, bottom for example, you always have to adjust ALL of the edges. Maybe giving the user the ability to change his preference in the settings would be the optimal solution?
    – Big_Chair
    Jan 9 '17 at 13:07
  • @Big_Chair good point, I guess it depends on the context of the crop. I was thinking in a profile picture, but in an image editing software it makes sense what you say.
    – Alvaro
    Jan 9 '17 at 13:18
  • @Alvaro Image editing softwares tend to provide the crop functionality as a tool where the user can 'draw' the crop space from top-right to bottom-left (or any other diagonally opposing points) rather than a pre-existing space that needs to be adjusted. Jan 9 '17 at 14:56
  • @AndrewMartin in my Photoshop version, at least, when I select the cropping tool the boundary is set on the image boundaries. But also once selected, I can do as you say (drag top-right bottom-left)
    – Alvaro
    Jan 9 '17 at 15:08

"Best way" will always be subjective.

Cropping is generally done to ensure the image fits the aperture the image is destined to end up.

For example Facebook and Twitter allow you to crop you avatar/profile image and both provide a different aspect ratio for the banner image, should you change it.

This ensures that the image is constrained and is displayed in the most eye-pleasing format, images stretched or contracted to fit an enclosing box look less pleasing.

The grab handles are probably the most common and the opaque view of the full size image allows the user to see the crop in comparison to the full size image and make an informed decision as to the selected they are making.

Depending on what the end result is for the image you are cropping, I believe you could make a couple of UX improvements. One would be to provide cropping buttons that automatically provide a bounding box that fits the size of the container the image will go into. The second would be to allow the user to control the opaque value of the rest of the image, so they can choose how much of the full size image works for them when cropping.

  • I don't think this answers the OP's question. Jan 9 '17 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.