アニメーション化された UX マイクロインタラクションで e コマース ジャーニーを向上させる

アニメーション化されたマイクロインタラクションを e コマース エクスペリエンス全体に適用すると、システムの進行状況が伝達され、ユーザーの満足度が向上し、コンバージョン率が向上します。 これらの微妙なモーション効果は、ユーザーがメニューやボタンなどの UI コンポーネントを操作したときに視覚的なフィードバックをすばやく提供し、見つけやすさを向上させ、ユーザーが e コマース ページ間を移動する際にガイドすることを目的としています。 ユーザーが商品を見つけて購入できるようにするだけでなく、繰り返しの顧客につながる習慣のループを助長することもできます。

電子商取引のファネルでの重要性にもかかわらず、アニメーション化されたマイクロインタラクションは特に派手である必要はありません。 2016 年から Toptal ネットワークのメンバーである UX デザイナーの Alexandre Brito 氏によると、スクロールバー、プルして更新、スワイプなどの単純なアニメーション効果でさえ、直感的なデジタル ショッピング体験を作成するのに役立ちます。

e コマースのセールス ファネルにおけるアニメーション UX マイクロインタラクション

e コマースのセールス ファネルには、ホームページ、カテゴリ ページ、製品ページ、チェックアウトという 4 つの一般的なステップがあり、ユーザーを企業の最初の価値提案から購入に導きます。 各ステップで、より多くの情報が明らかになります。 アニメーション化されたマイクロインタラクションは、この発見の旅を支援します。 たとえば、e コマース ホームページの検索ボックスは、ユーザーがカーソルを合わせたりタップしたりすると拡大することで、双方向性を示す場合があります。 次に、ユーザーが検索クエリを入力すると、アニメーションの自動提案が表示される場合があります。

「多くの電子商取引の UI 要素には、マイクロインタラクションの恩恵を受けて顧客を引き付け、重要な情報を提供できる機能があります」と、プロダクト デザイナーで Toptal ネットワークのメンバーである Rashni Parichha 氏は述べています。 「たとえば、ユーザーがカートにアイテムを追加すると、スケールダウンとドロップインカートのマイクロインタラクションにより、ユーザーが実店舗で買い物をしているかのように、このアクションがより現実的に感じられます」と彼女は言います。 「体験がよりリアルになればなるほど、ユーザーと製品とのつながりが深まり、サイトに繰り返しアクセスする可能性が高くなります。」

Eコマースのホームページ

デジタル ショッパーは注意力が低下し、複雑な UI に対する忍耐力がほとんどありません。 ナビゲーションなどのホームページのデザインの選択は、ユーザーの注意を引くために戦略的である必要があります。 アニメーションによってドロップダウン メニューがより魅力的になり、製品の分類が強化されるため、ユーザーはアイテムを見つけやすくなり、ドロップオフ率を下げることができます。

Rashni 氏は、大量の情報を整理するアニメーションはより直感的なデザインに貢献し、ユーザーの注意を引くのに役立つと説明しています。

パララックス スクロールは、製品の写真、説明、カテゴリなど、ホームページ コンテンツの視覚的な階層を確立するための強力なアニメーション技術です。 ユーザーがホームページを下にスクロールすると、コンテンツが間隔をあけてさまざまな速度で表示され、現実世界の視差を模倣し、ユーザーが画面上の情報をスキャンして消化しやすくする漸進的開示の形式として機能します。

Eコマースカテゴリーページ

消費者直販サイトでは、カテゴリ ページを使用して 1 つの製品の複数のバリエーション (このフィットネス機器メーカーのサイトのバーベルなど) を提示しますが、e コマース マーケットプレイスではカテゴリ ページを使用して、類似の製品を販売する多数のブランドを紹介します (ASOS の「シャツ」ページなど)。 、さまざまな小売ブランドの衣料品を特集しています）。

成功したカテゴリ ページでは、ユーザーは詳細を探す前にオプションをすばやくスキャンできます。 製品発見プロセスを加速する (そしてモバイルのスペースを節約する) ために、多くの e コマース サイトでは、カテゴリ ページで画像カルーセルを使用しています。 イケアの「クイック ビュー」機能を使用すると、サイトで最も人気のあるカテゴリをすばやくナビゲートできるため、ユーザーの時間とクリック数を節約できます。

