Creating a complex 3D interaction user interface • 6 min read
Reassuring users and teaching them new complex interactions
My Role
​
Leading UX design, and participating in Unity implementation.
8 weeks (including implementation time)
Project Time
​
Part of the product worked on involved being in a 3D representation of a room and making interior design choices as you customise your room by adding or editing items furniture.
​
The challenge
As the functionality within the 3D design portion of the app grew, a few insights were becoming clearer. Having a UI that focused on displaying the 3D project in full was less important than showing the possible functionality. Users were complaining about having to spend too much time in menus whilst designing, rather than being able to design whilst accessing helpful functionality.
Additionally, average users are not used to interacting with objects in a 3D space, so this was potentially a novel interaction experience for them
Ideally, the questions we would tackle were: How can we turn our 3D experience into one where the interface assists your journey at all times? And how can we educate users on the concepts of 3D interactions?
​
Research
We were fortunate enough to have an in-house interior designer using the product daily and spent some time interviewing them. This data was then collated with the feedback we had received from taking the product to various shows across the country. Additionally, we conducted competitor research to find similarities in other products. Though very few apps existed, we were able to branch out further into the world of 3D, specifically looking at programs like Blender and video games like The Sims.
​
The following problems were identified:
​
-
Users want to keep track of their design flow. At all times, users want to be informed about what they’re changing, and in what way they can change their items.
​
-
Users want clarity around the specifics of functionality. Although icons were useful for guidance, users were often reluctant to test new interactions and functionality without knowing what it did.
​
-
Users wanted room to fail. When a user performs an interaction, they want sufficient warning of what would happen, and then space to go back if needed.
​
The new 3D interaction interface and flows
Focusing the scope
It was clear that a large problem was introducing the concept of 3D interactions to an audience who’d never really experienced something like it before. As a user progressed, their confidence would grow, but their first few minutes in the app felt like exploring an alien world. The app wasn’t doing enough to guide the user through complicated design tasks.
We as a company wanted to empower our users to make bold design choices, but actually, users were worried about making changes without the ability to undo anything that they might regret.
​
Solutions
​The following solutions were created:
-
Undo/Redo system. We introduced the long-desired feature of being able to undo/redo any design changes. This allowed users to have the security to make bold choices whilst not fearing permanent damage to their designs
​
-
Design Menu bar. By creating a hub for all primary functionality in the app that was constantly present, it allowed us to not only show more functionality but also keep it all grouped together.
​
-
Dynamic radial menu. Following from the menubar, this meant that all secondary functionality could be moved to a dynamic menu that followed the current item that was selected. The functionality available in this menu would expand or decrease depending on what was selected
​
-
Labelling. To help users understand the complicated functionality, simple text labels were added to the radial menu to assist in communicating their purpose.
​
-
Simple “ghost” boxes. When a new item was added, before it was brought into someone's design, a green box would indicate how much space it was going to take up. This was vital to help users realise what items could fit within their personalised space.
​
-
Outlining current selection. To help users keep track of what was being manipulated, a simple orange outline would appear around their current item, helping them identify what item changes were being applied to.
​
-
Item swapping menu. When an item was selected, a menu appeared, letting users know what other choices you'd have to swap this product to. This helped inspire users to make bolder choices, without worrying about losing any progress if a choice wasn't to their liking.
Learnings
Part of what was essential with this task was taking inspiration from a diverse range of sources when conducting research. Though we felt we were pioneers in our field, there were adjacent products that had solved similar problems in other industries, and looking at the world of video games for guidance on how best to teach 3D interactions to users was vital.
We also found that although a feature may already be in development, it’s important to get sufficient design work completed beforehand. Though seemingly obvious, when a small team is enthused about a feature, it’s sometimes easy to let some simple development begin before all design stages are complete. However, the design ended up having implications that early development had not considered.
This has motivated me to involve developers in the design process earlier. When they see the different ideas that you’ve put together, even before completion, often it will help spark conversations about avenues that you may have otherwise missed.