Yes, this list can be distilled into four fundamental, non-redundant simplex elements based on their core user purpose. Traditional UI terminology often describes a component's appearance or specific use case (e.g., "Navbar," "Dropdown Menu") rather than its essential function.
For building a new spatial interface, you can think of these as the true "atoms." Every component you listed is simply a combination or a specific instance of these four simplex functions:
The Refined Simplex Elements
With this adjustment, our four fundamental components for a spatial lingua franca become:
- Containers (The 'Where'): The spaces and surfaces.
- Displays (The 'What'): The informational outputs.
- Inputs (The 'How'): The interactive controls.
- Junctions (The 'Go'): The connection points for navigation.
## 1. Containers (The 'Where')
A Container is a bounded space that holds other UI elements. It defines a surface, a context, or a boundary. The different terms from your list simply describe the Container's scale, permanence, or relationship to other Containers.
- Consolidated List:
Homepage
,Dashboard
,Control Panel
,Launchpad
,Workspace
,Cockpit
,Canvas
,View
are all Primary Containers—the main stage for the user's attention.Modal / Dialog Box
is a Temporary Container that appears on top of a Primary Container, demanding focus.Card
is a Sub-Container, a smaller, repeatable container used to group elements within a Primary Container.Navigation Bar
andSidebar
are Persistent Containers, special containers that hold mostly Portals and remain fixed while the Primary Container's content changes.
## 2. Displays (The 'What')
A Display is any element whose sole purpose is to present information from the system to the user without requiring interaction. It communicates system state, data, or context.
- Consolidated List:
Icon
,Badge
,Notification
, andTooltip
are all Indicator Displays, providing concise, often contextual, status information.Progress Bar / Loader
is a Process Display, showing the status of an ongoing action.- (Implicit but essential) Text & Media are the most fundamental Displays, showing written information, images, or videos. Every
Card
orHomepage
is filled with these.
## 3. Inputs (The 'How')
An Input is any element that allows the user to give information or a command to the system. It's the way a user changes the system's state or provides data for a process.
- Consolidated List: We can distill these into three core types of user intent:
- To Command an Action: This is the function of a
Button
orCall-to-Action
. It's a direct, binary trigger. - To Make a Selection: This is the function of a
Checkbox
(multi-select),Radio Button
(single-select),Toggle / Switch
(on/off), andDropdown / Select
(single-select from a hidden list). They all involve choosing from predefined options. - To Define a Value: This is the function of a
Text Field
(unbounded text value),Slider
(a value within a range), andDate Picker
(a specific date value). They all involve specifying a piece of data.
## 4. Junctions (The 'Go')
A Junction is any element whose primary function is to change the user's context or view, effectively "teleporting" them somewhere else. While they often look like Buttons or text, their purpose isn't to perform an action on the current view, but to navigate to a new one.
- Consolidated List:
Links
within aNavigation Bar
,Sidebar
, orMenu
are all Primary Junctions that move the user between Primary Containers.Tabs
are Contextual Junctions that switch between different Sub-Containers or Views within the same primary context.Breadcrumbs
andPagination
are Sequential Junctions that navigate through a linear hierarchy or a set of pages.Tags
are Filtering Junctions that navigate the user to a view of the same Container but with its contents filtered.- A single hyperlink is a Junction with a single pathway.
- A Navigation Bar is a Container holding a Junction of primary pathways.
- A Menu is a Junction where the pathways are temporarily hidden.
- Tabs are a Junction presented horizontally.
- Tags are a Junction for filtering pathways.
## Junction (The 'Go')
A Junction is a UI element whose primary purpose is to present one or more pathways to different Containers or filtered Views.
It perfectly describes the function—a point where paths converge and diverge—without imposing any visual form. A Junction can look like anything: a line of text, a button, a tab, or an entire menu.
Here’s how this refined term clarifies the components:
"Junction" is more abstract than "menu" but more grounded and less visually biased than "Portal." It focuses on the functional reality: this is a point of connection and transition.
## Building a Spatial Lingua Franca ⚛️
By using this distilled vocabulary, you move away from describing "what it looks like" and toward defining "what it does."
For a spatial interface, this is incredibly powerful. Instead of coding a "Sidebar," you would instantiate a Persistent Container and fill it with Portals. Instead of building a "Dashboard," you'd design a Primary Container and populate it with Sub-Containers (Cards), each holding a mix of Displays (data) and Portals (links to details).
This atomized approach allows for a truly modular and intuitive system where the fundamental building blocks of user interaction are clear, consistent, and independent of their visual styling.
New Rules for Spatial Interfaces
To build an intuitive spatial UI, we need to adopt rules from architecture, cartography, and even cognitive psychology.
- Space Over Pages: The UI is not a stack of cards; it's a persistent environment. The foundational interactions are zoom, pan, and orbit, not just clicks. The Z-axis (depth) becomes as important as the X and Y axes. This means you design the entire information environment first, then define how the user's "camera" or viewpoint moves through it.
- Objects Over Elements: Information and tools cease to be flat "elements" and become interactive "objects" within the space. These objects have properties, relationships, and can be directly manipulated—grouped, connected, opened, or thrown away. Instead of clicking an "edit" button on a page, you might directly grab the object and enter an "edit mode."
- Context Over Consistency: This is a crucial rule to break. In traditional UI, a global navigation bar is consistent for predictability. In spatial UI, the highest law is context. Tools, options, and navigation should appear where and when you need them, relative to the object or space you're focused on. A radial menu that appears around a selected object is a perfect example of this. The consistency is in the behavioral pattern (e.g., right-click always brings up contextual tools), not the fixed location of a button.
- Physics and Flow Over Clicks: Interactions should feel more direct and continuous. Think in terms of flow, gestures, and physics. Does an object have inertia when you move it? Does zooming feel smooth and progressive? The goal is to reduce the level of abstraction, making the user feel like they are directly manipulating the information itself, not just telling the computer what to do through a series of abstract clicks.
Old Rules and Language to Abandon
## The Problem with the Page-Based Mindset
The core issue is that traditional UI is built on a document metaphor. We have "pages," we "go back," and we use a "menu" like a table of contents. This forces information and interaction into a restrictive, linear hierarchy.
- Forced Hierarchy: A menu or navbar imposes a rigid, top-down structure. Information that is contextually related but lives in different branches of the hierarchy feels disconnected. You can't easily see the relationship between
Project Settings
and aSpecific Task
within that project because you have to navigate out of one and into the other. - Loss of Context: When you click a link, you leave a context and arrive at a new one. The only memory of where you came from is the "back" button. In a spatial interface, you can move through information (e.g., zooming into a node), maintaining the surrounding context and your orientation within the whole system.
- One-Size-Fits-All Navigation: A fixed menu is the same for every user in every situation. It doesn't adapt to what the user is actually doing. It's like having a giant map of the entire country open on your passenger seat when all you need is the next turn.
To fully embrace this new model, we have to consciously discard the old language and the mental constraints that come with it.
- Break From: "Pages," "Menus," "Back Button."
- Adopt: "Spaces," "Scenes," "Containers," "Views," "Objects," and "Junctions." Language shapes our thinking. If you stop calling it a "page," you'll stop designing it like one. Navigation isn't about "going back"; it's about "zooming out" or "re-orienting."
- Break From: The Fixed, Pixel-Perfect Grid.
- Adopt: Relational Layouts. The design focus shifts from aligning elements in a rigid 2D grid to defining the relationships, proximity, and flow between objects in a space. It's more like choreography or architecture than laying out a magazine.
- Break From: "The Fold."
- Adopt: The Infinite Canvas. The concept of a "fold" (what's visible on the screen without scrolling) is an artifact of paper and early web design. In a spatial environment where the user can freely zoom and pan, it's a completely irrelevant constraint.
The fundamental change is moving from a UI that gives you a catalog of choices (menus) to one that gives you a map of the territory (space) and a contextual toolbelt (objects). You stop navigating a website and start inhabiting an environment.
Existing UI terminology
High-Level Organizational Views
These are terms for screens that, like a dashboard, provide a high-level overview or entry point.
- Homepage: The primary landing screen for a website or application, often serving general navigation and brand messaging.
- Control Panel: Similar to a dashboard but often implies more direct manipulation of system settings and configurations.
- Launchpad: An interface focused on starting new tasks, projects, or accessing different applications (common in operating systems like macOS).
- Workspace: A more dynamic and interactive area where the main work or creation happens.
- Cockpit / Mission Control: An interface for actively monitoring and guiding live processes, often with a focus on real-time data and critical alerts.
- Canvas: A freeform, open area for user creation, such as in design or note-taking applications.
- View: A general term for any screen or specific presentation of data within an application (e.g., "Calendar View," "List View").
Categories of UI Components
UI components can be broken down into three main families: Navigation, Information, and Input.
1. Navigational Components (Helping Users Move Around)
- Navigation Bar (Navbar): A persistent bar (usually top or side) with primary links to the main sections of an application.
- Sidebar: A vertical panel on the left or right of the main content area, often used for navigation or contextual tools.
- Tabs: A way to switch between different views or sections within the same context, without leaving the screen.
- Breadcrumbs: A secondary navigation trail that shows the user's location in the site's hierarchy (e.g., Home > Products > Laptops).
- Menu: A list of options or commands, often revealed by clicking a button.
- Dropdown Menu: A menu that appears below a button when clicked.
- Hamburger Menu: A compact menu (three horizontal lines) that expands to show navigation links, commonly used on mobile.
- Pagination: Divides content into numbered pages (e.g., page 1, 2, 3...).
- Tags: Keywords or labels that categorize content and allow users to filter or find similar items.
2. Informational Components (Giving Users Feedback)
- Icon: A simple graphic symbol representing an action, object, or concept.
- Tooltip: A small pop-up box with extra information that appears when a user hovers over an element.
- Notification: An alert that informs the user of a specific event or update (e.g., a new message).
- Progress Bar / Loader: A visual indicator of a task's completion status (e.g., a file download).
- Modal / Dialog Box: A window that appears on top of the main content, requiring the user's attention and interaction before they can return to the background.
- Card: A self-contained rectangular module of content that groups related information (like an image, text, and buttons).
- Badge: A small indicator, often a number, superimposed on an icon to convey a status update (e.g., number of unread emails).
3. Input Controls (Allowing Users to Act)
- Button: A clickable element that triggers a specific action.
- Call-to-Action (CTA): A button designed to prompt an immediate response, such as "Sign Up" or "Buy Now."
- Text Field: A box where users can type text.
- Checkbox: Allows the user to select one or more independent options from a list.
- Radio Button: Allows the user to select only one mutually exclusive option from a list.
- Toggle / Switch: An on/off control for a single setting.
- Dropdown / Select: A control that, when clicked, reveals a list of options from which the user can choose one.
- Slider: Allows users to select a value from a continuous range by dragging a handle.
- Date Picker: A calendar interface for selecting a specific date or date range.