同じ注文データを4つの表示形式で作り比べた

はじめに

これまで「同じ画面を8つのUIデザインで作り比べた」では見た目のコンセプトを、「同じアプリを4つのナビゲーション構造で作り比べた」では画面の骨格を比較しました。今回は同じ流れで、データそのものをどう並べて見せるかを比較します。

同じ注文一覧データを、表示形式だけ変えてAIに4パターン作ってもらいました。データの内容は同じで、並べ方だけが違います。

データ仕様

注文ID・顧客名・金額・ステータス（未対応／対応中／完了）・受付日を持つ5件の注文データです。バニラJS・外部ライブラリなしで実装しています。

カンバン型だけはカードをドラッグして列を移動できるようにしています。実際に動かしてみると、表示形式が変わると操作のしやすさまで変わることがわかります。

1. テーブル型

項目数が同じデータを大量に並べて見比べるなら、今でもテーブル型が一番見やすいです。ソートや絞り込みとも組み合わせやすく、業務システムの一覧画面の定番です。実装例はテーブルUIの実装例にまとめています。

2. カード型

今回のような数値中心のデータだとテーブル型と大差ない情報量しか入りませんが、商品一覧やユーザー一覧のように画像やアイコンを含むデータでは効果が出ます。スマホ幅でも列を1列に落とすだけで対応できるのも利点です。実装例はカードリストの実装例を参考にしてください。

3. タイムライン型

注文一覧のように「いつ起きたか」が意味を持つデータでは、テーブル型より直感的に新旧の流れが伝わります。一方で金額の比較のような横並び比較には向いていません。実装例はタイムラインUIの実装例にあります。

4. カンバン型

注文のステータス管理のように「データが状態を持ち、状態が変わっていく」性質のものは、テーブル型より一覧性と操作性を両立できます。ドラッグで移動できる体験はカンバン型ならではで、今回の4つの中で最も操作のおもしろさが出ました。ただし件数が増えると列が縦に伸びすぎる弱点もあります。実装例はカンバンボードの実装例にまとめています。

まとめ

同じデータでも、何を伝えたいかによって向いている表示形式が変わります。横並びで数値を比較したいならテーブル型、画像や情報量が多いならカード型、時系列の流れを見せたいならタイムライン型、状態の変化を管理したいならカンバン型という住み分けが、実際に動かしてみるとはっきり感じられました。

注文管理であれば、一覧はテーブル型で持ちつつ、対応状況を追うビューだけカンバン型に切り替える、という組み合わせ方も現実的です。データの性質ごとに表示形式を変えるという発想は、デザインコンセプトやナビゲーション構造の選び方とも共通しています。