DailyUI #058 ショッピングカート

1.DailyUI#058のお題

58日目のお題は「ショッピングカート」。
ECアプリのショッピングカート画面を制作しました。

2.ざっくりワイヤー

ざっくりワイヤー

3.制作したデザイン

制作したデザイン1

制作したデザイン2

「制作したデザイン1」の画面を下にスクロールした画面です。

4.デザインする上で考えたこと

下記の点を意識して制作しました。

• 商品名、サイズ、数量、価格をわかりやすく表記

• 合計金額と購入手続きはこちら、の表示を画面下に固定表示してすぐに購入手続きに進めるようにする

• 注文件数、商品合計金額、送料、合計金額をしっかり確認してもらうため、背景にざぶとんを敷いて強調する。

• 在庫が確保される時間を提示して、途中で離脱するのを防ぐ。

5.反省点

アイテムとアイテムの間の区切り線は画面横いっぱいにせず、余白を設けた方が同じカートの中身という感覚を持てるかなと思いました。

6.おわりに

個人的に、ECアプリのカート画面では商品の選択が間違っていないか、税込価格、送料は確認しておきたいと思ったので、それらが伝わりやすい画面を目指しました。