アイコンのユーザビリティ:
デジタルアイコンをいつ、どのように評価するか

効果的なアイコンは、認識しやすさと解釈に依存する。アイコンは、その調査課題に適した方法で評価しよう。

アイコンのユーザビリティ

効果的なアイコンは、ユーザーが利用可能な機能を理解し、解釈する手助けをすることで、ユーザビリティを向上させる。しかし、アイコンは不適切に実装されると、かえってユーザビリティを損ない、混乱を招く。

『Digital Icons That Work』で、私はアイコンのユーザビリティ全体に影響を与える2つの変数である、アイコンの認識しやすさとアイコンの解釈の重要性を強調している。

アイコンの認識しやすさとは、アイコンが表す形状やシンボルをユーザーが識別できるかどうかを指す(星のアイコンが星に見えるか)。

アイコンの解釈とは、特定のコンテキストにおいて、そのアイコンの形状やシンボルにユーザーがどのような意味を付与するかを指す(このインタフェースにおいて、星のアイコンは何を示すのか)。

アイコンのユーザビリティについての説明。

アイコンの認識しやすさ

アイコンの認識しやすさに関して、判読しにくく複雑で細かすぎるシンボルや形状を使用したアイコンは、すぐに見つかる。しかし、一見したところシンプルな形状も、ユーザーにとっては認識しにくいことは多い。実際、日常的なシンプルなものを描いたアイコンも、ユーザーが認識に苦労するケースは意外なほど多いのである。

以下のアイコンについて考えてみてほしい。これらが何なのか、当ててみよう。アイコンが示すアクションや概念ではなく、単に描かれているものが何なのかを推測してみてほしい。

(スクロールする前に、答えを考えてみよう!)

ライトグレーの背景にグレーのシンプルなリボンまたは賞バッジのアイコン。円形の下部にリボンのような下向きの点が2つあるデザイン。
1.
黒く塗りつぶされたショッピングバッグのアイコンで、上部に持ち手がひとつ付いている。バッグは長方形の台形で、下部が広く、上部に向かってわずかに狭くなっている。
2.
黒線で描かれたショッピングバッグのアイコン。このアイコンは2つのカーブした持ち手が特徴で、1つはバッグの上部で上向きにカーブしており、もう1つはバッグの中央で下向きにカーブしている。
3.
黒地にグレーの輪郭のメニューアイコン。アイコンは角の丸い長方形のシートのようで、中央に3本の水平線がある。
4.

ラベルなしの状態でこれらのアイコンをユーザーに提示したところ、それが使用されていたインタフェースのコンテキスト内でも、こうしたシンプルな形状の認識には大きなばらつきがあった!

ライトグレーの背景にグレーのシンプルなリボンまたは賞バッジのアイコン。円形の下部にリボンのような下向きの点が2つあるデザイン。
1.

リボンか鍵穴?

Rampという金融プラットフォームのウェブサイトでは、報酬を表すためにリボンのアイコンを使用していた。しかし、一部のユーザーはそれを鍵穴だと思っていた。

黒く塗りつぶされたショッピングバッグのアイコンで、上部に持ち手がひとつ付いている。バッグは長方形の台形で、下部が広く、上部に向かってわずかに狭くなっている。
2.

ショッピングバッグかブリーフケース?

The OutnetのECモバイルアプリでは、ショッピングバッグを表すためにこのアイコンを使用していた。しかし、一部のユーザーはそれを、ファイルを保存するブリーフケースだと思っていた。

黒線で描かれたショッピングバッグのアイコン。このアイコンは2つのカーブした持ち手が特徴で、1つはバッグの上部で上向きにカーブしており、もう1つはバッグの中央で下向きにカーブしている。
3.

ショッピングバッグか、錠か、クリップボード?

YouTubeのモバイルアプリでは、ショッピングバッグを表すためにこのアイコンを使用していた。しかし、一部のユーザーにはそれがクリップボードや南京錠に見えていた。

黒地にグレーの輪郭のメニューアイコン。アイコンは角の丸い長方形のシートのようで、中央に3本の水平線がある。
4.

メニューか文書?

Saks Fifth Avenueのモバイルアプリでは、ナビゲーションメニューを表すためにこのアイコンを使用していた。しかし、多くのユーザーはそれを文書(たとえば、買い物リスト、過去の注文履歴、プライバシーポリシーなど)として認識していた。

アイコンの認識しやすさを高めることは、アイコンをユーザブルなものにするための第一歩である。ある調査参加者は、アイコンの形状を推測しようとしながら、もっともな不満を口にした。

「そのアイコンが何なのかわかりません。そして、何に見えるのかわからないと、アイコンの意味もわかりません!」

まさにその通り! アイコンの背後にある意図されたメッセージを理解することは、そもそも難しいものだ。さらに、その形状がわかりにくかったり、判別不能だと、その難しさはほぼ解読不可能なレベルになるのである。

