Explore
StudioInteractions & AnimationsAugmented Reality3D ConfiguratorsSharing & EmbeddingCAD ImportFigma IntegrationMiro IntegrationLucid IntegrationUI notice text
Designing UI for interactive 3D projects is the key element of the overall experience. The UI is the visual feedback for the user that evokes curiosity. It navigates the user experience as it reveals interactive elements. It takes us one step closer to the full benefit of having a digital twin.
However, a fantastic 3D design can miss its mark if the user doesn't realize that certain parts of the project are interactive upon clicking. Users require guidance, and it is up to the designer to think of the UI/UX solution right from the concept stage.
Hotspots, often used by designers as navigation guides in 3D space, can take the form of a dot or other graphic element indicating where to click. In Vectary, hotspots can be animated with Lottie files or GIFs, and they can trigger interaction, animation, annotation, sound, or floating UI. Hotspots do not change in size or location if you zoom in and out on the object.
The advantage of hotspots is that they immediately suggest an interactive element. However, a downside is that they can sometimes make the experience feel overcrowded.
At this point, it is important to list other possibilities of interactive user interfaces that go beyond hotspots. Here are the alternatives that might do a better job, or can work alongside hotspots.
Highlights are a great feature for drawing attention to a specific part of a project. They usually appear on hover, but in some cases, they can be animated to suggest clicking on them. In Vectary, you can choose to highlight an entire part or use a more subtle stroke version. Get creative by combining highlight functionality on hover, with graphical elements/commands that explain what is interactive. Learn more about how to create them in our documentation.
Hover animations, especially when combined with highlights, can encourage users to click without disrupting the overall visual design with additional graphical elements. By leveraging game-related principles, hover animation can guide users to interact with the 3D project. This can be an engaging method to maintain user interest.
Why limit yourself to 2D objects as hotspots? Shouldn’t the UI in the 3D space be 3D as well? At Vectary, we believe in developing UI in 3D by making any object clickable. Whether it's a big 3D arrow or a table with a sign, make the UI part of your scene. The added benefit is that the 3D UI will be in-scale with the object.
Make the UI visible or hidden on click or hover over the background to keep the object as the main focus of the scene.
At the outset of 3D viewers, there were graphical animated prompts encouraging users to rotate the model. Even now, you can indicate to users that there are interactive elements before they engage with the model.
Vectary also supports audio, allowing you to create audio guides that can be played on click, hover, or immediately after the project is loaded. Simply instruct the user to enable sound using a sign icon or text. Learn more about it in our documentation.
While hotspots are valuable beacons in interactive designs, experimenting with different engagement triggers can definitely improve the overall experience. By trying out other intuitive UX techniques, it is always important to find a balance that makes sure the users can easily navigate and interact with the designs.
Vectary Studio features let the designer concept and execute interactive designs in a way that does not require any coding or additional apps. Start the 14-day trial and give it a try.