layers-interaction-flow

/layers-interaction-flow

/layers-intro が読み込まれていることを前提とします。このスキルはテクニック集であり、スクリプトではありません。詳しくは、そちらの「これらのスキルの使い方」を参照してください。

インタラクション構造とフローレイヤーでは、ユーザーがプロダクトをどのように操作するかを定義します。ユーザーが移動する場所、利用できるアフォーダンス、表示されるコンテンツ、状態間のフローなどです。このレイヤーは、概念モデル（何が存在するかを定義するもの）の上、サーフェス（どのように見えるかを定義するもの）の下に位置します。

ブレッドボードは、特定の状況で特定の仕事を行う特定のユーザーを対象に作成します。始める前に、どのジョブストーリーを扱うのかを把握してください。

---

このレイヤーで決めること

• フローが移動する個別の場所
• 各場所でユーザーができることと、各アクションの遷移先
• 各場所に表示する必要があるコンテンツ
• 失敗時のフロー、空の状態、エッジケースで起こること
• 仕事を果たすうえで、フローを可能な限りシンプルにできているか

基盤となる概念モデルが安定していない場合、その上に構築したフローは作り直しになることがよくあります。まず、概念モデルを確認してください。

---

規律 — フローの整合性を保つために

• すべてのアフォーダンスに、名前の付いた遷移先があること。「送信 → 遷移先は？」答えられないなら、まだ決まっていません。
• エッジケースも必須のステップであり、後回しにしてはいけません。 失敗時のフロー（バリデーション、サーバーエラー、切断、タイムアウト、同時編集）、空の状態や読み込み中の状態、アクション後の状態、キャンセル時のフローをブレッドボードに起こしてください。それぞれの抜けは未決定の設計です。明確にしてください。
• オブジェクトを壊れた状態にしないこと。 このフローに登場する概念モデルの各オブジェクトについて、その属性とアクションをまとめて利用できるようにしてください。相互リンクもないまま、複数の画面に分散させてはいけません。
• オブジェクトを孤立させないこと。 各モデルの関係性がフロー上で確認・移動できるようにするか、その必要がないと意図的に判断してください。
• 用語はモデルのユビキタス言語に合わせてください。
• 場所の命名は設計上の判断です。 説明的で、ユーザーにとって意味のある名前にしてください（「ページ 3」ではなく「紹介ダッシュボード」など）。
• 最小限に保ってください。 1つのジョブストーリーに対して場所が5〜6か所を超える場合は、統合できる箇所がないか探すサインです。

---

ブレッドボードの表記法

Place name
- affordance → destination place
- affordance → destination place
[ content shown in this place ]

---

テクニック

標準はブレッドボードです。ほかのテクニックは、特定の状況に応じて使います。

テクニック	使用する状況
ブレッドボーディング（Ryan Singer / Shape Up）	標準。ビジュアルデザインの変更コストが高くなる前に、インタラクションのロジックを確定させるテキスト表記法です。
ユーザーとしてフローをたどる	「私は［状況］にいるユーザーです。［場所］に到着し、［コンテンツ］を見て、［動機］から［アフォーダンス］を使います……」とナレーションします。ハッピーパスをたどってから、すべてのエッジケースを確認します。未決定の事項を見つける最も速い方法です。
ユーザーストーリーマッピング（Jeff Patton）	複雑なプロダクト、多様なユーザータイプ、段階的な計画に適しています。タイムラインに沿って、アクティビティ → タスク → ストーリーを整理します。
タスク分析	既存のフローを再設計する際に、現在のタスクを分解し、摩擦、エラー、回避策が集中する箇所を見つけます。
サービスブループリンティング	フローが複数のチャネルにまたがる場合や、舞台裏の業務（スタッフ、システム、サードパーティ）が関わる場合に適しています。
クリティカルユーザージャーニー	どのフローに取り組むかを決める際に、コアバリューに至る最短経路を特定します（トラフィック、収益、指標への影響が特に大きいもの）。
フロー図（graph LR）	全体像の把握にのみ使用します。時間の経過に沿ったフローは左から右に読みます。テキストのブレッドボードを主要な成果物とし、図では条件分岐の詳細が失われます。

---

デザイナーとの協業

そのフローがどのジョブストーリーに応えるのか、ユーザーがどこから始めるのか、成功とはどのような状態なのかを決めます。再設計の場合は、まず現在のフローを説明します。すでに下された判断が明らかになり、その多くが意図せず行われたものだからです。次に場所を挙げ、アフォーダンスと遷移先を対応づけ、前述の指針に沿って、例外も含めたフロー全体をたどります。アフォーダンスが利用できる条件、または利用できない条件には、実際の判断が隠れていることがよくあります。

目的に合った手法を提案します。ほとんどのフローにはブレッドボーディング、再設計にはタスク分析、計画することが多い場合はストーリーマッピングが適しています。すべてを行うのではなく、次に役立つことを行います。

成果物として残すのは必要なものだけです。ブレッドボード（場所、アフォーダンス、遷移先、コンテンツ、重要な条件付き状態）、方向性の把握に役立つ場合はフロー図、未決定事項（不足点と未解決の例外ケース）、そして下位レイヤーの決定が未確定であることに依存するリスクを記録します。

ブレッドボードでは、視覚的な形式を決めずにインタラクションのロジックを定義します。表層の設計に進む前に、その下にある概念モデルが安定していることを確認します。