現在のページのリンクアイテムを強調表示するサイドナビゲーション
私は現在、設計段階に入っているサイドナビゲーション再建プロジェクトに取り組んでいます。調査を通じて、さまざまな色のテキストを使用して、ユーザーの場所を強調表示/ブックマークしたり、背景色をさまざまなテキストの色で使用している多くのサイトに気づきました。 Twitter Bootstrap および Google News 。
より良いユーザーエクスペリエンスを提供するために、ユーザーはページの場所を表す濃い色のインジケーター（背景色）が必要ですか、それとも単純なテキスト色のリンクアイテムが機能しますか？
それはあなたがそれをどの程度強調したいかによります。背景色は、色付きのリンクよりもはっきりと目立ちますが、注意散漫になります。
1つが常に他よりも優れているとは限らないため、アプリケーションに最適なバランスを決定する必要があります。
2つ以上の選択肢があります。
上で提案したように、背景の陰影やホットカラーを使用できます。ただし、フォントの太さを変更したり、箇条書きを使用したり、インデントを追加したりすることもできます。簡単に言うと、現在のオプションを視覚的に区別するために ゲシュタルトの原則 のいずれかを使用できます。あなたのサイトのデザインで機能するものは何でも。
さらに、同時に複数の戦略を使用する場合は注意する必要があることを補足します（例：箇条書きと網かけ）。通常は多すぎます。
逆に、他のオプションと区別するのに十分な視覚的コントラストがあることも確認する必要があります。これはタイプよりも程度の問題です。ハイコントラストモードなど、特定の例外があります。この場合、1つの戦略（カラー）のみを使用しても機能しません。カラー情報が表示される前に削除されるためです。
色盲の組み合わせを覚えて、必要に応じて コントラストチェック rを使用してください。
現在のページナビゲーションアイテムを明確に示す必要があり、リンクであってはなりません（つまり、現在のページをリロードするためにクリック可能であってはならず、クリック可能であることを示すポインターの変更がなくても、リンクが無効になっている可能性があります） 。
現在のページナビゲーションアイテムを示すには、さまざまな方法があります。テキストの色、背景色、枠線、余白（インデント）の違いなどです。ナビゲーションメニューを実行すると、3つの状態がどのように示されるかを考えます。別のページ、現在のページ、アクティブなリンクへのホバー（これはタッチUIでは役に立ちませんが、マウス駆動のUIでは役立ちます）。 3つの状態はすべて明確で明白である必要があり、意味を判断するためにユーザー側で実験を行う必要はありません。
個人的には、赤色のテキストの色を使用するだけでは十分ではなく、より強力なインジケーターを使用したいと思っています。
アクセシビリティを念頭に置いて、メニューの現在のページをハイライトするために色を使用する場合は、さらに別の方法（色に依存しない）を提供する必要があります。
色は、情報を伝えたり、アクションを示したり、応答を促したり、視覚要素を区別したりするための唯一の視覚的手段としては使用されません。
テクニック G128：ナビゲーションバー内の現在位置を示す を参照してください。例を示します：
- 異なる背景色+チェックマークアイコンの追加
- アスタリスク文字の追加
- 異なる背景色+無効化リンク（*）
（*）：間違いなく、ここで「無効」とはどういう意味か。それを「リンク解除」するだけで十分ですか（クリックマウスカーソルを提供しません）、それとも灰色表示にする必要がありますか？