ここからメインコンテンツ

ユーザビリティ・コラム

ここからメインコンテンツ

第9回 簡潔性・知足性(Simplicity)

「簡潔性・知足性」とは製品の画面上に表示されている情報について

  • 1. 情報が簡単にまとめられ、わかりやすいこと
  • 2. 操作中の必要な場面で過不足なくユーザーに情報が提示されていること

を言う。

ではインターフェース上でどのように情報を提示していくべきか。
今回は「簡潔性・知足性」における情報の「量」と「質」について焦点をあてて考えてみる。

1. 情報の量

情報の量において大事なことは、ユーザーがやりたいと思っていることが簡単に見つけられ、そして何をすればいいのか判断できるようにする配慮と工夫を考えていくことである。

1.1 適切な情報量とは

各操作場面によって“適切な情報量”がある(図1)。どんなインターフェースにおいてもその情報が少なすぎると不親切になることもある。情報量が多すぎると画面が煩雑になり、見せるべき重要な情報が埋もれてしまう。ユーザーは見づらいだけではなく、どの情報が重要なのかを判断できない。ユーザーがスムーズに操作が行えるようにするには、どこでどんな情報が必要か、そのふさわしい量を判断して提示することである。図2図3はその具体的な事例である。

図-1 適切な情報の概念図

図-1 適切な情報の概念図
画面上に表示される情報量に対する分かりやすさを示した図。水色部分の範囲が過不足ない“適切な情報量”となる。

図-2  情報量が少なすぎる例(東横線/みなとみらい線 横浜駅の券売機)

図-2 情報量が少なすぎる例(東横線/みなとみらい線 横浜駅の券売機)
東横線ではなく、みなとみらい線から購入しなくてはならない駅名を記したシール(青枠)を貼り、補足している。

図-3 情報量が多すぎる例(JRの券売機)

図-3 情報量が多すぎる例(JRの券売機)
この券売機を使って定期券が買えることに気づかないため(赤枠)、定期券が購入できることを提示したシール(青枠)を貼り、補足している。(それでも気づかれていない。)



1.2 量をコントロールする

ユーザーがある作業を行う際、そのときに本当に必要な情報はいくつかに限られてくる。図4は日常的な操作に必要最低限のボタンだけを出し、その他のボタンは蓋の中に隠されている。ユーザーの操作目的に応じて情報に優先度をつけ、その時・その場面に応じて必要な情報のみを表示するように情報を構造化することを「プログレッシブディスクロージャ※1」と言う。

※1 Microsoft Corporation, Windowsユーザーインターフェイスデザインガイド,アスキー出版局,1995

図-4 ビデオのリモコン蓋を開けるとビデオ予約で使うボタンが配置されている

図-4 ビデオのリモコン蓋を開けるとビデオ予約で使うボタンが配置されている

2. 情報の質

情報の質とは、操作に必要とする情報が場面ごとでユーザーに分かりやすく伝わるように考えられているかである。次に5つのポイントを挙げて解説する。

2.1 文脈性

文脈性とは前後の操作が自然な作業の流れになっているかである。ユーザーが作業を遂行する際の一連の流れを考慮して、各場面で適切な情報を提示するように設計する。情報を区切り、手順にそって操作画面を表示すること(ウィザード)によって、ユーザーが1つ1つの操作が確実にできるように情報の提示を考える(図5)。

図-5 アプリケーションのインストール

図-5 アプリケーションのインストール
(奥から)紹介、使用許諾契約、同意、インストール先を選択、インストールの種類、認証、確認、インストール中、仕上げ。

2.2 全体像の把握

ユーザーに“どんなことをするのか”というシステムの概念や全体像を先に提示する。初めて利用するユーザーでもあらかじめシステムについて把握できていれば操作の流れが捉えやすくなる。このように全体像・概要を先に紹介することで、理解が促進されることを「Advance Organizer」(先行オーガナイザー※2)と言う。マニュアルの作成※3などに広く応用されている。またUI設計においても、新しい概念や新機能などを理解させるために対象ユーザーが先行経験として持っているメタファを利用するなど、幅広く応用されている(図6)。


※2新しい知識を学習したり覚えたりしやすくするための教授法として、Ausubelによって提唱された理論 Ausubel, D.P. (1960). The use of advance organizers in the learning and retention of meaningful verbal material. Journal of Educational Psychology, 51, 267-272

※3海保 博之ほか, ユーザ・読み手の心をつかむマニュアルの書き方, 共立出版, 1987


図-6 amazon.co.jp商品購入画面の上部に表示される作業フロー図

図-6 amazon.co.jp商品購入画面の上部に表示される作業フロー図
サインインしてから注文を確定する迄の全体フローを示し、現在どの段階にいるのか、この先どのような指定を行うのかがわかるようになっている。

2.3 情報の整理・デザイン

限られた画面サイズの中で情報を見やすく表現し、見やすいレイアウトをする。情報は内容を種類ごとに分類(カテゴライズ)して配置する(第3回「視認性(visibility)」参照)。また、分かりやすく伝えるための表現の工夫も必要である。文章で伝えるよりグラフやフローチャートなどビジュアルで表現することで情報が視覚化され、ユーザーの理解を促す(図7)。

図-7 フローチャートで表現した例(引越し業者のウェブサイト/引っ越しプラン)

図-7 フローチャートで表現した例(引越し業者のウェブサイト/引っ越しプラン)

2.4 分かりやすい言葉・図

英語表記やアルファベットの略語、難しい用語など曖昧な表現は何を言っているのか理解できず、ユーザーも曖昧にしか操作できなくなる。どんなことができるものなのか、ユーザーに伝わるような“分かりやすい言葉(または図)”で表現しなくてはならない。

2.5 メッセージの構成

重要度を考えたメッセージの構成をする。重要な情報は注目を引くように強調し一目でわかるように伝える。新聞の場合(図8)、大見出し・中見出し・小見出しは目につく大きさと短い文で記事の内容を簡潔に表現されている。見出しを読めば大まかな内容は捉えられる。文章の構成は第1パラグラフが概要、第2パラグラフからニュースの全文、別紙面にさらに詳細または関連記事となっており、知りたいところまでを読めば良い。

図-8 新聞一面

図-8 新聞一面

以下にガイドラインを記載する。

デザイン・設計ガイドライン

  • (1)一画面あたりの情報量

    • 画面内の情報量は多すぎると煩雑、少なすぎると手がかりが得られなくなる。システムに相応した過不足のない最適な量を判断すること。
    • ユーザーに伝えたい情報は操作目的に応じて情報に優先度をつけ階層化すること。
  • (2)質的情報

    • 画面内の情報量は多すぎると煩雑、少なすぎると手がかりが得られなくなる。システムに相応した過不足のない最適な量を判断すること。
    • 新しい概念や機能は全体像・概要を先に紹介し、ユーザーの理解を促進させる。
    • 情報は内容の分類や図表などを用いて見やすく・分かりやすく整理する。
    • ユーザーに与える情報は、意味のある内容を伝えること。
    • 重要な情報は注目を引くように強調し、重要度の低い情報は階層へ。