web-dev-qa-db-ja.com

入力ボックスのハイライトはユーザーエクスペリエンスを向上させますか?

最新のオペレーティングシステムとWebブラウザーは、マウスオーバー時にテキスト入力フィールドを軽く強調します。

border highlight example

ハイライトは非常に最小限なので、見落としがちです。その他のフォーム要素(ドロップダウンなど)は、より目立つように強調表示されます。

drop down selection highlight example

微妙な強調表示はユーザーにメリットがありますか、それとも不必要な見栄えでしょうか。

多分それは視覚障害を持つ人々にとってより効果的ですか?ハイコントラストディスプレイ設定を使用すると、より効果的に動作しますか?

16
user8082

マウスを使用しないには少なくとも1つの利点があります-通常、キーボードを使用して入力要素間をタブで移動できます。これは、現在どの要素にフォーカスがあるか。

48
Mitch Kent

読んだ後、人々がUX/UIに依存してページを案内し、どこに焦点を合わせているかを示すようになったため、強調表示は実際にはユーザーを助けるようです。

たとえば、ユーザーがフォームに入力し、「タブ」キーを使用してエリアからエリアにジャンプした場合、フォーカスハイライトが、フォーカスされていたものから現在フォーカスされているものに変化することを確認したいとします。

ユーザーがページをナビゲートするのを支援するだけなので、ホバーやフォーカスのハイライトを提供することは、時間やリソースの無駄ではありません。これはUXとUIの良い習慣です。

良いサイト: http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

10
Nick_M

Aviが言ったように、あなたがそれを指していることを示しています。他の人が述べたように、これはnotマウスを使用している場合に明らかに便利です。しかし、マウスを使ってareした場合でも便利です。ただし、理想的にはポイントしているものも表示するカーソルがあります。

たとえば、カーソルが要素のエッジ上にある場合、クリックしたときに何が起こるかがはっきりしない場合があります。これは、クリックターゲットがレンダリングされたオブジェクトとまったく同じではない場合にさらに顕著になります。 (これらの入力領域の境界部分ですか?)

そのため、強調表示により、カーソルと要素を注意深く見たり、要素の上にあるポイントまで正確にマウスを移動したりする必要がなくなります。

誇張したデモの場合は、このページの投稿の1つにあるコメントの1つに賛成票を投じてください。変化する色は間違いなく役に立ちます。確かにこれらは入力領域よりもはるかに小さいターゲットであり、強調表示は、そこをクリックしたときに何かが発生したことを通知するのに役立ちます(入力領域についてはすでに知っています)が、それは同じ一般的な考え方です。

0
Cascabel

インタラクティブな要素のヒットボックスはさまざまで、ビジュアルボタン自体の外にあってもかまいません。強調表示すると、クリックすることでアイテムが操作されることをユーザーに示します。

入力フィールドのラベルが良い例です。正しい「for」で正しく実装した場合-入力フィールド「id」と同じである必要があります。ラベルにカーソルを合わせると、入力フィールドのホバー効果が呼び出されます。同じラベルをクリックすると、接続された入力フィールドにフォーカスが変わります。

0
Bluewater

ビジュアルデザインについては、ハイライトは目立たないようにできる限り目立たないようにする必要があります。

notがどの要素にフォーカスがあるか(ほとんどの場合)に関心がある場合、目立つハイライトは、ランダムなアイテムの邪魔になるほど強調されます。 doフォーカスを気にするのは、特にタブでフォーカスを変更するときです。その場合、変化が起こったときにフィールドを直接見ているので、非常に微妙な視覚的な変化でさえも気づくことができます。私たちのビジョンは、静的な詳細よりも変化に対してはるかに敏感です。

そのため、実際には、フォーカスインジケーターは微妙な場合もあります。たとえば、フォーカスを得たときにフィールドを1pxだけ拡大できます。ただし、これは配色とレイアウトに依存するため、ほとんどの場合はそれを見ることができるため、ブラウザはファジーブルーのリングを使用します。

0
bobtato