The Crotator: A Custom Selection Tool

As a developer, I have tremendous appreciation for usability and respect for those that can conjure it.  Like many developers, though, it’s challenging for me to do on my own.  I’d like to quickly detail the fruits of a small usability example that I came up with recently for a customer’s project.

The Requirements

The customer wanted to take an image and crop out individual pictures within the image. To complicate things, the pictures would not be perpendicular but would need to be cropped and rotated to be straight. The easy thing to do would be to build a rectangular selection tool like you might find in PhotoShop. It would satisfy the requirement of cropping/rotating the pictures, but would require many steps to initiate the initial drag, rotate the whole thing, move it, resize corners, and so on. It was tedious.

What we needed was this:

  • Must crop the image
  • Must rotate the image so it is straight
  • Fast
  • Easy to learn
  • Relatively accurate

A Possible Solution

We talked through a few options, including the previously mentioned PhotoShop style selection tool. Some ideas were good but impractical. Slowly I started to imagine dragging an initial rectangle from corner to corner, and then dragging one of the other corners to the right position with the opposing corner reflecting the movement.

Doesn’t make sense? That was the trouble I had explaining it to others. Ultimately I built the prototype, and once you could actually see what was happening, it made sense.

The Crotator

It sounds like something you need a chiropractor for, but because it both crops and rotates it was named the Crotator. Here is an animation that hopefully makes clear how it works.

In the animation above, the initial selection box is created by dragging from the top left to lower right corner. Once complete, the top right corner of the selection box is dragged to the top right of the image and the bottom left point mirrors the movement to maintain rectangularity.

A Success

The good news is that the Crotator was a success. It fit the requirements and the customer loved the simplicity. In practice, you could show someone once or twice how to use it and they got it. In many cases, you can crop and rotate an image with two drags.

Thankfully the team wasn’t willing to accept the obvious and poor answer to the problem. We were able to focus on finding a great solution to our specific problem that was key to the functionality we were adding.

Advertisements

2 thoughts on “The Crotator: A Custom Selection Tool

  1. craigfrancis1984

    Probably something you have already thought of, but would an alternative be splitting it into two actions?

    Start by getting them to rotate the image to the desired orientation (either with 2 rotate buttons, or with some kind of click and drag, or perhaps both for those on a keyboard)… then do the standard crop afterwards?

    Will probably be a second or two slower (as its not done in one action), but I suspect people will learn how to use it quicker the first time… which is probably more suited for a website that has thousands or users, rather than a single client/user.

    Reply
  2. feedmyconstraint Post author

    That is certainly a good idea. For our needs, the users are a somewhat high churn employee, so while we need it to be easy to learn, someone is always actually showing them how to do it the first time.

    Possibly in the same vein, you could draw a line across the top of the picture, and rotate the entire screen accordingly. Then it is a straight rectangular drag/select. The idea is to move beyond the obvious into solutions best fit for your situation.

    I should have stated this isn’t necessarily a perfect solution for a general case. For our highly specialized case, this was great.

    Thanks for the comment!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s