3D Interface
Exploration

Exploring the 3D interface and interaction of materials

Overview

I made a simple design exploration of interfaces and interactions that might be used in XR. Since the interfaces are shown in 3D space, I used depth between interfaces to express hierarchy, and I created relatively translucent materials to blend in with the background rather than floating in isolation.


Also, since the components exist in a three-dimensional state, I tried to utilize the features of 3D to interact with the user in a 3D space as realistically as if they were browsing products or objects in real world.

Interface Material

As the material for the interface that will be used in XR, I chose a frosted glass material. This material has the characteristic of not being solid. Because of this, I thought it would be able to reflect some of the background, both in the real and virtual world, creating a sense of unity and blending between the UI and the background. In other words, it would provide visual comfort to the user.

Visual Hierarchy
with Depth

The biggest difference between 2D and 3D interfaces is the sense of spatial depth. The extra spatial axis (Y axis) in 3D creates a depth that is difficult to perceive on a 2D flat screen.


By using this depth, we can focus the user's eyes on a specific area more effectively. I used this to create a clearer visual hierarchy by moving the hover/active parts further forward and the non-active parts further back, or by making the colors stronger/weaker.

Preview the material of a chair: Move the 3D chair and Material palette to the front, highlighting it by increasing the emission

Preview the material of a chair: Move the 3D chair and Material palette to the front, highlighting it by increasing the emission

Search: Move the search bar to the front and increase the emission to focus it

Search: Move the search bar to the front and increase the emission to focus it

Details

Resume