2018
Tag Strategy — UX Design Concepts for Matterport Showcase
A 2018 design framework for spatial annotations in 3D walkthroughs. Compares two tag-design approaches — Directed (icons, HUD, side menu) versus Discovery (spatial 3D tags, proximity-based visibility) — and maps environment types to the right approach.
UX design concepts for Showcase
A deep dive into immersive user interface design for 3D spatial experiences — exploring how tags can be surfaced, discovered, and interacted with across desktop, mobile, and VR platforms.
Design objectives — core tenets
Maintain immersion
Keep the user absorbed in the experience at all times.
Focus on content
UI should never compete with the content being explored.
Engaging & fun
Interactions should feel delightful and intuitive to use.
Cross-platform
Works seamlessly on desktop, mobile, and VR headsets.
Context-agnostic
Adapts across different environments and use cases.
Non-interfering
Doesn't conflict with existing controls or the host webpage.
Immersion — the core principle
A core tenet of good game design is maintaining a sense of immersion in a game. This can be accomplished by making the UI as transparent as possible, allowing the player to immerse themselves into the experience.
One way of making UI transparent is through diegesis — which incorporates the user interface directly into the world itself.
Immersion through diegesis — the problem with intrusive UI
The problem with intrusive UI
Done incorrectly, tagging can pull users out of the experience entirely. When interface elements feel foreign or disconnected from the environment, they break the spell of immersion and remind users they are interacting with software rather than exploring a real space.
The goal is to make the UI feel like a natural extension of the world — not an overlay imposed upon it.
Diegesis — definition
Diegetic
Interface included in the game world — seen and heard by the game characters themselves.
Non-diegetic
Interface rendered outside the game world, only visible and audible to players in the real world.
Spatial
UI elements presented in the game's 3D space, with or without being an entity of the actual game world.
Meta
Representations that can exist in the game world but aren't necessarily visualized spatially for the player.
Diegesis — examples in games (Diegetic vs. Non-Diegetic)
Diegetic — in the game world
Example: A compass held in the character's hand to indicate direction — the player sees what the character sees.
Non-diegetic — outside the game world
Example: Any HUD or map overlay displayed on screen to show direction — only the player can see it.
Diegesis — Meta & Spatial examples
Meta — narrative but non-spatial
Example: Blood splatter on screen to indicate a character's health — part of the story's narrative but not placed in 3D space.
Spatial — 3D space, non-diegetic
Example: A highlighted path to follow rendered in the game's 3D space — spatial but not part of the fictional world.
Diegesis in the Showcase player
Current UI in Showcase is non-diegetic. Navigational UI controls are displayed in a 2D HUD or in 3D space as white circles.
What are our options when creating a UI for tags that is immersive yet discoverable to the user?
Tag design framework — range of UI options
The spectrum runs from fully directed (non-diegetic HUD) to fully immersive (diegetic). Each dimension of the tag experience can be tuned independently.
| Dimension | Non-Diegetic (HUD) | Semi-Diegetic (Spatial/Meta) | Fully Diegetic |
|---|---|---|---|
| Tag display (when) | All tags visible at once, always on; hide on timer | Visible based on proximity or trigger (e.g., enter room) | No tag; object visibility based on distance from viewer |
| Tag representation (how) | Tooltip, Post-it, ticker tape, map | Tags projected from camera POV over objects; tags as objects in 3D space overlaid on mesh | Traffic cone; beacons, highlight object, color change, sound; content is the "tag" |
| Tag discovery (where) | Ticker tape, side menu, banners, mini-map | By navigating in model, guided tour | Content found serendipitously through exploration |
| Content display | Pop-up modal dialog in 2D HUD; full-screen overlay | Content projected into 3D space; tooltips in 3D space | Part of environment (e.g., video of London Symphony in Abbey Road) |
Non-diegetic
Semi-diegetic
Fully diegetic
Display of content — levels of immersion
An example of different levels of immersion for content. Content can be displayed as part of a HUD in a modal dialog, mapped on the 3D mesh, or the content is part of the 3D environment itself.
Content displayed in a modal dialog overlaid on the 2D HUD — fully outside the 3D world.
Content projected into 3D space, mapped onto the mesh — bridging the real and virtual.
London Symphony from Inside Abbey Road — the content is part of the environment itself.
Two tag design approaches
Users can quickly perform a task or action. Info is always available and immediately accessible.
- · Tags represented by icons on a 2D HUD
- · All tags visible from camera viewport
- · Side menu shows all available tags in room
- · Linear, task-driven experience
Focuses user on the space. New info is acquired through exploration and discovery.
- · Non-iconic, spatial tags part of the 3D space
- · Tag visibility based on proximity and occlusion
- · Content accessed by interacting directly with objects
- · Non-linear, experiential journey
Directed tag concept — always-on icons
Users can quickly perform a task or action. Info is always available and quickly accessible.
Icon tags
Tags are represented by recognizable icons projected on a 2D HUD overlay.
Always visible
All tags are visible from the current camera viewport at all times.
Viewport coverage
The full set of available tags is surfaced regardless of where the user is looking.
Directed tag concept — side menu & tooltips
Side menu
A persistent side menu shows all available tags in the current room, giving users a complete inventory of discoverable content at a glance.
Tooltips as hints
Tooltips appear on hover or proximity to provide contextual hints about what additional information is available behind each tag.
Directed tag concept — fullscreen content overlay
Tag content is displayed in a fullscreen overlay — a modal dialog rendered in the 2D HUD. This approach prioritizes clarity and readability, ensuring users can consume content without distraction from the 3D environment behind it.
Discovery tag concept — objects become tags
Focuses user on exploration. New info is acquired through discovery.
Objects become tags
Objects in the environment are highlighted to indicate that more information is available.
Spatial tags
Tags are part of the 3D space itself — not overlaid on a 2D HUD.
Proximity-based
Tag visibility is based on the user's proximity to objects and natural occlusion in the scene.
Discovery tag concept — content interaction & navigation
Direct object interaction
Users access tag content by tapping directly on the object in the 3D space. Content details are then projected onto the 3D mesh itself — maintaining full immersion.
Hidden nav controls
Navigation controls are hidden while the user is moving through the space, revealed only on demand. This keeps the visual field clean and focused on exploration.
Discovery tag concept — floorplan & dollhouse view
The floorplan and dollhouse view surfaces all available tags in a room, giving users a bird's-eye overview of what can be discovered — without cluttering the primary immersive view.
Tag design comparison
Directed design
Better for: Real Estate, Home Improvement, e-commerce, Workshop content creation, easier implementation. Explicit call-outs make it easy for users to quickly know what's available and access items in the space.
Discovery design
Better for: News, Entertainment, VR, Mobile, and competitive differentiation. Attention is focused on the walkthrough. Less UI chrome helps maintain immersion. Takes advantage of 3D mesh data.
Matterport competitive advantage
The 3D mesh data will allow us to create more immersive, diegetic experiences for users. Let the space tell the story. Tags help enrich the story but should not distract users from the main focus — exploration of the space.
Make tags spatial
Tags should feel like part of the environment — anchored in 3D space and revealed naturally as users explore.
Objects as interaction points
Where possible, make objects in the environment directly interactable — the content is the tag.
Next steps
- Step 01
Align stakeholders
Key stakeholders come to an agreement on the overall design direction — Directed, Discovery, or a hybrid approach.
- Step 02
Refine the feature set
Define in detail the full tag feature set, including display rules, interaction models, and content types supported.
- Step 03
Build high-fidelity prototypes
Create high-fidelity prototypes of both concepts using Unity and conduct in-person usability testing to gather user feedback.
- Step 04
Define Workshop features
Understand and define the features needed to support the tag experience in Workshop — including content creation and tag placement tools.