分析ダッシュボードは複雑な情報を素早く提示する必要があります。これらのパターンは、迅速な理解と意思決定のために最適化しながら、製品全体の一貫性を確保します。
メトリクスカード
KPIカードはユーザーがトップレベルのメトリクスを消費する主な方法です。
- プライマリ数値： 大きく太い書体（32〜48px）が目を重要な値にすぐに引き付けます。
- 比較指標： 前の期間からのパーセンテージ変化を示す緑の上矢印または赤の下矢印。
- スパークライン（オプション）： 7日間のトレンドを示す小さなインラインチャートが、圧倒することなくコンテキストを提供します。
- ラベルの明確さ： メトリクス名は短く（最大2〜3語）、詳細説明のためのインフォアイコン付き。
時間範囲セレクター
すべてのダッシュボードビューにわたる一貫した時間コントロール。
- プリセットオプション： 今日、昨日、過去7日、過去30日、過去90日、過去12ヶ月。
- カスタム範囲： 精密な選択のための視覚的カレンダー付きの日付ピッカー。
- 比較トグル： ワンクリックでチャートに前期間のデータをオーバーレイする機能を有効にします。
- URLの永続化： 選択した範囲はURLパラメーターに保存され、ダッシュボード状態を共有できます。
フィルターパターン
フィルターは現在のビューを離れずにデータを絞り込みます。
- フィルターバー： 一般的なディメンション（国、デバイス、ソース）用のドロップダウンフィルターの水平行。
- アクティブフィルターピル： 選択したフィルターは現在の状態を示す削除可能なピルとして表示されます。
- セグメントビルダー： AND/ORロジックを使った複雑な条件のための高度モード。
- 保存済みセグメント： ユーザーはフィルターの組み合わせを保存・命名して素早く再使用できます。
リアルタイム指標
ライブデータには明確なビジュアルシグナルが必要です。
- パルスドット： 緑のアニメーション点がリアルタイムデータストリームへのライブ接続を示します。
- 最終更新： "3秒前に更新"と自動更新を示すタイムスタンプ。
- 新データのハイライト： 変更されたばかりの行やメトリクスを一時的にハイライト（微妙な黄色のフラッシュ）。
- 接続状態： リアルタイム接続が切断した場合と再接続試行のトースト通知。
空の状態
データがまだない場合にユーザーが見るもの。
- 役立つイラスト： コンテキストに合ったフレンドリーなグラフィック（データポイントのないチャート、空のリスト）。
- 明確な説明： データがない理由—"この時間範囲に訪問者なし"対"トラッキングがまだインストールされていません。"
- アクションプロンプト： 空の状態を解決するためのボタンまたはリンク（スクリプトのインストール、日付範囲の変更）。
- サンプルデータオプション： 新規ユーザーには、インターフェースを理解するためのデモデータ表示を提案します。
ローディング状態
知覚されるパフォーマンスは実際の速度と同様に重要です。
- スケルトンスクリーン： 予想されるレイアウトに合った灰色のプレースホルダー形状が、知覚されるロード時間を削減します。
- プログレッシブローディング： キャッシュされたデータをすぐに表示し、利用可能になったときに新鮮なデータで更新します。
- ずらしたアニメーション： スケルトン要素が活動を示すために順番にアニメーションします。
- タイムアウト処理： 10秒後、無限ローディングの代わりにリトライオプションを表示します。
テーブルパターン
詳細な探索のためのデータテーブル。
- ソート可能なカラム： ヘッダーをクリックしてソートし、明確な昇順/降順の指標を表示します。
- スティッキーヘッダー： 長いテーブルをスクロールしながらカラムヘッダーが見えたままになります。
- ホバーアクション： 行のアクション（表示、編集、削除）がホバー時に表示され、デフォルトでは非表示です。
- ページネーション対無限： データ探索にはページネーション、リアルタイムフィードには無限スクロールを使用します。
ドリルダウンナビゲーション
概要から詳細への移動。
- クリックしてフィルター： チャートセグメントをクリックすると、そのディメンションでダッシュボード全体がフィルタリングされます。
- パンくずリスト： 上位レベルに戻るリンク付きの現在のドリルダウンパスを表示します。
- サイドパネルの詳細： 行をクリックするとコンテキストを失わずに完全な詳細を持つスライドアウトパネルが開きます。
- バックナビゲーション： ブラウザの戻るボタンがドリルダウン状態を通じて正しく機能します。