3

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:

enter image description here

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

enter image description here

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?

Improve this question
3
  • If they are fixed steps, can't you just do a "Rotate 45 degrees" button?
    – DennisW
    Commented Dec 2, 2019 at 14:20
  • @DennisW I want to avoid buttons because and make a "more natural" interface!
    – nkint
    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

4 Answers 4

Reset to default
6

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)

enter image description here

Improve this answer
3
  • totally cool!..
    – Erhan Yaşar
    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.
    – Michael Lai ♦
    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
2

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: enter image description here

When it's being rotated, it could display the rotation info over the object: enter image description here

Improve this answer
2
  • 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
1

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.

enter image description here

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Since you have steps given as fixed degrees, it's more viable and this way you may beat the need for an effort of handling extra animations to that circular slider.

Note: I didn't need to edit the original photo of you even it displays the hand movement as an actionable item, rather displayed the extra part.

Improve this answer
2
  • Hi @Erhan, thanks. if the step is something like 2° degrees... it will be a very long list of radio button. I did not understand the not anyway
    – nkint
    Commented Dec 2, 2019 at 15:39
  • You're right about that but I offered it also a few options displayed with the question. If you're asking about the note I typed last, it simply says "please regard the hand movement within my solution as the screenshot of your question, since it represents hand as a moving item". That was all..
    – Erhan Yaşar
    Commented Dec 2, 2019 at 15:46
0

rotation

If you have a look at the screenshot, normally in design software like Adobe, when you move your cursor to the edge of an object, it will turn into rotate cursor.

This is an example from the prototyping software figma. Note on the right side you have a panel where you can precisely define rotation settings. It may be a good idea to have a global panel like this so that other object properties can be manipulated here. Scroll to rotating objects

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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