ECサイトの「カートに追加」周辺のUIを、センス良く改善する方法

たまには具体的なUIの紹介など。

どうしても商品画像以外のデザインがワンパターン化しやすいECサイトの商品ページに、ちょっとした一工夫をすることで画面を一味違う味付けに仕上げる小技をいくつか。
※カートのデザイン例は、80 Examples of Add to Cart Buttons for Design Inspirationより。

1.値引きの見せ方を工夫して、割安感を「さりげなく」アピール

なんだかんだ言っても、ユーザは最後は価格をしっかりチェックしてます。

あまり大々的に書くとサイトが胡散臭くなってしまうような商材で、でもちゃんと値引きや割安であることをアピールしたいケースは意外と多いもの。

そんなときは

1. 値下げ前と値下げ後の価格を並列に設置
2. 値下げした価格を強調（主に赤系の色を使ったり、太文字にしたり）しつつ、定価は主張しないように、でも目に留まる程度に配置
3. 定価を横線で打ち消すと、少し値引きが強調される。（→例：定価 5000円）
   ここは商材とご相談ですね。

場合によっては↓のように値下げ幅を書いてしまうのもアリですね。

2.ちょっとしたイレギュラーで、アクセントを

縦横のデフォルトフォントに、手作り感や斜めの要素を加えると、ちょっとしたアクセントに。
トップページなどでは良く見ますが、下位の商品ページでも、ユーザの理解を助ける補足説明などに、鬱陶しくない程度で利用してみると面白いですね。

3.送料の情報を、価格の傍にさりげなく設置

ユーザビリティテストでも、ECでの送料チェックはユーザが常に行う項目。
とはいえ、毎回ページを読むたびにどかどかと「送料無料」と訴求するのも考え物。

着実に見てもらえ、かつ邪魔にならないように設置できるとかなりの好印象でしょう。

4.お友達等との情報共有を促す仕掛けを

Twitterやメールなどで、周囲の人にも情報を伝えてもらえれば一石二鳥。
目立つ必要はありませんが、これまたさりげなく情報共有のための仕掛けを入れておくとよいですね。

ECの個別商品ページはどうしても似たり寄ったりになりがち。
小さな工夫ですが、その積み重ねでひとつ上のレベルでユーザ体験を設計できると、顧客の反応も変わってくると思います。

■ 関連記事

• サイトを作る時に、iPhone対応をしないといけない日がもう目の前に来ている、というお話
• ユーザビリティの問題を手っ取り早く改善するためのコツ 5ヶ条
• 80%近いコンバージョンを達成した、Triumphの恐るべき「おねだり」機能

ウェブ戦略としての「ユーザーエクスペリエンス」―5つの段階で考える
ユーザー中心デザイン (Web designing books)

posted with amazlet at 09.11.11

Jesse James Garrett
毎日コミュニケーションズ
売り上げランキング: 114146

おすすめ度の平均:

UX概念導入時の必読書
内容としては素晴らしいが…
問題解決のステップを開発プロセスの中に位置づける本
ウェブの構築のプロセスからユーザーエクスペリエンスまでの概念

Amazon.co.jp で詳細を見る