Best Practice: Mouse Input Design for Grabbing and Rotating

Hey folks,
I'm currently trying to figure out a nice way to a) grab and drag an object, and b) rotate that object while it's being dragged. For mobile, I'll obviously use finger gestures, but for PC I'd like to only use the mouse.

I am using left-click to grab and drag and right-click for the rotation. Here are the combinations that I have tried so far.

1) ROTATION VIA MOUSE MOTION ALONG THE X-AXIS
1.1 Object snaps back to mouse (no mouse offset)


1.2 Mouse offset after rotation


1.3 Following the mouse position



2) ROTATION VIA CIRCULAR MOTION AROUND THE OBJECT
2.1 Object snaps back to mouse (no mouse offset)


2.2 Mouse offset after rotation


2.3 Following the mouse position



All the combinations that I have tried, have their pros and cons, and I don't really like any of them. Here're the problems I have:
- With the mouse offset (no snapping back), the cursor is bound to end up at a great distance from the object.
- The snap back effect is looking a little... snappy
- The combination of rotating while moving isn't very intuitive.

I also tried using the mouse wheel, which seemed to be a viable option. I had troubles adapting the sensitivity values though, so the settings for one mouse seemed okay, but with another mouse the increments were way too big / small...

Right now I'm leaning towards maybe having a mouse offset and once the distance between cursor and object gets too big, having the object snapping back to the cursor (albeit more slowly than shown above).

Is there any good practice to this input design problem?
Looking forward to hearing your thoughts!

 

Wow, that seems like a hard problem. Are you sure you need to drag (translate) and rotate at the same time? Why not separate these so that one mouse-drag operation either translates or rotates the object? This is the way every object-manipulation app in the 2D world works, at least as far as I've ever seen, and I suspect there are good reasons for it.

 

I guess that would be an option. I think every solution where this has been done in one go has been on a phone so far...

 

I think the example to look at is software where you do stuff like this a lot. I.E., 3d software and photo editing software.

I'd agree with Joe, make it two separate things. CLick and drag to move it, then a second key (either a toggle or hold) to rotate. Simple, intuitive, because one key is manipulate, and then a toggle changes type of manipulation.

In game I am currently working on we have a similar feature. You click and drag on a compass to move it around. If you hover over the corner, the UI icon changes to rotatey icon and then click and drag rotates it. That's another way which keep things pretty simple. I got the inspiration there jsut by copying photoshop.

 

You are totally right. I'll see what I can come up with and report back. Thanks for the input, guys!