Image credit: icons8

人間とコンピュータとのやり取りにおいて、アイコンはテキストにはない長所がいくつかあります。

• シンプルで分かりやすくフレンドリー。長い文章と置き換えることができる。
• 画面の中で場所を取らず、特に小さいスクリーンほど使い勝手がよい。
• 視覚的に楽しみがあり、デザインの芸術性を高めることができる。
• 一番重要なポイントとして、ほとんどのアプリがアイコンを用いており、ユーザーにとって親近感のあるデザインパターンである。

これらの潜在的な長所がある一方で、アイコンはその潜在的な短所を考慮せずにデザインされると、ユーサビリティ面での問題を引き起こします。

この記事では、UIの点からアイコンに関連した多くの問題を要約して解説し、これらの問題に対する対処法を述べていきたいと思います。

１．アイコンは意味を伝えるもの

理解しにくいアイコンが、伝えるべき機能を分かりにくくしてしまうことがあります。アイコンは意味を伝えることが、その第一の役割です。アイコンとは、物事や行動を視覚的に表現するものと定義されています。その物事や行動がユーザーにとって分かりにくければ、アイコンは実用性を失ってしまい、よく分からない目障りなものとなってしまうでしょう。

アイコンには、世界中のユーザーにとって分かりやすいものとして使われているデザインがいくつかあります。ホームやプリンター、検索用の虫眼鏡などがその例です。

すぐに何を表しているが分かるアイコン。Image credit: icons8

しかし、これら以外のほとんどのアイコンはさまざまな意味に解釈されるため、ユーザーにとって分かりにくいものとなっています。例えば、下のGame Centerのアイコンは、ガラスのような形のカラフルな丸の集合です。これは何を意味するアイコンでしょうか？　どのように、ゲームと関連しているのでしょうか？

Game Centerのこのアイコンでは、ゲームというコンセプトが伝わらない。

もう一つ、違う例を挙げましょう。GoogleがGmailのUIをシンプルなものに変更した際に、抽象的なアイコンの中にすべての機能を移動しました。この時、「Google Calendarはどこにあるのですか？」という問い合わせが殺到したそうです。

Gmailのデスクトップ用ユーザーインターフェイス

自分がそのアイコンが何を表しているかを分かっていても、初めてそれを見るユーザーが理解できるとは限りません。そして、ユーザーが抽象的な絵文字に慣れているだろうと仮定することは、よくある間違いです。

アイコンが最も重要な役割は、ユーザーが辿り着きたいところに、彼らをガイドすることでり、この目的が確実に果たせるようにしなければなりません。

1. ５秒間ルールを用いましょう：適切なアイコンだと把握するのに５秒以上かかるようならば、そのアイコンは意味を効果的に伝えることができていないでしょう。
2. 親しみやすいアイコンを選びましょう：ユーザーは過去の経験に基いてアイコンを理解しています。競合サービスが使っているアイコンや、一般的に用いられているアイコンをよく調べておきましょう。一般的なアイコンは、ユーザーにとって認識しやすいものです。

２．シンプルで簡略化されたアイコンにする

多くの場合、アイコンはクリエイティブな領域ではありません。悪い意味で受け取らないでください。クリエイティブなアイコンが悪いと言うのではありません。しかし、基本機能のアイコンがあまりにファンシーなアイコンでは、UXの観点からも悪影響を及ぼしかねません。

もしデザインのスキルを磨き上げたいのなら、他のデザイン要素を利用して製品メッセージを伝えましょう。そして、アイコンに関しては、シンプルで分かりやすいものにしてください。

それぞれのアイコンは、最小限の形に簡略化されるべきです。また、シンプルなアイコンは、覚えやすいものでなければなりません。上手くデザインができれば、アイコンは小さいサイズであっても明確で伝わりやすく、一目で何であるか認識しやすいものです。

３．テキストラベルを付け加える

よいUXを定義するのには多くの指標がありますが、その中の一つとして、ユーザーが考えなければならない手間を省くという点が挙げられます。わかりやすいことは、よいインターフェイスにとって最も重要なことです。

ユーザーが考えることなく必要なことを行えるように、アイコンはサポートするべきです。しかし、ユーザーは過去の経験を元にアイコンに対して複数の意味合いを連想してしまうという問題があります。

Apple Mailのカスタマイズ画面。それぞれのアイコンが何を意味しているものか、正確に理解することができますか？　Image credit: ia

また、ユーザーは（特にモバイルユーザーは）それぞれのアイコンの意味を知るために、全てのアイコンをクリックすると考えるのは勘違いです。実際には、ユーザーは見慣れないインターフェイスには積極的に関わろうとしないことが多く、自分のコンフォート・ゾーンの外のことに関して知ろうとはしません。

ほとんど全てのアイコンが抱えている曖昧性の問題を解決するには、アイコンのテキストラベルを表示して、コンテキスト毎の意味を明確にすると良いでしょう。アイコンは、ユーザーがクリックやタップをする前に、簡単に機能を予測できるようにする必要があります。

同じアイコンにラベルを付けたもの。ラベルがアイコンを説明しているので、ユーサビリティが向上した。Image credit: ia

「ラベルあり vs ラベルなし」のアイコンに関するユーザーテストの結果では、以下のことが分かっています。

1. ラベルありのアイコンでは、88％のユーザーは、アイコンをタップすると何が起こるかを正しく予測することができた。
2. ラベルなしのアイコンでは、その確率が60％まで低下。そのアプリ特有のラベルなしアイコンのテストでは、タップすると何が起こるかを正しく予測できたユーザーはわずか34％だった。