調査によると、自動カルーセルは、急速な動きが気を散らす可能性があるため、ユーザーを苛立たせます。 対照的に、手動のカルーセル (IKEA のような) では、ユーザーが画像をクリックまたはスワイプすることができ、ユーザーが UI を制御できるアニメーション化されたマイクロインタラクションは、ページ滞在時間とコンバージョンを増加させることが証明されています。

最高の画像カルーセル エクスペリエンスを実現するために、Rashni 氏はスムーズな遷移と直感的なナビゲーションに重点を置くことを推奨しています。

1. スムーズで連続的なスライド マイクロインタラクションは、物理オブジェクトとの自然なインタラクションの錯覚を生み出すのに役立ちます。 スライド アニメーションの開始時に予測し、最後にフォロースルーすることで、トランジションをシームレスに行うことができます。 予期は、メイン アクション シーケンス (画像カルーセルの左右のスライド アニメーション) の前のモーションです。 主なアクションとは反対方向へのこの短い動きは、勢いと興奮を生み出すのに役立ちます。 同様に、フォロー スルーはモーション シーケンスに続く微妙なモーションであり、アニメーションをよりリアルに見せるのに役立ちます。

2. ナビゲーションは簡単に識別できる必要があります。 点または矢印のコントロールは、ユーザーが画像カルーセル内を移動する方法を識別するのに役立ちます。 矢印は方向性を示す必要があります。 ドットはデフォルトで中空で、現在の画像を強調するために塗りつぶされます。

Eコマース製品ページ

商品ページは、商品のスタイルや数量の選択、カートへの商品の追加、お気に入りの商品のブックマークなど、コンバージョンに関連するアクションをユーザーが実行できるようにするためのものです。 これらの各アクションは、フィードバックによって検証する必要があります。

たとえば、電子小売業者の Etsy には、ユーザーが商品をお気に入りに追加できるハートのアイコンがあります。 クリックまたはタップすると、結果のアニメーションにより、以前は無色だったハートが赤くなります。 これは取るに足らないことのように思えるかもしれませんが、このようなインタラクティブな瞬間は、入力を確認し、ブランドの個性を伝えることで、ユーザーの満足度を向上させます。

さらに、インターフェイスがアニメーション効果などの視覚的な合図を使用してユーザーのアクションを認識すると、ユーザーは自信を持って次のタスクに進むことができます。

E コマース チェックアウト ページ

最良のチェックアウト フローは、摩擦のないものになるように設計されています。Amazon ユーザーは、ワンクリックの [今すぐ購入] ボタンで支払いをすばやく追跡できます。 しかし、チェックアウトは、ユーザーが購入に必要な個人情報を入力するため、追加のガイダンスが必要な時間でもあります。

プログレス ステッパーは、サインイン、配送、請求の詳細など、購入情報を消化可能なチャンクに分割します。 アニメーション化されたマイクロインタラクションをステッパーに追加すると、視覚的なフィードバックが提供され、ユーザーがチェックアウト プロセスを完了するように指示および動機付けされます。 たとえば、ユーザーが支払いフォーム フィールドにデータを入力すると、アニメーション化されたプログレス ステッパーが、あるステップ (円で表される) から次のステップへ移動する線を表示する場合があります。 このような効果は、ユーザーが購入の目標に近づくにつれて、ユーザーに継続的なフィードバックを提供します。

アニメーション化された e コマース マイクロインタラクションを設計するためのベスト プラクティス

アニメーション化されたマイクロインタラクションは、トリガー、ルール、フィードバック、ループとモードの 4 つの部分で構成されます。 基本的な構造を理解するだけでなく、e コマース プラットフォーム用のアニメーション マイクロインタラクションを設計する際に考慮すべきベスト プラクティスがいくつかあります。

魅力的な習慣のループを作成する

