ITmedia NEWS > STUDIO >
SaaS セレクト with ITreview

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

» 2022年05月12日 09時00分 公開
[川村将人ITmedia]

連載:徹底解剖! SaaSのUI/UX

 本連載では、B2B SaaSや業務システムを中心にUI/UXデザインを手掛けるベイジ(東京都世田谷区)が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。

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

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

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

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

photo NG例

 これは、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出力のような機能はテーブルの全データを出力するのか、チェックしたデータだけ出力するのか分かりにくく、不便です。

       1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.