View Cube
U I / U X D E S I G N
OVERVIEW
The View Cube is a standard tool in 3D modeling software that lets users interact with different faces, edges, or corners to adjust their view of the 3D model. It simplifies switching between various perspectives, such as top, bottom, front, and isometric views, enhancing the ability to visualize the model from different angles.
We were tasked with designing a unified View Cube interface for our company's visualization suite (GVC). This View Cube must work consistently across all company software, including SmartBuild, Smart3D, and mobile platforms, while meeting the specific requirements of each product and platform.
TIMELINE
Apr 2020 - Jun 2020
ROLE
UX Consultant, UX/UI Design
GOAL
Design a unified View Cube for GVC that meets the requirements of SmartBuild, Smart3D, and mobile platform.
REQUIREMENTS
SMART BUILD
SmartBuild is construction management software designed to improve efficiency of construction project and primary users are office/field workers. These users may not be familiar with 3D modeling tool so it is essential for providing users with a clear, intuitive sense of direction. That’s why SmartBuild requires a compass displayed beneath the cube to indicate orientation and the direction of True North for the model.
The current ViewCube control used in SmartBuild program is shown below.
SMART 3D
S3D is a CAD software that helps create and modify industrial designs, with an emphasis on aligning models with the physical facility. As a result, S3D requires advanced rotation controls and precise view manipulation.
The ViewCube currently used in S3D, as shown below, needs optimization for both its appearance and usability. Details are provided in the following section.
GRAPHIC VIEW CONTROLS (GVC)
GVC serves as the central control for rendering and managing graphical views in applications like SmartBuild and S3D. It provides essential functionality for visualization tools.
To design a universal GVC version of the ViewCube, all requirements must be met, except for the compass feature, which is not needed, as the navigator component already includes it.
MOBILE VERSION
The design should be kept simple, excluding rotation and flip controls, to ensure an adequate touch target size.
S3D USER TESTING
User testing showed that novices had trouble manipulating views with the existing ViewCube tool.
I wasn’t aware the ViewCube was there. The facets need to be highlighted more prominently.
View manipulation does not seem as easy to use as classic version. Time consuming to look at verbiage as opposed to clicking on the view display of classic version.
Rotating view is confusing. Rotate 180 degree on which axis?
ISSUES WITH CURRENT DESIGN
The first users are unaware of the function of protruded facets unless they are instructed of this function.
Too many controls are crammed into the ring interface.
The axis for 180° rotation is not clear to some users.
COMPETITOR RESEARCH
To address the issues with the current S3D View Cube and create a competitive UX, we researched and compared View Cubes from other companies by examining their designs and using them firsthand.
By examining various views and rotation features, we identified the strengths and weaknesses of each product, focusing on the isometric and orthographic views as well as the rotation functionalities of their View Cubes.
We developed guidelines to optimize our ViewCube and improve the product's competitiveness.
ISOMETRIC VIEW
Should have at least six clickable corners in the isometric view.
Corners must be easily accessible and clearly identifiable as interactive elements. First-time users should intuitively recognize that the corners are clickable.
ORTHORGRAPHIC VIEW
Should provide clear and identifiable options for jumping to 45- and 90-degree views, as well as their corresponding isometric perspectives.
When a user clicks on a corner node, the model view should automatically align with the shared vertex of the adjacent faces associated with that node.
ROTATION CONTROLS
Offer interfaces for 45-degree and 90-degree rotations in both clockwise and counterclockwise directions.
Should be designed as separate clickable elements, distinct from the ViewCube, to minimize distractions and ensure clarity in each interaction.
IDEA SKETCHES
SOLUTIONS
We recognized that requirements and user needs differ across products, so we designed unique ViewCubes tailored to each one. We also included a ViewCube settings option in each program, enabling users to customize controls according to their preferences.
We ensured that each ViewCube retains a consistent appearance and interface to deliver a unified user experience. Initially, we chose to redesign the ViewCube to align with the existing SmartBuild UI style while incorporating the precise rotation and flip functions needed for S3D.
We refined the ViewCube color scheme for better visual appeal and accessibility. By leveraging our brand colors, we chose a high-contrast palette to make the ViewCube stand out from the background. White outlines improve visibility in dark mode, while the hover-state accent color is designed to pop.
PROTOTYPES
S3D ISOMETRIC VIEW
Users can access 9 different views by clicking on the 3 faces and 6 corner nodes in the model's isometric view.
S3D FLIP CONTROLS
4 triangles buttons allow users to get to the corresponding orthographic views.
Mouse hover effect hints which direction the model will rotate.
S3D ROTATION CONTROLS
Use controls on a radial menu and a floating button to rotate the view around the X/Y/Z axes in increments of ±5 degrees.
LIVE VIEW
We developed a prototype in the LiveView environment to demonstrate the GVC ViewCube, leveraging the basic controls available in GVC. Users can access settings via the left-hand panel at the bottom of the screen. Under the "Visual Settings" section, a toggle button allows users to enable or disable the ViewCube.
Additional options and settings can be found in the overflow menu. Selecting "Settings" opens a dialog where users can customize ViewCube controls. For instance, the flip control can be turned off if not needed.
In top and bottom views, the 180-degree flip control automatically switches from vertical to horizontal axis rotation, enabling seamless transitions between top and bottom orthographic views.
SMART BUILD
The SmartBuild View Cube generally follows the same design pattern as the LiveView version, but it is styled with a light theme and includes a compass below the cube to indicate the model's North direction. Users can click on the cardinal direction letters or quarter circles to switch to the corresponding view.
MOBILE VERSION
Users can adjust views by selecting options from the overflow menu. Tapping on a face allows access to its corresponding orthographic views. Given the limited screen size and touch target areas, we designed the mobile ViewCube to be as simple as possible.