インターフェースデザインコンセプト
Tally 創業者向けダッシュボード
クリックして操作できるダッシュボードのプロトタイプ。落ち着いた状態表示、実データのテーブル、そしてテストのために設計したフロー。
制作の舞台裏
朝いちばんの画面。
4つのKPI、タブ付きのテーブル、そして傾向を声高にではなく静かに示すスパークライン。
概要
Tallyは、創業者向けダッシュボードのコンセプトです。朝いちばんのコーヒーとともに開き、ビジネスが健全かどうかを知るための、たったひとつの画面。グラフを敷き詰めた壁ではなく、落ち着いて読めるものを。
ブリーフ
- 課題
- 初期のダッシュボードは、創業者が知りたいことではなく、クエリしやすいことに答えてしまう。
- 制約
- コードを書く前に、ユーザーとテストできること。
- 解決策
- 朝の4つの問いから組み立て、すべての状態をデザインした、クリックできるプロトタイプ。
アーリーステージのダッシュボードの多くは、エンジニアがクエリしやすいものを軸につくられています。Tallyはその逆です。創業者が朝8時に実際に抱く問いから組み立てました。成長しているか、離れていった人はいないか、昨日何が変わったか、今日自分が対応すべきことは何か。
上部には4枚のKPIカード。それぞれにスパークラインと実際の増減を表示します。その下には、ページを再読み込みせずに切り替わるタブ（今日／週／月）。さらにその下にはテーブル。直近10件のイベントを並べ替えられ、表示するものがないときは落ち着いた空の状態を表示します。
プロトタイプは、最初から最後までクリックして操作できます。フィルターは機能し、タブで内容が切り替わり、空の状態も省かずにデザインしています。読み込み中のスケルトンは最終レイアウトと一致しているので、表示が確定するときにガタつきません。
このコンセプトについて
架空のクライアントのためのコンセプト作品です。私たちがクライアント案件で実践するプロセスと品質基準をご紹介しています。
アプローチ
落ち着いて、リアルで、テストできる。
グラフではなく、問いから
どの画面も、創業者が声に出して問いかけたことに答えます。答えないものは、画面に置きません。
まず空の状態から
理想的な流れより先に、空、読み込み中、エラーの状態をデザインしました。何も起きない日こそ、日々の大半です。
美しさより、クリックできること
プロトタイプでは、3つの実際のフローを最初から最後までたどれます。関係者は画面を眺めて推測するのではなく、実際にクリックします。
含まれるもの
ユーザーテストの準備は万全。
数値はコンセプトのブリーフに基づくものです。
画面
18枚のハイファイ画面
ホーム、詳細画面、設定、そして3つの主要フロー。開発への引き渡しに耐える精度でデザインしました。
フロー
3つの試せるフロー
新規登録、解約の調査、週次ダイジェスト。どれもプロトタイプ内の実際の導線です。
状態
空、読み込み中、エラー
すべての画面の、すべての状態。スケルトンは最終レイアウトと一致しているので、データが届いても何もずれません。
引き渡し
トークンと仕様
デザイントークン、コンポーネントのバリエーション、画面ごとの寸法指示。エンジニアリングにすぐ渡せます。
ツール
- Figma
- バリアブル
- オートレイアウト
- プロトタイプ
- Tokens Studio
実際に試す
画像ではなく、動く制作物。
デモを開いて、ゲストやクライアントになったつもりで使ってみてください。すべてのタップ、すべてのタブが動作します。