web-dev-qa-db-ja.com

ボタンにカーソルを合わせるとどのようなマイクロインタラクションが使用されますか?

????

私たちは、UXを第一原理から学び/理解し、最も直感的なUIを構築しようとしています。
私たちはアプリでボタンを作成しており、ボタンの上にホバーしたときの理想的なマイクロインタラクションが何であるかを知りたいです。

いくつかのチュートリアルdecreaseを見て、カーソルをボタンの上に置いたときのボタンの不透明度を確認しましたが、これは対して直感的なので、ユーザーは「グレー表示ボタンが使用できないことを意味する可能性があります

これらは、現在作成中のアプリのボタンです。

buttons-opacity-reduced-when-hovering

ホバーしたときのボタンの不透明度をreduceすることに意味がありますか?
ボタンのより適切なUX /マイクロインタラクションは何ですか?

ありがとう!

3
nelsonic

不透明度を下げると無効状態になります。ホバリングすると、ボタンがクリック可能に見えるようになります。

ホバー状態を色で伝えたい場合は、反対のことを試してください-少し強度を上げることを目指してください。通常の状態のボタンは通常の状態(無効ではない)になり、ホバーが少し飽和して暗くなるはずです。微妙な場合もあります。人間の目は非常に微妙な変化を検出できます。

Twitter button being hovered on

Try for Free button being hovered on

Contact Us button being hovered on

色を変更したくない場合は、ボタンを明らかにボタンのように見せて、最初にシニファイアとコンテキストを使用するか、ボタンの「リンク」やグリフなどの他の要素をアニメーション化します。

Virgin Atlantic's non-animated button

Microsoft button's subtle animations

2
Stacy H

ホバー時の不透明度を減らすと、慎重に行うと、優れたUXを実現できます。ホバー時の不透明度を下げる目的は、ボタンを明るく表示することだと思います。ただし、背景色のみを変更すると、無効状態になります。これは、テキストや境界線を同時に暗くすることで修正できます。基本的に、UI要素の全体的なコントラストを高めています。ここでのコントラストの増加は、「無効」の反対を示しま​​す。

enter image description here

わかりやすくするために2つの例を追加します。最初のものでは、ホバー時にテキストとボーダーの両方の色が暗くなります。 2番目のテキストはテキストだけが暗くなります。どちらの場合も、元のボタンの反転バージョンになります。

2
Raiyan

通常、ホバーされたボタンの不透明度を上げるというアプローチをとります。ボタンの上にホバーするという私の理論は、押すこととほとんど同じです。別の理由としては、ボタンの上にカーソルを置くと、カーソル自体が影になることです。

また、ホバリングの動作はハイライトに似ているので、色の不透明度を減らす必要があるという反論も見ました。

どちらでもうまくいくと思いますが、一般的には色を少し調整するだけでよく、gifからの変更はかなり大きな変更を適用します。

1
dougajmcdonald

UIのデジタルボタンは、対応する現実の世界を表しています。スキューモーモーフィズムが過ぎ去った時代でさえ(ただし、ニューモーフィズムが復活している)、デジタルボタンは現実世界のボタンを模倣すべきだと私は思う。

現実の世界にはホバー状態はありません。しかし、それがどのように見えるかについては、想像力を使うことができます。

何が使えるか

  • デフォルト状態-上端の明るさとボタン端の影の組み合わせ。
  • ホバー状態-デフォルトと同じですが、少し飽和または明るい色です

  • 押された状態-内側の影

1
Ameen Akbar