web-dev-qa-db-ja.com

チャートのドリルダウンアフォーダンス?

チャートのドリルダウンの使いやすさを改善するための提案はありますか?

より具体的には、ユーザーが棒を選択してその子のみを表示するようにグラフを更新できる棒グラフ(またはその他の視覚化)があるとします(たとえば、カナダの棒をクリックして、グラフにカナダの州を表示します) )。

私はいくつかの研究を行い、次のリソースを思いつきました:

ドリルダウンアフォーダンス:

一般的で典型的なアプローチは、カーソルをアイテムの上に移動すると、カーソルが変更され、視覚的に変化することです。

ドリルインできるアイテムの上にカーソルを移動すると、リンクを使用する場合のように、それに応じてカーソルを変更できます。これを前景への視覚的な変更やその他の審美的な変更と組み合わせると、ユーザーはカーソルと視覚的な変更が追加のアクションが発生する領域を定義することをすぐに理解できると思います。 ( http://ux.stackexchange.com/a/14951

別の便利な記事: https://www.fusioncharts.com/charting-best-practices/drill-down-interface/

上記の記事の場合、単にチャートの上部に指示を置く(「列をクリックしてドリルダウンする」)という彼らの提案は少し安っぽいショートカットのようです-指示するテキストをどこにでも置くことはできませんアフォーダンスを伝えます!カーソルが「リンク選択」の手に変わり、チャートオブジェクトのハイライトが表示されるのは良いと思いますが、それでもユーザーがクリックしたときに何が起こるかはわかりません。ホバー時にツールチップを含めるのは素晴らしいことですが、私の場合、すでにツールチップを使用して追加のチャート情報を表示しているため、これはオプションではありません。

ドリルダウンターゲットの場合、ユーザーが非常に小さなパイスライスまたは小さなバーを簡単にドリルダウンできるように、チャートビジュアルオブジェクト(棒、円グラフスライスなど)とラベル(軸ラベルなど)の両方を含めます。 (ターゲットとしては小さすぎます)。

ドリルダウンナビゲーション:パンくずは、チャートタイトルの下の左上に表示されるドリルダウン階層をナビゲートするための最良のソリューションだと思います。

ブレッドクラムを使用して、階層「レベル」と実際の親階層メンバーの両方を表示することについてどう思いますか?たとえば、レベルブレッドクラムは次のようになります。

  • 大陸>国>州/県>都市>地域

一方、階層メンバーのパンくずリストは次のようになります。

  • 北米>カナダ> BC>バンクーバー>ガスタウン

ナビゲーションに関する限り、別の高度な開発努力ですが、優れたアプローチは、実際のドリルダウンアニメーションです。この場合、選択したメンバーを除くすべてのバーがフェードし、選択したメンバーが展開して子を表示します。

14
M.A.X

チャートを調査/ドリルダウンするための最良のアフォーダンスは、データをインタラクティブにすることです。ユーザーは、ラベル/凡例を使用して興味のある情報を見つけることに慣れており、フィールドに関する詳細を見つけるための自然な応答は、データをクリックすることです。ツールチップは実際の値を提供し、ユーザーが正しいバー/列/パイウェッジを選択したことを確認します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

6
Andrew Shipe

青い下線付きのラベル(ハイパーリンク)は、クリックしやすさを実現する最も簡単な方法の1つです。棒グラフの下のラベルをクリック可能にすると、カーソルがグラフに引き付けられます。あなたが説明したように、バー自体にいくつかのホバーアフォーダンスを持っていると、契約が成立します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

棒グラフを移行するアニメーション効果は素晴らしいと思いますが、確かにそれは高額な見込みのようです。

この提案の欠点は、テキストが色で固定されることです。色付きのテキストでカテゴリを示すオプションはなくなりました。多色リンクはリンクのように見えなくなりました...それらは下線付きのテキストのように見えます。さらに、Webは普及していますが、アプリケーションインターフェイスではリンクが不自然に見える場合があります。彼らはまだクリック可能性を示すのが得意ですが、しばしば場違いに見えます。

2
Myrddin Emrys

非常に良い質問です。そして、チャートの一番上に指示を置くことは安く見えるかもしれないことに同意しなければなりません。しかし、それはまともなトレードオフである可能性があり、ここに理由があります。

デスクトップブラウザ/アプリケーションのみを扱う場合、物事は簡単で簡単です。ポップアップ、コールアウト、ホバーイベントに応じたカーソルの変更は奇跡を起こすことがあります。シングルクリック、ダブルクリック、クリック&ホールドでさらにパワーアップ。しかし問題は、おそらくモバイルデバイスでソリューションを機能させたい、そしてプラットフォーム間でUXを統一したいということです。そして、モバイルプラットフォーム上にホバーはありません。また、一部のプラットフォームでは、ダブルクリックが他の何か(ズームなど)のために予約されている場合があります。

私たちはさまざまなアプローチで多くの実験を行い、最終的に次のものを使用しました。

  • デスクトップにイベントをホバーし、タブレットにイベントをタップして、視覚要素に関する追加情報を含むコールアウトを表示します
  • すべてのプラットフォームでクリックアンドホールドイベントを実行して、ドリルダウンを開始します。

モバイルデバイスには別の方法があります。タップイベントで、[ドリルダウン]ボタンが付いたポップアップ/コールアウトを表示します。しかし、このアプローチ:

  • タップアンドホールドに比べてユーザーに余分な労力を要します。
  • プラットフォーム間に不整合が生じます。
  • 安く見えます。

したがって、それはまだ未解決の問題です。ドリルダウン階層のブレッドクラムについては、素晴らしいようですが、貴重なチャートの不動産に注意してください。

0
Sergey Sorokin