ツール型ウェブサイトのエクスペリエンスデザイン——広告プラットフォームから始める

抄録： はじめに：私は2010年に入社して以来、2年半にわたり広告プラットフォーム部門のプロダクトデザインを担当してきました。馴染みのないものから馴染みのものへ、知らず知らずのうちに想いを注いでいる商品たち… ツール型Webサイトの特徴分析 ツール型Webサイトは常に変化しながらも、機能とデータという2つのキーワードを中心に独自のストーリーを展開しています。それで、「...」に関しては、

はじめに：私は2010年に入社して以来、2年半にわたり広告プラットフォーム部門のプロダクトデザインを担当してきました。未知から既知へ、いつの間にかこれらの商品に想いを注いでいたんですね…

ツールベースのウェブサイトの特性の分析

ツールベースの Web サイトは常に変化していますが、常に「機能」と「データ」という 2 つのキーワードを中心に独自のストーリーを展開しています。つまり、「体験」に関しては、設計目標はより明確で具体的です。

1. 機能プロセスのスムーズな完了を保証しながら、ユーザーの快適性を高めます。

2. 大量のデータに直面した場合でも、画面を埋め尽くす文字に煩わされることなく、ユーザーが必要なものを簡単に見つけられるようにします。

ツール型製品は、一般的に複雑で多様なビジネス ロジック、大量のデータを持ち、さまざまな役割のシナリオ分類を伴うことがよくあります... 古いことわざを言い換えると、「水は深い」ということです。 設計目標は私の心の中の灯台となり、足元の隠れた岩礁に注意するよう私に思い出させてくれます。

機能的なデザインについての私の意見

レベル1準備

機能設計に取り組むとき、私は「まず理解してから始める」という格言に従います。個々の機能の変更はプロセス全体の方向付けに関係するため、元のベースでの操作の転換が増加することが多く、プラットフォームに機能を追加すると、他の機能モジュールと相互作用したり、影響を与えたりします。設計者は機能設計を十分に理解していない状態で設計に突入します。その結果、設計の途中で問題が露呈し、設計をやり直さなければならなくなります。さらに悲劇なのは、一見効率的に設計案が完成したように見えても、後になって全面的なやり直しという悲劇に直面することです。

この段階で「マインドマップ」の役割が重要になります。マインドマップを作成するには、どのようなツールを使用すればよいでしょうか。Mindmanager、Xmind、FreeMind などの専門的なソフトウェアでも、最も原始的なペンと紙でも、「関係」と「影響」を完全に明確に表現できれば、ミッションは達成されます。

「広告マネージャー」は、PCユーザーが広告スペースの設定、広告の作成、効果確認ができるという従来のサポートをベースに、先月、モバイルプラットフォームビジネスをサポートする機能を追加しました。モバイル プラットフォーム ビジネス機能の追加は、「広告マネージャー」全体の多くのモジュールに影響を与えました。下の写真は、製品マネージャーとの要件会議中に作成された関連モジュールのスケッチです。このスケッチは、設計の初期段階で比較的正確に新バージョンの設計方向と作業量を予測できるだけでなく、設計プロセス中に設計の焦点と機能設計の整合性を確保できるため、その役割を過小評価することはできません。

「マインドマップ」は、マクロコントロールの全体的な意義だけでなく、設計作業の詳細を導く実用的な価値も持っています。

「広告マネージャー - モバイルプラットフォーム版」を例にとると、モバイル業務の追加は必然的に元の主要機能の転用につながります。広告のビジネスロジックに基づいて、異なるプラットフォーム上の広告は、表示形式から入力可能な文字数まですべてにおいて異なる変化を示します。気分転換中に落ち着いてさまざまな状況を「マインドマップ」で整理し、落ち着いてデザインツールを開いて作業を開始する。これは、すべてを知っていると思ってやりたいことをやるよりも、間違いなく科学的で効率的ですよね？

プラットフォームの機能の表現

機能モジュールは、フォームとそれに対応するコントロール、ボタン、情報フィードバック、プロンプトの形式で Web サイトに実装されています。それらの関係は、次の図に示されています。

このように、エクスペリエンスデザインにも出発点と基盤があります。以下は、Guangping システムで使用されている設計例です。

AdWIN の設計では、ユーザーはログイン後、直接「個人ホームページ」に入ります。ここに、このプラットフォームの最も基本的な部分、つまりすべてのユーザー アクティビティの出発点でもある広告の作成を配置する必要があります。したがって、このページのこの入り口を強調するのは、新しいユーザーにこのプラットフォームの最大の機能を伝え、その操作をガイドし、古いユーザーがログイン後にすぐに作業を開始できるようにするためです。

広告システムの設計上の特殊性は、ページの操作プロセスが広告業界の既存の標準に大きく準拠する必要があるという事実にも反映されています。これにより、ユーザーはプロセスを理解しやすくなり、ターゲットタスクをより効率的に完了できるようになります。そのため、設計プロセスでは、「広告のために生まれた」フォームやコントロールが数多く作成されます。実際のビジネスによっては、いくつかの重要なビジネス プロセスについて、設計者が従来の制御の制約から脱却し、ビジネスに対する理解に基づいて製品の設計ソリューションをカスタマイズすることが絶対に必要です。たとえば、スケジュールやリソースに特化した特別なカスタマイズや、動画広告の関連付け設定などです。

