# Which is the better way to rotate an object?

I'm a developer on the long way to learn design so please forgive me if I'm not into design jargon 🙏.

I have to design an interface to rotate a 2D object. The rotation is discrete by fixed step: the object can be rotated by 0°, 45°, 90°, ..., 180° degrees (in this example the step is 45° but it can be parameterised by configuration).

I have few ideas, and I'd like to discuss which could be the best one.

### Standard slider:

Standard slider are everywhere, easy to implement, easy to use. There's a slider over the object and by moving it, the user can control the rotation of the object.

### Circular arc slider handle

There is the object surrounded by a circular arc slider with an handle that the user can drag to rotate.

I think that the circular shape of the slider can be functional to advise the purpose of the slider (a rotation), but I think that moving by fixed step can be not so intuitive both for the implementation and the usage.

What can be the best one? Any considerations/ideas/advice? Is there some other ways to do it? Maybe simpler ways?

• If they are fixed steps, can't you just do a "Rotate 45 degrees" button? Commented Dec 2, 2019 at 14:20
• @DennisW I want to avoid buttons because and make a "more natural" interface! Commented Dec 2, 2019 at 15:38
• Zero degrees starts at the top, not the left side in most math or compass situations.
– Rob
Commented Dec 3, 2019 at 14:03

I think arc looks cool, but is hell to implement and users will try to follow the arc with is quite complex motion to do with mouse and especially trackpad. I think it is better to suggest movement along one axis because you control one dimension. Why waste second dimension for that?

Or simply suggest that rotation is possible by placing rotation icon next to the object and then allow mouse movement in along any axis, rotation point is in the center on the object (or if otherwise indicated) and rotation is happening along some rotation line as shown on illustration (mouse pointer is at the other end of magenta line)

• totally cool!.. Commented Dec 2, 2019 at 16:23
• +1 this is a well-known design pattern that is quite applicable, although it seems to be predominantly a Microsoft kind of convention so I hope it applies equally well in other contexts. Commented Dec 3, 2019 at 3:42
• The feedback of the pointer type is important because grabbing the edge usually transforms the edge object and grabbing the corners typically transforms the edges adjacent to the corner point. And often the rotation interaction area is just outside the boundary of the shape near the corner, with no visible handle. But consideration should be given to touch devices where there is no pointer feedback. In those cases, an explicit rotation handle that can be touched and dragged is appropriate (as shown on the left).
– Wyck
Commented Dec 9, 2023 at 18:20

This should just be controlled by simple buttons because it only rotates to a few positions.

Simple buttons can remove all the cognitive load of figuring out what buttons do. They encourage users to press to discover.

Here's a tool with simple button controls:

When it's being rotated, it could display the rotation info over the object:

• In the bottom picture, it's not easily evident if the rotation was clockwise or counter clockwise. Presumably a positive number is clockwise (by the label on the left-most button), but there's a cognitive load to deduce that. Presumably a negative sign would appear in the text area if it were a counter clockwise rotation, but the font is much too large to display the 3 digits and sign character required to represent an arbitrary rotation. This is not a well thought out design.
– Wyck
Commented Dec 9, 2023 at 18:26
• Not a well thought out comment @Wyck
– moot
Commented Dec 11, 2023 at 0:53

I think displaying the 'circular arc' is better combined with a radio button (or some other considering your preference) option to choose below the object.