本日は、おなじみUX movementより、今年の2月に投稿された記事「5 Design Tips to Prevent Shopping Cart Abandonment」をご紹介します。
記事中ではECサイトの「カート離脱」を防止するためのデザイン手法が５つ取り上げられていました。
具体的には下記のとおりです。
カート離脱を防ぐための５つのデザインTips
それではいつものように詳しく分解していきます。
ブラウジング機能は極力シンプルにデザインする
当ブログではつねづね、フォームには余計なコンテンツやリンクを置かずに、グローバルナビなどを排した専用のレイアウトを用意することが望ましいとお伝えしています。
このポイントもニュアンスは異なれど似たような点を指摘していると思います。
記事では、ブラウジング機能、即ちサイドバーのメニューやカテゴリや新着商品の一覧、検索バーなどのコンテンツは、購入フォームにおいては余分なものだとし、
ユーザーの気を散らさないためには、ホワイトスペースを利用したり、メリハリの効いたレイアウトを用いることでそれらを最小限に抑えることが必要、としています。
フォーム内からは極力余計なコンテンツを削除し、ユーザーがフォーム入力に集中できるようなつくりにしておきたいですね。
余計なナビゲーション類が一切省かれているAdobeの登録フォーム。
マルチステッププロセスを表示する
購入フォームは複数の画面遷移を伴うことがほとんですが、購入完了までにそのステップがいくつあるのかをユーザーに示すべきだと記事の筆者は述べます。
こちらもこのブログでもいつもお伝えしていますね。
記事内ではアコーディオン型のステップ表示が紹介されていますが、「フロー画像」と呼んでいる下記のようなステップを示す画像をフォーム上部などに挿入するのも効果的です。
フロー表示の例
加えて重要な点として、購入プロセスのなかのどのタイミングでカートの中身を修正したり、取り消したりできるかをユーザーに知らせることができるというメリットもあると筆者は続けます。
カートの中身を後から修正できることがあらかじめわかっていれば、そこまで神経質になることなくフォーム入力のステップを開始することができますね。
「戻る」ボタンを追加する
続いて、記事では戻るボタンを追加することの重要性が示されます。
ひとつ前に取り上げたマルチステッププロセスの表示とも目的が似ていますが、ユーザーがすでに入力した情報を変更したり、注文内容を修正することができると知ることが、ユーザーにとって大きな安心感をもたらすと筆者は述べています。
さらに、注意点として筆者は２つ付け加えます。
ひとつは、「戻る」のプロセスをポップアップウィンドウを構築する場合、特にモバイルデバイスのユーザーにとって非常にストレスを与える可能性があるという点。できれば購入プロセスは１ページ内に納めるように作るべきです。
２つ目はページを戻った際に入力データが保持されているべきという指摘でした。
これはあたりまえのことのように感じるかもしれませんが、もしも保持されない場合は多大なストレスをユーザーに与えてしまうことになりますので充分に注意しておきたいポイントです。
ユーザー登録をオプションにする
何度か当ブログでも登場していますが、商品の購入にあたってユーザー登録をしなくても「ゲストとして」購入できる仕組みを用意するべきという意見です。
ユーザー登録については、購入のプロセスのなかでオプションとして選択肢を用意しておくことがベストです。
よほど定期的に購入するもので無い限りは、登録はあくまで任意に、ユーザーに選択肢を与えることが重要です。
登録のフローを省くことで、フォームのステップも少なくなりますね
カートの修正を容易にする
カート内の情報を購入プロセスの途中で修正できるように、なおかつその操作を便利にしておくことは重要です。
便利な操作方法の例としては、アイテムひとつひとつの隣に「削除」リンクを用意しておくことが挙げられています。この方法であれば、わざわざ数量を変更しなくてもワンクリックでカートから削除することができます。
また、「ショッピングを続ける」リンクを用意しておくと良いと筆者は続けます。ユーザーがカート内の間違いに気づいた場合でも、正しい商品を選びなおすことで簡単にカート情報を修正することができるからだとしています。
最後に
いかがだったでしょうか。本日は海外のサイトよりカート離脱を防ぐための５つのフォームデザイン手法をご紹介しました。
ECサイトのカート落ちを防ぐための方法は以前の記事で26のチェックリストという形でまとめていますが、今回の記事にはその中には挙がっていなかった「「戻る」ボタンを追加する」などのポイントも登場していましたので、カート離脱に悩む皆様はあわせて参考にしていただければ幸いです。
かご落ちを食い止めるために今すぐやるべき26のチェックリスト
https://f-tra.jp/blog/column/5677
※参考記事
5 Design Tips to Prevent Shopping Cart Abandonment – UX Movement
