In web and mobile product design industry, there are various design systems that designers usually follow: Fluent Design System by Microsoft, Material Design by Google, Human Interface Guidelines by Apple, etc. Those design systems are experiences that people gained over so many years of design practices, they provide guidelines and tools for designers thus facilitate the development of future products.
Like the web and mobile products, VR products also need to follow certain design principles to deliver the best user experience. However, at this stage there is no well-developed design systems dedicated to the VR products. These classic web and mobile product design systems are still good references, but the dimensionality of user experience in VR products is naturally different. Additional guidelines for user interactions of extra dimensions are required.
This is a collection of prototypes I've been done in past several years, they reflect the principles I've learned through my experience of design work.
The basics of spatial element interaction is the working area. Not only anthropometric numbers should be carefully considered, modules which were developed in so many years in the real world are also important in VR. The close and far reach, comfortable viewing distance, typical working surface sizes, etc., these are fundamentals of good user experience of the VR world.
Stationary Working Area, main considerations include typical desk module sizes, comfortable viewing distance, left & right reaches.
Left & Right Reach - Dash lines indicate max distance users can directly interact with hands, while solid lines indicate comfortable interaction distance.
Instructional Tags
Instruction tags are critical especially for new users while they are not sure how to properly interact with the product; however, most of the time these tags are not important for the product to function. With that being said, instruction tags need to be visible when they are needed, meanwhile unnoticeable most of the time. Other than that, they should be switchable to instruct different interactions of different functionalities.
Instruction Tag Typologies, they are used in different scenarios.
A set of prototypes testing switchable instruction tags. The thumbstick and buttons have one set of functions when the user is trying to add new furniture; however, they have another set of functions while the user is trying to adjust an existing furniture. Instruction tags are properly arranged, so users only see the info they need. Etched tags are used here since they are less destructive and also all buttons are clearly visible in this case.
Interaction Feedback
Unlike the web and mobile applications, spatial relationships between different objects in VR are much more complex. Without proper feedback, users can hardly tell which object is interactable. Thus interaction feedback mechanism shall be carefully designed, to not only indicate which object the user is interacting with, but also to imply if the object is interactable and how users can interact with it.
Working surface and furniture in this prototype are highlighted in completely different ways, thus the user knows they have different attributes and they should be interacted with in different ways.
Hand Menus
Hand Menus usually follow the movement of hands / arms. When people interact with items attaching to different parts of their hands / arms, gestures vary. Thus menus attaching to different locations also have their own optimal way of interaction.
Tracked Location
Palm Manu
Back of Hand Manu
Front Wrist Menu
Side Wrist Menu
Back Wrist Menu
Each type of menu has its own applicable typologies, functionalities, animations and feedback mechanism. They can be used independently or comprehensively. Here is a set of prototypes testing the optimal hand menu interactions and combinations.
Front Wrist Menu + Side Wrist Menu Combined
Controller Tip & Radial Side
There are two other attaching areas while the controller is used: Radial Side and Controller Tip.
These two areas are not ideal for complex menus, but they are perfect to be used as a cursor or a medium of preview.
Two additional attaching areas when using the controller - tip and radial side.
Object Preview - users can inspect the furniture before they place it.
Sketch Line Weight Preview- user can tell the line weight through the size of the ball.
UI Element Positioning
Compared to web and mobile applications, VR products have an additional dimension of display which endows substantial visual space to interact with. Thus UI elements shall be flexible and special consideration is necessary.
Comfortable Viewing Distance
A set of prototype testing UI element flexibility and spatial constraints - UI elements are initiated to a default location; they can be moved as needed within a certain distance; while they are pulled back to original location, they snap.
Not only can the UI itself be spatial, the elements within the UI can be spatial as well. This gives VR extra advantages for users to inspect products, designs and virtual spaces.
3D display as an UI component - A prototype testing 3D preview of selected furniture
System Tool Interaction
System tools are usually independent from main tasks, thus they shall always float in front of all spatial elements and interfaces. While they are turned on, interactions with all other spatial elements shall be disabled, meanwhile they shall be able to supersede certain functionalities and settings within the space.
A set of prototypes testing screenshot function - Camera ration and FOV can be adjusted, the reference plane is filtered in the screenshot view
Heads-up display is the UI element that users don't interact with directly. However, it is essential in some cases since it sticks to certain positions within users viewport, which endows it ability to display critical information without distracting users from the task itself.
Since it follows user's view, it is important to consider basic human visual data, as well as the FOV of the VR device itself.
A prototype of HUD above indicating tools that it is currently using.
A prototype of HUD beside indicating basic info of the selected furniture.
More prototypes will be added to this collection, stay tuned...
