web-dev-qa-db-ja.com

棒グラフで棒をクリックできるようにすることは、どのくらいユーザーフレンドリーですか？

私は、各棒が探索されるより多くのコンテンツを持っている棒グラフを設計しています。赤いバーをクリックした後、それぞれの時間に遅れた全従業員（90、55、33、...）のリストを表示しようと考えています。

私の質問は「ユーザーフレンドリーですか？

このような場所を見たことがない。

enter image description here

usabilityinteraction-designchartstooltipsinteractive-ui
6
Jivan

これはHTMLの棒グラフに関するものであるため、スクリーンリーダーのユーザーがアクセスできる実装を提案します。

棒グラフ自体は、通常のimg要素によって埋め込まれた単一の画像です。

<img src="chart.png" alt="distribution of employees who came late to work, by minutes of delay" id="chart" />

（これはオプションで、キャプション付きのfigure要素でラップできます。）

画像の上に、「チャートの個々のバーをクリックして、対応する従業員のリストを表示する」などの指示を入れます。

次に、グラフの各棒に イメージマップ と " area "を追加し、棒グラフに接続します（属性usemap onを使用） img要素）：

<p>Click on the individual bars in the chart to see the corresponding list of employees.</p>
<img src="chart.png" 
  alt="distribution of employees who came late to work, by minutes of delay" 
  id="chart" usemap="barchartmap" />

<map name="barchartmap">
 <area alt="10 minutes late" shape="rect" coords="[fill in coordinates here]" 
   href="10minuteslate.html" />
 <area alt="11 minutes late" shape="rect" coords="[fill in coordinates here]" 
   href="11minuteslate.html" />
  <!--areas for other bars to be added here -->
</map>

alt要素のarea属性は、スクリーンリーダーのユーザーに現在のバーを通知し、リンクをたどるかどうかを決定できます。これは基本的にWCAG 2.0技術の例です イメージマップの領域要素に代替テキストを提供する 。

UX SEに関するやや関連する質問は グラフのドリルダウンアフォーダンス？ です。

人々はインタラクティブグラフ用のJavaScriptライブラリをかなり以前から探し求めており、いくつかのオプションが利用可能です： クリック可能な棒グラフ用のJavaScriptライブラリ？ 。ただし、上記の手法ではJavaScriptは必要ありません。

Wall Street Journalには、クリック可能な棒グラフが表示されます ギリシャがいつ借りているか ;個々のバーは別のページに移動するのではなく、（厳密に言えば）別のグラフに移動します（技術的には所定の場所にあるチャートを交換します）。チャートのバーをクリックすると、「すべての年を表示」という指示がチャートの上に表示されます。

1
Tsundoku

ホバリングに遅れたすべての従業員のリストを表示するカスタムツールチップを実際に作成します。また、分数を表示して検索を許可します。

また、ホバリングされていない他のすべてのプログレスバーの色を変更することもできます。

enter image description hereこれは私が提案している実際のデザインではありません。この画像は私のアイデアを示すためのものです。あなたはあなたのニーズと好みに応じてそれを設計する必要があります

さらにいくつかのアイデア：

また、リスト内の名前の1つをクリックすると、その日の遅くにすべての従業員を含む別のページが開き、次のようなものが表示されます。

従業員名、部門、彼/彼女が何分遅れたか、今週/月に何回遅れているか+その期間に彼/彼女が遅れた分の合計。

彼らが制裁を受けるか、残業する必要がある前に、週に合計50分だけ遅れることを承認した場合、その制限を超えているか、その制限に近づいている人のためのフラグも作成します。

1
Alin

ここには2つの異なる課題があると思います-

1。バーを直感的にクリック/ホバリングできるようにするにはどうすればよいですか？2。ホバー/クリックしたときに情報を表示する方法

＃1の場合、視覚的/言葉によるアフォーダンスを追加することができます（ボタンまたは言葉の記号「Know More」のように見せます。あるいは、ユーザーがページに到達したら、バーの1つをアニメーション化して、ホバー/クリックして詳細情報を取得できることをユーザーに説明します。

＃2の場合、バーの下に何があるかわかりません。そこに不動産がある場合は、バーのすぐ下のテーブルにデータを表示します。バーとデータテーブルを色で接続してみてください。この種の何か-

enter image description here

1
user108525ashi

一部のデバイスでは使用できない場合がありますが、この機能は非常に役立ち、 ドリルダウンシナリオ の究極の機能です。

0
Vladimir Georgiev

私の意見では、ツールチップに情報を追加することは問題ありませんが、よりユーザーフレンドリーにするためには、クリックではなくホバーに表示する必要があります。モバイルではユーザーがクリックしない可能性があるため、これらの要素に依存しないでください。

ツールチップは、拡張された情報を提供するものと考えてください。したがって、ユーザーが情報を表示できるのはツールチップだけではありません。

0
Madalina Taina

いいえ、ユーザーフレンドリーではありません。インタラクティブバーは、静止画像内のバーとどのように異なりますか？魔法の言葉：アフォーダンス。ユーザーがバーをクリックできるようにユーザーに手掛かりを与える必要があります

0
Federico Morandi