また、３つの重要な瞬間が考慮すべきこととして挙げられました。

1. 絵文字で表現できることは限られているので、複雑なアクションや抽象的な機能は、常に適切なテキストラベルと一緒に表示されるべきです。
2. アイコンのラベルは常に見えやすいようにしなければならず、ユーザーごとに解釈が分かれてはいけません。デザイナーの中には、ラベルを用いることはアイコンの目的を損ない、インターフェイスを乱雑にすると考える人もいます。また、ラベルの使用を避けるために、アイコンに関するインストラクションをチュートリアルやポップオーバーで行うこともあります。しかし、ユーザーはチュートリアルを読み飛ばしてしまったり、内容をすぐに忘れてしまったりするかも知れません。さらに、テキストラベルを表示させるためのホバー機能に頼らないようにするべきです。ユーザーに余分な行動を要求するだけでなく、タッチスクリーンの場合には機能しません。
   

   Swarmのアプリはポップオーバーを用いて、ユーザーをガイドしようとしている。

3. ラベルとイメージの両方を用いるのが良いです。しかし、どちらか一方だけならば、イメージよりも短い言葉のテキストの方が分かりやすいです。アイコンとラベルでわかりやすさを比べた場合、ラベルの方が常に勝っています。

４．確実にタッチしてもらうようにする（モバイルアプリの場合）

タッチすることを前提としたユーザーインターフェイスでは、ユーザーは指を使って画面を操作します。アイコンが小さすぎるせいで、ユーザーが操作ミスをしてイライラすることのないように、指の動きをあったUIを構築しなくてはなりません。

下の画像は、平均的な成人の指の動きが、約11mmの範囲であることを表すものです。赤ん坊だと８mmですが、あるバスケットボール選手の場合では19mmもの大きさになるそうです。

モバイルの操作において、「指が太すぎる」と言う人がよくいるが、赤ん坊の指でさえ、モバイル上のアイコンよりも幅がある。Image credit: Microsoft

スクリーン上のオブジェクトとして、推奨されるサイズは７～10mmの範囲です。AppleとGoogleのガイドラインでは、以下のように推奨されています（iOSヒューマンインターフェイスガイドラインとマテリアルデザインにおいて）：

1. Appleは、44ピクセル×44ピクセルをタッチターゲットの最小サイズとして推奨しています。物理的なピクセルサイズはスクリーンの密度により異なりますが、このAppleのピクセル仕様は、iPhoneの320×480ピクセル、3.5インチディスプレイに最適です。
2. Googleでは、タッチターゲットは少なくとも48×48dpにすることを推奨してます。それぞれのアイテムは情報の密度とユーサビリティの均整を保つために、だいたい８dpのスペースをもって区切られるのが良いでしょう。48×48dpという大きさは、スクリーンの大きさに関わらず、だいたい９㎜のサイズになります。対象となるアイテムは、ユーザーの入力に対応する範囲に及び、要素の視覚的な境界を超えた空間を含みます。アイコンのような要素は、24×24pdの大きさと表示される場合でも、その周りの最大で48×48dpの領域がタッチの対象となるようにします。

24dpのアイコンの隙間となる空間。タッチの領域は上下左右、それぞれ48pd。Image credit: Material Design

配置の仕方。Image credit: Material Design

操作中の動作における重要なこととして、以下の点を考慮しましょう。

1. オブジェクト間に十分なスペースを設けましょう。アイテムの間に最小限のスペースを設定する主な理由は、ユーザーが違うアイテムをタッチしてしまう間違いを防ぐためです。これは、「保存」や「キャンセル」などのアイコンを用いたユーザー・シナリオにおいてはとても重要です。この場合では、少なくとも２㎜のスペースを設けることが特に重要です。

アイテム間に最低10mmの空間を設けること。

５．特定の環境に依存するアイコンを使い回さない

アンドロイドやiOSに向けたアプリを構築する際に、他のプラットフォームのUI要素を使い回してはいけません。それぞれのプラットフォームは、新しいドキュメントのシェアや作成、削除などの共通的な機能に関して、アイコンをセットで提供するのが一般的です。

制作したアプリを他のプラットフォームに移行する場合は、特定のプラットフォーム用のアイコンは、それと対応するものに交換しなければなりません。

共通の機能に関するアイコン。（上）アンドロイド（下）iOS

６．アイコンをテストする

アイコンは、最大限の配慮をもって扱われる必要があります。常にユーサビリティのテストを行うようにしましょう。

一度、インターフェイスに慣れてしまうと、自分が作ったアイコンが直感的に意味がわかるものかを判断するのはなかなか難しくなるでしょう。なので、初めてUIに触れるユーザーがどのように反応をするかを理解することがとても重要です。そうすることで、自分のアイコンが明確かどうかを判断することができるようになるでしょう。

1. 認識のしやすさの点からアイコンをテストしましょう。ユーザーに、そのアイコンが何を表していると思うか聞いてみましょう。何をするアイコンかわからないものは避けるべきです。
2. 覚えさすさの点からアイコンをテストします。記憶しにくいアイコンは、あまり効果的ではありません。ユーザーに対してアイコンが何を表しているか伝えた数週間後に、改めてそのアイコンの意味を覚えているか質問してみましょう。

結論

アイコンはUIデザインの中核と言える部分です。インターフェイスのユーサビリティを、良くも悪くもします。そのほかのUXデザインと同じように、どのようなアイコンも目的をもって存在しています。

正しくアイコンをデザインすることで、ユーザーが直感的にどこに行きつくべきかわかるようになるでしょう。