モノクロのアイコンを機能させるにはどうすればよいですか？
私の会社では、より「モダン」なインターフェースに移行するために、モノクロのアイコンテーマを実装しました。
ユーザーテストの第1ラウンドからのフィードバックはさまざまです。
- ほとんどの人がテーマがすばらしく見えることに同意します
- 25歳未満のユーザーは、インターフェースの操作にほとんど問題がありません。
- 高齢者は、アイコンが有効になっているか、無効になっているか、選択されているかを判断するのに苦労しています
- ユーザーは、アイコンを区別するために色を使用できなくなったため、ナビゲーションツリーでアイテムを見つけるのに問題があると報告しています
ほとんどのユーザーは高齢者で、何年もソフトウェアを使用しています。インターフェイスを使いやすくしながら、モノクロテーマの印象的な視覚効果をどのように維持できますか？限られた量の色を再導入したいと思っています。
- 選択済み –この機能をより際立たせる反転選択状態を作成します。達成するための多くの方法が、例として。ボタンの背景を黒にし、白または薄い灰色の鉛筆アイコンにします。
- 有効 –コントラストを上げます。私たちの目は、光に対する感度が低くなり、加齢とともに色スペクトルのより狭い部分を見るようになります。有効なグレーと無効なグレーの差を大きくすると、区別が容易になります。
- 識別 –他の多くのメカニズムを使用して、これら2つの状態を区別することもできます。例えば;アクティブな状態の下の微妙なshadowは、無効な状態から区別するのに役立ちます。
- サイズ –添付したビジュアルは縮小される可能性がありますが、いずれにせよ、人口統計の大部分が古い場合は、より大きなアイコンの作成を検討する必要があります。これは、古い目がアイコン間の違いを確認し、最終的に理解を助けるのに役立ちます。
答えは単一の変更ではありません。理解力の向上という目標を達成するには、調整の組み合わせが必要だと思います。
コントラスト
アイコンには、アイコンと背景の間だけでなく、アクティブなアイコンと非アクティブなアイコンの間にも、はっきりとしたコントラストがありません。
コントラストを上げます。
私は伝統にこだわるのは嫌いですが、この場合、UIの管理者の好みがユーザーエクスペリエンスを追い越したように思えます。
UXの用語では、あなたが持っていたものに何も問題はありません。実際、それは嘘だと思われます。色もコントラスト比に役立ちます。
デザインを再検討し、色を削除するように仕様を設定するのではなく、色の使用方法を検討し、色を失うことなく「近代化」する方法があるかどうかを確認します。その方法は、UIデザイナーだけでなくUXデザイナーもあなた次第です。
UXは、慣れ親しんでいることが大きな役割を果たしています。
それがすべてうまくいくことを願っています！ :)
人間の視力と年齢に関して理解すべきこと-眼のレンズは年齢とともに硬くなり、柔軟性が低くなるため、年齢とともに悪化する傾向があります。
このため、人々が年をとるにつれて、乱視（二重視、焦点の問題）などの目の状態がより一般的になります。
これがユーザーエクスペリエンスにとって意味することは、若い人は微妙な素敵な小さなアイコンを楽しむことができますが、年配の人は自分の目を細かくして、それほど柔軟ではないレンズに、若い人たちがします。
そうは言っても、ここにいくつかの潜在的な問題領域があります：
サイズ-アイコンのサイズを増やす必要があります
あなたの聴衆がより古い群衆であるならば、サイズをより考慮に入れてください。これは、私が言及したビジネス全体に関係しています。インターフェースが目にやさしくなり、人々が前に傾いて「何が何だろう」と思わせるようなものではないことを望んでいます。
大きなアイコンを備えた大きなインターフェースも、「ナビゲーションツリーに何も見つからない！」という全体に対処するのに役立ちます。問題も。
色のコントラストとパターン-コントラストを上げる必要があり、パターンも一貫している必要があります
選択した鉛筆ツールアイコンを、フォルダーアイコンや家のアイコン、または暗い塗りつぶしのアイコンと比較します。
それらが色の点で非常に似ていることに注意してください。また、有効と無効（クリップボードが無効になっていると思います）と非常に薄い色のアイコン（右半分のアイコン）の微妙な色の違いにも注意してください。
鉛筆ツールが暗い四角の色で塗りつぶされたボックスで選択されていても、家のアイコンやフォルダーアイコンなど、選択されていない他のアイコンと非常に似た色を共有しているため、これは混乱を招きます。同様に、有効と無効の間の色の違いの微妙さも微妙です。
さらに、色のパターン/スキーム/スタイルがすべて均一ではないアイコンのコレクションがあります（これは必ずしも悪いことではなく、対処できることではありませんが、実際にはこれだけです）。 .. iアイコンのように、フォルダや家やカメラのアイコンのように暗い色で塗りつぶされるものもあります。
カラーリング-スキーム/スタイル-（一部は概説されているものもあります）の均一性の欠如のため、ユーザーインターフェイスに自然な変化の感覚が追加され、潜在的にルートを見つけるための混乱を招く可能性があります。誰かが選択されたアイコンを探していて、塗りつぶされたアイコンを探しているのであれば...一見すると、フォルダアイコンのようなものを見て、それがそうでないときに選択されたものだと考えることができるのは、視覚的にはすでにあるからです。 「塗りつぶされた」アイコン。
これらの理由から、色のコントラストを増やし、可能であればアイコンの色付けで同じパターン/スキーム/スタイルを維持することを改善すると思います（すべてアウトラインのみまたはすべて塗りつぶしのみ、または両方の組み合わせ、またはバリエーションを維持したい場合は、選択されていないアイコンと選択されたアイコンの間に十分なバリエーションがあることを確認してください）。
選択されたアイコンが選択されているという事実をおそらく強調する特定の方法は、正方形の背景の塗りつぶしの色をインターフェイスに固有の色にすることです。さらに、塗りつぶしの色を少し暗く（さらにユニーク）したバージョンを使用して、1pxの境界線を追加します。このようなものは、選択されたアイコンをよりはっきりとはみ出させますが、つまらないようなものではありません。
このセクションをまとめると、色のコントラスト（個々のアイコンとインターフェイス全体のアイコンに関して）と、類似した状態のアイコン全体（インターフェイス全体のアイコン、アイコンre：選択済み、無効など）の均一性が向上します。目に優しい視覚体験を実現します。これにより、必要なアイコンを簡単に見つけられるようになります。
現在のトレンドはモノクロではなく、フラットなデザインです。色を使用することもできますが、以前の最も目立つ色を各アイコンに使用すると、ユーザーは古いデザインに慣れているはずです。
決定を下す前に、まだ決定する必要があるいくつかの設計上の質問/考慮事項があると思います。
- 年配のユーザーや年少のユーザーを対象にしていますか？現在のユーザー年齢の分布はどのようなもので、トレンドはどのようなものですか？それらを独占的に設計することは理にかなっていますか、それともソフトウェアである程度のカスタマイズを許可していますか？
- 灰色の背景は中間色として設計されていますか、それとも他のユーザーインターフェイスとの特定の色の衝突を避けるためですか？通常、灰色は無効な状態に使用されるため、有効な状態をあまり似たものにしないでください。そうしないと、十分なコントラストが得られません。
- ナビゲーションを論理セクションに分割するのに役立つ他の視覚要素（MS Officeリボンバーなどの垂直ストリップ）を導入することはできませんか？.
- 特にデータの状態を変更する重要な機能である場合は、アイコンだけに頼るのではなく、押す前にどのアイコンを押すかを確認できるツールチップやラベルはありますか？
これらの質問に答えて、ユーザーテストがどのように行われるかを見ることができれば、質問に対する答えを見つけることができると思います。
この場合、bichromeカラースキームはモノクロよりもうまく機能すると思います。
選択したすべてのアイコンを単一の色、つまり緑色にすることができ、選択していないすべてのアイコンを灰色にすることができます。最適でないLCD視野角などの低コントラストの状況では、グレーと混同しにくい色を使用するように注意してください。青は、このような問題のある色の例です。
アイコンがモノクロの場合、輪郭はユーザーがアイコンを区別するのに最も重要なものです。コントラストを改善する必要があります。経営陣を満足させながら、これを行うには2つのことを提案します。
ツールバーの灰色の背景を削除します。グレイオングレイは決して良い組み合わせではありません。 UIをモノクロに保つという指示に違反することなく背景を白にして、灰色の境界線を付けて、ツールバーボックスとして目立つようにすることができます。
背景が白の場合は、無効なアイコンに淡いグレーのシェード（以前は背景に使用されていました）を使用できます。
すでにいくつかの良い理論的な答えがありますが、あなたの問題に対する実用的な解決策があると思います。
あなたが引用した最大の問題はコントラストです。古いユーザーは、選択したアイコンと無効なアイコンを区別できません。無効になっているアイコンを、灰色の灰色として既に表示されているアイコンよりも目立たなくするようにするのではなく有効にしたアイコンをそれらの上にもっとはっきりと目立たせる必要があります。
ハードエッジの黒いアウトラインでカラースキームを損なうことなくこれを行うことができます。
上の例は、現時点ではmspaintにしかアクセスできないため、少しがらくたですが、アウトラインを追加すると、このアイコンが他のアイコンとは異なる状態になっていることがわかります。