# 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.

{% embed url="https://miro.medium.com/max/1200/1*XOiMxBJgf6_4eoKdUn23gg.gif" %}
VR button concept by [Mike Alger](https://twitter.com/thealphamike) — How an action might live in 3D space
{% endembed %}

## **Object Manipulation:**

Another classic! \
Select, Rotation, Translation, and Scale

**T**hese 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/](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2FHtngPVvXUqvTY6kTwidf%2F85958469_491181118479072_8089873602721087488_n.gif?alt=media\&token=c632afa5-43ca-48e4-ab35-cb68aacd83e7)

![ARCore Content Manipulations
Link: https://developers.google.com/ar/design/content/content-manipulation](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2FqcarASwJcWm6YZaH61br%2Fselection.gif?alt=media\&token=5cff9050-e957-4e66-a6e5-b8d98dfc547c)



### Translation

![Oculus (Meta) Interactions - Move Something&#x20;
Link: https://developer.oculus.com/resources/hands-design-interactions/​​](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2FhgsteUfhXbU6AFrMCUGe%2F85233771_491181131812404_8982570147034169344_n.gif?alt=media\&token=72398718-7aed-4cec-9fad-f4c5cb1ded67)

![ARCore Content Manipulations
Link: https://developers.google.com/ar/design/content/content-manipulation](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2FxQ2RKqK8Q98LI7fbGMKh%2Ftranslate.gif?alt=media\&token=de2ca490-0dd7-4a2e-95fb-d03c7671ab90)



### Rotation

![Oculus (Meta) Interactions - Rotate Something&#x20;
Link: https://developer.oculus.com/resources/hands-design-interactions/​​](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2FGqkFrww0zOonaq0ptaV3%2F85603938_491181135145737_535765322993500160_n.gif?alt=media\&token=3801d7a8-ab23-42df-add4-26811f9ce8eb)

![ARCore Content Manipulations
Link: https://developers.google.com/ar/design/content/content-manipulation](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2F31KVatcXohWxfb6ahA9u%2Frotate.gif?alt=media\&token=e5794b0e-dd88-487d-9b20-06a986001e86)



### Scale



![Oculus (Meta) Interactions - Resize Something&#x20;
Link: https://developer.oculus.com/resources/hands-design-interactions/](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2FfgMzYcIsQsu8O6ALGX30%2F85558026_491181138479070_4232267241699147776_n.gif?alt=media\&token=d1ba12c2-0a15-4d37-8887-5217057c8de9)

![ARCore Content Manipulations
Link: https://developers.google.com/ar/design/content/content-manipulation](https://2422624427-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoHU2Xjwl8OlTCLrERqz2%2Fuploads%2Fu8JrxVq6AnP90dDjPTIn%2Fscale.gif?alt=media\&token=61060266-be64-4b1c-ab6a-7548aee740b9)



## Object Manipulation Visualizations <a href="#id-1b39" id="id-1b39"></a>

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](https://miro.medium.com/max/1400/1*yFXj_h4cun1MKft7NWpYYA.png)

{% embed url="https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/ux_hero_cursor.jpg" %}
Link: [https://docs.microsoft.com/en-us/windows/mixed-reality/design/cursors](https://docs.microsoft.com/en-us/windows/mixed-reality/design/cursors)
{% endembed %}

{% embed url="https://docs.ultraleap.com/_images/make-interactions-physical-cat.gif" %}
Link: [https://docs.ultraleap.com/xr-guidelines/designing-hand-tracking.html](https://docs.ultraleap.com/xr-guidelines/designing-hand-tracking.html)
{% endembed %}

