Case study: Designing a 3D properties panel for kids
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:
- Context sensitive based on object category.
- Be future-proof it for consoles and Mixed Reality (XR).
- User customizable.
- Scalable to accommodate new features when added.
- 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.
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.
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.
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:
- World Center [0,0,0]
- Parent Center [0,0,0]
- Next to last selection.
- Enable gizmo.
- Enter values manually
Design & Implementation
Supported for properties
A prototype for the UI tool was built to included common options:
- Transform (Move, Rotate, Scale)
- Duplicate
- 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:
- Speed, Health, other customizable properties.
- Type: npc, enemy, player
Simple 3D object, would show additional information:
- Color.
- Texture: preset of textures.
- 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.
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.