ビジネス性の強い機能の場合、ユーザーが入力しなければならないフォーム項目の数は、1画面に収まる数をはるかに超えることになります。そのため、ユーザーフォームの入力を適切かつ配慮したものにすることも、ツール型Webサイトの細かい設計ポイントとなります。

MobWIN の設計では、広告プロモーション スローガンの文字数に関して非常に厳しいビジネス要件に遭遇しました。「プロモーション スローガン 1」の文字数は 10 文字を超えてはならず、9 文字以上でなければなりません。「プロモーション スローガン 2」の文字数は 12 文字を超えてはならず、11 文字以上でなければなりません。これは、WAP1.0 および WAP2.0 またはタッチ スクリーンの広告スペースに表示できる単語数によって決まります。テキストで直接ユーザーに「9文字または10文字しか入力できません」と伝えると、まず、テキスト情報はユーザーに無視される可能性が高くなります。次に、すぐに判断が下されないと、ユーザーは長いフォームの入力を完了した後、[送信] をクリックしてもイライラしてしまいます。これは間違いなく非常にストレスになります。したがって、このテキスト入力ボックスには次のようなデザイン スキームが採用されています。

機能的付加価値デザイン

機能モジュールは、それ自体の価値を満たしながら、さらなる価値を生み出すことができるでしょうか。これは、製品マネージャーがこの機能を計画する際に考えるべき質問であると思われます。機能性に付加価値をつけるためにデザイナーは何ができるでしょうか？ページ構造を設計し、プロセスを微調整することで、より高い付加価値効果を得ることができます。

広告マネージャーによる新しいモバイル プラットフォーム機能の設計を例に挙げてみましょう。ユーザーが広告を作成する上で、新しい広告枠を作成するプロセスは必須です。基本フォームに配置する必要があった「プラットフォーム選択」ラジオボタンを調整し、この属性を抽出し、情報伝達の焦点としてデザイン要素を追加しました。おそらく、この形式によって「Ad Manager がモバイル プラットフォームをサポートするようになりました」というメッセージが人々の心にさらに深く根付くようになり、その価値は機能そのものを超えるものとなるでしょう。

データ処理

実用的なツールのウェブサイトでは、ユーザーは「業界関係者」として分類されます。彼らの多くは、仕事やビジネスに役立つ専門的なデータを入手したいと考えています。広告プラットフォームのこれらのプロジェクトでは、次の情報処理方法を使用します。

役割別にデータを表示する

最も外側の層から始めて、さまざまな役割の人々が必要とするデータを一致させ、データノイズ除去の最初のステップを実行します。もちろん、このアプローチは、役割と要求が十分に明確な場合にのみ使用できます。

データの検索とフィルタリング

役割別に並べ替えることができない場合や、役割別にノイズを除去した後でも大量のデータが残る場合は、データの検索とフィルタリングがエクスペリエンス デザインの最優先事項になります。検索項目はユーザーの実際の操作ロジックに適合しているか？検索に使用するコントロールは合理的かつ便利か？検索条件はいつ交差し、いつ結合するか、そしてそれをユーザーにどう明確に伝えるべきか？高度な検索にどの項目を含めることができるか？...設計が深まるにつれて、これらの疑問が生まれ、デザイナーが慎重に検討する価値があります。

ビジネスに必要な検索項目が多すぎて、すべてのオプションを一覧表示すると検索モジュールが大きくなりすぎる場合は、Google Adwords に似たクリックしてアクティブ化するフローティング レイヤーを使用して単一項目の設定を実行し、ユーザーが操作中に集中できるようにします。複雑な検索条件がユーザーによる結果リストの読み取りを妨げないように、検索条件モジュールを非表示にします。ビジネス特性に基づいてクエリ条件を保存するなど、ユーザーにパーソナライズされたサービスを提供することもできます。

データ自体の表示形式

ここでは、驚くべき視覚効果をもたらす情報視覚化について話しているわけではありません。従来のデータ表示形式は、リスト、円グラフ、棒グラフ、トレンド チャートなど、およびそれらの組み合わせにすぎません。デザイナーは、これを使用する場合、ページ内のさまざまなデータに対応する表示形式を理解するだけでなく、それらを有機的に組み合わせて配置し、優れた読み取りエクスペリエンスを実現する必要があります。必要に応じて、従来の表示形式に対していくつかのデザイン処理を実行することもできます。

ユーザー定義

前述の通り、ツール型ウェブサイトのユーザーは一般的にプロフェッショナルユーザーと定義されており、データ取得に対する要求も厳しいです。重要なデータの表示には、より高度な制御機能が登場し、ユーザーのデータへの自由なアクセスを実現します。

結論：「もっと柔軟に、もっと使いやすくできる。」この2年間のデザイン案を振り返って、私はよくこう思います。ツール型 Web サイトのエクスペリエンス デザインには、さらに調査と研究する価値のある領域が数多くあります。ビジネス ロジックとニーズの違いによって、より多様なデザイン ソリューションが生まれます。

（この記事はTencent CDC Blogからの引用です。転載の際は出典を明記してください）

原題: ツールベースのウェブサイトのエクスペリエンスデザイン - 広告プラットフォームから始める

キーワード: ツールの種類、ウェブサイト、経験、広告、プラットフォーム、概要、碑文、2010、ウェブマスター、ウェブサイトのプロモーション、収益化