web-dev-qa-db-ja.com

アニメーションはマウスオーバーで一時停止する必要がありますか?

マウスオーバーでアニメーションを一時停止する必要がありますか?私は私の意見を持っていますが、ユーザーがこれが起こることを期待しているという考えを支持/否定する証拠があるかどうか疑問に思っていました。

編集:私は特にスライダー/カルーセルと他のユーザーが開始しないアニメーションに関心があります。

5
Joel Garfield

はい

スライダー/カルーセルに関しては、間違いなくyesと言います。


スライダーは情報のリストです

スライダー(例: slidejs など)は、実際には情報要素のリストまたは配列です。この場合、要素は通常、フルブリードの背景画像で構成され、タイトル、説明のコピー、リンク/行動を促すフレーズが含まれる可能性があります。アイデアは、一度にこれらの要素の1つだけを表示することで、より小さなスペースでより多くの情報を表示できることです(インターフェースをより簡単に、より簡単に消化できるようにするなど)。


使えないのに

個人的には、これらのタイプの情報要素の1つを読み込もうとすると、ユーザーとして非常に苛立たしいことに気づきました。私がコンテンツに取り組んでいるとき、そのコンテンツはページで最も重要なものです。自分のコントロールが及ばないうちに、それが終わる前に消えてしまうと、ユーザーエクスペリエンスが明らかに低下しているように感じ、興味を失い、別の場所に移動して、戻ってこないかもしれません。


マウスオーバーで一時停止、それ以外はアニメーション

私が見てきたこと、およびこれらの種類のウィジェットを作成するときに自分で実装することは、アニメーションが次のように機能することです。

  1. マウスカーソルがスライダー領域の上になく、現在のスライドのタイマー/遅延が切れている場合、次のスライドに自動的にアニメーション表示します。

  2. マウスカーソルがスライダー領域の上にあり、現在のスライドのタイマー/遅延が切れている場合、waitします。カーソルがスライダー領域の上にあることは、おそらくユーザーがその領域を現在使用していることを示すかなり良い指標であり、この状況では、ユーザーの操作によってデフォルトの動作がオーバーライドされることを期待します。

  3. マウスカーソルがスライダー領域の上にあるが、現在のスライドが既に次のスライドへの移行を開始している場合は、次のスライドへのアニメーションを終了してから、そのスライド(新しい現在のスライド)で待機します。ぎくしゃくしたアニメーション(マウスオーバーでアニメーションが突然停止した場合)も気が散ります。自然な流れは、この中間の状態では直感的な動作のように見えます。


ユーザーの意図が鍵

最終的に、インターフェイスの目的はユーザーの意図を容易にすることであることに注意してください。インターフェースを使用していて、それ自体でやりたくない(または期待しない)ことを行っている場合は、インターフェースに問題があると感じます(または少なくとももう少し最適化することができます)。


読んでいたことを終えたい

マウスオーバーイベントは、特定のユーザーのコンテキスト(たとえば、「スライドショーエリアのスライドを現在読んでいる」など)を検出する優れた方法であり、そのコンテキスト内で、ユーザーの意図とそれらを実行するための最善の方法を自問する必要があります。スライドショーの上にマウスを置いているとき、私の意図は現在のスライドを読むことであり、スライドショースクリプトは、実行中の操作が完了するまで待つか、直接実行する新しいアクションを指示する(ナビゲートなど)別のスライドへ)。

7
robmclarty

jQueryは、アニメーションの実行中に十分な自由を与えます。 delay()のようなメソッドがあります

また、特定の状況では、アニメーションのqueue()およびdequeue()を使用して、イベントの前に遅延を導入し、アニメーションのシーケンスを進行させることができます。

したがって、ほとんどの場合それが必要とされないので、デフォルトでアニメーションを遅延させても意味がありませんが、いつでも使用できます。

また、これは非常にケース固有のシナリオです。

たとえば、ユーザーがページでアクションを実行したときに何かが発生したことをユーザーに示すには、たとえば、ページに表示されているデータを再読み込みしているときに、通常遅延が発生し、ユーザーに何かが変更されたことを快適に示すために表示されます彼らの行動のページで。

ただし、自身のアニメーションには時間がかかります。これは通常コードで言及されています。つまり、ユーザーがアニメーションをトリガーするイベントの上にマウスを置くと、結果が表示されます(アニメーション時間+遅延+データをロードする時間)。

支払いページや予約ページにつながるボタンの上など、重要なアクションの時間を増やしたくない(遅延を挿入したくない)。

つまり、ユーザーにとって重要な情報がユーザーに表示され、ページに留まるギャップがある場合、遅延を挿入しても意味がありません。他のシナリオでは、通常、画像スライダーなどの遅延が挿入されます。

1
Pranav 웃

マウスオーバー時の視覚的な手がかりについて話している場合、答えはおそらくイエスです。マウスを何かの上に置いても、すぐに認識できないものに変化しないことが重要だと思います。したがって、誰かが要素の上に留まっている場合にポインタを与えるだけであれば、はい。

長いアニメーションや遅いアニメーションの目を引くキャンディーがたくさんある場合、それらを遅らせることは非常に理にかなっているので、ブラウザーを妨げる可能性のあるアニメーションがたくさんありません。ただし、これを実行している場合は、実行しないようにすることもできます。恐ろしいですね。

したがって、簡単な答えはありません。はい、これがより良い手がかりになると感じた場合は遅らせ、ホバリングしているこのことで実際に何かが行われていることを示します。しかし、アニメーションやエフェクトを遅らせるのが良い考えのように思われる場合、それが実際に必要かどうかを慎重に検討してください。

1