Webアプリでのリンクのスタイル
クリック可能な要素を多数持つWebアプリを構築しています。問題は、私がこれをWebのベストプラクティスでスタイル設定した場合です。画像を見る
リンクのスタイルを設定しないと、ユーザビリティが損なわれる可能性がありますが、明らかにすると、恐ろしく気が散ることがあります。 feedlyのようなWebアプリは、ホバーしないとすぐにはわからないリンクを使用していますが、その配置は非常に標準的であり、役立ちます。
ホバー状態はユーザーがリンクを発見するのに十分ですか、またはUXを台無しにしないクリーンなスタイルを維持する別の方法はありますか？
いいえ、ホバーでは不十分です。モバイルサポートの不足はさておき、インターフェイスをマインスイーパに変更し、ユーザーがUIをハントしてカーソルを使って何かを調べて、何かが静的な情報なのか、相互作用できる要素なのかを判断する必要があります。認知の負荷を増やし、タスクの完了を遅くし、ユーザーに不安感を与えます。
「フラット」デザインが生み出す課題の1つは、ユーザーにアフォーダンスを与える方法です。
リスト・アパートには、この主題に関して 興味深い部分 があり、これはここに関連しています。
これらは、フラットインターフェイスがよく苦労する3つの方法です。
- アフォーダンスの欠如（アフォーダンスとは、物理的またはデジタル的なオブジェクトの設計が使用を提案する量です。たとえば、椅子に座るように誘います）
- フォーム要素の区別が不十分（例：フィールド、ラベル、指示、ボタン）
- フォーム要素のカテゴリ内の不十分な階層（たとえば、プライマリボタンとセカンダリボタン）
記事全体を読むことをお勧めしますが、フィールドの要素とボタンに慣れることをお勧めする方法を次に示します。
- フィールドを中空に見えるようにします。1ピクセルの辺だけでも、フィールドに境界線またはインセットシャドウを付けます。背景色を取り除く
- ボタンが浮き上がって見えるようにする：ドロップシャドウ、丸みを帯びた角、グラデーション、または境界線を含みますが、わずかまたは微妙です。ページとフォームの両方のフィールドに使用されているものとは異なる背景色を使用します。
これらの概念を説明するために提供される2つの例を次に示します。
これらのアプローチの組み合わせにより、フラットな美的感覚を維持しながら、ユーザーが操作できるものと操作できないものを知る手がかりをユーザーに提供できます。
ホバーの変更は一般に、可能なアクションがあることをユーザーに示すのに十分なものとして受け入れられます。変更は、ポインター（矢印から手に変更）またはアイテム自体（下線、フォントの色、背景色、ツールチップ）で行うことができます。
UX.StackExchangeのさまざまな要素を見ると、さまざまなスタイルのアイテムが見つかります。
- 明白なアクション（共有、編集、フラグ、コメントの追加）には下線が引かれていませんが、ホバーすると背景が変化します
- テキスト内のリンクは別の色です：
![enter image description here]()
等々。
使用するホバー状態は、コンテキスト、アクションのタイプなどによって異なります。
これは古くからのトレードオフです。下線のない「すっきりとした」美観と、下線の付いたリンクの方が使いやすい。
私は通常、この点では美学よりもユーザビリティの方が重要だと思いますが、最終的に決定はあなた次第です。 Webを閲覧すると、ほとんどではないにしても多くのサイトでリンクに下線が引かれていません。それらの多くは、（このstackexchangeのように）使い勝手が悪い。
下線なしで実行する場合、下線の損失を軽減するためにできることがいくつかあります。
- 未訪問のリンク、訪問済みのリンク、および通常のテキストの色が明確に区別されていることを確認してください。 （このサイトの訪問済みリンクの色は通常のテキストの色に近すぎると思います。そうしないでください。）
- リンクを太字にすることができます。これはいくぶん非標準的であり、そうすることは他の目的にボールドを使用できないことを意味します。しかし、それはリンクをより認識可能にします。
- リンクに境界線を付けることができます。最初はこれは下線のように見えるかもしれませんが、境界線の色を制御して、より控えめにすることができます。また、それを点線または破線にすることができます。