experiment: facilitator panel beside workspace (Exp 05)
- Replace stacked landing with responsive two-column layout - Left panel (1/3 desktop): facilitator intro card with dismiss checkbox - Right panel (2/3 desktop): Tell me what's happening textarea + Analyse - Mobile/tablet stack vertically as before - 'Don't show' uses sessionStorage; future: user profile settings - Close Exp 04 (Partially confirmed) in evolution log - Add Exp 05 entry + Facilitator Behaviour UX section
This commit is contained in:
@@ -336,3 +336,15 @@ Complexity appears progressively.
|
||||
Users begin with observations rather than conclusions.
|
||||
|
||||
The Confidence Engine behaves like a facilitator introducing a workshop — calm, patient, and focused on understanding before acting.
|
||||
|
||||
## Facilitator Behaviour
|
||||
|
||||
Orientation should support work, not interrupt it.
|
||||
|
||||
The facilitator is present by invitation, not obligation.
|
||||
|
||||
Returning users should control repeated guidance.
|
||||
|
||||
The workspace should remain the primary visual focus.
|
||||
|
||||
Information should naturally flow from left to right.
|
||||
|
||||
@@ -218,6 +218,7 @@ export default function ScenarioForm() {
|
||||
const [lastSubmittedAnswer, setLastSubmittedAnswer] = useState("");
|
||||
const [currentUnderstanding, setCurrentUnderstanding] = useState(null);
|
||||
const [mockScenario, setMockScenario] = useState("");
|
||||
const [hideFacilitatorOnLanding, setHideFacilitatorOnLanding] = useState(false);
|
||||
const textareaRef = useRef(null);
|
||||
|
||||
/* Restore persisted session on mount (Phase 3) ─────────── */
|
||||
@@ -231,6 +232,15 @@ export default function ScenarioForm() {
|
||||
setStatus("success");
|
||||
}, []);
|
||||
|
||||
/* Restore facilitator dismiss preference (Experiment 05) ─── */
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
const pref = sessionStorage.getItem("ce-facilitator-dismissed");
|
||||
setHideFacilitatorOnLanding(pref === "true");
|
||||
} catch (_) {}
|
||||
}, []);
|
||||
|
||||
/* Inject mock globals so the interceptor can read them at runtime */
|
||||
useMockGlobals();
|
||||
|
||||
@@ -379,8 +389,13 @@ export default function ScenarioForm() {
|
||||
{status === "idle" && (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
|
||||
{/* Welcome introduction */}
|
||||
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6">
|
||||
{/* Two-column landing workspace */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
|
||||
{/* Left panel — Facilitator (1/3 on desktop) */}
|
||||
{!hideFacilitatorOnLanding && (
|
||||
<div className="md:col-span-1">
|
||||
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6 sticky top-6">
|
||||
<h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Before we begin</h2>
|
||||
<p className="text-sm leading-relaxed text-gray-700 mb-4">
|
||||
The Confidence Engine helps build confidence by understanding situations before deciding what to do.
|
||||
@@ -388,20 +403,39 @@ export default function ScenarioForm() {
|
||||
<p className="text-sm leading-relaxed text-gray-700 mb-3">
|
||||
You do not need to know exactly what the problem is.
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed text-gray-700">
|
||||
<p className="text-sm leading-relaxed text-gray-700 mb-6">
|
||||
Simply describe what you have observed. We will work through it together, one question at a time.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 pt-4 border-t border-gray-200">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="dismiss-facilitator"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setHideFacilitatorOnLanding(true);
|
||||
try { sessionStorage.setItem("ce-facilitator-dismissed", "true"); } catch (_) {}
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<label htmlFor="dismiss-facilitator" className="text-xs text-gray-500">
|
||||
Don't show this introduction again
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scenario input */}
|
||||
<div className="space-y-2">
|
||||
{/* Right panel — Workspace (2/3 on desktop) */}
|
||||
<div className={hideFacilitatorOnLanding ? "md:col-span-3" : "md:col-span-2"}>
|
||||
<h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Tell me what's happening</h2>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={scenario}
|
||||
onChange={(e) => setScenario(e.target.value)}
|
||||
placeholder="Describe the scenario you want analysed..."
|
||||
rows={6}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 mb-3"
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
|
||||
@@ -413,15 +447,12 @@ export default function ScenarioForm() {
|
||||
Analyse
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reassurance */}
|
||||
<p className="text-xs italic text-gray-400">
|
||||
<p className="mt-3 text-xs italic text-gray-400">
|
||||
You do not need all the answers yet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{status === "idle" && MOCK_ENABLED && (
|
||||
<details className="rounded-lg border border-gray-200 bg-gray-50">
|
||||
|
||||
@@ -255,6 +255,47 @@ Questions
|
||||
Status:
|
||||
Experimental.
|
||||
|
||||
Result:
|
||||
Partially confirmed.
|
||||
|
||||
Learning:
|
||||
|
||||
The facilitator introduction reduced the intimidation of the first screen.
|
||||
|
||||
Replacing the empty landing page with a guided introduction improved the emotional tone.
|
||||
|
||||
However, stacking the introduction above the input still gives the introduction excessive visual prominence.
|
||||
|
||||
Repeat users may not want to repeatedly read the same introduction.
|
||||
|
||||
Orientation should remain available without dominating the workflow.
|
||||
|
||||
Decision:
|
||||
|
||||
Keep the introduction concept but change its spatial relationship to the workspace — move it from above to beside, making it optional rather than mandatory.
|
||||
|
||||
Next question:
|
||||
Does a horizontal facilitator/workspace layout feel more natural?
|
||||
|
||||
### Experiment 05 — Facilitator Panel and Adaptive Landing Workspace
|
||||
|
||||
Hypothesis
|
||||
|
||||
Placing the facilitator beside the working area will feel more like entering a facilitated workshop than stacking instructional content above the workspace.
|
||||
|
||||
Allowing the user to dismiss the facilitator will reduce friction for returning users while preserving onboarding for new users.
|
||||
|
||||
Questions
|
||||
|
||||
- Does a horizontal facilitator/workspace layout feel more natural?
|
||||
- Does the user's eye move naturally from facilitator to workspace?
|
||||
- Does the workspace become the primary focus?
|
||||
- Does "Don't show again" feel preferable to automatically hiding the introduction?
|
||||
- Should the facilitator panel become an optional workspace companion rather than mandatory onboarding?
|
||||
|
||||
Status:
|
||||
Experimental.
|
||||
|
||||
No conclusions.
|
||||
|
||||
---
|
||||
@@ -269,3 +310,11 @@ The following are active explorations rather than decisions.
|
||||
- What information belongs in shared understanding?
|
||||
- What should the Investigation Map eventually become?
|
||||
- How should wide thinking be reflected in the interface?
|
||||
|
||||
## Backlog — Experiment 05 Persistence Note
|
||||
|
||||
The "Don't show this introduction again" checkbox uses sessionStorage as a placeholder.
|
||||
|
||||
This preference should eventually be handled through user preferences or settings rather than local component state.
|
||||
|
||||
TODO: When user accounts are introduced, persist this preference to the user profile so it travels across devices and sessions.
|
||||
|
||||
Reference in New Issue
Block a user