# Interface Elements and Behaviors

## Interface Elements

In terms of interface elements, if you read the previous section you'll understand that there's no shortage of potential UI in VR/AR content. In terms of particular interface elements such as menus and their behaviors, there are four categories I really lump "interface" into:

1. Text and typography
2. Buttons
3. 2D Iconography
4. 3D Objects

Not a perfect bucketing system, but it works! I will be referencing 3D objects in the section [Button States and Object Manipulation](#undefined). There's also some pretty interesting info in [AR Mobile Design](/the-design-of-virtual-and-augmented-reality/designing-for-the-medium/addressing-the-challenges-of-ar/ar-mobile-design.md) as well.

## Text and Typography

{% hint style="success" %}
I would like to give a big shoutout to Niteesh Yadav who has such wonderful work in [Typography for XR headsets](https://xr-typography.niteeshyadav.com) - please support him and his content!
{% endhint %}

I would also like to point out that localization to different languages will eventually impact your interfaces! It often has a huge impact on whether buttons are readable and text stays in defined containers. If you're interested, please feel free to also check out [Owlchemy Lab's blog on Subtitle and Language Support](https://owlchemylabs.com/blog/vacation-simulator-subtitle-update-language-support). It is one of the best resources for adaptive UI behaviors for Non-Player Characters.

## Interfaces and their Behaviors

```
A massive aside real quick,
I really did not fill out this section at all...
And I'm super sorry for that.
But also, sometimes pictures are worth 1,000 words.

And gifs are obviously 1,000 words times the fps.
```

### Menus

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/ux_hero_handmenu.jpg>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/hand-menu>
{% endembed %}

{% embed url="<https://developer-content-images.magicleap.com/ByXM1fts5MKeWsaOmAmgI/22962af51da4bbb3713bd7219ccadd28/Create.png>" %}
Link: <https://developer.magicleap.com/en-us/learn/guides/design-content-targeting>
{% endembed %}

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/ux_hero_button.jpg>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/button>
{% endembed %}

### Menu as a Form of Object:

{% embed url="<https://docs.ultraleap.com/_images/opening-menu.gif>" %}
Link: <https://docs.ultraleap.com/xr-guidelines/designing-menus.html>
{% endembed %}

{% embed url="<https://docs.ultraleap.com/_images/dragging-menu-items.gif>" %}
Link: <https://docs.ultraleap.com/xr-guidelines/designing-menus.html>
{% endembed %}

{% embed url="<https://docs.ultraleap.com/_images/detachable-panels.gif>" %}
Link: <https://docs.ultraleap.com/xr-guidelines/designing-menus.html>
{% endembed %}

{% embed url="<https://docs.ultraleap.com/_images/world-anchored-menus.gif>" %}
Link: <https://docs.ultraleap.com/xr-guidelines/designing-menus.html>
{% endembed %}

### Scalable UI:

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/ux_hero_objectcollection.jpg>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/object-collection>
{% endembed %}

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/ux_hero_keyboard.jpg>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/keyboard>
{% endembed %}

### Context-Aware UI:

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/hololens2_proximity.gif>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/interactable-object>
{% endembed %}

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/mrtk_tagalong.gif>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/billboarding-and-tag-along>
{% endembed %}

{% embed url="<https://docs.microsoft.com/en-us/windows/mixed-reality/design/images/mrtk_surfacemagnetism.gif>" %}
Link: <https://docs.microsoft.com/en-us/windows/mixed-reality/design/surface-magnetism>
{% endembed %}

{% embed url="<https://developers.google.com/static/ar/design/assets/landscape.gif>" %}
Link: <https://developers.google.com/ar/design/interaction/ui>
{% endembed %}

{% embed url="<https://docs.ultraleap.com/_images/closing-panels-drag-into-close-zone.gif>" %}
Link: <https://docs.ultraleap.com/xr-guidelines/ui-panels.html>
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aliheston.gitbook.io/the-design-of-virtual-and-augmented-reality/an-introduction-to-spatial-design/interface-layout-and-location/interface-elements-and-behaviors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.