スマホでの買い物を便利に！ECサイトで必ず搭載したい機能

こんにちは。広報兼スマートフォンサイトのデザイン担当・横山です。
今回は広報からちょっと離れて、ECサイトで必ず搭載したい機能についてお話ししたいと思います。

【目次】

1.会員登録、問合せフォーム

・入力項目を少なく

入力項目が多ければ多いほど、ユーザーにはストレスがかかります。
これを削るだけで最後まで入力してもらうというハードルがぐっと下がります。
まず、大前提として本当に必要な項目なのかをしっかり検討してください。

・エラーのだしかた

最後まで入力して、ついに内容確認のボタンをタップしたら、「エラーです」と言われてもう一度、該当箇所まで戻る...なんてことってよくありませんか？
ユーザーに「ここまで書いたのに...あーもうめんどくさい！」なんて思われてしまわないように
エラーは入力して、次のフォームに移った時点ですぐにだしましょう。

・電話番号、郵便番号の入力フォームをわけない、ハイフンをいれない

電話番号が3つのフォームにわかれているサイトはまだまだたくさんありますね。
PCであっても、一度次のフォームにうつらなければいけないのは、少しめんどうですよね。
これがスマートフォンとなると番号を連続でタップできないのはかなりめんどうです。
フォームはひとつにまとめ、さらにハイフンが不要のほうがユーザーは連続して番号のみをタップするだけ入力が可能になります。
また、その場合は必ず「ハイフン不要」と記載をしましょう。何も例が書いていないとハイフンが必要か不要かユーザーが迷ってしまいます。
(私もハイフンがいるのか、いらないのか迷った経験があります。)

・プレースホルダを使わない

フラットデザインの流行もあってか、どんどんデザインがシンプルになっていく中で入力フォーム内に例やラベル(項目名)を入れるサイトが多く見られるようになっています。
見た目はきれいなんだけど、実はこれって、ユーザーにとっては困りものなんです。

理由1.何を入れるか思い出すことができない。
一度、ユーザーが入力してしまうと、プレースホルダの中に入った文字は見えなくなってしまいます。
理由2.ラベル(項目名)が入力フォーム内に入っていると、内容確認ボタンを押す前に確認がしづらい。
ラベルがないだけで、入力フォームにいれた回答が正しいかを確認することが困難になる。
理由3.プレースホルダのテキストを自分で削除しなければいけない場合がある。
入力フォームにフォーカスがあたった時に、プレースホルダが消えない場合があります。
編集可能な状態にはなっているものの、結局ユーザーが自分で消す必要があります。
入力フォームにフォーカスがあたった時に、プレースホルダが消える場合、1で記述したように中になにが書いてあったかをユーザーが忘れてしまうという問題が出てきます。

ラベル(項目名)とヒントになる例が入力フォーム外に出ていることが重要になります。

・同意のチェック

フォームの最後に、会員規約などに同意してもらう場合、
チェックボックスにチェックがついていないと内容確認画面に進むボタンがタップできないようにしておくことで強制的ではありますがエラーに気づくことができます。

・横移動ができるリンクはつけない

・住所自動入力

住所をいれるのが一番めんどくさい作業ですよね。
住所はひらがなも数字、記号(ハイフン)も入っており、なおかつ長いです。
ここは住所自動入力でユーザーに楽をさせてあげましょう。

2.ログイン

・パスワードを覚えておくチェックボックス

ECサイトで買い物する際に必ず必要なのがログインですね。
いつも買い物するサイトが決まっていれば、
ログイン情報を記憶しておいてくれたほうが、スムーズに買い物ができますね。
とくに買いたいものが決まっていてすぐに購入したい！というときは、カートからのログインもスムーズですね。

・SNSやYahooのアカウントでのログイン

最近、FacebookやYahooアカウントを使ってのお買い物ができますね。
ECサイトにはまだまだ少ないですが、だんだん増えてくるのでないでしょうか。(ECサイト以外では、すでにかなり普及されていますね。)
ユーザーに楽をしてもらうという点では、これのある・なしはかなり大きなポイントだと言えます。

3.商品詳細

・サイズと色と在庫の関係

ECサイトではとくに色やサイズがたくさんあり、自分がほしいサイズと色の在庫状況がどうなっているのかをユーザーにいち早く知らせるのが重要になります。
在庫がなければ、その商品(ページ)はユーザにとって意味のないものになります。
在庫がなかったとき・・・の話は一旦、おいておきます。
サイズと色を選ぶと同時に在庫状況がわかるという仕組みを取り入れましょう。
または、一覧にしてすべてのサイズと色の在庫状況がひとめでわかるようなデザインを考えましょう。(ZOZOTOWNやAbercrombie &Fitchの商品詳細ページなど参考に載せておきます)

4.商品一覧

・お気に入りボタン

商品詳細には必ずお気に入りボタンがついています。
一覧ページにもお気に入りボタンをつけることで、一覧(全体)を見ながら、一旦選んだものを入れておく場所があるとユーザーもあれこれ迷いながら楽しく買い物をすることができます。

5.メニュー

・履歴

ユーザーはたくさんの商品を見ます。
とくにスマホでは、「ながら見」をしていることが多いですよね。
移動中や家に帰ってリラックスしながら...など。
たくさんものをみていると、自分がみたものを忘れてしまいます。
そんなときに「履歴」があると、お気に入りにいれなくてもさっきまでみていたものが見れるというのはもう一度探すという手間を省くことができます。