アイコンの解釈

アイコンの解釈は、アイコンのユーザビリティにおける2つ目の要素であり、場合によっては、認識しやすさよりもさらに厄介なものになることもある(アイコンの解釈とは、ユーザーがアイコンに付与する意味に関わるものだということを思い出してほしい)。アイコンの解釈が難しい理由の1つは、認識と解釈が常に一致するとは限らないことだ。アイコンが意図した通りに認識されたとしても、意図とは異なる意味に解釈されることもあるからである。

言い換えれば、ユーザーが描かれているものや概念を正確に識別できたとしても、そのアイコンが表しているアクションや機能を正確に予測できるとは限らない。

たとえば、ある調査では、4つのアプリケーションが、店舗アイコンのいろいろなバージョンを使ってさまざまなアクションを示そうとしていた。

ライトグレーの背景にグレーの輪郭線で描かれた店舗アイコンで、建物を表現しています。建物は中央が長方形で、両側に2つの小さな長方形の部分があり、追加の建造物に似ています。メインの建物の中央には、ドアを表す2つの小さな長方形の上に「N」の文字があります。
店舗を探す
Nordstromモバイルアプリ
ライトグレーの背景にグレーのアウトラインで描かれた、建物を表す店頭アイコンです。上部に3本の水平線がある長方形の構造で、日よけや看板に似ています。線の下にはドアを象徴する2つの長方形があります。
店舗を探す
Sephoraモバイルアプリ
ライトグレーの背景にグレーの輪郭線で描かれた、建物を表す店頭アイコン。上部が丸みを帯びた小さな建物で、入り口の上にはカーブした日よけがあります。日よけの下には中央に長方形のドアがあり、小さな商店か市場のように見えます。
取引先を検索・閲覧する
Rampウェブサイト
長方形の建物の上部にストライプの日よけをあしらったアイコンです。日よけには交互に縦線が入っており、店の入り口を覆っているように見えます。
ショッピングカテゴリー(メニュー)を見る
DSWモバイルアプリ

ほとんどのユーザーは、店舗アイコンのこうしたバリエーションを店舗の外観として認識していたが、その解釈には大きなばらつきがあった。(アイコンのラベルがあったとしてもそれをユーザーに見せずに)アイコンがどのような機能をすると考えられるか尋ねたところ、ユーザーは実にさまざまな機能を予測した。トップページへの移動(おそらく一般的なホームアイコンとの類似性によるもの)、店舗所在地の一覧表示、最寄りの店舗の検索、店内のお得な情報へのアクセス、さらには関連する他の小売業者やブランドの閲覧などが挙げられた。

なぜシンプルな概念を伝えることがこれほど難しいのだろうか。ユーザーの理解力が低いのか。もちろん、そんなことはない! また、ユーザーが特に厄介なわけでもない。ターゲットとするユーザー層がかなり絞られていたとしても、年齢、これまでの生活経験、特定の分野における習熟度、文化的背景、教育的背景、社会経済的状況、居住地域、アクセシビリティのニーズなど、彼らの属性は非常に多様だ。こうした要因が(そしてそれ以外の要素も)、ユーザーの意味の解釈に影響を与えるのである。

こうした複雑さから、デザインプロセスの早い段階で、アイコンの認識と解釈の両方をテストすることが非常に重要である。シンプルな形状のアイコンにしておけば、常に容易に認識されるだろうとは思い込まないことだ。また、ユーザーがそのものを認識できたとしても、それが意図された概念、アクション、または意味として正しく解釈されるはずと決めつけるべきでもない。

アイコンのユーザビリティに影響を与えるその他の要因

アイコンの解釈と認識しやすさの他にも、ユーザーインタフェースにおけるアイコンのユーザビリティに影響を与える要因はいくつかあり、ユーザーテストで評価する必要がある。そうした要因には以下のようなものがある:

  • 関連性:そのアイコンは、目の前のタスクやユーザーが達成したい目的にどの程度適しているように見えるか。
  • 見つけやすさ:ユーザーがそのアイコンを探しているときに、ページ上でそれを見つけられるか。
  • 気づきやすさ:そのアイコンは、インタフェース内で十分に目立ち、ユーザーが気づきやすいか。
  • タップしやすさまたはクリックしやすさ:そのアイコンはタップもしくはクリックするのに十分な大きさか。それとも、ターゲットの選択ミスを引き起こしやすいか。
  • 視覚的な魅力:そのアイコンは見た目が良いか。

これらの属性はすべて重要で、互いに連携してアイコンのユーザビリティを高めるのである。

アイコンの評価手法の選択

最適な評価手法を選ぶには、まず明確な調査課題(リサーチクエスチョン)を策定するとよい。テストを実施する前に、明確な調査の目的と課題を設定し、その課題に最も適した手法を選択する必要がある。

