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

アイコンのスタイルをソリッドとアウトライン、どちらを使用するか決めなければならない場合がありませんか？ 好みで決めるという人もいるかもしれませんが、それぞれ分かりやすい場合と分かりにくい場合があります。 どのような場合にソリッドを使い、アウトラインを使うとよいのかを紹介します。 ちなみに下記は、左が過去のデザイン手法、右が現在のデザイン手法です。 Solid Vs. Outline Icons: Which Are Faster to Recognize? by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アイコンのスタイルがユーザビリティに与える影響 アイコンにおける特徴的な手がかり アウトラインアイコンが速い場合 ソリッドアイコンが速い場合 スタイルに違いがない場合 ボタンとしてのアイコンを使用す

[coliss]

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

[fai_fx]

ON=ソリッド OFF=アウトライン だなぁ。認識速度よりも、意味性の誤解を避けるべきやろ。

[kns_1234]

多くの場合はソリッド（塗りつぶし）アイコンのほうが認識しやすいと思う。

[sigwyg]

※シンプルアイコンの場合

[norando]

基本的にはアイコンの特徴に応じてケースバイケース（ただし混在はさせない）／メニューボタンとしての利用には非アクティブに認識しやすいソリッドを使う

[fb001870]

結論書いてくれたコメントありがとう

[pixmap]

選択できないinactiveか、選択されていないunselectedかの区別に使うべきだと思う。どちらがどっちかは、サイト全体のデザインによるとしか。

[sirobu]

一方日本人はテプラで説明を貼った

[konisimple]

ソリッドとアウトラインの認識速度の違い。個人的にはアクティブ=ソリッド、非アクティブ=アウトラインのマインドセットの人が多くてこれを逆にするには、色をつけるとかしないとまだ早い気がする

[zyzy]

なかなかに微妙な部分で差が出るんだな。

[teracy_junk]

人が何を手掛かりに形を認識するのか、おもしろいな

[og24715]

今は昔PixivBOOTHのお気に入りは、ON/OFFをsolidかoutlineかで表現していてどちらも同じ赤色だったので最悪だった。アイコンの形状で状態の違いを表すという体験がなければ赤いoutlineをONと勘違いする可能性があった

[verda]

最近Gmailのアプリはアウトラインになったよね

[adsty]

アイコンのスタイルを使用する際に注意すべき点。

[tjmtmmnk]

なるほど

[nisisinjuku]

デザインごとに使い分けないと。ソリッドの方はベタ面がおおくて悪目立ちになる可能性が高いしな。

[ntstn]

アクティブがソリッドのほうが個人的には認識しやすいなぁ。

[zazietokyo]

こういうのは「どこでどういう用途で使うか」で選択するだけとしか思えないんだけど？と思って一応読んだら、結論のところにその目安的なのが書いてあって、結局「どちらの」って話しでもなかった。

[otihateten3510]

こんなに考えてんのか

[cartman0]

基本ソリッドにして反転を意識する場合アウトラインかしら

[gcyn]

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

[shikiarai]

難しいところだけどそうじゃない気がする