UX PoC in AR/VR #4: Distribute & Align
The 4th episode of a series to share Opuscope’s work focusing on building the best User eXperience (UX) in Augmented Reality (AR) & Virtual Reality (VR) possible, thanks to Proof of Concepts (PoC). Maybe they will help other professionals through their AR/VR journey.
To get more context about how we made PoCs, you can check out the first episode:
This episode focuses on the PoC we made to define the distribute and align assets features.
Challenges
As a UX Designer, I make a lot of 2D mockups. I’m used to distribute and align features to help me organize elements onscreen. We wanted to provide the same type of experience to our users in 3D to help them to adjust elements in space. Naively, I thought it only meant showing placement helpers while moving an element.
It was waaaaaaay harder! We quickly understood we couldn’t easily align a moving element on 3 axes with others. That’s why we decided to iterate on a UX PoC for these features.
We used the translation gizmo to move an element on 1 or 2 axes at once, then developed the Distribute and Align features around it. You can check more about it in the dedicated article:
Another issue was to define which part of the moving asset to take into account in the alignment/distribution: since we worked with 3D assets, should we take into account all corners and centers of the asset? Or only some of them? If yes, which ones? 🤯
We didn’t find a lot of 3D creation apps offering alignment helpers. We used a lot Reality Composer (Apple) on iPad as a reference to help us handle some of our issues. We didn’t find any immersive apps to distribute 3D elements in space. Quite a dive into the unknown! 🙈
Align
Align feature helps the creator to place several elements on the same axis.
We wanted to provide the user with the same features they were used to on 2D tools. We then worked on 2 ways to do so:
- While the user moves an element to align it with other ones.
- Select several elements, then hit a button to align them.
Align while moving an element
To easily align a being moved element with other ones, we chose to display some visual indicators with a set of rules.
Several of them are commonly used in 2D tools:
- They were only displayed for elements in the FoV (or at least a part of them), not to overwhelm the user with all the scene content and only keep relevant ones.
- Show the alignments of the being moved element and others’ key points: corners, centers of edges, and the center of the asset.
- To ease the placement, we added a small magnetism when an alignment was detected.
The real challenges began with the other decisions we needed to make.
As I said earlier, to align elements between each other we needed reference axes (X,Y,Z). The translation Gizmo was that reference. The alignment could be made on:
- One axis if the user was moving the element on one axis.
- 2 axes if it was moved with the translation gizmo’s planes.
If one axis could be snapped, the translation on this one was blocked but not on the other one.
A huge challenge in immersive 3D is the style of the UI not to be oppressive to the user. Alignment indicators had 2 main goals: show potential alignment axes, and show alignment points (corners, centers, etc.) between 2 elements.
To do so, we designed alignment indicators with 3 parts:
- Little spheres to show the alignment points. You can see they are slightly transparent not to entirely hide the asset and be less intrusive.
- A discreet dotted line to link the alignment points together.
- A square to clearly show the alignment axis, required in 3D! Its size varied depending on the lines’ size.
Select several elements to align them
To develop this feature, we decided the user should select elements, then hit a button. We thought a lot of the buttons to offer and finally decided to make one for each case, as mixing them was more confusing than anything else. Once chosen, we defined clear rules:
- Align Middle: to align selected elements horizontally in the middle.
In the multiselection, we took the point halfway between the 2 most distant elements and we made all elements have the same Y value as this point.
- Align Center: to align selected elements vertically in the center.
In the multiselection, we took the point halfway between the 2 most distant elements and we made all elements have the same X, Z value as this point.
- Align Top: to align selected elements’ top.
In the multiselection, we took the highest vertex point of the highest element and made all of the highest vertex points of each element at the same Y value (top — ceiling) - Align Bottom: to align selected elements’ bottom.
In the multiselection, we took the lowest vertex point of the lowest element and made all of the lowest vertex points of each element at the same Y value (bottom — ground).
Even if we wanted to at first, we soon realized that offering an alignment in depth wasn’t convenient.
Distribute
Distribute feature helps the creator to place several elements at equidistance.
To do so, we needed to define the rules of distribution.
Define the axes
First, we defined the axes the user could distribute selected elements on.
On 2D tools, elements can be aligned on horizontal and vertical axes. In 3D we needed a reference point to set them. We chose the user’s position to provide them with an intuitive experience.
Define the behavior
We soon realized we needed to align elements to be able to distribute them as users expected.
Another requirement was to force rotation on elements to make sure they were well distributed.
We offered 2 types of distribution:
- Distribute horizontally: we first did the AlignMiddle algorithm (see above). We then took the 2 most distant elements of the selection and aligned all elements on that line. They were separated equidistantly from each other (on their X-axis).
The rotation was forced to make the X-axis of the elements aligned with the distribution line. Their Z-axis being perpendicular to the distribution line and looking almost in the direction of the camera.
- Distribute vertically: we first did the AlignCenter algorithm (see above). Then we aligned all selected elements on the line between the 2 most distant ones (on their Y-axis). They were separated equidistantly from each other (on their Y-axis).
The rotation was forced to make the Y-axis of the elements aligned with the distribution line. Their Z-axis looking at the camera.
What a journey…
… For a feature that sounded quite simple at first!
It’s the magic of PoC: reveal all the complexity of a feature and address it to be ready before implementing it in the product!
If you face some close challenges, I hope our experience will help you on your own adventure! 🤗
Make sure to check out the other PoCs’ stories to go beyond:
And my other articles around AR/VR for more general information:
