こんにちは、竹内です。
今日はMagentoサイトのショッピングカートページについて、デフォルトのデザイン・レイアウトのままでは少々分かりづらかった箇所を改善し、より使い勝手の良いページにするために実践したカスタマイズ方法についてご紹介します。
修正前のショッピングカート画面
上の画像はデフォルトのショッピングカートページの画面です。
カートページでは、まずメインの表組（shopping-cart-table）に、カートに入れた商品のサムネール画像、商品名とオプション項目、単価、個数、小計、カートから削除するためのアイコンボタンがセル内に表示されます。
また、メインの表組の右下には、小計、税、配送料と合計金額、「レジに進む」ボタンなどを表示する表組（shopping-cart-totals-table）があります。
このカートページのデザイン・レイアウトをカスタマイズしたものが下の画像です。
修正後のショッピングカート画面
「編集」って何のリンク？と、ユーザーを困らせないために
デフォルトのデザインでは、商品名とオプション項目が表示されているセルの右隣に「編集」というテキストリンクがあります。このリンクをクリックすると、商品詳細ページに戻りオプションの項目を変更することができるのですが、初めてこのECサイトを使うユーザーにとっては、いまいちぴんと来ない名称ではないでしょうか。
また、オプション項目の表示位置とは違うセルに表示されていて、1カラムのレイアウトだと特にセルの感覚が広く空いてしまい、このテキストリンクがオプションを変更するものだと気が付かないこともあるかも知れません。
そこで、より具体的に「編集」という文言を「オプション変更」に変更し、表示する位置もオプション項目のすぐ下にリンクを移動しました。
その結果、このリンクが何のためのリンクなのかがとてもわかりやすくなりました。
また、テキストリンクのままでは少しさみしく目立たないので、薄いグレーの背景色を敷き、編集可能ということを伝える鉛筆のアイコンを追加し、全体のデザインに馴染むようなリンクに調整しました。
2つの表組を一体化し、情報をまとめる
デフォルトのデザインでは、メインの表組と、合計金額などを表示する表組が分離しているデザインになっていますが、修正したデザインではこの2つの表組をひとつにまとめたレイアウトに修正しました。
購入数を変更した場合やカートから商品を削除した後「ショッピングカートを更新」ボタンをクリックすると小計や合計金額などが変化しますが、この更新ボタンの直下に合計金額などの表組を配置することで、金額の変化が分かりやすくなりました。
ショッピングカートページは、本当に商品を購入をするかどうか最終的なチェックをするページですので、ユーザーもシビアになっているのではないでしょうか。
もしここでユーザーがわかりにくさを感じてしまったら、購買意欲も店舗に対する信頼感も下がり、最悪の場合商品の購入を見送ってしまうこともあるでしょう。
商品の購入を検討してくださっているユーザーをがっかりさせてしまうようなことがないよう、カートページのデザインを今一度見直し、迷わず安心して注文画面に進めるようなページ作りをしていきましょう！