web-dev-qa-db-ja.com

アニメーションボタンの使用とユーザーエクスペリエンスへの影響

サービス指向のWebアプリケーションで、特にアクションの登録と完了で、アニメーションボタンがますます表示されます。説得力のある心理学の文献では、特定の理由でユーザーの注意を引くために動くオブジェクトが使用されています。

現在のプロジェクトでは、調査を実施するのに十分なユーザーがいないため、このテーマについて詳しく知りたいと考えています。アニメーションが次の場合に役立つかどうかを示す調査(できればA/Bテスト)はありますか。

  • 登録ユーザー数の増加
  • コンバージョン率の向上
  • 関連しない購入アクションを完了する

私はいくつかのインタビューセッションを行ったが、一部の参加者は、全体的なフローに悪影響を与える可能性があるとは少し煩わしいと述べた。

以下は、インタビュー中に使用したアニメーションボタンの例です。

Pulstate

2
Abektes

ボタンのアニメーションは別の目的を果たします

観察:

  • アニメーションの目的は、ユーザーの注意を引くことではなく、ユーザーにフィードバックを提供することです。
    • これは clunk と呼ばれることもあります。ユーザーがやり取りに気付いたことをユーザーに保証する明確な確認応答です。
    • ユーザーが住んでいる現実の世界では、インタラクションはフィードバックを提供し(ドアを閉じる、ボタンを押す、フォークを持ち上げる)、フィードバックがなければユーザーは混乱します。
  • これを理解すると、行動意図に合わせてアニメーションを適切に設計でき、より自然なマイクロインタラクションが得られます。
    • たとえば、ボタンが強調表示されたり、ホバー時に(ドロップシャドウを使用して)上昇したりして、ボタンが実際にクリック可能であるというフィードバックをユーザーに提供します。
    • ユーザーが「クリック」フィードバックを提供するためにクリックすると、ボタンが点滅、波紋、または押し下げられる場合があります。
  • すべての場合において、アニメーション化されたフィードバックは、注意を引くためではなく、目的のフィードバックを達成するように設計する必要があります。
    • そのため、クリック時に点滅するボタンは、単純な波紋やうつ病よりもユーザーにとって奇妙に感じる可能性が高くなります。

これを念頭に置いて、あなたの研究が誤った結果をもたらしたかもしれないいくつかの理由があります:

  • 使用したパネルには、同じパネルにさまざまな相互作用を持ついくつかの異なる色のボタンがあります。ボタン間の対話の一貫性がないため、ユーザーは予測不能であるために混乱していると感じる可能性があります。したがって、anyアニメーションは奇妙に感じられます。
  • あなたのアニメーションが自然な不快なフィードバックを提供するためのコミュニケーションの意図なしに設計された場合、それらがユーザーに不自然に感じられるのは当然のことです。

Googleの Material Design には、ボタンアニメーションがユーザーとのコミュニケーションにどのように使用されるかについての素晴らしい説明があります。

わかりやすいアニメーション付きのマテリアルデザインボタンのデモは こちら です。

アニメーション化されたボタンとコンバージョンとの間のリンクに関する一般に利用可能な研究があることはほとんどありません。しかし、コントロールマイクロインタラクションに関する多くの研究があり、アニメーションの目的を適切に理解することで、Googleのような企業(広範なユーザーテストを実行します)がボタンに自然なアニメーションを使用することを選択した理由をはるかに理解しやすくなります。

6
tohster