0

I'm working with a 2D representation of 3D objects such as a PTZ camera or avatars and cubes. I understand that the best way to rotate things in a 3D space is with direct manipulation using a widget rendered inside the 3d world like Unreal engine:

enter image description here

However, my UI doesn't have a 3D representation yet and even it had, it is still necessary to have fine tuning control over input box or something else.

enter image description here

Some current references of UI patterns: 1-PTZ control for IOS: https://www.youtube.com/watch?v=uM7-AaoqmKQ enter image description here

2-YI Dome for IOS: https://www.youtube.com/watch?v=75XfUhsODLk enter image description here

Legacy controls: I found some old GUI styles that still use this: enter image description here

Constraints: Needs to be small, to accommodate a complex UI. Needs fine tuning with input boxes. Needs to be friendly for both touch and using keyboard/mouse input. The software will run on a small 1440 x 900px size. This representation needs to be flexible, because the object to be rotated could be any physical body, including a cube or a box, not just a camera.

I design the situation into Invision Studio 2D application which uses some simple 2D gimmicks to make a 2D representation of positioning easier. Although it uses X and Y inputs for fine tuning, new features such as responsive use the dots to fix something into a position when using responsive instead of checkboxes with text. This is the type of visual representation ideas that I'm looking for.

enter image description here

Improve this question
4
  • Is it just panning and tilting? Because those are only 2 axes/dimensions.
    – PixelSnader
    Dec 16, 2018 at 22:06
  • For robitic cameras is panning, tilting and zoom. However, I might have to allow rotation in 3 axis (yaw pitch and roll) for other types of objects, on top of that I also have positional data in 3 dimensions (XYZ).
    – Daniel Vianna
    Dec 17, 2018 at 3:13
  • See also: alternative to a slider - ux.stackexchange.com/a/30358/6046
    – Roger Attrill
    Dec 17, 2018 at 13:57
  • Your question suggests a 2D constraint. Does it need to be a 2D control, or are you asking for ideas that would work on a mobile device with 2D screen (vs a 3D input device like a SpaceBall)?
    – Michael Hogan
    Dec 18, 2018 at 7:47

1 Answer 1

Reset to default
3

If I get what you're asking, the solution is to allow users to drag things directly. Let users drag the video image instead of making them use video camera controls. Let users drag to rotate the image of 3D objects directly.

If users are controlling a camera, simply show the video and allow users to drag the camera horizontally or vertically by touching the video itself. This removes all the discovery, cognitive load, and skill learning of making users discover and learn to use a controller.

Zoom can be controlled by a slider. The slider is the closest thing to direct control with the least learning load.

Here's an example of a video camera controller. Users can just touch and drag the video itself to control the camera. There can be precision controls below and other controllers too. The first is showing onboarding or help instructions. The second is what it looks like when user is interacting with it. enter image description here

enter image description here

Use the same approach for 3D objects except dragging can rotate objects instead of moving the camera. You can give users both abilities by allowing them to switch between rotating the object (rotating the camera) or moving the camera.

Improve this answer
4
  • Expanding on this idea (if the presentation is mobile) why not utilize pinch/swipe/etc for zoom & pan since users are already familiar with those interactions for a camera
    – Bryce Howitson
    Dec 17, 2018 at 20:42
  • Yes that's correct. The idea is to allow users to manipulate the object directly, that's why I mentioned "direct manipulation" of the object like in Unreal: youtube.com/watch?v=lSIya9obbSo . I need XYZ coordinate + Yaw + Pitch and Roll + Zoom + offsets on all of those positions. The fine tuning is similar to any graphical software, you rotate something then you adjust the input to remove decimals or to get a perfect angle or position, like removing decimals.
    – Daniel Vianna
    Dec 17, 2018 at 21:51
  • The design problem is having an alternative for the input boxes for fine tuning. If you open something like 3dsmax or Unreal, it's really confusing and overwhelming seeing so many input boxes.
    – Daniel Vianna
    Dec 17, 2018 at 21:54
  • 1
    @DanielVianna This solution covers that stuff. I have more experience than I want to say using interfaces like unreal. This is a solution for that. Users can do things visually. You can control the number of numbers and their precision. I made examples of video cameras because that's what you used in your examples. You'd use the same controls for 3D. Dragging the view and sliders to manipulate the camera view or fix the camera position and manipulate objects.
    – moot
    Dec 17, 2018 at 23:21

Your Answer

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

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