スマホECの入力ページ・検索・アドレスバー表示改善

Pocket

今回はスマホECサイトのユーザビリティのうち入力フォームや検索時の注意点を見ていきたいと思います。いずれも今すぐに改修できることなのでもしあなたのサイトで実装出来ていなければエンジニアと相談してすぐに対応を検討してください。

<スマホECサイトのユーザビリティ改善>
(1)ボリュームゾーンを初期設定する
(2)ラジオボタン等のタッチはラベル対応させる
(3)パスワード入力は直前の文字を表示させる
(4)検索フォーム内に削除ボタンを設置しない
(5)アドレスバーは非表示にする

(1)ボリュームゾーンを初期設定する

スマホサイトの入力フォームは離脱が起りやすいページです。離脱を防ぐためタップ数を減らす工夫としてお客様がもっとも多い選択肢を最初にサイト側で指定しておくことがよい施策です。例えば「性別」や「都道府県」、「生年月日」などの選択項目をお客様の割合がもっとも多い選択肢をデフォルト(初期設定)で指定するということです。

例えば男性向けのサイトであれば「性別」は「男性」と初期設定してください。正しくないのは「性別を選択してください」と表示させ、男女いずれでも必ずタップする必要がある構成にすることです。「生年月日」も同じで30歳向けのECサイトであれば、「1984年」をはじめにプルダウンで指定をするとお客様が選択する手間は格段に減ります。

図1

ファッションEC「フェリシモ」の会員登録フローでは生年月日欄が「1984年」で指定されています。30歳ユーザーが一番多い層なのでしょう。食品EC「大地を守る会」では「1975年」に指定されています。食品EC「オイシックス」では生年月日は「1970年」で、その他に「住所」の都道府県が「東京都」が初期指定されています。東京都のユーザーが一番多いことを考えた上での対応で、お客様に対する細やかな気遣いを感じます。

(2)ラジオボタン等のタッチはラベル対応させる

ラジオボタンやチェックボックスのタッチ範囲はラベル(文字部分でもタッチできるようにする)対応することによりお客様が選択しやすくなるのでラベル対応が必要です。スマホサイトのユーザビリティ面で考慮しないといけないのは「タッチのしやすさ」ですが、ラジオボタンだけをタッチできるだけでは範囲が狭く、使いにくいと感じる場合も多いでしょう。

例えばメガネ通販「Zoff」の会員登録フローではメルマガ登録のラジオボタンでラベルを広く取っており、ラジオボタンの○欄に指先を合わせないでも選択することが可能です。楽天市場スマホサイトの商品詳細ページのサイズ選択のラジオボタンはスマホユーザーの操作性を考え一回り大きくボタン自体を表示していますがラベル対応はしていないので多少不便さを感じますね。

図2

(3)パスワード入力は直前の文字を表示させる

パスワードを入力中、直前に入力した文字は隠さずに表示させるようにして下さい。

自分がどの文字を入力したのか確認しながら入力でき、誤入力によるエラーの発生率を抑えることができる効果があります。入力した文字も●等で隠してしまうと、エラーが出てもどこがエラーなのか理解しにくくなります。そもそもスマホは入力が苦手な機械なのでせっかく頑張って入力しエラーが発生した時はお客様のテンションが下がり離脱の原因に繋がるでしょう。

図3

ファッション通販「スクロール」のパスワード入力では設定が正しく、1文字入力をすると入力した文字は見えながら、それまでに入力した文字は●になります。「マガシーク」、「無印良品」等、私が確認したサイトでは全てこの仕様が実装されておりました。

(4)検索フォーム内に削除ボタンを設置しない

検索窓に「×(全削除)」は使用しないようにして下さい。検索ボタンや検索フォームをタップしようとした際に入力した文章を誤って削除する恐れがあるためです。お客様が入力した文章というのはサイトをただ眺めている状態とは違ってお客様が主体的に情報を探している状態なので誤操作が起こる可能性があるものは徹底的に排除します。

ロハコ、無印良品、スタイライフ、マルイ通販、トイザラス、ヴィレッジバンガード、丸善&ジュンク堂など大手スマホECサイトの多くはフリーワード入力窓における「×(全削除)」は設置されていないことからお客様の入力のしやすさを考慮していると考えられます。

(5)アドレスバーは非表示にする

サイトを表示した際にURLが表示されているアドレスバーを非表示にする設定を入れて下さい。非表示にすることにより表示した瞬間にお客様が閲覧できるスペースを広げる効果があります。スマホは表示領域が狭いためファーストビューが非常に重要になるためアドレスバーは不要です。アドレスバーを非表示にする設定は一部ソースを改修する必要があります。エンジニアと検討して下さい。

図5

たまに「スマホ専用サイトへアクセスしますか?」とわざわざ聞いてくるサイトをたまに見掛けることがあります。これは正しくありません。当然スマホでアクセスした時はお客様に選ばせずにスマホサイトを表示して下さい。リダイレクト時の注意点としてはもう一点重要な点は「お客様が見たいページを閲覧させる」ことです。スマホ端末でPCサイトにアクセスした際、PCページの対となるスマホページが存在しない場合も考えられます。その場合はそのままPCページを表示させましょう。

対となるスマホページが無い場合、スマホサイトのトップページへリダイレクトさせるとお客様が知りたい情報ではなくなってしまうので離脱の原因に繋がってしまいます。「商品Aのページを読みたいのにTOPページが表示された。他のサイトを探そう」というようにお客様の期待に添っていないサイト構成になります。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*