Button States and Object Manipulation
Last updated
Last updated
A classic! Stays golden:
Idle: the body of the button with text
Hover: the body of the button moves toward the finger as the finger approaches
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.
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!
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.
