ソリッドとアウトライン、どちらのアイコンが認識しやすいか

Post on:2019年3月12日

アイコンのスタイルがユーザビリティに与える影響

スマホアプリを構築する際は、ソリッドとアウトラインのアイコンのどちらを使用するか決めなければならない場合があります。
どちらのアイコンがユーザーにとって良いと思いますか？

ソリッドとアウトラインのアイコン

この2つの違いは単なる好みの問題だと考える人もいますが、それ以外にも認識率が速いということが研究によって示されています。

どのような場合にソリッドを使い、アウトラインを使うべきかを制作者が知っていると、スマホアプリをユーザーは簡単に操作できるでしょう。ユーザーはアイコンをより早く認識し、正しいオプションを選択することができます。

「アイコンのスタイルがユーザビリティに与える影響（The Impact of Icon Style on Usability）」では、アイコンのスタイルがタスクのパフォーマンスに影響することが見いだされています。タスクのパフォーマンスとは、アイコンの認識と選択するスピードと正確さによって測定されます。

ソリッドアイコンは、アウトラインのアイコンよりも一般的に認識が速いですが、いくつか例外があります。そして、いくつかのアイコンはタスクの時間に相違はありません。これは「特徴的な手がかり」と関係があります。

アイコンにおける特徴的な手がかり

「特徴的な手がかり」とは、ユーザーがアイコンを識別するために使用するものです。もし特徴的な手がかりがない、または気付きにくい場合、アイコンは識別できなくなります。いくつかその例を見てましょう。

各アイコンの特徴的な手がかり

例えば、1つ目のコメントアイコンはその末端が特徴的な手がかりです。それが無いと、アイコンはただの円です。2つ目の錠アイコンは鍵穴が特徴的な手がかりです。それが無いと、カバンに見えるかもしれません。3つ目の歯車アイコンは歯が特徴的な手がかりです。それが無いと、ドーナツに見えるかもしれません。

調査で使用された鍵アイコンには鍵穴がなく、失敗の1/4を超える最も誤認されやすいアイコンでした。鍵穴は必要な特徴的な手がかりです。それが無ければ、アイコンはカバンやハンドバッグ、さらにはポットのように見えるかもしれません。

これらの特徴的な手がかりは、ユーザーがアイコンを認識する際に頼るものです。アイコンを使用する時は、アイコンを識別するために必要なすべての特徴的な手がかりが含まれていることを確認してください。もしアイコンが別のオブジェクトのように見える可能性がある場合は、アイコンに特徴的な手がかりを加えることを検討してください。

アウトラインアイコンが速い場合

特徴的な手がかりを含めることに加えて、手がかりは際立っているかまたは気付きやすいものでなければいけません。そして、特定のアイコンの特徴的な手がかりは、ソリッドよりもアウトラインの方が際立っていることがあります。

アウトラインの方が目立つ場合

この調査では、アウトラインのスタイルで認識しやすい3つのアイコン、コメント、ゴミ箱、鍵が見つかりました。これらのアイコンで共通しているのは、形の外側の端に現れる特徴的な手がかりです。そのため、アウトラインは手がかりを気付きやすくします。

コメントの末端はソリッドだと見逃しがちですが、アウトラインではっきりしています。ゴミ箱のふたはソリッドでは気付きにくいですが、アウトラインでははっきり見えます。鍵の歯は微妙ですが、ギザギザのエッジはアウトラインの方がよりはっきりしています。

ソリッドより、アウトラインの方が分かりやすい

アイコンの特徴的な手がかりが繊細で、形の端に配置される場合は、アウトラインスタイルを使用します。これにより、手がかりがより際立ち、認識が速くなります。

アイコンを使用する時は、一貫したスタイルを使用することがベストです。ソリッドとアウトラインを混在させるのではなく、特徴的な手がかりが外側を向く鋭い角度のアイコンをセットに選択してみてください。

手がかりが同じタイプのアイコンをセットにする

例えば、コメント、ゴミ箱、鍵のアイコンをより目立つ手がかりのものと比較すると、違いが分かります。より目立つ手がかりは、はみ出していて気付きやすいです。

ソリッドアイコンが速い場合

ほとんどのアイコンは現実世界の物理的なオブジェクトを表します。これらのオブジェクトはしっかりした形をしており、シルエットとして表示されます。アイコンをアウトラインとして表示することは、最も見慣れたものを現実的に表現したものではありません。これがソリッドアイコンの認識が速い理由です。

ソリッドの方が目立つ場合

それでも、ユーザーはアウトラインアイコンをまだ認識することができます。しかし、アイコンの形の輪郭が近すぎると、認識するのに時間がかかります。

調査によると、親指、はさみ、電話、ツールのアイコンは、ソリッドスタイルで認識されやすいことが分かりました。共通点はこれらのアイコンの手がかりの内側にあるスペースが狭く、視覚的なノイズが発生するからです。

ソリッドの方が分かりやすい

内側にわずかなスペースを持つオブジェクトは、ソリッドアイコンを使用するのがベストです。シルエットはよりシンプルな形を提供し、アイコンをより識別しやすくします。

スタイルに違いがない場合

どちらのスタイルでも認識しやすいアイコンがこの調査で見つかりました。例えば、スター、ショッピングカート、旗のアイコンの認識時間はほぼ同じです。

ソリッドとアウトラインのどちらでも違いがない場合

違いがないというのは、これらのアイコンはアウトラインスタイルでも認識が遅くならなかったことを意味します。その理由は、内側のスペースが広いので視覚的なノイズが減少するからです。内側のスペースが狭ければ狭いほど、ノイズが多く発生し、それが認識を妨げます。

ボタンとしてのアイコンを使用する場合

タブでアクティブなボタンを強調するにはソリッドのアイコンを使用し、他のボタンはアウトラインにするのが一般的でした。しかし、このデザイン手法は過去のものであり、現在では逆の手法が支持されています。

左:過去のデザイン、右:現在のデザイン

ユーザーはすでに選択しているオプションではなく、未選択のオプションに対してより速い認識速度が必要です。アクティブなボタンのためのソリッドが必要ではありません。逆に、非アクティブなボタンをソリッドにすることがより重要です。

アクティブなボタンを強調するには、アウトラインを使用します。ソリッドではありません。選択されたボタンを強調するスタイルとカラーによる明確な変化を提供します。

ソリッドとアウトライン、どちらを選ぶかのガイドライン

もしタスクのスピードがユーザーにとって重要な場合は、アイコンの認識率を考慮する必要があります。そして、より速い認識率を望むのであれば、ソリッドスタイルのアイコンが優れています。ただし、このルールには念頭におくべき例外があります。ルールの例外を知っていれば、状況に応じてアウトラインスタイルを利用できます。

まとめると、アイコンのスタイルを使用する際に注意すべき点は下記のとおりです。