🍎HIGざっくりまとめ Patterns編 vol. 2 Charting data（データのチャート化）

チャートは、多くのテキストを読み解くことなく、複雑な情報を効率的に伝えることができる方法です。また、チャートはグラフィカルであるため、ユーザーエクスペリエンスの個性を表現したり、インターフェースに視覚的な面白さを加えたりすることも可能です。

Charting data - Patterns - Human Interface Guidelines - Design - Apple Developer

※チャートの作成に使用するコンポーネントについては、「チャート」を参照してください。

チャートは、一目でわかる情報を提供するシンプルなグラフィックから、アプリの目玉となるリッチでインタラクティブな体験まで、さまざまな角度からデータを探索するよう促すことができます。シンプルなものから複雑なものまで、チャートを使うことで、次のような、人々にとって重要なデータ駆動型のタスクを実行できるようになります。

• 過去または予測値に基づくトレンドの分析

• 時間と共に変化するプロセス、システム、量の現状を可視化する。

• 複数のカテゴリーにまたがるデータを比較することで、異なる項目、または異なる時期に同じ項目を評価すること。

すべてのデータがグラフで表示される必要はありません。単にデータを提供するだけで、そのデータに関する情報を伝えたり、データを分析したりする必要がない場合は、スクロール、検索、並べ替えができるリストやテーブルなど、他の方法でデータを提供することを検討してください。

---

ベストプラクティス

• データセットに関する重要な情報を強調したいときは、グラフを使用します。
  グラフは視覚的に目立つので、人々の注意を引き付けます。その利点を生かし、データから何がわかるかを明確に伝えましょう。

• グラフはシンプルにし、詳細が必要なときに選択できるようにする。
  グラフにできるだけ多くのデータを詰め込もうとする誘惑に負けないでください。データが多すぎると、視覚的に圧倒されて使いにくくなり、伝えたい関係やその他の情報が見えにくくなります。

表示するデータが多い場合、使用可能な機能が多い場合
データを徐々に表示する方法を検討してください。
例えば、表示するデータの詳細度やサブセットを、利用者の興味に合わせて選択できるようにする。
インタラクティブなグラフの使い方を覚えてもらうために、複数のバージョンのグラフを用意し、それぞれがより多くの機能を持つようにすることもできます。

• アプリ内のすべてのチャートにアクセスできるようにしましょう。
  グラフは、データのグラフ表示と視覚的な説明によって視覚的に伝達されます。表示する視覚的な説明に加えて、グラフの値や構成要素を説明するアクセシビリティ・ラベルや、グラフとの対話を支援するアクセシビリティ要素の両方を提供することが非常に重要です。

---

効果的なチャートのデザイン

• 一般的なグラフの種類を使用することをお勧めします。
  人々は棒グラフや折れ線グラフなどの一般的なグラフの種類に慣れています。グラフの読み方をすでに知っている可能性が高いです。

• 斬新な方法でデータを表示するグラフを作成する必要がある場合は、グラフの解釈方法を学べるようにしましょう。

• データを複数のレベルまたは視点から調査し、グラフを向上させるために表示できる詳細を見つけます。
  マクロレベル、中間、個別など、さまざまな視点からグラフを見ることができるような情報を表示することで、グラフへの関与を促すことができます。

• グラフに説明テキストを追加して、理解を助ける。
  説明文のタイトル、サブタイトル、注釈は、グラフの中で最も重要な情報を強調するのに役立ち、実行可能な要点を強調することができます。
  また、グラフの見出しや要約となる簡単な説明テキストを表示することで、重要な情報を一目で把握できるようにすることも可能です。
  説明的な見出しや要約はグラフをより利用しやすくしますが、アクセシビリティラベルの代わりになるわけではありません。

• チャートのサイズは、その機能性、焦点、詳細度に合わせてください。
  一般に、チャートは、必要な詳細を快適に表示できる大きさと、サポートしたいインタラクティブ性を実現するための広さが必要です。

大きいグラフ：グラフの詳細や説明文（ラベルや注釈など）を読みやすくするグラフの範囲を変更したり、データをさまざまな角度から調査したりするための十分なスペースを確保できる

小さいグラフ：個々の項目について一目でわかる情報を提供したり、別のビューで表示できる大きなバージョンのグラフのスナップショットやプレビューを提供したりすることもできます

• 複数のチャートに一貫性を持たせ、違いを強調する必要がある場合にのみ逸脱させる
  一貫性によって、関連性を示唆できるし、あるグラフについて学んだことを別のグラフの理解に役立てることができます。

• 同じデータに焦点を当てた複数のチャートの間で連続性を維持する
  複数のチャートを使用して、1つのデータセットをさまざまな角度から調査できるようにする場合、データセットが同じであることを示すために、1つのチャートタイプと一貫した色、注釈、レイアウト、および説明テキストを使用することが重要です。
  例えば、「ヒースのトレンド」画面では、歩数や安静時心拍数などの分野の最近の傾向を示す、特定の視覚的スタイルを使用した小さなチャートが表示されます。その分野のすべてのデータを表示するグラフを選択すると、拡張版でも同じスタイル、色、マーク、注釈が使用され、バージョン間の関係が強化されます。

---

感想

なんのために情報をグラフ化するのか
→人々にとって重要なデータ駆動型のタスクを実行できるようにするため。データを分析したりする必要がない場合は、リストの検索や絞り込みができればいいのかも

グラフ化する情報の参照範囲やビューの切り替えなどユーザーの興味に合わせて設計する必要がある。しかし、機能やデータを詰め込みすぎてはいけない。シンプルで分かりやすく学習コストにも配慮しよう。

グラフの大きさやデザインについても、こういう観点で考えようねってのが提示されててめちゃめちゃ分かりやすかったです。

そしてアクセシビリティ。グラフは難しそうだけどアクセシビリティ・ラベルや支援機能を使う必要がありそう。