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

ユーザーがアイコンの意味や目的をきちんと理解できるように、製品開発サイクルのさまざまなステージで複数の種類のテストを実施しよう。

スペースを節約し、ビジュアルをすばやく再認できるというメリットを活かそうと、デザイナーはよくアイコンを利用する。スマートフォンやウェアラブルデバイスなどのディスプレイの小さいデバイスの人気が高まるにつれ、アイコンの利用も増えてきている。しかし、こうしたアイコンはどの程度ユーザブルなのだろうか。ある特定のアイコンがうまく機能するかどうかを確認する唯一の方法は、ユーザーにそのアイコンをテストしてもらうことである。

アイコンのテストでは何をテストするのか

テストの方法によって、アイコンのユーザビリティの中での扱う側面は異なる。とはいえ、アイコンをユーザブルにする要素とは何か。以下がアイコンの4つの品質基準である:

  1. 見つけやすさ: ユーザーがページでアイコンを見つけることができるか。
  2. 再認性: アイコンが何を示しているかをユーザーが理解できるか。
  3. 情報の匂い: アイコンとインタラクトすると何が起こるかを、ユーザーが正確に推測できるか。
  4. 魅力: アイコンの見た目は魅力的か。

最終デザインがうまくいくためには、これらの論点はどれも非常に重要になる。しかし、1つ1つのアイコンをどのように改善するのかを決めるには、それぞれの論点は別々に検討しなければならない。

アイコンのテスト方法

アイコンのデザインを評価するためのテクニックはいくつかあるが、どれを利用するかは目的とデザインステージによる。そうしたテスト方法はアイコン単独でユーザーに表示するのか、それとも実際のインタフェースというコンテキストの中で表示するかによって、コンテキストなしのテストコンテキストありのテストの大きく2つのカテゴリーに分けることができる。しかしながら、さらに重要なのは、自信をもって自分たちのデザインを進めるために理解しておく必要のあることは何か、ということを基準にテスト方法を選ぶことだろう。

そして、(コンテキストなしでアイコンを表示する方法を利用する場合にも)テスト参加者は必ず、目的にしているターゲットオーディエンスに属していて、その業界全体のことや関係するコンセプトをよく知っているユーザーでなければならないことは覚えておいてほしい。

見つけやすさのテスト方法

見つけやすさを評価するには、アイコンをその本来の環境、つまり、インタフェースが全部揃っている状況で表示しなければならない。コンテキストありでテストをすると、複数のアイコンの見た目が似すぎていて、見分けるのにユーザーが苦労しないかどうか、あるいは、アイコンがファーストビューより下にあったり、広告がよく表示されているエリアに埋もれてしまって、見過ごされることがないかどうかが判断しやすくなる。

発見までの時間測定(Time-to-locate test)は、ユーザーがデザイン全体のさまざまな要素の中で、アイコン(やそのほかのインタフェース要素)をすぐに見つけられるかどうかを測定するのに最も適した方法である。このテストでは、参加者は与えられたタスクを達成するのに、特定のUI要素をクリックかタップしなければならない。そこで、ユーザーが正しいアイコンをうまく選択できるまでの時間がどれくらいかかるかということと、最初にそのアイコンを選択した割合を測定するとよい(つまり、どのくらいの頻度で正しいアイコンを最初にクリックするかを測定しよう。間違った選択をするということはそのアイコンが識別されにくいということだし、時間はかかるが正しいアイコンを選択できる場合には発見しやすさに課題があるということだからだ)。

再認性のテスト方法

再認性をテストするにはコンテキストなしでおこなうのが一番だ。つまり、アイコンをテキストラベルなどのインタフェース要素抜きで、単独で表示する。アイコンを提示されたユーザーはそのアイコンが何を表しているかを推測しなければならない。ある意味、これはロールシャッハテストのアイコンバージョンといえる。このテストの目的は、アイコンが再認可能であるか、そして、アイコンが表現しているオブジェクトをユーザーがすぐに推測できるかを確認することである。

よく出てくる語句や用語を見つけて、アイコンがまずどう解釈されるのかを見抜こう。もしユーザーの推測が自分たちの表現したいものとは関連がないようなら、そのアイデアは捨て、最初からやり直したほうがいいだろう。

