操作して比較できる商品カタログを作る

寝具の作り手が、新しいシーツセットを準備しています。厚いマットレスにも合うのか、色はどう違うのか、QueenとKingで何が変わるのか。写真一枚と価格だけでは、どの質問にも答えられません。

商品を詳しく見てから問い合わせたり、依頼したりしてもらいたいときは、操作できるカタログが役立ちます。一商品だけでも、選んだ色やサイズに合う写真、寸法、価格がその場で分かれば、十分に意味があります。

要点

色やサイズ、写真、寸法、サンプル価格をそろえます。選択に合わせて商品表示と明細が変わるよう依頼してください。サイズと数量を変え、サンプルのバッグを確認します。共有前に、すべての組み合わせを元の情報と照合します。

来訪者が選ぶことから考える

依頼前に、選択肢とその情報を書き出します。表示価格と、決済や在庫に関する約束は区別してください。最初は明確にサンプルと分かる値を使えます。

架空のリネンのシーツセットの、操作できるカタログを作ってください。
色はOatとClay、サイズはQueenが140米ドル、Kingが160米ドルです。
写真と価格はサンプルと明記します。寸法、厚さ15インチのマットレスへの
対応ガイド、素材、手入れ方法を表示してください。色、サイズ、数量を選び、
明細と合計付きのサンプルバッグへ追加できるようにします。
サンプルと明記したレビューと、写真付きレビューへの絞り込みも追加します。
商品を検討するアプリなので、購入手続きや実際の在庫表示は入れません。

一般公開する前に、すべてのサンプル情報を実際のカタログ情報に置き換えます。作成、共有、保存データの設定は、キャンバスでライブアプリを作るを参照してください。下の例は操作の説明用であり、同じ商品やレイアウトが作られるとは限りません。

リネンの例を試す

Slowfieldのシーツセットの例は、写真、色とサイズ、数量、バッグ、レビューの絞り込みを一つの商品ページにまとめています。

英語で表示される例で、次の二つを比べてください。

1. Queen と King を切り替え、数量を変え、バッグに追加するボタンの金額を確認します。商品を追加して Bag を開き、明細を見ます。
2. 写真付きのレビューに絞り込みます。そこから得られる情報と、ページ上部の商品写真を比較してください。

使い捨てのサンプルデータを使っています。選択や変更は再読み込みでリセットされます。バッグに入れても、実際の購入、在庫の取り置き、決済は行われません。

まだ迷う点を解消する

下書きを試してもらい、何を判断できなかったか聞きます。その点に絞って修正します。

サイズの選択欄の横に、QueenとKingのセット内容と寸法を正確に比較できる
表示を追加してください。比較を開いている間も選択中のサイズが見えるように
します。現在のバッグの中身は残してください。

共有前に、写真、単位、価格、選べない組み合わせを含め、すべての種類を元の一覧と照合します。種類を切り替えてから数量を変えても、確認欄が正しい内容を示すか試してください。架空のレビューは、実際のお客さまの評価と誤認されない表示にします。次に個別の依頼を受け付けるなら、注文フォームに進み、送信によって何が確約されるのかを明確にしてください。