ウェブサイトのユーザー エクスペリエンス分析: データ可視化の 6 つのステップ

[編集者注] この記事は @Baidu Business UED からのものです。現在のインターネットでは、さまざまなデータ視覚化チャートが次々と登場しています。この記事では、データ視覚化の手法をまとめ、6 段階の方法に整理します。

一般的なデータ チャートは、記述される対象とその対象の値という 2 つの基本要素に分けられます。これらはそれぞれ、指標と指標値として定義されます。例えば、性別の分布では男性が 30%、女性が 70% を占めるので、指標は男性と女性となり、対応する指標値は 30% と 70% となります。

1. 指標値のグラフ化

インジケーター値は、データのサイズをグラフ形式で表すデータです。たとえば、棒グラフの長さや高さを使用してデータのサイズを表すことも、最も一般的に使用される視覚化形式です。

従来の棒グラフや円グラフは、見た目が悪くなる可能性があります。グラフィックの視覚的なスタイルに革新を加えることができます。一般的な方法は、グラフィックを指標の意味と関連付けることです。

たとえば、Google Zeitgeist が検索語のトップ 10 を表示する場合、「検索」の形の列が表示されます。グラフィックはインジケーターの意味と一致しており、3 次元の視覚的な変化も行われます。

2. 指標のグラフ化

一般的には、インジケーターと同様の意味を持つアイコンが使用され、使用シナリオは以下のように多数あります。

3. 指標の関係をグラフ化する

複数の指標がある場合、指標間の関係性を探り、それをグラフィカルに表現することで、チャートの視覚化の深さを高めることができます。一般的な方法は 2 つあります。

既存のシーンを使用して表示する

自然や社会の中に指標の関係に似た場面があるかを考え、その場面を使って表現してみましょう。

たとえば、百度交通研究所のオペレーティングシステムの分布は、まず Windows、Mac、その他のオペレーティングシステムに分かれており、Windows には XP や 2003 などの複数のサブシステムが含まれています。

この関係に基づいて、宇宙と銀河にも同様の関係があることがわかりました。宇宙には多くの銀河があります。私たちが最もよく知っているのは、さまざまな惑星を含む太陽系です。そのため、宇宙と銀河全体のシーンを使用して、よく知られているWindowsを太陽系に、XP、Windows 7などを太陽系の惑星に、Macなどのシステムを他の銀河に比較すると、次のようになります。

見せるための建物のシーン

指標には、単純なものから複雑なもの、低レベルから高レベル、前から後ろなど、何らかの相関特性が備わっていることがよくあります。既存の対応するシーンが見つからない場合は、シーンを作成することもできます。

例えば、百度交通研究所の教育レベル分布は、小学校、中学校、高校、大学などに分かれており、それらの関係は低レベルから高レベルへの上昇と下降です。そして、この関係は、次のようにステップを構築することで表現できます。

Alipay が発行した新しい個人向け年間請求書には、最も多く支払われた 3 つの項目を説明する表彰台が設けられました。

まとめ：

前の 3 つの手順に従って、指標、指標値、指標関係をそれぞれグラフィカルに処理できます。

最も単純な性別分布を例にとると、次のような線形視覚化プロセスが得られます。

上図は参考のための線形化プロセスであり、実際の視覚化の考え方では、グラフ化する要素の種類やグラフ化前後の順序が異なる場合があり、具体的な状況に応じて対処する必要があります。

4. 時間と空間を視覚化する

時間

指標値の変化を時間という次元で表示するには、通常、時間軸を追加して、トレンド チャートを作成するのが一般的です。

空間

チャートに地理情報が含まれており、強調表示する必要がある場合は、地図を使用して空間を視覚化できます。地図は、すべての情報ポイントを表示するためのメインの背景として機能します。

2010 年と 2012 年の年間ホット レビューでは、Google Zeitgeist は地図を主な媒体として使用し (時間と組み合わせて使用​​)、ホットなイベントを紹介しました。

5. データを概念に変換する

まず、生活における概念の転換について見てみましょう。水を飲む必要があるとき、私たちは通常、「コップ一杯の水をください」と言います。「30mlの水をください」と言う代わりに。ここで、30mlは実際のデータですが、認識しにくいため、1カップの概念を使用して変換します。

同様に、データの視覚化では、ユーザーのデータに対する認識を深めるために、データの概念変換を実行することが必要になる場合があります。一般的な方法には、比較と比喩が含まれます。

対比：

次の図は、中国の喫煙者数を紹介するグラフです。左半分の中国の喫煙者数32,000,000人だけを見ると、データが大きいことがわかりますが、どのくらい大きいのかはわかりにくいです。右半分を見ると、中国の喫煙者数は米国の総人口を超えています。この比較により、データに対する認識が深まります。

比喩

次の図は、Yahoo Mail で処理されるデータ量を紹介するグラフです。大まかに言うと、1 時間あたりに処理されるメールのサイズは 1.2 TB で、これは印刷された紙に換算すると 644,245,094 枚に相当します。

これもまた大きな数字ですが、正確にはどのくらい大きいのでしょうか。比喩的に言うと、644,245,094 枚の紙を端から端までつなげると、地球を 4 周以上できます。この時点で、Yahoo メールによって処理される膨大な量のデータに深く感謝することができます。これにより、地球のために大量の紙が節約されます。

さらに、この比喩はグラフィックで表現されています。

6. チャートを「動的」にする

データをグラフ化した後、実際の状況に基づいて動的で制御可能なチャートに変換できます。ユーザーは操作プロセス中にデータの変化プロセスをよりよく認識し、エクスペリエンスを向上させることができます。

通常、ダイナミクスを実現するには、インタラクションとアニメーションの 2 つの方法があります。

交流

インタラクションには、マウスのフローティング、クリック、複数のグラフが表示されている場合のリンク応答などがあります。以下は、左のグラフと右のグラフのリンク形式を採用した、百度統計交通研究所の時間分布グラフです。左のグラフでは、マウスをフローティングすると対応するデータが表示され、クリックすると選択が切り替わります。

アニメーション

エントリアニメーション、インタラクションプロセスのアニメーション、再生アニメーションなどの追加を含みます。

エントリアニメーション: ページが読み込まれた後、「データの読み込み中」などのプロンプトテキストを置き換えて、チャートに「成長」プロセスを追加します。

インタラクティブアニメーション: ユーザーが操作すると、アニメーションの形式でタイムリーなフィードバックが提供されます。

アニメーションの再生: 一般的に、ビデオを見るのと同じように再生機能が提供され、ユーザーは時間の経過に伴うデータの変化のプロセスを完全に確認できます。次の図は、Gapminder が多次元データを記述する際にタイムラプス再生機能を提供し、あらゆるデータの変化を直感的に感じることができることを示しています。

要約する

データの視覚化にはさまざまな形式があり、思考プロセスも異なります。上記の6ステップの方法は、「データ」レベル（情報の視覚化とは異なる）を基本とし、思考プロセスを整理し、設計手法をまとめ、その後の視覚化のための参考アイデアを提供します。

著者のブログ: Baidu ビジネス ユーザー エクスペリエンス部門

元のタイトル: ウェブサイトのユーザー エクスペリエンス分析: データ視覚化の 6 つのステップ

キーワード: ウェブサイト、ユーザー、エクスペリエンス スコア、ビジュアル、6 ステップ メソッド、エディター、この記事、Baidu、ビジネス、ウェブマスター、ウェブサイトのプロモーション、収益化