アイコンと一緒にテキストも提供するとわかっている場合、ユーザーにそのラベルを見せ、いくつかの考えられるオプションの中からそのラベルを最もよく表現しているアイコンを選んでもらうのは理にかなった方法だと考えるかもしれない。しかしながら、このやり方を我々がとりわけ推奨することはない。なぜならば、現実の世界には実際、最終的なUIにあるラベルを無視し、画像しか見ないというユーザーもいるからだ。したがって、このテスト方法はインタフェース内で特定の機能をとにかく探さなければならないということをユーザーがすでにわかっていて、なおかつ、それに一致するグラフィック表示をとりあえず探そうとしている場合(つまり、あまりない状況)にしか機能しない。

情報の匂いのテスト方法

現実の何のオブジェクトにアイコンが似ているとユーザーが認識できるかだけではなく、彼らがそのアイコンが表している機能性を推測できるかどうかも最終的には重要だ。実際、あるシンボルが示している機能をユーザーが理解できさえすれば、そのオブジェクトが何であるかを彼らがわからなくても問題はない。つまり、見知らぬその四角いシンボルの示すところが「保存する」であると若者たちに理解され続けているかぎりは、彼らに見せるために古いフロッピーディスクを探さなければ、という心配は不要なのである。

再認性のテストで利用するコンテキストなしのテスト方法は、情報の匂いの判断にも適用可能だ。とはいえ、アイコンが何を示しているかをただユーザーに尋ねるのではなく、そのアイコンを選ぶと何が起こると思うかと質問しよう。そして、再認性のテストとは違い、どんなタイプのシステムにそのアイコンが現れることになるのかという最低限のコンテキスト情報は提供すべきである。たとえば、スーツケースアイコンはECサイトにあるということを伝えてから、そうしたタイプのWebサイトにおいて、そのアイコンは何を示していると思うか推測してほしいと調査参加者に依頼するとよい(しかしながら、そのWebサイトの見た目がどんな感じかという具体的な情報や、考えられる機能についてのヒントがユーザーに実際、提供されるようなことがないように注意しよう)。こうした一般的な参照フレームワークによって、図像の根拠になっているメンタルモデルがユーザーの期待と一致しているかを調査者が理解できるようになるからである。

その後、A/Bテストをすると、候補になっているうちのどのアイコンが情報の匂いが強いかをデザイナーが評価しやすくなる。この形式のA/Bテストで、一定割合のユーザーに実際のサイト上でそのアイコンの1バージョンを見てもらい、それ以外のユーザーには別のアイコンを見てもらおう。そして、ユーザーがそのアイコンをクリックしてすぐに元のページに戻るかどうかと同様に、アイコンのバージョン間のインタラクション率の差異を測定しよう。この行動はプロービングと呼ばれ、情報の匂いが弱いことのシグナルであることが多い。なぜならば、ユーザーがアイコンの背後にあったコンテンツに失望して、前のページに戻ったということを表しているからだ。最適なグラフィックについてのテストでは、アイコンの位置とラベルが同じ状態であることを確認し、ユーザーの行動に変化をもたらす変数が決して他にないようにしよう。

魅力のテスト方法

再認性のテストに加えて、アイコンはそのアイコン個別およびアイコンファミリーの一員としての魅力もテストされるべきである。そもそも、アイコンを利用する理由として多いのは、デザインに視覚的な訴求力を追加するためである。しかし、すべてのアイコンが同じように見た目がいいわけではないからだ。

魅力についての最もシンプルなテストは、ユーザーに各アイコンを1から7の尺度で評価してもらうことである。また、もしひとつのアイコンにいくつかのデザイン候補があるなら、候補案のセットごとに最も魅力的なアイコンを選んでもらってから、個々の画像について、なぜ好きなのか、嫌いなのかを説明してもらうとよい。そして、最後にアイコンファミリー全体を見せて、最も好きなアイコンと最も好きではないアイコンを選び出してもらおう。この最後のテストによって、ほとんどのアイコンは問題ないのに、全体のデザインの美しさに合うように1つか2つの魅力に欠けるアイコンのデザインをやり直さなければならないというよくある問題が避けられるようになる。

