Serafina Yu
HomeWorksVisionsAbout
EmailLinkedInInstagramWeChat
View Serafina's Resume

3D Color Picker

A Journey of Discovering XR Design Methodologies
Project Type|Interest-oriented Redesign Project
Project Timeline|Jun - Aug 2020 ( 5 weeks )‍
Project Copy Right|Serafina Yu / Haoran Xu
My Contribution|Requirements Definition / Color Research / Feature Mapping / UV Mapping / Human Resources
Tools Used| Figma / Microsoft Maquette Beta / C4D / Unity

How can XR designers help in spatial color picking?

While Virtual Reality is a young technology, XR designers are making great strides–developing the medium at the speed of innovation. Dedicated to our work, we pursue solutions through trial and error, relying on our team’s assorted skill sets. We asked ourselves how XR designers can help in spatial color picking.

Problems

We identified issues(early assumptions) with the color picking procedure in Microsoft Maquette Beta through research and discussions with industry professionals. Our target issues became:
‍
‍1. Improving Color Picker efficiency by up-dimensioning the color space.
2.  Improving Gesture Control accuracy in a design aspect.
3. Implementing more 3D interaction.

Target Audience

Since Microsoft Maquette Beta targets the design industry, research was much more manageable. Interviewing design experts and student designers supported many of our original hypotheses. When artists select colors, we found that product/automobile designers prefer accuracy, while fine artists/illustrators prefer intuition. We've captured clusters in the circled area from our findings. Interviewees were asked about their preferences and habits in color selection and their current experiences and concerns.

RGB vS. HSV

A few reports from HubPages have shown between RGB & HSV color space, that HSV is capable of separating pure colors from their lightness, which allows people to perform different operations on either the color itself (Hue) or its intensity (Value).

For example, in computer vision applications, people are more interested in the color of the image but less interested in its lightness. In HSV, lightness is considered noise, because it doesn’t change the surfaces. Only the light. This explains why HSV usually makes the color algorithm more robust and less sensitive to image lightness.

Color picker in VR can be optimized
with only necessary Information displayed.

Our Solution

Using the HSV color form, we would only maintain one color wheel to remove the interference while making prototypes. (See image indication)

We would also apply the axis lock vertically and horizontally to help users independently reduce saturation/brightness ranges. Once the axis is locked, they can directly find the color number without worrying about errors brought by body movement.

Mapping

We've sketched some possible systematic interface layouts as low-fidelity prototypes. With an easily triggered joystick, default and preset color swatches can be kept to a large extent with preset materials available as well once we assign the color space to the right-hand controller.

We expedite the flow state from color-selecting to color-applying with scenarios that may appear in the 3D color picking process. Most likely, users would go with two significant flows defined below.

‍1. To trigger the 3D color picker, users stick down the wheel of the right-hand controller. When the cursor moves left and right with the side button(default grab button) held, the X-Axis is locked where colors are in the same saturation. When the cursor moves up and down with the side button held, the Y-Axis locks colors in the same tone/grayscale.

2. The selected color would also be displayed in the geometry panel where users tap the button on the back of the right-hand controller(default click button) and assign it directly to an existing form.

Unity Actualization

With the flow state finalized, we actualized the prototype in Unity. We chose Unity for its accessibility in VR development that supports the programming framework with C#.

Thanks for viewing!
Previous

Joox Music Report Proposal

Next

Swifty

View All Works
©  Serafina Yu Portfolio 2022 · All Rights Reserved