ux-flow-plan

UX フロープラン

ユーザー体験から始め、コードレベルのアンカーはその後に対応付ける、高レベルのアーキテクチャプランを作成します。

手順

1. ユーザーの言葉を使って、機能の目的をプロダクトの観点で言い換えます。

2. 現状の UX フローをツリー形式で作成します。

   User action
   └─ System behavior
      └─ Existing architectural layer
         └─ Relevant function/file anchor
   

3. 望ましい UX フローを別のツリーとして作成します。

   User action
   └─ System behavior
      └─ New or changed architectural layer
         └─ Relevant function/file anchor
   

4. アーキテクチャの境界に関する判断を明確にします。

   • 条件を検出するレイヤー
   • 副作用を担うレイヤー
   • UI／ステータスを更新するレイヤー
   • 状態を永続化または変更するレイヤー

5. 実装のアンカーはツリーの後に付けます。前には付けません。

   • 関数名
   • ファイルパス
   • 再利用する既存の抽象化
   • フローを対象にするテスト

6. 最後に、簡潔な判断事項のリストを示します。

   • 推奨するアーキテクチャ
   • 採用しなかった代替案
   • 未解決の質問または前提

ルール

• 行番号やコードの編集ではなく、UX とシステムフローから始めます。
• 可能な場合は、フローをツリー図で示します。
• 関数名やファイルパスはアンカーとして関連付け、説明の中心にはしません。
• アーキテクチャの境界が明確になるまでは、実装の詳細を指定しすぎないようにします。
• 「現状のフロー」と「望ましいフロー」を分けます。
• 既存の概念と密接に結び付いている機能か、意図的に独立している機能かを明記します。
• 実際の境界を示す場合を除き、フレームワーク固有の専門用語よりも、一般的なプロダクトおよびアーキテクチャの用語を優先します。