ウェブサイトのユーザーエクスペリエンス：全体から細部までインタラクティブなデザイン計画

2012 年の初め、私は同社の「Deep Match」製品の包括的なユーザー エクスペリエンス プランニングを担当し、製品の全体的な設計にユーザーの視点に基づいた基盤を提供しました。その過程で、PD のクラスメートやビジネス チームから良いフィードバックをいくつか受け取りました。ここでは、デザインの導出プロセスを皆さんと共有したいと思います。

新人デザイナーがインタラクションデザインを行う際、特定のインターフェース層のデザイン思考にすぐに飛びつきがちですが、全体のプロセスにおける早期演繹プロセスは見落とされがちです。この場合、早期演繹の部分に重点が置かれることになります。

抽出方法に基づいて

まず、デザインプロセスで洗練させたデザイン思考の完全なフローチャートを掲載します。ケースにおけるデザイン計画プロセス全体も、この図のステージプロセスに基づいています。この記事の範囲は、主にコンセプトから定義ページまでの部分に焦点を当てています。

上図から、私たちの変革プロセス全体が製品コンセプトから要素までの全プロセスに関係していることがわかります。各段階の焦点と目的は異なり、各段階の変革ノードは客観的かつ実際の実線接続に基づいており、需要の変革が最初から最後まで歪まないことを保証します。

この観点から見ると、設計プロセス全体は継続的なズームインのプロセスであり、ユーザーの基本的なニーズに基づいて常に具体化されます。デザインが目標を満たしているかどうかを確認するときは、常にズームアウトして、より全体的な視点から見下ろす必要もあります。

次に、設計プロセスを見てみましょう。

グローバル

さて、まずは対外貿易におけるユーザーの主な行動を見てみましょう。ユーザーニーズの基本的な概念は何でしょうか?

下の図からわかるように、まず買い手と売り手が注文の意思を表明し、買い手が商品を受け取り、売り手が代金を受け取ることで、貿易プロセス全体が完了します。当社のウェブサイト サービスもこのモデルに基づいています。

ズームインしてみましょう。

「ディープマッチング」とは何でしょうか？その目標は、買い手と売り手が注文の意図を達成できるようにすること、つまり単純に言えば、マッチメイキングサービスであると定義しています。これは、買い手と売り手の対外貿易活動の中で最も重要な部分です。

ユーザーの目標と製品の目標が明確になったら、何をすべきでしょうか?

ズームインを続けましょう。

対外貿易の専門家が提供したいくつかの証拠に基づいて、対外貿易プロセスにおけるユーザー行動に基づいて、対応する製品のユーザー行動概念モデルを確立しました。これにより、プロセス全体におけるユーザーの主なパスとタスク目標が非常に明確になり、その後のインタラクティブデザインの開発に基本的なフレームワークができました。

拡大を続けます。

上図の純粋なユーザー行動の観点に対応して、これをさらに洗練させて製品のユーザー行動フローチャートに変換し、抽象的な情報を構造化することができます。例えば、上の図では、引用は購入者の情報の流れを表す矢印にすぎませんが、実際のウェブサイトの行動では、購入者が引用を積極的に確認する必要があります。したがって、アクションは、標準的な Web サイト アクション用語「表示」に構造化されます。全体像を見ると、目標、行動、生成された情報、さまざまなユーザー間の接続とフローを観察できます。

上の図では、製品内のユーザー行動ロジックが明確に説明されていますが、設計要件としてはまだ十分に具体的ではありません。

引き続きズームインを続けなければなりません。

次の図に示すように、この構造化情報をユーザー シナリオに基づいてページ アーキテクチャの関係に変換します。注: 何らかの理由により、画像内の一部の名前は隠されています。

上の図では、前の図と比較すると、以前に構造化された動作と情報は、運ぶために別のページに変換されていますが、論理的な関係自体は変更されておらず、以前とまったく同じです。 (管理部分は、ユーザーの管理ニーズのためにのみ追加されます) 異なるユーザーには完全に異なるシナリオと操作ページがあり、同時にそれらの間の情報が相互に関連しており、プロセス全体が最終的にターゲットのクローズドループに到達できることが観察されます。

PS: この図から、ユーザーのページ環境はさまざまな役割に分割され、個別に開発される必要があることがわかります。

拡大を続ける…

次に、すべてのページを次のように要約する必要があります。注: 何らかの理由により、特定のページ名は非表示になっています。

矢印の接続を削除した後、これらのページを個別に見ていきます。非常に規則的で構造化されていることがわかりますか? 整理した後、ページの要件は非常に明確です (作業負荷を見積もることができます... 笑)。次のようになります。

家

形状

操作のヒント

詳細ページ

受信トレイ

リスト

ページを編集

これをベースに、各ページ自体の形式に合わせて統一されたフレームワークをカスタマイズし、ページが持つ情報や機能に基づいてレイアウトすれば、インタラクティブなデザイン全体が基本的にOKになります。もちろん、特定のページではより詳細なデザインがあり、それは私たちのデザインコンポーネントとデザインルールに基づいて完成させることができるので、ここでは詳細には触れません。

要約する

これまでのプロセスを振り返ると、インタラクション デザインは、ニーズの起源に基づいて継続的にズームインする派生プロセスであることがわかります。このプロセスでは、各改良プロセスは前のステップの明確な目標に基づいており、各ステップは次のステップにリンクされています。このアプローチにより、設計の各ステップが体系的にサポートされ、主な目標から逸脱することがなくなります。設計作業が完了したら、ズームアウトを通じて逆検証を行い、最終設計が当初の設計目標を満たしているかどうかを確認します。 (ズームアウトの方法を知りたい場合は、この記事を逆の順序で読んでください…)

上記は、個人の設計思想や手法に基づく粗から細への導出プロセスの一例です。新製品の設計、旧製品の最適化、設計評価などに応用できます。皆様のお役に立てれば幸いです。

私との議論を歓迎します:

メールアドレス: [email protected]

Sina Weibo: http://weibo.com/tianruihang フォローを歓迎します

原題: ウェブサイトのユーザーエクスペリエンス: 全体から細部までインタラクティブなデザイン計画

キーワード: ウェブサイト、ユーザー、エクスペリエンス、全体、詳細、インタラクション、計画、2012 年初頭、ウェブマスター、ウェブサイトのプロモーション、収益化