Basic Concept

The core of a node-based UI are graphical elements such as nodes and connections between them.

Nodes

Nodes represent various entities or actions within the application. They can be represented by symbols, icons, shapes, or input fields depending on the purpose of the user interface. The design choice for each node should prioritize clarity and ease of understanding for the users.

Edges

Edges are the connections which symbolize relationships or interactions between these entities. They can be represented by lines, arrows, or any other graphical element that clearly indicates the flow of data or control.

Interaction Mechanisms

A node-based UI relies heavily on drag-and-drop interactions for users to create, modify, and manage their workflows or processes. This dynamic approach allows users to visualize their ideas in a more intuitive and flexible manner compared to traditional form-based interfaces with fixed layouts.

Key Interactions

• Dragging Nodes: Users can add, remove, or reposition nodes within the interface.
• Connecting Edges: Users can establish connections between nodes by dragging an edge from one node's output port to another node's input port. The ports may be implicit (i.e., located at the edges of a node) or explicit (i.e., designated areas on the node for inputs and outputs).
• Configuring Nodes: Depending on the complexity, nodes can have editable parameters or settings that users adjust through graphical controls such as sliders, dropdowns, or text fields. This allows for fine-tuning the behavior of each entity within the workflow.