MatchDog ポートフォリオ プロジェクトの構築: 画面の視覚化とコンテンツ

おめでとう！この本の中で最も長い章を終えました。この章では、単純なコンポーネントからマスター図に至るまでのデザイン パターン レイヤーの完全な階層が説明されています。 UXアーキテクチャ 代替案。

この本で述べられているように、マルチレベル パターン フレームワークはボトムアップで教えるのが最適ですが、新しい設計プロジェクトでは通常、トップダウンで実践されます。進め方の概要ではトップダウンアプローチを採用します。

プロジェクト概要

を確認してください MatchDog の完全なプロジェクト概要 もう一度、常に焦点を合わせてください。

MatchDog デザイン パターンの選択に関しては、視覚化の章の例から独自の結論を導き出す必要があります。この本では、表 14、15、および 16 に示されている内容を使用して、この点に関してプロジェクトの足場を少し構築し、プライマリ オブジェクトにマップされるアクションを表示するために最適化されたパターンを選択することを回避できるようにします。さらに、すべてのフレームワーク レベルでデザイン パターンを選択するのはあなた次第です。この本では MatchDog の画面デザインは提供されていません。前述したように、概念モデルを表現するための有効な視覚化ソリューションが多数あります。ユーザーに喜んでいただける、自分なりの表現を見つける旅が始まります。

この演習の目標

最初の作業が完了すると、 反復 概念モデルとセマンティック グリッド 前の演習では、MatchDog サービスのコンテンツを視覚化するための最適なデザイン パターンを選択します。この目標を最も効率的に達成するには、デザイン パターン レベルを介して作業して、 GUI アーキタイプとウィジェットをプライマリ オブジェクトに追加します。次に、に含まれているすべての詳細を入力できます。 属性 最初の演習で列挙したオブジェクトのリストを作成します。

この演習で必要な機器

• ペンと紙またはホワイトボード

コンセプトの完全なビジュアライゼーションをスケッチする

前述のグリッドと文法の演習ステップからの階層 UX アーキテクチャ パターンを続けたい場合は、問題ありません。さらに推し進めて、代替の UX アーキテクチャを検討して、より適切かどうかを確認したい場合は、表 19 に示す 5 つの UX アーキテクチャのバリエーションのいずれか (またはすべて) について、上記のグリッドと文法の手順を繰り返すことができます。通常、ハブ アンド スポークまたはネットワーク アーキテクチャでは、ホーム ページに複数のオブジェクトの高レベルの集約概要ビューが表示され、オーダーメイドのページでは特定のオブジェクトの詳細に焦点が当てられます。

実用的な観点から見ると、管理バックオフィスのエクスペリエンスには、ハブ アンド スポークまたはネットワーク アーキテクチャが最も適しています。従業員ペルソナは、勤務時間の大部分をこの UX で過ごすことになり、消費者ユーザーよりもはるかに深いレベルでタスクの詳細に精通しています。彼らは、次のような画面アーキタイプを利用して生産性を最適化した UX を高く評価するでしょう。 ダッシュボード、スイムレーンやポータルなど、使用頻度の低い消費者ペルソナにとっては情報量が多すぎる可能性があります。

UX Magic の表 19: 一般的な UX アーキテクチャの形状と特性。

を推奨します。 スケッチ この時点では紙かホワイトボードに書きます。 プロトタイピング ツールは構築に最適です。彼らは考えることが苦手（そして遅い）です。デバイスの画面サイズ、ユーザーのタスク、およびユーザーのタスクを考慮しながら、それらのメリットを評価し、概念モデルを視覚化するために最適なものを選択できるように、多くの代替案を迅速に作成することに慣れておくことが重要です。 ターゲットペルソナ。

1. 1 つ以上の UX アーキテクチャを選択し、オブジェクトをそれらに割り当てます。
   1. UX の実践では、同じシステム全体で、管理エクスペリエンスと消費者向けに異なるアーキテクチャを使用することが一般的です。さまざまな UX アーキテクチャとペルソナの組み合わせ全体で概念モデルの一貫性を維持する 重要です ソリューション全体の成功につながります。
