お気に入り
商品やイベントなどを一覧ページまたは詳細ページでブックマークしておき、ユーザにじっくり比較検討させたり、まとめてアクションに繋げるために作る。「ウィッシュリスト」も同様の用途で使われる。
https://gyazo.com/578223f63133f34b353a2f71f3da9502
https://gyazo.com/447dce5af2112d19aa748e1af8b7d2e1
お気に入りは一覧から一括アクション(資料請求や申込みなど)できるようにする。
https://gyazo.com/d8efd163e143bd3ff9bebe0696e7aa75https://gyazo.com/d8efd163e143bd3ff9bebe0696e7aa75
設計のポイント
非会員でもお気に入り登録できるか?
非会員でも会員と同様にアクションできるサイトでは、非会員でもお気に入り登録できるようにした方が良い。
お気に入りの保存期間
会員の場合は、特に保存期間を設けない。
非会員の場合は、お気に入り用のユーザ識別IDを払い出し、これはCookieまたはSessionStorageに保存することになるので、基本的にはブラウザの有効期間限りとなる。
上記性質の違いから、可能であれば会員/非会員で保存するストレージを分ける。
お気に入りの対象が削除された場合
商品やイベントが取扱終了したりして、データとして削除された場合、お気に入り表示時も参照できなくなる。
一般的には、お気に入りに入れている事実は残した方が、ユーザにとっては親切であり問い合わせも減るので、そう設計したほうが良い。その場合、表示のために次に示すように「登録時の属性」をお気に入りに持っておく。
登録時の属性
ECのように価格変動が頻繁に行われ、それが購買アクションに繋がる重要なファクターであれば、その時点での価格も同時に保存しておき、お気に入り一覧ページで現在価格との差を表示させるのに使う。
その他、お気に入り時点の情報が、アクションに繋がるデータとなるならば、一緒に保存する。
お気に入りの登録/削除のログ
現在のお気に入りに入っているものとは別に、お気に入りに「登録した」「削除した」のイベントデータは、アクションに繋がらなかった理由を探るのに有用なデータとなるので、別途取得しておいた方が良い。
ソリューション
データモデル
https://gyazo.com/2ba46cfbfa0460e33b9e2356e8d029c4
UI
お気に入りに登録ボタンを押したくらいで、ページ遷移をさせることは現代ではまずないので、XHR/fetchでお気に入り登録/削除のAPIを呼ぶ。
レスポンスを待って、♡→💓のように見た目を変えようとすると、なんらかの理由でレスポンスが遅れたときに、ユーザになにもインタラクションを返せない。これだけのためにLoadingのスピナーアイコンを使うのは大げさなので、リクエスト送信時に、♡→💓にしておいて、エラーが返ったらユーザに通知する設計がよい。