1

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?

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

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

  • totally cool!.. – Erhan Yaşar Dec 2 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 Dec 3 at 3:42
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

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.

  • 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 Dec 2 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 Dec 2 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

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.