さらにカート内UIを改修しています - リリースしましたノートvol.3
こんにちは。クラシコムのデザイナーの遠藤です。昨日、「北欧、暮らしの道具店」のカートページのデザインをさらに改修し変更しました！
以前、カートの商品をストックしておく画面の改修を行いましたが、今回はそのページ以降の購入手続き〜完了までのページを改修しました。
↓以前の改修については、こちらの記事をご覧ください。
今回、改修したのは以下の３画面になります。
（１）配送・支払い設定画面
（２）確認画面
（３）完了画面
この３つの画面に共通して、意識したことは、各々のページでのお客様の目的に最適化するレイアウトにするということです。
配送・支払い設定画面で意識したことは、「なるべく操作を複雑にしない」ということです。北欧、暮らしの道具店では「ヘビーユーザーさんほど購入頻度が高い」ということがわかっています。ヘビーユーザーさんならば、人へのプレゼントよりも自分のための購入が多いはずですし、支払い方法は大体いつも同じであるはずです。また、ギフトやポイントの利用はイレギュラーであることがほとんどです。そういった場合、設定画面で大きく意識が向いているところは以下の部分になると思います。
・何を買うか（いくらか）
・どこに届くのか
・いつ届くのか
・何で支払うか
この意識の向く部分を画面で簡潔に表示し、再設定が必要であれば下の階層で設定し直す、という流れを画面に表現できるよう改善しました。具体的には、今までラジオボタンで選択肢が並ぶ画面になってしまっていたため、理解するのに時間がかかってしまっていたのを、プルダウンとチェックボックスに統一し、一目で選択されている項目がわかり、変更したい時だけ変更できるようにしました。
確認画面で意識したことは、「確実に確認できる」ということです。以前の画面では、お客様情報やお届け先、配送方法などの項目がデフォルトで閉じてしまっていて、間違って入力しているまま配送されてしまい、お問い合わせが増加していました。今回の改修では、すべての項目が一目でわかり、確実に確認できるレイアウトを意識して改修しました。
完了画面で意識したことは、「次に自分が何をすべきか想像がつく」ということです。以前は、一目でロゴマークに目がいってしまい、お店からのメッセージや次に自分が何をすべきか一瞬戸惑ってしまうようなレイアウトになっていました。背景色などのコントラストをはっきりさせ、不要なタイトルロゴなどを削除し、「完了したことがわかる」→「ショップへ戻るボタンを押す」といった、想定される動作を理解しやすいデザインにしました。
＊＊＊
また、こちらは追加改善になりますが、プレゼント枠の表示方法も変更しました。北欧、暮らしの道具店では、オリジナル手帳などの無料プレゼントを不定期で行なっています。以前は、プレゼントの有無の選択が購入手続きを終えた確認画面まで行かなければ、選択できない仕様になっていました。（カートのページではリンク先のないバナーの表示のみされていました…）今回の改修では、プレゼントの有無を購入手続き前に選択できるよう変更しました。これにより、カート内での選択や操作を一部分に集中させることができ、よりスムーズにお買い物ができるようになると良いなと思っています。
カート内の改修・改善について記事を書くのはこれで３度目ですが、まだまだ使いやすくするために改善したい箇所があります。粘り強く改善していこうと思います。笑 ので、引き続き、どうぞよろしくお願いします！
クラシコムでは、一緒に良いチームを作っていけるエンジニアの仲間を募集しています。毎月もくもく会などもやっているので、興味のある方は気軽にオフィスに遊びにきて下さい。