Blueprint
draftStatus of this Document
This report was published by the User Journal Graph Community Group . It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups .
1. Overview
This module defines the vocabulary for intended user experiences. It extends [UJG Core] to support structured, interactive graphs with nesting, organization tags, and reusable outgoing navigation patterns.
2. Terminology
Journey: A named, versioned container for a user flow.
State: A discrete node in the experience (e.g., a screen, modal).
Transition: A directed edge between two states.
CompositeState: A state that encapsulates another Journey (sub-journey).
OutgoingTransitionGroup: A reusable set of outgoing transitions that a Consumer can treat as present on multiple states (e.g., global nav).
3. The Core Graph
A Journey MUST consist of States connected by Transitions.
3.1. Visual Model
graph LR
A[State: Product] -->|Transition: Add| B[State: Cart]
3.2. Data Model
3.2.1. The Journey Container
A Journey MUST include:
type:"Journey"startState: ID of the entry State.states: Array of State or CompositeState objects.transitions: Array of Transition objects.outgoingTransitionGroups: (Optional) Array of OutgoingTransitionGroup IDs.
3.2.2. The State Object
A State MUST include:
type:"State"id: Unique URI/URN.label: Human-readable string.tags: (Optional) Array of strings for grouping (e.g.,["phase:checkout"]).
3.2.3. The Transition Object
A Transition MUST include:
type:"Transition"from: ID of the source State.to: ID of the target State.label: (Optional) Action name.
4. Composition (CompositeState)
Composition allows a node to reference an entire sub-journey, enabling "zoomable" graph interactions.
4.1. Visual Model
graph LR
H[Home] --> C
subgraph C [Composite State: Checkout]
direction LR
s1[Shipping] --> s2[Payment]
end
C --> E[Exit]
4.2. Schema
A CompositeState MUST include:
type:"CompositeState"id: Unique URI/URN.label: Human-readable string.subjourneyRef: An object containing:id: The ID of the target Journey.version: The specific version string.
5. Reusability (OutgoingTransitionGroup)
An OutgoingTransitionGroup defines reusable outgoing transitions (e.g., headers/footers) to avoid duplicating common navigation across many states.
5.1. Visual Model
graph TD
%% Global Destinations defined in the Group
subgraph Global [Global Navigation]
direction LR
H[Target: Home]
P[Target: Profile]
end
%% The Standard User Journey
subgraph Flow [Checkout User Journey]
direction LR
S1[State: Shipping] -->|Explicit| S2[State: Payment]
end
%% The Injection Logic (Applies to ALL states in Flow)
S1 -.->|Outgoing| H
S1 -.->|Outgoing| P
S2 -.->|Outgoing| H
S2 -.->|Outgoing| P
%% Styling for clarity
linkStyle 1,2,3,4 stroke-dasharray: 5 5, stroke:green, color:green;
5.2. Schema
An OutgoingTransitionGroup MUST include:
type:"OutgoingTransitionGroup"id: Unique URI/URN.outgoingTransitions: Array of objects, each containing:to: Target State ID.label: (Optional) Action name.
5.3. Processing Model (Injection)
When a Consumer loads a Journey referencing outgoingTransitionGroups:
Resolution: The Consumer MUST resolve each referenced OutgoingTransitionGroup object.
Iteration: For every State in the Journey (excluding designated end states, if the module defines them).
Injection: The Consumer MUST treat the State as having outgoing transitions to every
totarget defined in each resolved group’soutgoingTransitions.Deduplication: If an injected outgoing transition duplicates an explicit Transition with the same effective
fromandto, the Consumer SHOULD treat it as a single effective transition.
6. Validation Rules
To ensure graph integrity, the following constraints MUST be met:
Reference Integrity: All
startState,from, andtoIDs MUST resolve to valid State or CompositeState objects within the current scope or imported modules.Uniqueness: Every object with an
idMUST be unique within the document.Flow Continuity: Every State SHOULD have at least one outgoing transition (explicit or injected), unless designated an end state.
Composition Safety:
subjourneyRefMUST point to a valid, accessible Journey to prevent infinite recursion.Group Resolution: Every ID in
outgoingTransitionGroupsMUST resolve to an OutgoingTransitionGroup.
Appendix: Combined JSON Example
{
"type": "UJGDocument",
"specVersion": "1.0",
"items": [
{
"type": "OutgoingTransitionGroup",
"id": "urn:ujg:otg:global-header",
"outgoingTransitions": [
{ "to": "urn:ujg:state:home", "label": "Home" },
{ "to": "urn:ujg:state:profile", "label": "Profile" }
]
},
{
"type": "Journey",
"id": "urn:ujg:journey:main-site",
"version": "2.0",
"startState": "urn:ujg:state:home",
"outgoingTransitionGroups": ["urn:ujg:otg:global-header"],
"states": [
{
"type": "State",
"id": "urn:ujg:state:home",
"label": "Home Page",
"tags": ["phase:landing"]
},
{
"type": "CompositeState",
"id": "urn:ujg:state:checkout-flow",
"label": "Checkout Process",
"subjourneyRef": { "id": "urn:ujg:journey:checkout", "version": "1.0" }
}
],
"transitions": [
{
"type": "Transition",
"from": "urn:ujg:state:home",
"to": "urn:ujg:state:checkout-flow",
"label": "Buy Now"
}
]
}
]
}{
"type": "UJGDocument",
"specVersion": "1.0",
"items": [
{
"type": "OutgoingTransitionGroup",
"id": "urn:ujg:otg:global-header",
"outgoingTransitions": [
{ "to": "urn:ujg:state:home", "label": "Home" },
{ "to": "urn:ujg:state:profile", "label": "Profile" }
]
},
{
"type": "Journey",
"id": "urn:ujg:journey:main-site",
"version": "2.0",
"startState": "urn:ujg:state:home",
"outgoingTransitionGroups": ["urn:ujg:otg:global-header"],
"states": [
{
"type": "State",
"id": "urn:ujg:state:home",
"label": "Home Page",
"tags": ["phase:landing"]
},
{
"type": "CompositeState",
"id": "urn:ujg:state:checkout-flow",
"label": "Checkout Process",
"subjourneyRef": { "id": "urn:ujg:journey:checkout", "version": "1.0" }
}
],
"transitions": [
{
"type": "Transition",
"from": "urn:ujg:state:home",
"to": "urn:ujg:state:checkout-flow",
"label": "Buy Now"
}
]
}
]
}