From 739c3c5f80c81d2e5ed6bd6afb00a85da0d54807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A5rten=20Angner?= Date: Wed, 25 Feb 2026 11:09:01 +0100 Subject: [PATCH] Replace page scaffolding with interaction-driven page outline dialog [O] Outline now walks through pages as a conversation: for each page, ask what the user accomplishes and what interaction moves them forward. Interactions that leave the page create new steps; interactions that stay on the page become storyboard items within the page spec. Co-Authored-By: Claude Opus 4.6 --- .../data/scenario-outline-template.md | 16 ++-- .../steps-c/step-05-outline-scenario.md | 95 ++++++++++--------- 2 files changed, 58 insertions(+), 53 deletions(-) diff --git a/src/workflows/3-scenarios/data/scenario-outline-template.md b/src/workflows/3-scenarios/data/scenario-outline-template.md index 8f3acddc7..79d86fb0b 100644 --- a/src/workflows/3-scenarios/data/scenario-outline-template.md +++ b/src/workflows/3-scenarios/data/scenario-outline-template.md @@ -88,16 +88,16 @@ ## Pages in This Scenario -Page folders are created when the user chooses [O] Outline or [D] Design from the post-scenario menu. +Page folders are created via [O] Outline (page-by-page dialog) or [D] Design (first page + Phase 4). -| Page Number | Folder | Purpose in Flow | -|-------------|--------|----------------| -| [NN].1 | `[NN].1-[page-slug]/` | [What it does — from Q8 step 1] | -| [NN].2 | `[NN].2-[page-slug]/` | [What it does — from Q8 step 2] | -| [NN].3 | `[NN].3-[page-slug]/` | [What it does — from Q8 step 3] | +| Page Number | Folder | Purpose | Exit Action | +|-------------|--------|---------|-------------| +| [NN].1 | `[NN].1-[page-slug]/` | [Page purpose] | [Interaction that leads to next page] | +| [NN].2 | `[NN].2-[page-slug]/` | [Page purpose] | [Interaction that leads to next page] | +| [NN].3 | `[NN].3-[page-slug]/` | [Page purpose] | [Final — scenario success] ✓ | -**First page** ([NN].1) has full boilerplate with entry context (Q4 + Q5 + Q6). -**Remaining pages** have minimal boilerplate with page purpose from Q8. +**First page** ([NN].1) includes full entry context (Q3 + Q4 + Q5 + Q6). +**On-page interactions** (that don't leave the page) are documented as storyboard items within each page spec. ``` --- diff --git a/src/workflows/3-scenarios/steps-c/step-05-outline-scenario.md b/src/workflows/3-scenarios/steps-c/step-05-outline-scenario.md index a3edd0056..83d633855 100644 --- a/src/workflows/3-scenarios/steps-c/step-05-outline-scenario.md +++ b/src/workflows/3-scenarios/steps-c/step-05-outline-scenario.md @@ -195,8 +195,8 @@ Scenario [NN] complete! What would you like to do? #### Menu Handling Logic: - IF N: Loop back to instruction 1 for the next transaction and target group. The scenario outline is saved — page folders can be created later. -- IF O: Walk through the pages in Q8's shortest path, creating page folders one at a time (see Page Folder Structure below). The user can stop at any point and return to this menu. -- IF D: Create the first page folder (see Page Folder Structure below), then hand over to Phase 4 (UX Design). The remaining scenarios and page folders can be created later. +- IF O: Start the Page Outline Dialog (see below). Walk through pages one at a time, starting from the first page. The user can stop at any point and return to this menu. +- IF D: Create the first page folder (see Page Folder Structure below), then hand over to Phase 4 (UX Design). The remaining pages can be outlined later. - IF C: Load, read entire file, then execute {nextStepFile} (only when all planned scenarios are complete) #### EXECUTION RULES: @@ -206,55 +206,47 @@ Scenario [NN] complete! What would you like to do? - User can chat or ask questions — always respond and then display the menu again - Options [O] and [D] are always available — the user decides when to outline pages +### Page Outline Dialog + +When the user selects [O], walk through each page as a conversation. Q8's shortest path gives the rough page sequence — the outline dialog refines it by identifying what happens on each page. + +**Start from page 1** (already defined by Q6 + Q8 step 1). + +#### For each page, ask two questions: + +**1. "What's the point of this page?"** + +What does the user need to accomplish here? This becomes the page purpose. +- e.g., "See a list of news articles" or "Find the phone number and opening hours" + +**2. "What does the user do to move forward?"** + +What interaction takes them to the next step? This defines the exit action. +- e.g., "Selects 'News' in the menu" → next page is the News listing +- e.g., "Clicks 'Read more' on an article" → next page is the Article detail + +#### Two types of interactions: + +- **Leaves the page** → new scenario step (new page folder, next number) +- **Stays on the page** → storyboard item (documented within the page spec as an on-page interaction) + +#### After each page, create the folder and continue: + +Create the page folder, then ask about the next page. The user can say "stop" at any point to return to the scenario menu. + ### Page Folder Structure -When creating page folders (via [S] or [D]), use this structure: +**Naming convention:** `{scenario-number}.{step-number}-{page-slug}` (e.g., `1.1-start-page`, `1.2-news-listing`, `1.3-article-detail`) -**Naming convention:** `{scenario-number}.{step-number}-{page-slug}` (e.g., `1.1-start-page`, `1.2-services`, `1.3-contact`) +Each page folder contains: ``` -{output_folder}/C-UX-Scenarios/[NN-slug]/pages/ -├── {NN}.1-{page-slug}/ -│ ├── {NN}.1-{page-slug}.md ← Full boilerplate (first page only) -│ └── Sketches/ -├── {NN}.2-{page-slug}/ -│ ├── {NN}.2-{page-slug}.md ← Minimal boilerplate -│ └── Sketches/ -└── {NN}.3-{page-slug}/ - ├── {NN}.3-{page-slug}.md ← Minimal boilerplate - └── Sketches/ +{NN}.{step}-{page-slug}/ +├── {NN}.{step}-{page-slug}.md +└── Sketches/ ``` -#### First page — full boilerplate: - -The first page gets rich context from the 8-question dialog: - -```markdown -# {NN}.1-{page-name} - -## Page Metadata - -| Property | Value | -|----------|-------| -| **Scenario** | {scenario-name} | -| **Page Number** | {NN}.1 | -| **Platform** | {Device from Q5} | - -## Overview - -**Page Purpose:** {Purpose from step 1 of the Shortest Path (Q8)} - -**User Situation:** {Persona + real-life situation from Q3} - -**Entry Context:** {Device (Q5)} arriving via {discovery method (Q6)}, feeling {mental state — hope + worry from Q4} - -**Success Criteria:** {What must be true before the user moves to step 2} - -**Exit Points:** -- → {NN}.2-{next-page-slug} -``` - -#### Remaining pages — minimal boilerplate: +#### Page boilerplate: ```markdown # {NN}.{step}-{page-name} @@ -265,12 +257,25 @@ The first page gets rich context from the 8-question dialog: |----------|-------| | **Scenario** | {scenario-name} | | **Page Number** | {NN}.{step} | +| **Platform** | {Device from Q5} | ## Overview -**Page Purpose:** {Purpose from this step of the Shortest Path (Q8)} +**Page Purpose:** {What the user needs to accomplish here} + +**Entry Context:** {How the user arrived — previous page + interaction that brought them here} + +**Exit Action:** {What the user does to move to the next step} + +**On-Page Interactions:** +- {Any interactions that keep the user on this page — storyboard items} ``` +The **first page** additionally includes: +- **User Situation** from Q3 +- **Mental State** (hope + worry) from Q4 +- **Discovery Method** from Q6 + ## CRITICAL STEP COMPLETION NOTE When [C] is selected, ALL scenarios from the approved plan must be outlined and pass quality gates. Then load and read fully `{nextStepFile}` to begin generating the overview.