The Design of Virtual and Augmented Reality
  • 😄Introduction
    • 🔠Terminology
    • ⁉️Answering Common Questions
  • Background on Existing Design Best Practices
    • 🧩Content Creation: Designing an Experience
    • 🧑‍🤝‍🧑User Experience Design: Designing for People
    • 🏨Environmental Design: Designing for Space
  • The Foundations of VR and AR
    • Immersion, Presence, and Engagement
    • Designing for Human Embodiment
    • Designing for Human Perception
    • Designing for Accessibility
  • Designing for the Medium
    • Challenges of VR Technology
    • Challenges of AR Technology
      • AR Mobile Design
  • An Introduction to Spatial Design
    • Ergonomics of People and Places
    • Input Method
      • Controllers & Other Peripherals
      • Hand Tracking
      • Head Pose and Gaze
      • Voice and Dictation
    • Interface Layout and Location
      • Types of Interfaces and Visual Design
      • Interface Elements and Behaviors
      • Error Prevention
    • Interaction Design
      • Button States and Object Manipulation
      • Uncanny Valley of Interaction Design
  • By Definition, Doing Too Much
    • Multiple Inputs, Platforms, Locations, and People?
    • How To Figure Out What's Not Working
  • Afterword
    • 🌅A Call to the Past and Towards the Future
  • A Ridiculous Repository of Resources and References
    • 🗃️Guides and Frameworks
    • 📺Video Presentations and Essays
    • ✏️Blogs and Articles
    • 📚Books
    • 📑Published Research
Powered by GitBook
On this page
  • Interface Elements
  • Text and Typography
  • Interfaces and their Behaviors
  • Menus
  • Menu as a Form of Object:
  • Scalable UI:
  • Context-Aware UI:
  1. An Introduction to Spatial Design
  2. Interface Layout and Location

Interface Elements and Behaviors

PreviousTypes of Interfaces and Visual DesignNextError Prevention

Last updated 2 years ago

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

Text and Typography

I would like to give a big shoutout to Niteesh Yadav who has such wonderful work in - 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 . 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

Menu as a Form of Object:

Scalable UI:

Context-Aware UI:

AR Mobile Design
Typography for XR headsets
Owlchemy Lab's blog on Subtitle and Language Support
Button States and Object Manipulation
Link:
Link:
https://docs.microsoft.com/en-us/windows/mixed-reality/design/hand-menu
https://developer.magicleap.com/en-us/learn/guides/design-content-targeting
Link:
https://docs.microsoft.com/en-us/windows/mixed-reality/design/button
Link:
Link:
https://docs.ultraleap.com/xr-guidelines/designing-menus.html
https://docs.ultraleap.com/xr-guidelines/designing-menus.html
Link:
https://docs.ultraleap.com/xr-guidelines/designing-menus.html
Link:
https://docs.ultraleap.com/xr-guidelines/designing-menus.html
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
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
Link:
https://docs.ultraleap.com/xr-guidelines/ui-panels.html