web-dev-qa-db-ja.com

メニューのフルカラーアイコンとグレー表示されたアイコン

多くの場合、メニューのアイコンはフルカラーです。アイコン/メニュー項目が制御するページがアクティブでない場合でも、アイコンは通常の色合いで表示されます。アクティブなアイコンを区別するために、デザイナーはアイコンを囲む背景色を頻繁に変更します。例として、Google Chrome開発者ツールバー...

Chrome full color toolbar

しかし、別の一連の技法を使用することができます。 1つのオプションは、アクティブではないアイコンのバージョンを洗い流すことです。そのため、Chrome開発者ツールバーは次のようになります。

Chrome greyed-out toolbar

または、WordPress管理ダッシュボード画面を検討してください。ここでは、アクティブなアイコンのみに色が付いています。 Wordpress dashboard, very gray

私の質問:

  • どのオプションが望ましいと思いますか?
  • メニューアイコンがアクティブではない場合でも、すべてのメニューアイコンをフルカラーにするのは面倒ですか?
  • この(可能な)気晴らしのレベルは、ページの他の重要な要素を検討する際に考慮しなければならないものでしょうか?
  • この分野のユーザビリティ調査はありましたか?

灰色で表示されたアイコンが「無効」を示すという反応である場合、フォローアップの質問は次のようになります。すべてのアイコンが灰色表示されたバージョン(Google Analyticsの場合)である場合、フルカラーアイコンよりも望ましいと思いますか?

12
mg1075

興味深い質問といくつかのポイント:

  1. 時々灰色になっているのは、セキュリティ/権限の観点から「これに触れられない」という意味で使用されています。
  2. あなたの主な例では、まだ「うつ病」とアクティブの境界があります

私は個人的に強い好みはありませんが、私の傾向は、非アクティブをグレー表示するのではなく、アクティブを示すために異なるサイズ/マーキングを表示することです。

12
Chris Kluis

私は昨年、これについて非常に小さな調査を行いましたが、あまり堅固ではありません。同じスクリーンショットの2つのバージョンをユーザーに提供しました。1つは色付きのアイコン、もう1つはグレー表示されたもの(データベース管理アプリ)でした。 200人に、どちらを好むのかと理由を尋ねました。

  • ユーザーの80%がカラーバージョンを好みました。一般的には、アクションを見つけるのに役立つ視覚的な手がかりを提供していると感じています。
  • 20%はグレー表示が優先され、インターフェイスの方がこのように読みやすくなっている(アイコンラベルなど)と述べています。

そのため、システムメニューにはグレー表示のアイコンとその他すべての色のアイコンを表示する必要があるという個人的な規則を思いつきましたが、それは私の経験則です。用途にもよりますね。

2
ekapros

グレイウォッシュされたアイコンは、無効にされたアイコンと明確に区​​別できます(例:コントラストが有効で、フルコントラストの意味が有効になっている、または無効になっているアイコンが、フォントのように浮き上がった/埋め込まれた外観を採用している)。

考慮すべき点がいくつかあります。 1つには、wordpressインターフェースとgoogleの両方に表示されるアイテムは、アクションを表すボタンではありません。これらは、ビュー/スクリーンを表すものです。そのため、アクティブとアクティブを区別する必要があります。そもそも非アクティブ(アクションを表すボタンはクリックに応答するだけですが、クリックが登録された後、ボタンは元の押し下げられた状態に「バウンス」します。)

また、通常、アクションよりもビューの数が多いため、色が混雑しやすくなる可能性があります。私の主張を裏付ける研究はありませんが、アイコンが小さいほど(形状の違いが少ないことを補うために)より多くの色が必要だと感じています。低頻度のユーザーは、一目で見られる明るいはっきりした色からより多くの利益を得ます。上級ユーザーは、インターフェイスを解読する方法として、ボタン(およびテキスト)の位置に慣れています。これらの上級ユーザーは、インターフェースを落ち着かせ、ページ上の他のことを示すのに役立つ色を使用できるため、色を少なくすることができます(ソースコードの色分け、またはエラー発生時のネットワークアイコンの色付けなど)。

グレースケールアイコンを使用しても、実際にはグレー表示しなくても、コントラストを適度に高くしておけば、意味を失うことなくうまく使用できると思います。 (実際、私たちのアプリケーションでは、明るく鮮やかな色のアイコンがいくつかの高速で頻繁に使用されるツールへのクイックボタンとして使用されています。詳細ページは、すべての非アクティブページにグレースケールアイコン+テキストのタブ付きインターフェースを使用しています。)

1
Inca

2つのスクリーンショットを比較すると、フルカラーの唯一のメニュー項目である場合、現在表示されているメニュー項目を認識するのははるかに簡単です。さらに、他の非アクティブなメニュー項目は、実際には無効になっているという結論を下すのに十分なほど白っぽく表示されません。私が言いたいのは、この効果は合理的な疑いを超えてさらに強調できるということです。

考慮すべきもう1つの点は、視覚的な外観のためにメニュー項目が無効になっているように見えても、ユーザーがインターフェイスを探索しているときに項目を操作してこれを確認することは珍しくないということです。つまり、アイテムが実際に有効になっていることがわかります。したがって、すべてのアイテムに色を使用することで各アイテムが有効であることをユーザーに明示的に通知することで短期的に得られるメリットは、現在の場所を常に特定しやすくなるため、長期的に得られる価値はありません。

1
Bredcrumbs

灰色のアイコンはロックされた機能または到達できない機能を示すというコンセンサスに同意する必要があります。 @Ben Durnellは、ハイパーリンクを示す青いテキストのため、Wordpressで機能することを指摘しています。

ただし、フルカラーのアイコンは気を散らすものであることに間違いはなく、色は何かに注意を向ける最も強力な方法の1つだと思います。 Googleの例で使用されているように、色は圧倒的に見えます。アイコンの色の選択は、ページ上の要素に対して確実に考慮し、比較検討する必要があると思います。

個人的に、私は真ん中の何かで実験しました。すべてのアイコンに色を使用しますが、カラーパレットを制限し、非アクティブなアイコンの不透明度を減らして色を「洗い流して」みてください。

0
Adam Waselnuk

カラーアイコンを使用する場合、グレースケールアイコンは、色あせていても、通常は無効なアイコンを示していました。個人的には、クリックする前に無効になっていると思いました。これは、WindowsとMac OS Xの両方(そしておそらくLinuxも)のUIに共通の要素です。

上のスクリーンショットで押されたボタンの背景は、現在アクティブな画面を示すのに十分です。

0
Nick Bedford