Case study: Designing a 3D properties panel for kids

Muhammad Qumboz
Bootcamp
Published in
4 min readJul 24, 2023

Overview

The users of the 3D editor of LetsMOD were getting lost and would spend a lot of time navigating panels and tabs from the inspector to find the 3D property they are looking for. The platform had many options and buttons everywhere, making it difficult for younger users (the target audience) to navigate and find the tools they needed as fast as possible.

After collecting some data about the problem and user behaviors, the solution must be:

  1. Context sensitive based on object category.
  2. Be future-proof it for consoles and Mixed Reality (XR).
  3. User customizable.
  4. Scalable to accommodate new features when added.
  5. Usable on mobile and desktop.

Research & Analysis

Researching existing 3D editors for kids made the designer sad. Most of them had cluttered interfaces, similar to game engines and 3D industry standard software. Making it difficult for young users to navigate and find the tools they need.

I interviewed and communicated with kids, teachers, and parents from the game community to better understand their experience and pain points when using these applications. We got invaluable feedback and ideas from the users.

Based on the research, It was concluded that some kind of a tool bar that is context-sensitive would be an ideal solution. The most important feature about this tool bar is the use of abstraction to hide unnecessary clutter and noise. It would provide users with the options when they are actually needed.

A flow diagram showing the steps a user takes when altering a property of an object in the 3D scene
Figure 1: User flow when tapping a user an object to reveal its properties

Concept

A trimmed ring was chosen as a shape for the tool-belt. It can grow, shrink, expand in radius to hold more information, and can be easily navigated with a finger, mouse, or a gamepad’s joystick.

Wireframe representation of the tool-belt in two different sizes
Figure 2A: two rings showing different radius and different content size.

Abstraction is key. Instead of making a big wheel of options and introduce new friction points, we’ll reuse the same UI component to show common values and options, and provide ability to enter values manually in some cases.

Wireframe representation of the tool-belt showing abstractionn
Figure 2B: clicking a property reveals common values for faster interaction

A good example would be a color value, we’d show 8 common colors and another way to manually enter the color value, or simply a color picker.

One other use case is the position value, it would show the following options:

  1. World Center [0,0,0]
  2. Parent Center [0,0,0]
  3. Next to last selection.
  4. Enable gizmo.
  5. Enter values manually

Design & Implementation

UI design of the tool-belt showing how it looks in the 3D scene
Figure 3: Final design of the toolbelt

Supported for properties

A prototype for the UI tool was built to included common options:

  1. Transform (Move, Rotate, Scale)
  2. Duplicate
  3. Delete

When a user selects an object, the tool belt would automatically unfold and display options relevant to selection. If a user selects a figure, it would include extra options such as:

  1. Speed, Health, other customizable properties.
  2. Type: npc, enemy, player

Simple 3D object, would show additional information:

  1. Color.
  2. Texture: preset of textures.
  3. Physics: (kinematic, static, ghost)

World position of the tool-belt

The tool-belt would conveniently be placed in an non-disturbing location based on device, user preference, and other metrics. Mainly in floating position relative to the selected object, or fixed on top or the side of the screen in some devices or based on user preference.

Wireframe representation of the tool-belt in two different positions and styles. floating and fixed positions.
Figure 4: The tool-belt position based on preference and device

Results & Conclusion

The context-sensitive tool belt has improved the user experience for the 3D editor significantly. Kids can now unleash creativity without worrying about navigating a cluttered interface. The tool belt’s automatic folding feature helps to keep the interface clean and unobtrusive, and the customizable feature allows users to create a more personalized experience.

Overall, I am pleased with the results of this project. I believe that the context-sensitive tool belt is a great addition to the 3D editor for kids and helps to make it more accessible and intuitive.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Muhammad Qumboz
Muhammad Qumboz

Written by Muhammad Qumboz

Dedicated to creating innovative experiences that inspire, engage, and promote social progress.

No responses yet