Bezel’s 3D multiplayer cursors were a crucial aspect of building a collaborative spatial design tool that we knew we had to get right. Our whole team contributed to ensuring that the presence of other users in the file felt clear, promoted communication, and minimized distractions. Here’s how we built them:

The first designs were made in Figma. The simplest option was floating frustum cones for each player in the file, showing the position and direction of their camera. But the Figma design didn’t surface the issues caused by this option. Often all players are viewing from similar positions, so no other frustums would be visible when working in a file together. Also you couldn’t gesture with your mouse to communicate an idea. Moreover, camera position is rarely changed, maintaining a sort of lifeless feeling to multiplayer presence. More options needed to be explored.

The next option was displaying 2D cursor sprites for other players, much like Figma does. However, this wouldn’t communicate viewing direction, and also the projected cursor position would not always be relevant and could be distracting. As you are orbiting around the scene, or manipulating objects with the gizmo, the cursor would be flying all over the scene, and projected position could be far from the object you were actually focused on.

Clearly, designing our 3D UI elements in a 2D app like Figma, and copying what worked for 2D apps would not do for a 3D tool. By switching our design workflow to Bezel we were able to quickly explore various 3D shapes, colors, and styles. Then, share the file as a link to the rest of the team, who could view the options in 3D, add their own variations, and pin comments on them in context. Through this process we landed on a simple and symmetrical version, with the underside of the arrow colored darker so that the direction is clear when it faces towards or away from you.

The position of the cursor would be the projected point in the scene, from the player’s vantage point, and the 3D form would be oriented such that it points back towards the players camera position. Other players cursors would be much more visible when working in the same scene, and you could tell by looking at their cursor, where they were viewing the file from. To avoid the issue of flying cursors when orbiting, we switch the position of the 3D cursors to be the camera’s focus point or the selected objects pivot in certain cases.

By designing for Bezel in Bezel, we came up with a truly 3D solution that worked perfectly, without having to develop each option in full. Finally we had something that we felt communicated everything needed, while remaining minimal, and dare we say: fun! We hope you think so too!

***

Bezel is a collaborative 3D design & prototyping tool for spatial computing (AR/VR/XR) on your browser.

👉 Free access to Bezel (beta): bezel.it
🐦 Follow us on Twitter: @Bezel3D
👾 Join our Discord community: bezel.it/community