Button States and Object Manipulation

Button States

A classic! Stays golden:

1. Idle: the body of the button with text

2. Hover: the body of the button moves toward the finger as the finger approaches

3. Select: the button changes color or receives a touch mark when touched

However, these states need to be purposefully designed for with each type of platform in mind. Obviously mobile touch screens don't have a hover. However, a lot of VR experiences also choose not to have a hover due to their lean into immersion and objects as the only interactable content within a scene.

Now we get to this - this design is the true bread and butter of hand interactions for buttons. Now, hand interactions suffer from a lack of haptic feedback. So the solution for a lot of designers has been towards a "completion" affordance. This essentially means that the button press sits up away from a rectangle or "button back" and when a user pushes it to the back they know they've completed the interaction properly.

VR button concept by Mike Alger — How an action might live in 3D space

Object Manipulation:

Another classic! Select, Rotation, Translation, and Scale

These manipulations are just some considerations for digital object interactions. I hope you'll also notice the similarities between two very different imputs and two very different mediums when content is designed intentionally. It can be really difficult to find overlapping values of design between flat (mobile) and spatial (headset) paradigms - but it is possible!

Select

Oculus (Meta) Interactions - Select Something Link: https://developer.oculus.com/resources/hands-design-interactions/

ARCore Content Manipulations Link: https://developers.google.com/ar/design/content/content-manipulation

Translation

Oculus (Meta) Interactions - Move Something Link: https://developer.oculus.com/resources/hands-design-interactions/​​

ARCore Content Manipulations Link: https://developers.google.com/ar/design/content/content-manipulation

Rotation

Oculus (Meta) Interactions - Rotate Something Link: https://developer.oculus.com/resources/hands-design-interactions/​​

ARCore Content Manipulations Link: https://developers.google.com/ar/design/content/content-manipulation

Scale

Oculus (Meta) Interactions - Resize Something Link: https://developer.oculus.com/resources/hands-design-interactions/

ARCore Content Manipulations Link: https://developers.google.com/ar/design/content/content-manipulation

Object Manipulation Visualizations

Consider visualizing shadows, cages or guides to show the potential of an object.

• Cage: A 2D or 3D boundary that references the volume, scale, and shape of something.

• Shadow: Represents proximity and how far or close something is.

• Guide: Lines or cues that represent alignment and proximity.

• Gizmo: A visual indicator for movement, rotation or scale — useful for when a user can only do a single action.

• Parameter: A reference to the degree and value of change.

Link: https://medium.com/@goatsandbacon/a-quick-guide-to-designing-for-augmented-reality-on-mobile-part-2-fb76fe87dd41

Link: https://docs.microsoft.com/en-us/windows/mixed-reality/design/cursors

https://docs.ultraleap.com/_images/make-interactions-physical-cat.gifdocs.ultraleap.com

Link: https://docs.ultraleap.com/xr-guidelines/designing-hand-tracking.html