Daily UI #017「Purchase Receipt」領収書画面

#014 ~ #016 はまとめるほどの情報量がないので下記のリンクを参照にしてください！！

制作の流れ

領収書画面の調査

ユニクロの領収書画面やAmazonの「購入完了画面」「注文内容」から必要な要素を調査しました。

注文番号を含めた詳細や発送状況など領収書を含めた詳細など注文後の手続きも含めて確認することができるのがECサイトの領収書画面の特徴になっています。

ペルソナを設定

#002で作成したペルソナとは別に設定しました。

彼女が領収書画面で求めるもの

• 購入内容の詳細
  • 商品名、色やサイズ、価格などが含まれていると理解しやすくなる
• 支払い情報
  • 支払い方法や合計金額、送料など、支払いに関する情報が明確に記載されていることを求める
    支払いに関するトラブルを避けるために重要
• 注文番号や配送情報
  • 注文番号や配送先住所、配送予定日などの情報が記載されていると、商品の配送状況を追跡しやすくなる
• 問い合わせ先情報
  • 商品に関する問い合わせやトラブル時の連絡先が明記されていることを求める
    返品や交換に関する手続きがスムーズに行えるようにするために重要

以上の調査内容とペルソナ設定を元にデザインを作っていきます。

UIデザインを作成

注文完了画面

注文確定の旨をお伝えした上で購入商品の詳細やお支払い金額などを表示しています。

注文完了画面は購入直後に一時的に表示されるもののためブラウザバックをして戻ろうとするとエラーになることがほとんどかと思います。

その内容をすぐに確認できるようにするための導線として「注文内容の確認はこちら」から注文内容の詳細に遷移できるようになっています。

注文内容確認

注文内容

注文日、注文番号、ポイントも含めた合計金額を表示しています。

注文番号はキャンセル手続き時などの顧客情報として重要な面や購入金額は太文字で強調しています。

商品詳細

ペルソナが求めていた「購入内容の詳細」という観点から何を購入したのかハッキリと分かりやすくするためにテーブル形式で簡潔な表記にしています。

発送の詳細

配送形式や住所などの詳細をはじめ、出荷の準備と配送状況を確認できる項目です。

購入者が配送状況を確認する用途以外にも下記の理由があります。

• 不在時の対応
  • 再配達の手配や受取り方法の変更などの対応をスムーズに行える
• 顧客サポートの効率化
  • 出荷状況を表示することで、顧客からの問い合わせが減少。
    カスタマーサポートの負担が軽減され、効率的な運営が可能となる

領収書 / 購入明細書

購入商品数と消費税を含めた合計金額を提示し、領収書のダウンロードができるようになっています。

ユニフォームや作業機がわかるのですが、アパレル系のECで領収書が求められる場面はあるのですかね？

ご注文に関するお手続き

ユーザーが手続きを行う際に迷うことがないように項目名をはっきりと表示させることで返品や交換に関する手続きがスムーズに行えるように意識しました。

Amazonの手続きで「カスタマーセンターに連絡すればいいのか」「チャットから手続きを行えばいいのか」迷子になったことがあるので、手続きを確実に済ませることができるようなデザインにしています。

まとめ

今回のデザインのまとめです。

• キャンセル手続き時などの顧客情報として重要な面や購入金額は太文字で強調
• 購入内容をハッキリと簡潔に表示
• 項目の有無を顧客視点だけで考えるのではなく、運営側の視点でも考えた上でデザインを考える

領収書以外にも幅広い視点から全体の構成を考えましたが、過去の経験などから「ここをこうすればわかりやすいのに」と感じたことをデザインでどのように解決するかというのを見つけるのもUIデザインの醍醐味だと思いました。

最後までご覧いただきありがとうございました！