徹底解剖！　SaaSのUI／UX

“不便なSaaSあるある”な「使いにくい表・テーブルUI」の改善点　営業支援ツールを例に専門家が解説（1/2 ページ）

　第2回は、SaaSに最適な「テーブル・表」について解説します。ほとんどのB2B SaaSは業務に関わる情報を管理する目的で使われています。テーブルや表は、こういったデータの検索や、時系列を整理しての情報確認に使う、頻出のUIといえます。

　例えばSFA（営業支援システム）では、取引先管理、商談管理、コンタクト（担当者）管理といった情報をテーブル・表で一覧管理します。

　テーブル・表を使って情報を一覧で表示することで、必要なデータを素早く見つけられる他、複数のデータを効率よく比較できます。場合によっては数万件のデータを扱うこともあり、情報の閲覧性と検索性の高さが求められます。

　このように、テーブル・表のUIはSaaSの使い勝手に大きく影響します。今回は、CRM（顧客管理システム）やSFAを模したUIを参考に、使いやすいテーブル・表の設計について解説します。

　これは、CRM／SFAにおける顧客管理の画面を模した画像です。ユーザーはここで、契約のある特定の顧客をテーブルを使って探したり、逆に契約切れの顧客をモニタリングしたりします。データテーブルは検索フォームとセットで使われることもあります。

　一見するとすっきりしたテーブルですが、情報の閲覧性、検索性の面でさまざまな問題を抱えており、使い勝手が良くない設計になっています。どこに問題があるのか、考えてみましょう。

　正解は以下の8つです。

表示中データの概要が分かりにくい

　テーブルの左下に「200件」、上部に「1／2 page」とあります。これは一覧件数が200件であり、その中の1ページ目であることを意味しています。恐らく、現在のページには100件のデータが表示されていると推測できます。しかし、ここまでユーザー自身で推測しないと表示データの概要が分からないのは不親切です。

　さらに「200件」の表示は、画面左下にあると目につきにくくなります。データの表示件数が多いとページの初期表示時には見えていない可能性もあるでしょう。合計件数は管理項目の最も重要な情報の一つなので、テーブルでは一番目立つ場所に表示する方がよいでしょう。

データの開始位置がそろっていない

　中央ぞろえで配置された情報は、一見きれいに見えますがおすすめできません。B2B SaaSでは、文字量の多いデータをテーブルに表示することも多いことから、中央ぞろえだと文字量の差で大きく目線がぶれ、読み取りにくくなります。

　列が多く横スクロールが発生するようなテーブルでは、文字量の少ないデータは途中までデータが見えないので、認識するのにも時間がかかります。データは開始位置をそろえ、読みやすくしなければなりません。

数値の位がそろっていない

　通常のデータは左ぞろえが理想ですが、金額などの数値データは例外です。テーブルでは、複数の数値データを比較して見ることも多く、左ぞろえや中央ぞろえでは桁が揃わず読みにくく感じます。

主要な項目が列固定できていない

　B2B SaaSは管理項目が多いため、テーブルの列がたくさんあり、必ずといっていいほど横スクロールが発生します。列全体が横スクロールできるようになっていると、右にスクロールした時に、主要な項目が表示されなくなり、今何のデータを見ているのかユーザーが認識しにくくなります。一括操作機能があるテーブルでは、操作対象として選んだ行がどれだったかも分からなくなります。

データの詳細画面への移動方法が分かりにくい

　テーブルでは、そのデータが持っている一部の情報を概要として表示します。より詳細な情報は、他の画面にあることがほとんどです。このUIでは、それらの情報は「詳細画面」に移動して確認する必要があります。

　基本的に、テーブル上のデータ1行に対し、詳細画面は1つです。しかし、NG例では多くの列がリンクになっています。さらに右下に「詳細」ボタンもあるため、どこから詳細画面にたどり着けるか分かりにくくなっています。同じ詳細画面に行けるとしてもユーザーを迷わせるだけなので、導線は必要以上に増やさない方がよいでしょう。

ソート（並び替え）を意識した項目でない

　テーブルでは情報を検索しやすいよう、ヘッダの項目名をクリックすると昇順／降順にデータを並び替えるソート機能が搭載されていることが多いです。この機能の有無により利便性が大きく変わってきますが、ソート機能がついているだけでは不十分です。ソートしやすい単位で項目を分ける必要があります。

　NG例には「現在の契約期間」という列があります。もし契約終了日が間近なものを探したい場合、契約中の顧客を契約終了日でソートをすると効率的に顧客を見つけることができるでしょう。しかし、NG例のテーブルには契約終了日だけ書いた列がないため、このソート機能が使えません。項目をまとめて1つの列に入れてしまうと、このような不便さが生まれます。

データが未設定なのか存在しないのか分からない

　NG例では、一部の項目が空欄になっています。テーブル上での空欄には本来、2つの意味があります。一つは未設定、もう一つは存在しえない項目です。NG例ではそれぞれの空欄がどちらの意味なのか、すぐには区別できません。

　例えば、契約状態にない顧客には契約期間は存在しません。しかし、それ以外で空欄の場合は、未設定で追加登録する必要があるかもしれません。このようにデータの意味により対処が変わることから、それぞれを区別できるように表示しなければなりません。

データへの一括操作の対象が分かりにくい

　B2B SaaSでは、大量のデータをまとめて操作することが多く、チェックボックスつきの一括操作ができるテーブルを扱うことがよくあります。しかし、一括でどんな操作ができるかすぐには分からないUIになっていることがあります。チェックボックスと処理ボタンの位置が離れており、関連性が分かりにくいからです。

　NG例では、チェックボックスの近くにはボタンがなく、離れた右下にボタン群があります。しかし、どれがチェックボックスと連動するボタンか分からず、ユーザーが推測する必要があります。特にCSV出力のような機能はテーブルの全データを出力するのか、チェックしたデータだけ出力するのか分かりにくく、不便です。

徹底解剖！　SaaSのUI／UX

SaaSにとって、UI／UXは使いやすさを高め、ユーザーの満足度を保つ重要な要素の一つ。しかし、人数も予算も少ないと、UI／UXの分析に回せるリソースが限られるかもしれない。本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジが、SaaSにありがちなUIデザインの問題を実例を交えて解説する。

この連載の記事をもっと見る

この記事の著者

関連記事

• 

  “アプリUIあるある”な6つのNGボタン　人事SaaSを例に専門家が解説

• 

  「身内に使ってもらうだけ」なB2B SaaSスタートアップにならない方法　ユーザー課題の正しい見極め方

• 

  Q.SaaSの価格設定は誰が担当すべきか　マーケター、それとも経営層？　専門家の見解は

• 

  「スクショで共有」はなぜだめなのか　freeeがアクセシビリティー研修の資料を無償公開

• 

  不便で仕方ない「住所入力の全角・半角問題」はなぜなくならないのか　専門家に原因を聞く