ユーザーフレンドリーなデータテーブルを作るには【海外記事メモ】
今日からはこの記事を読んでいきたいと思います。なお、画像も以下から引用します。
いわゆるダッシュボードなどのデータを一覧化した表を用いたUIをデザインする際の考え方をまとめてくれている記事のようです。若干ニッチなためあまり需要ある内容ではない気もしますが、データを一覧で見せるようなUIはアプリやWEBを作る中でもかなり出てくる課題ですし、何より自分が読みたいのでご興味ある方よければお付き合いください。
なお、かなり長い記事なので３回程度に分けて投稿するかたちになるかもしれません。初回の今日はどちらかというと導入の話なので、具体的なUI設計に関する議論は次回以降になりそうです。
本日もよろしくお願いいたします。
ユーザーフレンドリーなデータテーブルを作るための究極の方法
よいデータテーブルはWEBサイトやモバイルアプリには必要不可欠な要素です。良いデザインができれば、ユーザーが目的に合わせて簡単に操作でき、必要な情報へ容易にたどり着くことができるようになり、ひいてはプロダクトの売上向上に貢献します。
しかし、データテーブルをデザインすることは特に初心者にとっては非常に複雑で難しいものです。この記事では、素晴らしいデータテーブルを作るための方法論の概要をお話できたらと思います。
データテーブルは分析やデータの集計に主眼をおいた多くの事業者向け（BtoB）のプロジェクトに重要なもので、デザイナーはデータ構造に対して最良のデザインを提供する必要があります。
もしデータが適切に視覚化されなければ、情報が冗長になってしまいます。
データテーブルを作る際に難しいのがデータテーブルのサイズ、内容、複雑さ、目的が異なっていることです。
いずれにせよ、データを正確に見せることも、ユーザーの気づきや行動を助けることが必要となります。
モバイルやWEBアプリのデザイナーは、多くの複雑で難解な情報をシンプルで直感的なかたちで表現する場合に、しばしばテーブルUIを選択します。
しかし、特に非常に多くの情報を扱う場合はデータテーブルをデザインすることは難易度が高いものになります。そのような中でもデザイナーはユーザーを圧倒せず、彼らが簡単にデータを検索し、フィルタリングし、操作ができるようにしなければなりません。
さあ、どのようにそれらを実現するのかを見ていきましょう。
テーブルUIデザインとは？
テーブルとはデータを見せるものという意味で、きちんとした規律に基づいていたり素晴らしいデザインでなければユーザーは混乱し、見た目も散らかったものになってしまいます。
良いUIテーブルデザインはCTAボタンやハイパーリンク、現在のデータをすべて閲覧できるような縦横スクロールを有しています。
そしてユーザーはデータと触れ合うことで意思決定のプロセス速度を上げることができます。
しかし、それはテーブルの種類や目的によって異なってくるものです。
どんなときにテーブルUIを使うべき？
CRM（顧客管理）システムのような業務用アプリケーションは複雑で多様な情報源やユーザーからの膨大な情報を扱っています。もし不明確で非論理的にそれらを表現したら、データがユーザーを圧倒してしまい、彼らは行動不能になってしまうでしょう。
デザインプロセスを急がないでください。その変わり、多くの時間を考える時間にあててください。最も良い結果を生み出すため、厳格な選択をし、不要なあらゆるものを取り除く必要があります。
テーブルUIデザインにおいては、膨大な量のデータや人・モノのリストをUIで表現します。これらを実現するには以下の点を留意します。
・明確で読みやすいレイアウト
・画面読込み時間の短縮
・モバイルアプリやWebの画面サイズの有効活用
・最小の方法での大規模で多変数なデータセットを視覚化
・より多くの情報を扱う際に新しい行や列を追加することが容易にできる
・比較作業を補助する
・データ内の規則性を見つけるのに最適化する
どのようにテーブルをデザインする？
表示する値と順序を決めることは、ユーザーがタスクを完了するのに必要な労力と時間を左右する重要なものです。
データを選択する際は、ユーザーペルソナやシナリオ、古いアプリケーションのバージョンなどの特定の重要な要素への考慮が必要です。
しかし最も重要なのは、一般的な感覚を忘れないことです。これがなくては真に動くものは作れません。
デザインプロセスを急いではいけません。その代わり、熟考する時間をきちんと持ってください。最高の結果は、あなたが厳格な選択を行った上で、不必要なあらゆるものを排除しなくてはなりません。
また、副次的な情報はユーザーが確認したい場合を除いて非表示になるようにしてください。
→次回に続く
感想：デザインだけでなく技術的課題への考慮も
今回は導入部分だったこともあり、データテーブルに限らずUIデザイン一般にも言える大きな事項の説明が主でしたが、そんな中でも「画面の読み込み時間を考慮に入れる」などデータテーブルならではのものもありました。
確かに多くのデータを読み込んで表示させるフローを実装するデータテーブルにおいては読み込み時間の課題は結構シビアで、実際に仕事で使用しているWebマーケ用のダッシュボードも、気にならない程度とは言えやはり読み込みに数秒かかり小さなストレスを生んでいます。
このあたりのポイントまで含めてきちんと検証し、真に使いやすいUIにすべくデザイナーはじっくりとテストと検証を繰り返す必要があるように感じました。
次回はよりデータテーブルUIの設計に関する部分への言及に入っていきます。よければ次回もよろしくお願いいたします。
個人的に気になった海外記事を週数本メモしていますので、よければフォローおねがいします
ポートフォリオ・お仕事依頼など
※なぜかTwitterの表示がされなくなりましたがが「Twitterで表示」からプロフィールに飛べます
__________________________________________________________
#デザイナー #UIデザイン #UX #UXデザイン #UI #海外記事翻訳
サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。