web-dev-qa-db-ja.com

ペルソナ/シナリオからワイヤーフレームに移動する方法は?

バックストーリー

現在、競合製品よりもかなり遅れている複雑なWebアプリケーションを再構築する大規模なプロジェクトに取り組んでいます。利害関係者は、アプローチで「焦土」に行きたがっています。つまり、シンプルさとユーザー中心主義の名の下に、すべての(ほとんどの)古い/古いデザインのメタファーを失います。基本的に、新しいアプリを作成します。

この段階では、比較的成熟したペルソナ、詳細なシナリオ、およびコア機能セットがいくつかあります。ハイレベルな価値提案と、それに大まかに基づくいくつかの設計ガイドラインがあります。

また、「インターフェースのインスピレーション」、つまり機能とほぼ一致するか機能を必要とする既存のツールの例もあるので、可能な場合はホイールの再発明を避けています。

私の質問

現在の位置からワイヤーフレームステージに移動するための一般的に認識されている方法はありますか?

私たちは物事を紙に捨て始めて、反復フィードバックの内部システムを開発するだけですか?

私は今のところ、このようなプロジェクトをこれまで行ったことがないので、経験に基づくアドバイスをいただければ幸いです。

3
dennislees

私は通常、「すべてのビット」アプローチのすべてをしています。

基本的なナビゲーションを理解してください。そこにある機能をどのように利用できますか?.

データモデルで最初のステップを実行します。アプリケーションがサポートする必要があるワークフローの種類を大まかに指定します。出力する必要のあるデータの種類と、ユーザーが入力する必要のあるものの種類。これは、アプリケーション全体で使用できる設計パターンについて何かを教えてくれます。

最初のビジュアルモックアップを作成するための情報が得られるはずです。何かを視覚化するためのアーティスト入力を取得し、より具体的なものに向かってワイヤーフレームをキックスタートします。

構築するアプリケーションの種類によって多少異なりますが、ナビゲーションと最も重要な設計パターンを取得することで、良いスタートを切ることができます。

機能とワークフローが成熟するにつれて、これらすべてを繰り返します。シナリオとペルソナを使用して、プロジェクト全体で設計の考え方を通知および検証します。

2
Koen Lageveen

はい、ナビゲーションフロー、ヘッダー/フッター、アプリ全体で使用されるマスターコンポーネントから始めます。アプリ全体で使用される要素とウィジェットの標準化についてもある程度理解したいと思います。その時点から、他の詳細はあなたの研究に基づいて適切に配置されます。

0
ah123

答えは本当にプロジェクトに依存しますが、私の場合、ワイヤーフレームへの主な入力はタスクモデルであり、コンテンツインベントリ(一部はタスクモデルから派生しています)と組み合わされています。

An Example Diagram of a Task Model

タスクモデル(私は本当にゴールモデルと呼ぶのが好きです)は経験的でコンテキストに依存しません。つまり、評価ノードと、それらの間の接続として決定/アクションが表示されます。それらはまだどのシステムにもマッピングされていません-それは人々の脳で起こっていることです。

次に、実際の課題は、これらのタスクモデルをテンプレート(およびテンプレート内のクラスタリングパターン)にスライスすることです。テンプレートのスコープは、多数の入力に基づいて決定および評価されます。

  • コンテンツの規模、優先度、およびUB(ユーザー/ビジネス)ランキング
  • 分析
  • 競合他社のベンチマーク
  • 他のタスクモデルおよびテンプレートとの整合性
  • いくつかの一般的な設計ガイドライン(たとえば、求められた相互作用と強制された相互作用)
  • 等。

理想的には(複雑さに応じて)、比較する3〜5個の設計アイデアがあり、それらはさまざまな方法で評価されます。反復の回数(およびワイヤーフレームで粗いところから細かいところまで)は、システムの複雑さによって異なります(テンプレートが複雑になるほど、テンプレートの関連性が増し、一貫性が必要になります)。

これに続いてIAが来るでしょう。しかし、それは私にとって割くべき主要なナットです-タスクモデルからワイヤーフレームへの架け橋。

ペルソナはプロセス全体で使用されますが、直接ではなく間接的に使用されます。たとえば、ペルソナはコンテンツBに対するコンテンツAの優先順位付けを正当化できますが、ペルソナがワイヤフレームに直接ジャンプする方法を想像するのは困難です(ペルソナにタスクモデルがtに印刷された高解像度の写真が含まれている場合を除く) -シャツ)。

0
Izhaki