モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。
単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。
ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。
「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率に影響を与えることがわかりました。作業効率は、アイコンを認識および選択するスピードと正確性で測定されました。
総じてソリッドアイコンのほうがアウトラインアイコンよりも早く認識されましたが、例外もありました。いくつかのアイコンに関してはタスクの処理時間に違いが見うけられませんでした。これは特徴を示す手がかりに関係しています。
特徴を示す手がかり
特徴を示す手がかりはユーザーがアイコンを識別するときに使われます。もし特徴を示す手がかりがなかったり、わかりづらかったりすると、アイコンは認識できなくなります。
たとえば、吹き出しのアイコンは、しっぽが特徴を示す手がかりです。これがなければ、単なる丸です。南京錠のアイコンは、カギ穴が手がかりとなります。カギ穴がないと、カバンのアイコンと間違えられやすくなってしまいます。歯車のアイコンでは、歯の部分です。これ無しでは、ドーナッツのように見えてしまいます。
この調査に使われたカギ穴のない南京錠アイコンは、もっとも誤認の多かったアイコンです。調査で生じたすべての間違いのうち、４分の１以上を占めました。カギ穴がなければ、カバンや財布、場合によってはポットのようにも見えてしまうので、カギ穴は重要な特徴を示す手がかりなのです。
特徴を示す手がかりはユーザーがアイコンを認識するときの助けとなります。アイコンを使う場合は、ユーザーがアイコンを識別するために必要な、すべての手がかりを含ませるようにしてください。もしアイコンが別のものに見える可能性がある場合は、ほかの特徴的な手がかりを追加することを検討しましょう。
アウトラインアイコンの認識が速い場合
特徴を示す手がかりを含めることのほかに、その手がかりは気がつきやすく、際立ったものでなければいけません。ソリッドスタイルよりもアウトラインスタイルのほうが、特徴を示す手がかりが際立つ場合があります。
吹き出し、ゴミ箱、カギの３つのアイコンは、アウトラインスタイルのほうが速く認識されることが調査でわかりました。この３つのアイコンでは、先端に微妙な手がかりをもっています。このため、アウトラインスタイルのほうが、その手がかりに気づきやすくなります。
吹き出しのしっぽは、ソリッドでは見落としがちですが、アウトラインではより認識しやすくなります。ゴミ箱のフタは、ソリッドでは気づきにくいですが、アウトラインでは見やすくなります。カギの歯は微妙な形ですが、アウトラインではそのギザギザのエッジがはっきりしています。
アイコンの特徴を示す手がかりが微妙で、形状の先端に現れている場合は、アウトラインスタイルを使いましょう。これによって、その手がかりが際立ち、すばやく認識されるようになります。
アイコンを選ぶときは、一貫したスタイルを保つのがベストです。ソリッドとアウトラインを混在させずに、鋭く外へ突き出した、特徴をはっきりと示す手がかりをもったアイコンセットを選んでみてください。
たとえば、吹き出し、ゴミ箱、カギのアイコンをもっと顕著な手がかりをもったものと比べると、その違いがわかります。手がかりがはっきりと外側へ突き出すほど、認識しやすくなるのです。
ソリッドアイコンの認識が速い場合
ほとんどのアイコンが現実世界の物質的な形を表しています。これらの形が塗りつぶされ、シルエットのように表現されます。アウトラインアイコンは、ほとんどの人が見慣れているものを現実的に表現していません。これがソリッドアイコンの方が速く認識できる理由です。
それにもかかわらず、ユーザーはアウトラインアイコンを認識できます。しかし、アイコンのアウトラインの線が密接しすぎていると、認識できるまでの時間は長くなるでしょう。
親指、はさみ、電話、そしてツールのアイコンはソリッドスタイルの方が速く認識できることが調査でわかりました。これらのアウトラインアイコンは、手がかりとなる部分の内側のスペースが狭く、視覚的なノイズが発生するためです。
内側のスペースが狭いオブジェクトにはソリッドアイコンを使うのがベストです。シルエットは形がシンプルで、アイコンの判別がよりしやすくなります。
スタイルによる違いが出ない場合
どちらのスタイルでも認識しやすいアイコンも調査で見つかりました。たとえば、星、ショッピングカート、旗のアイコンはどちらのスタイルでも認識されるまでの時間はほぼ同じでした。
これは、アウトラインスタイルでもユーザーの作業スピードは遅くならなかったことを意味しています。これらのアイコンは内側のスペースが広く、視覚的なノイズを軽減させたためです。内側のスペースが狭くなるほどノイズが多く発生し、認識の妨げとなります。
選択ボタンのアイコンスタイル
タブバーにおいて、アクティブなボタンに対してソリッドアイコンを使い、それ以外のボタンはアウトラインのままにしておくのは一般的な方法です。しかし、このデザインの方法は逆効果であるため、塗りつぶされたソリッドアイコンを使うべきです。
ユーザーはすでに選択したものではなく、まだ発見していない選択肢に対する認識スピードを速める必要があります。アクティブ状態のボタンがソリッドアイコンである必要ありません。非アクティブ状態のボタンをソリッドアイコンにするほうが重要なのです。
アクティブなボタンを強調するためには、ソリッドアイコンではなく、アウトラインアイコンを使いましょう。選択されたボタンを強調する、スタイルと色の明確な変化をもたらしてくれます。
これからのアイコンのガイドライン
作業スピードがユーザーにとって重要であるなら、アイコンの認識速度を考慮しなければなりません。認識速度を速めるには、ソリッドアイコンのほうが適しているでしょう。しかし、留意すべき例外があります。これらの例外を知っておくことで、状況に応じてアウトラインスタイルを使うことができます。
アイコンスタイルの選択において覚えておくべきことをまとめます。
- アイコンはそれぞれを明確に判別できる特徴的な手がかりで構成されている
- 手がかりが微妙で十分に目立ってない場合以外は、ソリッドアイコンの方が速く認識される
- 内側のスペースが広い場合は、アウトラインアイコンのほうが認識されやすい
- ソリッドアイコンにしたとき、微妙な手がかりが先端にある場合は、アウトラインアイコンに変更する
- アウトラインアイコンにしたとき、内側のスペースが狭い場合は、ソリッドアイコンに変更する
