Controlling the camera view of 3D models is more complicated than navigating a 2D Canvas.

For example, in 2D UI, the cursor position maps deterministically to the x and y coordinates of a 2D pixel grid. Similarly, translation and rotation are also based on x and y positions which can be easily coordinated with respect to cursor position and movements. But in a 3D scene, the x and y positions of the cursor referenced from a 2D screen is insufficient to determine which point in the 3D space the user is intending to point at, orbit around, or zoom around.

Mapping a screen space (x, y) position to the world coordinate system requires multiple stages of mapping, making it ambiguous to translate user’s screen space input into 3D space.

The user experience with Camera Controls (pan, zoom, roll, orbit) in nTopology was considered unintuitive for mainly two reasons:

To indicate to user which camera control mode (zoom, pan, orbit, etc.) they are in, I designed a set of icons that correspond to each mode and accentuate cursor position relative to the 3D scene.

However because the type of geometries in nTop is much more complex than traditional CAD, the requirements for effective visual perception of icons in the 3D scene is very high. Therefore, this set of icons are amongst the most challenging (and interesting) icons I’ve ever designed.

I surveyed which other CAD software are frequently used alongside nTopology, and had shadowing sessions with internal users (application engineers) to learn about their setup and observe how they control 3D views while designing a component.

I then analyzed the I/O (key press, scroll wheel directions, orbit and zoom centers) of these CAD software according to the same metrics as in the chart.

The types of geometry designed in nTopology are often more complicated and intricate than the 3D models made in traditional CAD. This means that there is a dense amount of variations in brightness and hues in the 3D scene, making it hard to discern the cursor.

Therefore, to design icons that can be easily spotted and tracked by the human eye in this context is challenging. I looked into books and papers on human visual system to discover what are the effective visual cues I can incorporate to design the cursor icons.

After exploring design options in 2D and placing the icons against a variety of screenshots from nTopology, I noticed that the color contrast and readability of these icons varies quite a bit depending on the light reflections of the 3D models.

So instead of testing the icons against static screenshots of the 3D scene, I created a 3D environment in Unity (using a similar three-point lighting and dark/light backgrounds as the original app), imported 3D models of different geometric details, and imported cursor icons as 2D sprites in Unity to test the look & feel in action.

For the purpose of QA for our new camera control UI, I created a test file repository by aggregating all the non-confidential nTop files (by reaching out to the presales teams), selecting and organizing them into a structured set of test cases, such that both designers and engineers can use those files to valid the usability of our prototypes.

While this test set might seem small at first, it is the first systematically organized set of cases that allows nTop's R&D team to quickly validate usability across the 6 main industries where nTop users come from.