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. There's also some pretty interesting info in AR Mobile Design as well.

Text and Typography

I would like to give a big shoutout to Niteesh Yadav who has such wonderful work in Typography for XR headsets - please support him and his content!

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

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

https://developer-content-images.magicleap.com/ByXM1fts5MKeWsaOmAmgI/22962af51da4bbb3713bd7219ccadd28/Create.pngdeveloper-content-images.magicleap.com

Link: https://developer.magicleap.com/en-us/learn/guides/design-content-targeting

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

Menu as a Form of Object:

https://docs.ultraleap.com/_images/opening-menu.gifdocs.ultraleap.com

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

https://docs.ultraleap.com/_images/dragging-menu-items.gifdocs.ultraleap.com

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

https://docs.ultraleap.com/_images/detachable-panels.gifdocs.ultraleap.com

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

https://docs.ultraleap.com/_images/world-anchored-menus.gifdocs.ultraleap.com

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

Scalable UI:

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

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

Context-Aware UI:

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

Link: https://docs.microsoft.com/en-us/windows/mixed-reality/design/billboarding-and-tag-along

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

Link: https://developers.google.com/ar/design/interaction/ui

https://docs.ultraleap.com/_images/closing-panels-drag-into-close-zone.gifdocs.ultraleap.com

Link: https://docs.ultraleap.com/xr-guidelines/ui-panels.html