習慣ループは、反動的行動を理解するためのフレームワークです。 キュー、ルーチン、および報酬で構成されます。 人々は楽しい活動に戻るので、多くの電子商取引サイトは、チェックアウト後に将来の購入を促すために提示される貯蓄コードなど、繰り返しの行動を促す報酬を提供しています。

さらに、新しい刺激的なものに出会うと、脳からドーパミンが放出され、報酬を求めるループが作られます。 アニメーション化されたマイクロインタラクションは、これらの発見と喜びの瞬間を生み出すのに役立ち、インタラクションと継続的なエンゲージメントを促進する習慣ループを形成します。 たとえば、Etsy では、ユーザーがカートやウィッシュ リストにアイテムを追加すると、アニメーションの通知アイコン (キュー) が導入されます。 ユーザーがアイコン (ルーチン) をクリックすると、関連するオファーや割引 (報酬) が表示されます。

アニメーションを機能的に保つ

機能的なアニメーション マイクロインタラクションは、セールス ファネルの多くのプロセスをスピードアップするシンプルなビジュアル キューを提供します。 たとえば、チェックアウト中、マウス クリック時のフェード効果により、入力フィールドのプレースホルダー テキストが消去され、書き込みを開始できることがユーザーに通知されます。

ただし、ユーザーがフィールドをクリックしてプレースホルダーが返されない場合、プレースホルダーが何を読んだかを思い出せなくてイライラする可能性があります。 マイクロインタラクションは意識する必要はありませんが、ユーザー エクスペリエンスに負担をかけない方法で実装する必要があります。 Brito 氏は、アニメーションは「ユーザー エクスペリエンスから焦点を奪うのではなく、ユーザー エクスペリエンスを補完するものでなければならない」と強調しています。

2020 年から Toptal ネットワークのメンバーであるプロダクト デザイナーの Muhammad Junaid 氏は、マイクロインタラクションには明確な目的があり、ユーザーの気を散らさないようにする必要があると繰り返し述べています。 「e コマース サイトでは、単なる美的価値を提供するのではなく、コンバージョンを促進する必要があります。 余分なアニメーションは、認知過負荷とカート放棄につながります。」

アクションごとに 1 つのマイクロインタラクションを使用する

行動喚起ボタンやショッピング カート アイコンなどの UI コンポーネントは、個々の e コマース サイト全体で繰り返し表示されます。 ただし、これらのコンポーネントに割り当てられたアニメーション化されたマイクロインタラクションは、明確で一貫している必要があります。 カテゴリ ページの画像カルーセルを左または右にスワイプすると、アニメーション化された製品写真が表示されるとします。同じインタラクションの組み合わせを製品ページの画像カルーセル (ユーザーのメンタル モデルに一致させるため) に使用する必要がありますが、「アイテムの数量を増やす」には使用しないでください。ボタン。

デザインの観点から、マイクロインタラクションをアニメーション化すると、創造的な意思決定に複雑なレイヤーが導入されます。 モーションは、意味を伝える明確なキャラクター特性を UI コンポーネントに吹き込みますが、e コマース サイト全体でまとまりのあるアニメーション スタイルを設計して実装することは困難な場合があります。 幸いなことに、すべての e コマース コンポーネントにモーションを追加する必要はありません。e コマースのセールス ファネルの各ステップでアニメーション化する、影響力の大きいマイクロインタラクションを視覚化するインフォグラフィックを作成しました。

電子商取引のためのアニメーション化されたマイクロインタラクションを最大限に活用する

アニメーション化されたマイクロインタラクションは、e コマース デザインの重要な側面であり、エンゲージメントを高め、UI デザイン機能をより直感的で情報に富んだものにし、カジュアルな買い物客をリピーターに変えるのに役立ちます。 ベスト プラクティスと専門家の洞察に留意することで、余分なモーション エフェクトを回避し、コンバージョンにつながるアニメーション化されたマイクロインタラクションを設計できます。

Toptal Design ブログの詳細情報

• Eコマースウェブサイトデザインの究極ガイド
• 通知設計の総合ガイド
• 説得力と感動: モーション デザイン原則のガイド