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
  • Button States
  • Object Manipulation:
  • Select
  • Translation
  • Rotation
  • Scale
  • Object Manipulation Visualizations
  1. An Introduction to Spatial Design
  2. Interaction Design

Button States and Object Manipulation

PreviousInteraction DesignNextUncanny Valley of Interaction Design

Last updated 2 years ago

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.

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

Translation

Rotation

Scale

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
VR button concept by Mike Alger — How an action might live in 3D space
Link: https://docs.microsoft.com/en-us/windows/mixed-reality/design/cursors
Link: https://docs.ultraleap.com/xr-guidelines/designing-hand-tracking.html
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
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
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
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