標準的なユーザビリティテストとアイコンのテスト

標準的なユーザビリティテストでもアイコンに関する課題を明らかにすることは可能だ。しかしながら、標準的なユーザビリティテストでアイコンが無視される理由にはいろいろな可能性があり、その中にはアイコン自体のユーザビリティには無関係なものもありうることは覚えておいてほしい。たとえば、アイコン以外のインタラクションあるいはサイトデザインの要素に、ユーザーが気を取られてしまってまったくタスクを達成できない、ということもありうるからだ。また、仮にアイコンのデザインに落ち度があったとしても、ユーザーがアイコンを再認できないのか、あるいは、意味を理解できないのか、それとももしかすると単にアイコンを見つけられないのか、というアイコンのどの側面が問題なのかを正確に指摘するのは難しい。

例を挙げると、論争の的となったある大学サイトのデザイン変更の調査では、「最近見たページ」を示す時計アイコンにインタラクトした参加者は1人もいなかったが、その理由がヘッダー内にあるアイコンに気づかなかったからなのか、それとも、そのコンテキストでは時計の意味がわかりにくかったからなのかを標準的なユーザビリティテストで理解するのは難しい。

数多くの要因がからんでくるので、標準的なユーザビリティテストのみでアイコンのユーザビリティを判断してはならないのである。

製品開発のフェーズ

すべてのUXの調査手法同様、アイコンのテスト方法の選択には、プロジェクトライフサイクル内での現在のステージを考慮するとよい。

  1. 戦略策定: この初期のコンセプトフェーズでは多数のデザインのオプションを観念化して検討できるテスト方法に重点的に取り組もう。再認性や情報の匂い用のコンテキストなしのテクニックはこの時期に利用するのが最も適切だ。それによって、そもそもアイコンを使ってもよいのかを判断してから、そのアイコンの適切なメンタルモデルを絞り込もう。
  2. 実行: デザインおよび実装をおこなうこのステージでは、自分たちのシステムに最適なアイコンデザインに継続的に導いてくれる調査方法に重点的に取り組もう。再認可能とされたアイコンのデザインに対して、明確な勝者となるアイコンが出てくるところまで、コンテキストなしの魅力についてのテストを集中的におこなおう。そして、UI以外のデザインを終えたところで、アイコンのテストをコンテキストありの方法に切り替えよう。発見までの時間測定はアイコンの見つけやすさと、考えられるインタフェースバリエーション内でのアイコンの配置の定量化の助けとなる。また、(ペーパープロトタイプから始めて、忠実度を段々上げていく)ユーザビリティテストをすることで、アイコンに期待される意味と発見しやすさについての知見もさらに得ることができる。
  3. 評価: システムや機能のローンチ後は、成功度を測定して、漸進的な改善を可能にする方法が最適だ。パフォーマンスの追跡には、ユーザビリティ調査と併せたベンチマークテスト、そして、発見までの時間測定を定期的におこなうとよい。1つのアイコンを改善し続けていくには、パフォーマンスを測定して、最適なデザインを判断するA/Bテストが最適な方法である。

そのほかの留意点

すべての調査手法同様、テストには絶対にバイアスが入らないようにしよう。タスクの言い回しに使う用語にはとりわけ注意しよう。そうした用語はアイコンを連想させるイメージの先行刺激になりやすいからだ。特にコンテキストなしのテスト方法の場合には、質問の言い回しを(同義語を使ったり、ブランドの表現を外したりするなどして)さまざまに変えて、複数回の調査を実施することを検討し、タスクの言い回しが回答の選択に影響を与えるということがないようにしよう。

ユーザブルなアイコンデザインを達成するためには、今回のテスト方法をすべて利用しなければならないというわけではない。しかし、さまざまな目的やデザインプロセスのステージで、そうした方法はそれぞれに有益である。また、各々のテスト方法は反復して利用されなければならない。そうすることで、アイコンとラベルの関係が徐々に有意義なものになるし、インタフェース内での配置も段々最適化されていくからである。

モバイルデザインでのアイコンとその利用法についてさらにくわしくは、我々の1日トレーニングコース、「モバイルとタブレット向けのビジュアルデザイン」の受講を検討してみてほしい。