テーブルをUIデザインで使うときに気をつけたいこと

こんにちは、Gaji-Labo UIデザイナーの今西です。

UIデザインでテーブルを使う際に気をつけることをまとめてみます。データテーブルは情報の一覧を表示する際によく使いますね。

テーブル表示の一覧性

データテーブルを使用するシーンは、主にデータの一覧を表示したいときになると思います。
テーブルだからできることして情報も多く表示というのがあるとは思いますが、情報の読みやすさや一覧性を担保しておくことが大切です。

テーブルを使用した情報の表示で気をつけることは下記の3点と考えています。

• 目を通しやすく、読み取りやすいこと（Scannable）
• 読みやすいこと（Readable）
• 探しやすいこと（Searchable）

Scannable が結構キモだと私は感じていて、テーブルの一覧性があるとはどのようなことかを一言で表すならば、 Scannable だと思います。
日本語に「スキャン」が外来語として入ってきているだけに訳しにくいのですが、 Scan には「精査する」「注意深く見る」という意味があります。
情報の塊から必要な情報を読み出し、探し出すような動作が Scan です。
（文章を読んでポイントとなるキーワードを探し出す、国語や英語の試験であったような動きが近いと思います）

Scan がしやすいことはテーブルの情報一覧から重要な情報が見出しやすい、探し出しやすいことだと思います。
これは情報が「 読みやすいこと（Readable）」と「探しやすいこと（Searchable）」ともつながっていますし、相互に作用していると思います。

また、データを表示するだけなく、情報を見て次のアクションを取りやすいこと（Acitonable）も大切です。
アクションを取るには、まずその場にいるよう情報を何ができるかを資格情報として読める・分かる状態にないといけないので、やはり、テーブルの読みやすさをまず担保すべきだと考えます。

動的なものでもあるから、複雑化しすぎない

データテーブルのUIを計画する際によくあるパターンは、項目が多くなってしまうことだと思います。
テーブルに表示できる情報量やスペースを考えると、一覧として見せられる項目や情報の量は有限です。

テーブルに置けるスペースやデータの見やすさの確保の点から、横セルの項目はなるべく少なく、見やすい余白を取りながらテーブルのデザインをしていきたいものです。
ただ、項目をどう少なく数を絞り込むかは悩ましいところであります。

なるべくシンプルにテーブルを組み立てるには、一覧で行う機能の観察・精査をしながら必要最低限に小さく抑えて、複雑さを回避していくしか無いかなと考えています。

また、ひとつの画面内で読める情報量も鑑みると、その画面内でできるアクションや機能は絞ったりシンプルなものにとどめておいてもよいのかもしれません。 状況によって最適最小でUXを組み立てることが求められていくのではないでしょうか。

基本形のデータテーブルの機能として、検索、フィルター、並べ替え、表示する項目の選択を搭載することで、ユーザーに制御する自由をわたすことができます。
ユーザーのタスクやワークフローのパターンにあわせた機能により、情報量が多い場合でも対応しやすいテーブルをつくることができます。

「読み取りやすい」を目指して

データテーブルのデザインを作成する際は、まず、「読み取りやすい」ことを目指します。 テーブルでもひと目で見てわかりやすいものを作るべきだと思います。 シンプルにつくりつつも、軸足は Scannable しやすいものから離れずテーブルのデザインを作っていきたいと考えています。

難しいパズルを動かしているような気持ちになることもありますが、実際のタスクやワークフローのパターンを踏まえた使いやすいものを作りたいものです。