Bringing focus where it belongs

Redefining Canvas-Level Object Selection in 3D Space

This case study highlights how i improved object selection on the canvas by introducing visual cues like highlights and hover states.

It reduced users’ dependence on the layers panel and brought their attention back to the workspace where creation actually happens.

Problems
Encountered

01. Frequent Error Clicks

Frequent confusion and loss of focus due to many error clicks while selecting an object

03. Slower Workflows

Slower workflows, especially in projects with many overlapping elements

02. Overuse of Layers Panel

Reliance on the left-side layer panel added cognitive load

04. Loss of Creativity

A fragmented experience that pulled users away from their creative flow

User
Observations

Vidya, Visual Designer

"Without visual cues on the canvas, I have to check the layers panel to see what's selected."

Rajesh, Motion Designer

"I keep clicking on the canvas and end up selecting the wrong object. It's very frustrating."

Amrita, Branding

"I waste time switching between the layer panel and canvas, I can't focus on creative work."

As seen in the video, the user tries selecting objects from the animation or layer panel, but except for the gizmo there's no visual highlight on the canvas to indicate what's selected.

Key Goal

"Enable clear canvas selection to reduce layer panel dependence and user cognitive load."

The
Solution

Highlight Outline:

To make selection intuitive and visible across 2D and 3D environments, a distinct border was added to selected objects designed to stand out on all background types.

Different objects had tailored highlights: images (vector/raster), lights (source and target), and cameras (body and bounds).

Grey (#808080)

In a RGB color space (made from three colored lights for red, green, and blue), hex #808080 is made of 50.2% red, 50.2% green and 50.2% blue maintaining clarity on various backgrounds.

Grey is timeless and neutral, ideal for unobtrusive UI elements. In this context, grey is used in two key ways:

As a default state for unselected or inactive elements.
For light target lines, offering visibility without drawing unnecessary attention.

Blue (#0C9FE8)

Blue is the primary highlight for hover and selection, with high saturation for strong visibility across all backgrounds. It aligns with the brand hue and ensures clarity in both 2D and 3D views.

Orange (#E87A0C)

Orange is used for camera bounds to create clear contrast from grey-assigned elements like lights and defaults, making cameras easily distinguishable in complex scenes.

Design Enhancements

Problem 1: No feedback on Hover

There was no hover feedback for items selected from the left panel as shown in the image, making it difficult for users to locate them on the canvas.
Users had to rely on remembering image names causing an unintuitive and inefficient experience.

Problem 2: Multiple objects in view

As shown in the image, when I select an item, I can't tell what's selected on the canvas because there's no border highlight and multiple objects in view.

Solution:

As shown in the video, hovering over objects now highlights them, unlike before, making it easier to identify selections. When multiple objects are aligned, the boundary highlight clearly indicates which one is selected."

Problem 3: Multiple nodes selection

As shown in the video,

Selecting nodes of a 3D object was difficult, as hovering provided no visual feedback. Users had to rely on the layers panel to select specific nodes, disrupting the workflow.

Solution

As shown in the video, Different nodes of the object can now be selected directly on the canvas using Cmd + Click. Additionally, hovering over a node in the layer panel highlights it on the canvas, making identification much easier.

Camera & Lights

Problem 1: Camera with no skeleton

As shown in the image, the camera with orange rays previously appeared only as a point with no visible structure.

Solution

As shown in the images, We added a skeleton to give it form and ensured its size remains consistently visible during zoom in and out—unlike before.

Problem 2: Unclear Light Skeletons

As seen in the images, the light skeletons were difficult for users to interpret and felt unfamiliar compared to other standard 3D tools. These were rendered from raw JavaScript output, lacking any tailored design or refinement.

Solution:

We designed custom light skeletons that align more closely with user expectations from other 3D tools:

Point lights were represented as spheres, reflecting their omnidirectional nature.
Spot lights were visually linked to their targets for better spatial clarity.
All light skeletons were given a scaled size relative to zoom level, ensuring consistent proportions as users zoom in or out on the canvas.

Measured Impact

1. Decrease in Error Selection rate on Canvas

As shown in the chart, canvas selection errors significantly dropped after the feature deployment in October.

With the update, users could accurately select an object with a single click, eliminating rage clicks or accidentally clicking on the wrong object.

2.Increase in Video Creation Projects

As shown in the graphs below, interaction with the animation timeline increased notably after October, indicating that users were adding more keyframes and animations.
Additionally, there was a rise in composition panel activity, suggesting that more objects were being incorporated into video projects after that period.

3. User Satisfaction Score

When users were asked to rate the feature, 64% gave it a 4, 30% rated it 5, and 6% gave it a 3. This reflects a strong overall satisfaction, with most users finding the feature valuable and easy to use.