2. アーキテクチャとペルソナの組み合わせごとに MatchDog のサイトマップを作成します。
3. 各ページタイプのセマンティックグリッドを調整する そしてそれらを可能な限り一貫性のあるものにするように努めてください。
   1. 画面ヘッダーがどのように見えるか、およびそこに永続的に配置する必要があるグローバル アクションを必ず理解してください。
   1. 管理 UX にはさらに多くの機能が含まれていることに注意してください。 機能性。
4. 各メイン ページに最も適切なアーキタイプを選択します。
   1. 可能な限り少ない数のアーキタイプを使用するようにしてください。
   1. マイナー ページとダイアログ ボックスは後まで延期します。
   1. 補足的な要素に時間を費やす前に、コアがしっかりしていることを確認する必要があります。
5. 次に、各アーキタイプの重要なウィジェットの詳細を入力します。
   1. 通常、これにより、コントロールの大部分が各画面に表示されます。
   1. ありますか フィルター そして 並べ替え で必要なオプション リスト そしてテーブルは？
   1. どこで、どうやって 検索 提示されるのか？
   1. 犬や投稿に対してお気に入りや評価を利用できますか?
6. 必要な個別のコントロールを追加します コンテンツを保存したり、逆方向に保存したりする場合 ナビゲーション (キャンセルや元に戻すなど) を、必要に応じてすべてのページおよびウィジェットにわたって一貫した場所に配置します。

3 つのデザインですべてのタスク (オブジェクトとアクションのペア) を処理できると考えた場合、 MVP 機能範囲と UX アーキテクチャにおけるその位置は、消費者と管理者のペルソナの優先順位付けマトリックスを反映しています。 立ち止まって読書に戻るべきです 次の章。

時間のかかるプロトタイピングのプロセスは、フローの章が完了するまで開始しないでください。プライマリ画面を熟考することは素晴らしいことですが、要件で定義された複数のユースケースをサポートする際に、それらを接続して効率的にナビゲートできることを確認する必要があります。そうしないと、必要な複数のタスクをサポートするために最小限の画面を賢く再利用する代わりに、シナリオごとに画面が爆発的に増加する危険性があります。

ビジュアライゼーションを反復して CM 文法を洗練する

戻って CM 文法を再確認してください。それは視覚化の決定に完全に適合しますか、それともオブジェクトと属性をピボットすることでメリットが得られるでしょうか?

ページ数を減らしたり、必要な固有のアーキタイプやウィジェットの数を減らすような変更を CM レベルで行うことはできますか?ポール・サフォの言葉、「強い意見は弱い立場にある」を思い出してください。あなたのデザインは今のところ良いですが、減らすことはできますか 認知負荷 概念モデルをさらに強化することで何かできるでしょうか?

この演習を終了する

この演習ステップで UX Magic 視覚化レベルを使用して主要オブジェクトを表示する方法を選択することで、セマンティック IxD メソッドのモジュール性を確認し、デザイン パターン レベルを分解することを実践しました。 3 つのそれぞれにどのアーキタイプが最適であるかをすぐに判断できました。 UXデザイン さまざまなバリエーション (消費者向け Web、モバイル、および管理) が、企業内でエンドツーエンドのソリューションを構成します。 ポートフォリオ。また、すべてのオブジェクト属性を表示するために必要なウィジェットとコントロールのデザイン パターンをすばやく選択できるようになりました。最後に、属性テーブルとアクションをチェックリストとして使用して、必要な機能範囲を確実にカバーしていることを確認できます。 デザイン概要。あなたが持っているだけでなく、 デザイン提案しかし、重要なことを何も忘れていないかどうかの検証も必要です。

この時点で、かなりの自信を持った UX デザインが完成したはずです。レゴのようなパーツ (パターン レベル) のアセンブリを使用して、概念モデルの文法を効果的にサポートする UX 画面の最初のセットに到達しました。あなたのデザインは認知負荷が低い科学的根拠に基づいており、この根拠に基づいて次のように簡単に説明し、擁護することができます。 利害関係者 会議。セマンティック IxD は初めてですが、これまでに使用したアプローチよりも早く初期画面のこの時点に到達できるはずです。そうでない場合でも、心配しないでください。セマンティック IxD のスキル レベルが上がるにつれて、時間をかけて練習するだけで速くなります。

著者/著作権所有者: Teo Yu Siang および インタラクションデザイン 財団。著作権条項とライセンス: CC BY-NC-SA 3.0