“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説:徹底解剖! SaaSのUI/UX(1/2 ページ)
なかなか問題点を直しにくいSaaSのUI/UX。見積り・請求管理SaaSのUIを模して作ったサンプルを基に、専門家がSaaSのUIにありがちな問題点とその改善方法を解説する。
連載:徹底解剖! SaaSのUI/UX
本連載では、B2B SaaSや業務システムを中心にUI/UXデザインを手掛けるベイジ(東京都世田谷区)が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。
第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。
アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。
今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと、効果的な使い方を学んでいきましょう。
この見積り編集画面は、すでに作成した見積りの情報を編集・削除するためのものです。取引先や見積日をはじめ、見積りの明細項目を編集できます。複製して別の見積りを作成したり、この見積りをブックマークしておいて後で参照しやすくしたりする機能も備えています。
この画面の中には、アイコン使用上のルールに反した部分がいくつも存在しています。せっかくのアイコンを活用しきれていない原因はどこにあるか、分かるでしょうか。ポイントは、全部で6つあります。
アイコンのスタイルが統一できていない
アイコンのスタイルを統一できているかに注目しましょう。ここでいうスタイルとは以下を指します。
- アイコンのサイズ
- アイコンの丸み、角張り具合
- 白抜きアイコン、または塗りつぶしアイコン
左上のブックマークアイコン、日付入力フォームのカレンダーアイコン、画面下部のプラスアイコンなどがありますが、それぞれのスタイルが一致していません。スタイルが統一できておらずバラバラだと見た目に緩急がつかず、情報の重要度も分かりにくくなります。その結果重要なアイコンが目につかなかったり、どこから操作すべきか迷ってしまいスムーズに操作できないことにつながります。
アイコンのスタイルはアプリケーション全体を通して、特別な事情がない限り統一しましょう。
ただし、アイコンはON/OFFの状態を塗りつぶし/白抜きで表現することがあります。意図した表現の場合は統一する必要はありません。
文字を単体でアイコンとして使用している
見積金額の「i」アイコンのように、文字単体のアイコンは通常テキストと見分けがつきにくくなります。基本的に使用を避けたほうが良いでしょう。
アイコンに内容補記がない
タイトル横や品名の下に、文字の補足がなく単体で使われているアイコンがあります。アイコンをどう解釈するかは人によって異なるので、文字情報で補足しないと誤認する可能性があります。もしスペースの関係などでアイコンを単体で使う場合は、カーソルを合わせたときにツールチップ(注釈)を出し意味を補足するなどの工夫をしましょう。このアイコンを押すと何が起こるのか、ユーザーに伝えられるとより親切です。
操作できるかどうかが分からない
「取引先」の項目に虫眼鏡アイコンを置いていますが、アイコンだけではクリックして使う操作部なのか、何かの補足情報としてのアイコンなのかが分かりません。
一般的に認知しやすいアイコンを使っていない
赤い削除ボタンに使われているアイコンは、紙が破れたような不思議なモチーフです。文書の破棄をイメージしてのアイコンでしょうが、一般的なシステムにおける削除のシーンでこのようなアイコンは見かけません。アイコンのモチーフは一般的によく使われており類推しやすい、ユニバーサルなものを使用しましょう。
不要な箇所でアイコンを使用している
アイコンは情報を補うことができてこそ効果を発揮します。
文字を見れば意味が明確に分かる箇所の場合では、わざわざアイコンを使うと情報過多になりユーザーの直感的な操作を妨げてしまいます。伝わりやすさが変わらない場合は、無理にアイコンを付けて情報を増やすのは避けましょう。
これら6つの問題点を改善した例が、次の図です。
関連記事
- “不便なSaaSあるある”な「使いにくい表・テーブルUI」の改善点 営業支援ツールを例に専門家が解説
なかなか問題点を直しにくいSaaSのUI/UX。営業支援SaaSのUIを模して作ったサンプルを基に、専門家がSaaSのUIにありがちな問題点とその改善方法を解説する。 - “アプリUIあるある”な6つのNGボタン 人事SaaSを例に専門家が解説
なかなか問題点を直しにくいSaaSのUI/UX。人事SaaSのUIを模して作ったサンプルを基に、専門家がSaaSのUIにありがちな問題点とその改善方法を解説する。 - 「身内に使ってもらうだけ」なB2B SaaSスタートアップにならない方法 ユーザー課題の正しい見極め方
B2B SaaSを立ち上げても、身内に使ってもらうだけではビジネスとして成立しない──こんな事態を避けるヒントは、業務に隠れた「ユーザーも知らない課題」にあるという。初期ユーザーの課題を見極め、入り口となる市場での局地戦に勝つ方法とは。 - 「スクショで共有」はなぜだめなのか freeeがアクセシビリティー研修の資料を無償公開
freeeが、社内で実施している「アクセシビリティー研修」の資料を無償公開した。ITエンジニアやデザイナーなどさまざまな職種にアクセシビリティー向上の必要性やテクニックを解説したもので、採用活動の一環として公開したという。 - 不便で仕方ない「住所入力の全角・半角問題」はなぜなくならないのか 専門家に原因を聞く
郵便番号や電話番号は半角なのに、住所の番地では全角での打ち込みを求められる「住所入力の全角・半角問題」。不便で仕方ないこの仕様はなぜなくならないのか。専門家に理由を聞く。
Copyright © ITmedia, Inc. All Rights Reserved.