【UIアウトプット】DailyUI #017_Purchase Receipt
シルスプのブログにようこそ
17日目の課題は、Purchase Receipt
購入時の領収書ですね。
12日目の課題で作ったメガネショップのE-commerce Shop
を前提に作成します
Daily UI
https://www.dailyui.co/
1.課題
購入時の領収書といっても、利用する側からすると
・領収書として電子保存を想定したもの
電子帳簿保存法の改正によって、
2024年1月1日以後の電子取引のデータ保存が完全義 務化されました。
紙保存する必要がないので、事務所の場所を取らず助かります。
・Web上で何を買ったか確認する
たまにこの本どこかで買ったっけ?っていうのがありまして。。。
備忘録みたいに確認できる。
Webで買うと確認できるので便利です。
場面に分かれるかと思います。
この2つを想定して作成します
2.取り組み
1)調査
参考とさせていただいたのは、
・アマゾンの注文の詳細
・ニトリの注文履歴
です
2)画面構成
まずは、いつ何を買ったのか確認できて、支払済ということ
買い物してると大体いつ頃買ったかはわかるので、注文日で探せると思います。
問い合わせのボタンがわかる位置にあるといいですね。
商品の写真と値段があると助かります。
通常領収書を探すのは、何を買ったか確認したいのと、
領収書はどこから発行できるのか?がすぐ知りたいです。
Daily UI #017_Purchase Receiptの説明に、
ヒント: 領収書の下部と上部は、通常、あまり活用されていません。これらは、今後のプロモーションやニュースにについて顧客に知らせたり、フィードバックを求めたり、QR コードを使用してソーシャル メディアを宣伝したりするのに最適な場所です。
とありましたが、
金額や支払済かどうか以外に興味がないのに、
情報ばっかりのせられるとイライラするので、私は画面は作りません。
3.作品
DailyUI #017_Purchase Receipt

4.感想
「画面の空間が空いているから、利用するのに最適」
というのは、そもそも利用者のことを考えていないかと思います。
私は、領収書はシンプルなものが一番だと考えます。
5.まとめ
領収書画面を作る課題でした。
私が要望する、領収書の発行ボタンと問い合わせのボタンを一番上にしました。
かなり、自分の希望を反映したものになったので、一般的ではないかと思いますが、
自分ではイライラは解消されたかと思います。
では、またねぇ~