アイコンのテスト手法は、アイコンを実際のインタフェースというコンテキストから切り離した状態で表示するか、それともそのコンテキスト内で表示するかによって、コンテキスト外テストとコンテキスト内テストの大きく2つに分類される。

ここで、上記の各属性に関する具体的な調査課題を、デザインプロセスのさまざまな評価手法にどのように結びつけるかの例を紹介しよう。

白い背景にグレーのシンプルなストップウォッチアイコン。ストップウォッチは丸い形をしており、1本の針が斜めを向いています。上部とサイドにある小さなボタンは、スタートまたはストップのメカニズムを表しています。

あなたはECモバイルサイトの担当者で、ホーム画面のナビゲーションに新製品への直接的な経路を設ける必要があるとする。そこで、新しさや新着商品を表す視覚的メタファーになることを期待して、このストップウォッチのアイコンをデザインした。

以下に、このアイコンに関するサンプルの調査課題と、それにどのように対応するかの例を示す。

調査課題:このアイコンはユーザーにストップウォッチのように見えるか

関連する属性:認識

評価方法コンテキスト外での認識に関するアンケート調査:アイコンをテキストラベルなしでユーザーに単独で提示し、それが何であるか、または何を表しているかを尋ねる。
コンテキスト内でのスクリーンショットテスト:ユーザーにインタフェースのスクリーンショットを見せ、どんなアイコンがあって、それらがそのインタフェースにおいて何をするものか、または何を表していると思うかを説明してもらう。

実施のタイミング:デザインプロセスの初期段階

調査課題:ユーザーはそのストップウォッチを新着商品と結びつけて理解するか

関連する属性:解釈

評価方法コンテキスト外でのアンケート:アイコンを単独でユーザーに提示し、ECサイト内で見たとしたら、そのアイコンは何をするものだと思うかを説明してもらう。
コンテキスト内(インタフェース:スクリーンショットや静的なモックアップも利用可)でのテスト:ユーザーに、気づいたアイコンについて説明してもらい、インタフェースを参照しながらその機能を予測してもらう。

実施のタイミング:デザインプロセスの初期段階、または最初のインターフェースモックアップが完成した時点

調査課題:ユーザーはそのアイコンの見た目を気に入るか

関連する属性:視覚的な魅力

評価方法コンテキスト外での評価:アイコンをユーザーに単独で提示し、SD法やリッカート尺度を用いて魅力度(または他の属性)を評価してもらう。
コンテキスト外での選好テスト:ユーザーに同じアイコンの(ビジュアルスタイルの異なる)複数のバージョンを提示し、どれが好まれるかを理解する。

実施のタイミング:デザインプロセスの初期段階、またはデザイン変更時

調査課題:そのアイコンはウェブサイトで新製品を探している人々に適しているように見えるか

関連する属性:関連性

評価方法コンテキスト内でのユーザビリティテスト:ユーザーに新着商品を探すタスクを与え、ユーザーがインタフェースとインタラクトする様子を観察する。ユーザーは、このアイコンを使用するだろうか。
コンテキスト内でのA/Bテスト:ユーザーにさまざまなアイコン案に対応するバリエーションを示す。

実施のタイミング:プロトタイプまたは動作するインタフェースができた時点、またはデザインが公開された後

調査課題:ユーザーはそのインタフェースでそのアイコンに気づくか/新製品を探している際にそのインタフェースでそのアイコンを見つけられるか

関連する属性:気づきやすさ/探しやすさ

評価方法コンテキスト内でのユーザビリティテストまたはクリックテスト:ユーザーがアイコンとインタラクトしない場合、またはインタラクトするまでに時間がかかりすぎる場合は、アイコンが十分に目立っていない可能性がある。

実施のタイミング:プロトタイプまたは動作するインタフェースができた時点、またはデザインが公開された後

調査課題:ユーザーはエラーを起こさずにそのアイコンを容易にタップできるか

関連する属性:ターゲットの選択精度

評価方法コンテキスト内でのユーザビリティテスト:ユーザーにこのアイコンを使用するタスクを与え、アイコンをどれだけ容易に、かつ確実にタップできるか、また誤って近くの別のターゲットをタップしてしまわないかを観察する。(加えて、タッチターゲットのサイズに関する一般的なガイドラインに従うことが推奨される)

実施のタイミング:プロトタイプまたは動作するインタフェースができた時点、またはデザインが公開された後

書籍『Digital Icons That Work』でさらに詳しく

今回の説明に興味を持ち、アイコンデザインについてさらに深く理解したいと思ったなら、『Digital Icons That Work』をぜひ手に取っていただきたい(訳注:Amazon.co.jpではKindle版のみ購入可能)。この書籍には、最近実施したアイコンに関する調査に基づくアイコンデザインのガイドラインが豊富に収録されている。

調査の知見についてさらに詳しく知り、UXを向上させる効果的なアイコン作成のための手法を学びたい場合は、本書をこちらから購入可能である(訳注:Amazon.co.jpではKindle版のみ購入可能)。