web-dev-qa-db-ja.com

灰色は常に無効な状態を表しますか?

最近、Webアプリの管理モジュールのスタイルを更新しました。ボタンが再設計され、新しい色がさまざまな状態に導入されました。

さまざまなセクションで、ホバリングに関する情報(用語またはヘルプについて)を表示する小さな疑問符アイコンを使用しています。

今、そのアイコンの色は灰色です。私はそれをより目立たせず、少し控えめにしないように故意にそれを保ちました。 enter image description here

私のチームの一部の人々から得ている議論は、ヘルプアイコンが「無効な」ボタンの存在下で表示されると、「ヘルプアイコン」も無効になっているような印象を与えるということです。

これが本当ならあなたの意見が欲しいだけです。あなたの意見。この理由でアイコンの色を変更することを検討する必要があります。いいえの場合、仲間のメンバーに理解してもらうために私が与える可能性のある裏付けとなる理由は何ですか。

2
pzv

私の短い答えはノーです。 灰色は常に無効な状態を表すわけではありません。アプリの使い方、コンテキスト、配色に依存すると思います。

最初の例として、メールサインアップポップアップを取り上げます。いくつかのニュースWebサイトにアクセスすると、ページが読み込まれるとすぐに、いくつかの入力と通常は[キャンセル]と[サインアップ]の2つのボタンを備えたポップアップが表示されます。 [登録]ボタンは、ページ全体に明るい緑色で鳴っています。キャンセルは通常灰色で、何とか色あせているか、ボタンとしてまったく表されていません。ユーザーはボタンを見つけるのにしばらく時間がかかりますが、ボタンがアクティブであることはわかっています(または少なくともボタンをクリックしようとします)。

もう1つの良い例がiOSアプリです。 AppleのHIGは、クリック可能またはタップ可能なボタン/ラベル/アイコンはすべて同じ色を共有することを推奨しています。けっこうだ。ユーザーはそれに慣れています。それはよく確立されたパターンです。したがって、ボタンに青色を使用するアプリがある場合、ユーザーはクリック可能なすべてのものが青色になることを期待しています。したがって、別のクリック可能な要素を灰色で表示すると、ユーザーは実際にボタンが無効になっていると考えます。

あなたの場合私はそれに分析をリンクし、それがどのように機能するかを確認します。ユーザーがボタンを使用していない場合は、アプリがうまく設計されている可能性があります:]または、下の画像のように色を変更してみてください。青色は、ボタンがまだクリック可能であることを示していますが、アウトラインアイコンはあまりフォーカスされていません(これはヘルプボタンに必要なものです)。

enter image description here

6
rojcyk

灰色は規則ではなく慣習です


why灰色が無効なボタンに使用されていることを理解するのに役立ちます:

  • グレーは中間色なので、微妙な要素や強調されていない要素を伝えるのに適しています。
  • 無効になっているボタン(クリックできないため)は通常、デエンファシスを介してユーザーに通知されます。視覚的なメッセージは次のとおりです。
    • 「私はボタン(自分の形を見る)ですが、クリックできません(視覚的に強調されていません)

視覚的な強調解除は、いくつかの方法で実行できます。

  • コントラストを下げるボタンとページの間(つまり、微妙な背景)
  • コントラストを下げるフォントとボタンの間(つまり、微妙なフォント)
  • 斜体または細いフォントを使用他のボタンと比較(つまり、微妙なフォント)
  • シャドウまたはエンボスを削除他のボタンと比較(つまり、インタラクティブキューを削除)

上記の設計ロジックを理解したら、それに従って、効果的に通信できるすべての種類の無効なボタンを作成できます。いくつかの例:

enter image description here

3
tohster

関連するUXSEの質問 を確認してください。ページ上で競合がない限り、無効になっていないものには灰色を使用してもかまいません。

現在、灰色には2つの意味があります。ボタンでは無効状態として機能し、アイコンではそうではありません。これはアフォーダンスを減らし、ユーザーは間違いなくそれを嫌います。

リンクされた質問の上位の回答は、この問題をどのように進めることができるかについてより多くの洞察を与えるはずです。

1
Sol

常に何かが何かを表すものはありません... man

しかし真剣に、これらのボタンは無効になっているように見えます。テストの実行に時間を無駄にせず、別の色を使用してください。青い輪郭の白いボタンは、おそらくうまく見えます。

0

上記の点に同意します。無効になっているボタンの視覚的な関連付けは、他のボタンのコンテキストとスタイルによって異なります。赤と緑が常にネガティブとポジティブを意味するわけではないのと同じように、灰色は、アクティブがどのように見えるかをユーザーが理解するのに十分なコンテキストがあれば、与えることを意味します。

0
J4G