MatchDog ポートフォリオ プロジェクトの構築: フロー

優先順位付けマトリックスの左上の象限にある最も重要なタスクは、ほとんどのユーザーが実行時間の大部分を費やすタスクです。少なくとも、これらは、ユーザーが画面から画面に遷移する方法 (およびロジック) を示す完全なフロー設計を必要とするものです。特定のページにどのオブジェクトを配置するかは、事前に設定した情報を組み合わせて決定する必要があります。 UXアーキテクチャ およびスクリーンアーキタイプの選択。

優先順位付けマトリックスは書籍のサンプル (表 9 または 10) とは若干異なる場合がありますが、次の 3 つのフローが高度に満たされていない限り、MatchDog 組織はその使命を成功させることはできません。 使える すべてのビジネス ロジックを保持できる最小限のステップが含まれます。

• ユーザー プロファイルの構築 (一致の基礎となる情報を収集するため)
• 犬の選択 (および、いくつかのお気に入りに絞り込むための候補リストも)
• 犬の引き渡し（犬を家に連れて帰るための打ち合わせ、準備、その他の手配）

本書ではサンプル フローが示されていますが、もちろん有効な代替案もあります。この本に記載されているものは、あなたのアーキテクチャとアーキタイプの組み合わせには適していない可能性があります。それを決めるのはあなた次第です。

プロジェクト概要

を確認してください MatchDog の完全なプロジェクト概要 また。前のステップでの初期画面デザインが完了すると、頭の中で映画の脚本を想像できるようになります。

MatchDog フロー設計に関する書籍の例からアイデアを引き出すことができます。この本では、2 つの重要な UX フローのさまざまなオプションの例と説明を使用して、意図的にこのプロジェクトの足場を築いています。ただし、あなたはデザイナーなので、フローには最適化された文法が反映されている必要があります。あなたの文法は、この本の例のフローが基づいているものとは異なる可能性があります。これらのフローを受け入れ、開始点として使用して改良したり、機能上の目的を満たし、場合によってはステップ数が少なくなる同様に有効な代替案を提案したりできます。

この演習の目標

この演習の目標は、定義するテクニックを練習することです。 ユーザーフロー MatchDog 設計の最も重要なタスク シーケンスに対応します。これらのユーザー フローは、ユーザーがさまざまなオブジェクトに対して実行できる主なアクションが、オブジェクトを画面間でどのようにナビゲートするかを定義します。

この演習で実行するアクティビティ

このアクティビティでは、プライマリ画面 (通常は 1 つ以上のオブジェクトを含む) を表すボックスを描画し、エクスペリエンスを 1 つの画面から別の画面に移動し、1 つの大きな画面内でコンテンツのフラッディングを解除するグローバル アクションとローカル アクションを示します。実行中に実装する必要がある分岐とビジネス ロジックを特定します。 ナビゲーション ダイヤモンド (ユーザーの決定) や三角形 (システムの決定) などのシンボルを使用して、エンドツーエンドのペットの養子縁組プロセスを完了します。

この演習で必要な機器

鉛筆と紙、または OmniGraffle や Visio などのベクター描画プログラムは正常に機能します。 PowerPoint を使用することもできます。ラインとボックスの接続ポイントを自動的に維持できる描画プログラムを使用すると、読みやすい UX フロー図を作成する速度が向上します。

フローを設計して…

• 独自の代替フローを作成します。 プロフィール構築 プロセス。
• 独自の代替フローを作成します。 犬の選択 プロセス。
• 愛犬との出会いを手配する最終的なフローを作成し、 所有権を取得します（犬の引き渡し）。 このシナリオには前例がないため、以前のフロー例を再構成するのではなく、「白紙」の機会に直面することになります。
• 最優先カテゴリーの残りのタスクが上記の 3 つでまだカバーされていない場合は、そのタスクのフローを定義します。

すべてのフロー図に、フローを進めるオブジェクト タイプとアクション名を忘れずに注釈として付けてください。これにより、部屋にいなくても、開発者や作業の潜在的なレビュー担当者に説明できるようになります。

文法、視覚化、フローの設計を繰り返して簡素化する

文法、視覚化、フローの完全な成果物が揃ったので、もう一度簡略化してみましょう。おそらく、フロー設計プロセス中に、視覚化レイヤーの決定、さらにはコア文法を変更する必要がある可能性がある摩擦点を特定したことがあるでしょう。

インタラクティブなプロトタイプを構築する

最初の 3 つのフレームワーク層で、最もシンプルで認知的に最もコンパクトなソリューションに到達したと確信したら、作業を終了します。 スケッチ インタラクティブな構築に切り替えます プロトタイプ。

• 持っていることを確認してください インタラクションデザイン デザイン全体にわたる言語レベルの一貫性。同じアクションが異なる (または同じ) オブジェクトの複数の画面に表示される場合、そのアクションは同じことを行う必要があり、できれば同じ近接位置にある必要があります。
• 「エレガンス」の章で提供されるガイダンスを使用して、画面構築用に正確なピクセル グリッドをレイアウトします。
  • 使用するピクセル グリッド テンプレートはできるだけ少なくしてください。

すべてのタスクを確実に実行できるレベルまでプロトタイプを構築することに投資することをお勧めします。 MVP プロトタイプで考えられるすべてのフローとページをシミュレートしなくても、優先順位付けマトリックスを作成できます。これだけで大活躍しますよ ポートフォリオ Semantic IxD でのスキルを文書化する途中のすべての合成および分析ステップを含めてください。

この演習を終了する

作成したばかりの UX フローにより、3 つの重要なことが達成されました。まず、プライマリ ナビゲーション パスのロジックを UXデザイン。次に、機能システムをコーディングするために開発者が実装する必要があるビジネス ロジックを指定しました。開発者の皆さん、 プロダクトマネージャー テクニカル ライターは、この特定の IxD の明瞭さに満足するでしょう。 アーチファクト すべてを保つためにテーブルに持ってきます 利害関係者 製品開発ライフサイクルを通じて期待を一致させることができます。

そして… 第三に、UX アーキテクチャとデザイン パターンの選択が最小限のステップで接続できることを検証しました。 反復 最初に選択したものよりもさらに優れた視覚化デザイン パターンを発見し、概念モデルの文法をさらに圧縮する方法も見つけました。

著者/著作権所有者: Teo Yu Siang および Interaction Design Foundation。著作権条項とライセンス: CC BY-NC-SA 3.0