experiment: replace landing with workshop introduction
- Added Welcome card (Before we begin) to idle state - Reduced textarea from 10 to 6 rows - Added reassurance text below Analyse button - Removed redundant empty-state placeholder - Closed Experiment 03 (Partially confirmed) in evolution log - Added Experiment 04: Facilitated Workshop Introduction - Added Entry Experience section to UX guidelines
This commit is contained in:
@@ -322,3 +322,17 @@ Headings should be clean. Remove unnecessary subheadings that duplicate context.
|
|||||||
Cards should have consistent border radius, padding, and heading treatment across the workspace.
|
Cards should have consistent border radius, padding, and heading treatment across the workspace.
|
||||||
|
|
||||||
An Investigation Map Preview should look provisional — lighter borders, muted text, subtle background — so the user knows it is a preview rather than completed content.
|
An Investigation Map Preview should look provisional — lighter borders, muted text, subtle background — so the user knows it is a preview rather than completed content.
|
||||||
|
|
||||||
|
## Entry Experience
|
||||||
|
|
||||||
|
The landing page is not the investigation workspace.
|
||||||
|
|
||||||
|
The landing page welcomes the user.
|
||||||
|
|
||||||
|
The landing page explains what will happen.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|||||||
@@ -377,27 +377,49 @@ export default function ScenarioForm() {
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{status === "idle" && (
|
{status === "idle" && (
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
<textarea
|
|
||||||
ref={textareaRef}
|
{/* Welcome introduction */}
|
||||||
value={scenario}
|
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6">
|
||||||
onChange={(e) => setScenario(e.target.value)}
|
<h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Before we begin</h2>
|
||||||
placeholder="Describe the scenario you want analysed..."
|
<p className="text-sm leading-relaxed text-gray-700 mb-4">
|
||||||
rows={10}
|
The Confidence Engine helps build confidence by understanding situations before deciding what to do.
|
||||||
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"
|
</p>
|
||||||
/>
|
<p className="text-sm leading-relaxed text-gray-700 mb-3">
|
||||||
<div className="flex items-center justify-between">
|
You do not need to know exactly what the problem is.
|
||||||
<span className="text-xs text-gray-400">
|
</p>
|
||||||
{scenario.length}/{MAX_LENGTH}
|
<p className="text-sm leading-relaxed text-gray-700">
|
||||||
</span>
|
Simply describe what you have observed. We will work through it together, one question at a time.
|
||||||
<button
|
</p>
|
||||||
type="submit"
|
|
||||||
disabled={!scenario.trim()}
|
|
||||||
className="rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
|
|
||||||
>
|
|
||||||
Analyse
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Scenario input */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!scenario.trim()}
|
||||||
|
className="rounded-lg bg-blue-700 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
|
||||||
|
>
|
||||||
|
Analyse
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reassurance */}
|
||||||
|
<p className="text-xs italic text-gray-400">
|
||||||
|
You do not need all the answers yet.
|
||||||
|
</p>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -509,14 +531,6 @@ export default function ScenarioForm() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Empty state */}
|
|
||||||
{status === "idle" && (
|
|
||||||
<div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-6 py-8 text-center">
|
|
||||||
<p className="text-sm text-gray-400">
|
|
||||||
Enter a scenario above and click Analyse to begin.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -198,7 +198,64 @@ Map
|
|||||||
Separating these should make the interface feel more like a facilitated investigation than a collection of cards.
|
Separating these should make the interface feel more like a facilitated investigation than a collection of cards.
|
||||||
|
|
||||||
Evaluation:
|
Evaluation:
|
||||||
Pending visual review.
|
Partially confirmed.
|
||||||
|
|
||||||
|
Learning:
|
||||||
|
|
||||||
|
The workspace feels more coherent when organised into cognitive zones rather than a simple document stack.
|
||||||
|
|
||||||
|
However, another distinction emerged that is more important than the zones themselves.
|
||||||
|
|
||||||
|
The interface naturally separates into two different modes:
|
||||||
|
|
||||||
|
• the active conversation between investigator and facilitator
|
||||||
|
|
||||||
|
and
|
||||||
|
|
||||||
|
• the shared workspace describing the current understanding.
|
||||||
|
|
||||||
|
Unexpected learning:
|
||||||
|
|
||||||
|
History feels incorrect when treated as reference information.
|
||||||
|
|
||||||
|
History is actually the continuation of the investigator's conversation.
|
||||||
|
|
||||||
|
Every response immediately becomes history.
|
||||||
|
|
||||||
|
The notebook should therefore grow naturally from the Response area.
|
||||||
|
|
||||||
|
The Investigation Status card currently competes with the Current Investigation card.
|
||||||
|
|
||||||
|
The current question is the primary focus.
|
||||||
|
|
||||||
|
Status is supporting context.
|
||||||
|
|
||||||
|
Decision:
|
||||||
|
|
||||||
|
Keep the cognitive-zone concept.
|
||||||
|
|
||||||
|
Refine the zones around conversational flow instead of card grouping.
|
||||||
|
|
||||||
|
Next question:
|
||||||
|
Can the workspace clearly separate conversation from shared understanding?
|
||||||
|
|
||||||
|
### Experiment 04 — Facilitated Workshop Introduction
|
||||||
|
|
||||||
|
Hypothesis
|
||||||
|
|
||||||
|
Beginning with a facilitator-style introduction will create more confidence than presenting an empty workspace.
|
||||||
|
|
||||||
|
Questions
|
||||||
|
|
||||||
|
- Does the interface feel more welcoming?
|
||||||
|
- Does reducing the visual weight of the textarea improve the first experience?
|
||||||
|
- Does separating "starting" from "investigating" feel natural?
|
||||||
|
- Does the transition into the investigation workspace feel meaningful?
|
||||||
|
|
||||||
|
Status:
|
||||||
|
Experimental.
|
||||||
|
|
||||||
|
No conclusions.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user