Navigator interface¶

The Navigator is what the end user sees when interacting with a scenario. The interface is designed to be clean and focused on content, without distractions.

Header area¶

At the top of the screen is the header with context information.

On the left appears the scenario title, the one defined in the JSON file metadata. It helps identify which path you're in, useful when an organization has multiple scenarios to manage.

On the right, if configured, the company branding appears: logo, company name, optionally a link to the website.

Progress indicator¶

At the bottom left is the progress indicator, a line showing "Step X" where X is the number of screens traversed from the start. This gives the user a sense of advancement in the path.

The "Step" label is customizable in the scenario translations. For a quiz it could be "Question", for a workflow it could be "Phase".

Map¶

At the bottom right is the button to activate the map visualization, covered in depth later in this chapter.

Content area¶

The central section is dedicated to the current node's content. Text is rendered as Markdown, so it supports headings, bold, italic, bullet lists, and blockquotes.

The content can start with a large heading (H1) that serves as the screen header, followed by text paragraphs, lists, highlighted quotes. Formatting helps structure complex information in a readable way.

Below the text content, additional resources may appear: links to documents, files to download, videos to watch. Each resource has an icon indicating its type and a button to access it.

Choice buttons¶

At the bottom of the content area, choice buttons appear. Each button represents an option the user can select, with descriptive text that anticipates where that choice will lead.

Buttons change color based on state. The primary color indicates unexplored choices. A different color indicates choices already made previously, useful when the user goes back to explore alternative paths. A third color can indicate choices explored but not in the current path.

When a node has no choices, it means it's an endpoint of the path. Instead of choice buttons, a message like "End of path" appears (this text is also editable in the scenario editor) and a button to restart.

Once you've started a path, a "Back" button appears at the top, allowing you to return to the previous card, retracing the path taken. It's useful for rereading information or reconsidering a choice.

The "Restart" button returns to the beginning of the scenario, resetting the path. Useful for exploring again with different choices.

The "View Map" button opens the tree visualization of the path, which can also be used to move through the structure, see the next section.

Journey map¶

The map shows the entire scenario as a tree of connected nodes. It's a visualization that allows seeing where you are relative to the overall structure.

Each node is represented by a rectangle with an abbreviated title. Nodes are colored differently based on their state.

The current node, where the user is located, is highlighted with the primary color. Nodes already visited in the current path have a color indicating "already seen". Nodes not yet reached are gray or with a dashed border.

The lines connecting nodes represent choices. Lines also change color: those traversed are solid and highlighted, those not yet explored are dashed. Arrows on the lines indicate from which node to which node the user moves, as connections are always unidirectional.

Clicking on a node in the map jumps directly to that card, if already visited.

The map closes with the close button at the top right.

Responsiveness¶

The interface automatically adapts to screen dimensions. On mobile devices, buttons become larger to facilitate touch, the map resizes to remain readable, text maintains proportions suitable for reading.

Navigation remains functional even on small screens: all controls remain accessible and content scrolls vertically when necessary.