確実な成約のためのスマホ専用入力フォーム最適解

Pocket

img5-formスマホサイトの入力フォームはもっともユーザーを離脱させてはいけない。

何故ならばもう少しであなたのサイトの成約に到達するからだ。

だからこそ入力フォームのユーザビリティは抜け目なく徹底的にこだわる必要があるのだがサイトトップページや商品ページなど商品を魅力的に伝えたいページのデザインに注力することは多くとも入力フォームは見過ごしてしまうことが少なくない。

スマホ用のECサイトのフォームを例に最高に使いやすいユーザビリティをお伝えしたいと思う。ECでなくとも考え方は同じなのでどのような業界のWeb担当の方にも読んで頂けたら幸いです。

【目次】
1  最高に入力しやすいスマホ用入力フォーム
2  3つのユーザビリティ視点
3  エラー発生時の表現
4  具体的な施策

1  最高に入力しやすいスマホ用入力フォーム

img7-form
まず指タップで入力しやすいように入力フォームの縦幅、横幅を十分に取っている。

またフォームを横に並べることはせず、上下に目が移動するスマホに特化した構成になっている。

タップ数を減らす工夫として「住所検索」があげられる。使ったことあるユーザーも多いと思うが郵便番号を入力すると住所が自動的に表示される機能だ。住所検索は実装必須だ。

その他、必須項目が未入力である場合は次の画面へ進めない機能もスマホユーザーのテンションを下げない工夫だ。

このフォームは一例であるがスマホ専用の入力フォームはどのような視点を持ってユーザビリティを検討する必要があるのかについて次の章からお伝えしていきたい。

2  3つのユーザビリティ視点

以下の3つの数を徹底的に少なくすることが求められる。

  •  項目数
  •  枠数
  •  タップ数

入力フォームに限った視点ではないがスマホサイト設計上、最重要な3つの視点なので1つずつ確認をしていきたい。

2-1  項目数~ユーザーの目的を実現するために必要な最小限の項目のみ実装~

img2-form
サイト運営側からするとユーザーの多くの情報を取得し属性を把握したいと思ってもユーザーにとって必要な項目とは限らない。ユーザーがそのフローで実現したいことの最小限の項目だけを実装することが求められる。

ECサイトでは商品をユーザーに届けられればよいので氏名、住所等があればよい。

しかし「職業」や「年齢」を必須項目にしていたり、よく見掛けるのは「性別」を必須にすることだ。当然ながら男女のどちらであっても配送先が分かっていれば商品は届くので項目としては不要だ。

どうしても配送先以外の情報を取得したい場合がもしあったら、必須は避け、任意とする。ただ購入フロー中に、ユーザーの離脱リスクを増やしてまで取りたい情報とは何かあまりイメージが湧かないが、例えば広告効果を測りたいことを目的に「当サイトを知ったキッカケ」だとすると、ユーザーに考えせる時間はなくしてラジオボタン等の表現上の工夫をする。さらに言えば、「当サイトを知ったキッカケ」はユーザーにとってはどうでもいい情報なので、選択肢の一番上などをいいかげんに答えることもあるだろうからデータ信憑性についても考慮しないといけないだろう。

2-2  枠数~入力ボックスは1項目につき出来るだけ1つにする~

img3-form
スマホはキーボードやマウスによる操作はできないので入力が必要な枠数は徹底的に少なくする。
例えば、電話番号の項目を市外局番から一つずつ入力ボックスを分けるのは間違っている。市外局番を入力し、また次のボックスを開いて入力し、最後のボックスをまた開いて入力するのでは、ユーザーは電話番号を入れるだけなのに三度もボックスを開かなければならず面倒くさい思いを感じさせてしまう。

住所欄においては「マンション名」だけを別のボックスにする等もたまに見掛けるが、それも正しくはない。住所欄は一つのボックスで完結できるのがベストだ。

データベースの作り方に起因する問題であるので、エンジニアが先行して構築したデータ構造に従ってサイト設計をすることなく、設計側がしたいことをエンジニアに伝え、協力しながら開発をしていくことがプロジェクト運営上求められる。

ただし、例外が1つある。それはクレジットカード番号の入力ボックスだ。クレジットカードの番号というのは一般的に暗記しているものではないから入力時にカードを取り出してカードを見ながら入力することがほとんどだと思われる。

従ってフォームは分割したほうが確認しながら入力しやすくなり結果的にエラーが発生しにくい項目になる。

2-3  タップ数~ユーザーがもっとも選ぶ選択肢を初期設定~

img6-form
入力フォームに限ったことではないが、スマホサイト設計上、タップ数を減らすことは考慮すべき最大ポイントだと考えて間違いはない。

入力フォームにおいてのポイントはデフォルト時の設定だ。

もし女性向け商材を取り扱うサイトなら、性別選択があれば、あらかじめ女性にチェックしておく。大半が女性だとすると、この項目はタップする必要はなく、かといって、数の少ない男性であっても困ることはない。

この考え方は決済選択にも応用することが可能だ。

もしサイトの決済方法の利用頻度が「代引き、カード、銀行、コンビニ」の順である場合、その順番に項目を並べ、かつ一番多い選択肢にチェックを入れておくのが工夫だ。

3  エラー発生時の表現

error01
エラーメッセージはサイト設計時からそのままであることが多く、改善検討項目に入らないこともあるが、エラーメッセージが出て、テンションが下がったユーザーが離脱してしまうのは心理的に自然であるから、エラーメッセージの工夫も重要になる。
詳しくはこちらで書いているが『ユーザーとの距離を縮めるエラーメッセージ仕様&5事例』(2015年3月3日)、必須項目を空のまま次に進むと喚起メッセージが自動で出たり、入力形式にエラーがあると入力中にメッセージが表示されたり、必須項目が未入力であれば確認画面Tへ進めない等、確認ボタンを押下した時に表示されるだけではなく、入力中にエラー判定処理をしてユーザーに伝えることが増えてきている。

スマホサイト用ではTVショッピングのQVCジャパンのサイトがもっとも優れたエラー表現であるから故意にエラーを出してみて試して欲しい。

4  具体的な施策

様々施策を書いてきたがここではまとめて列記するので、自社サイトにもっとも合致した入力フォームの最適解を探すのに役立てて頂ければと思う。いくつか常識的なことや、スマホに限らずWeb全般に該当するものもあるが、重要だと思うことを並べるので必要だと思うことを選んで頂ければと思います。

・ユーザーの目的を実現するために必要な最小限の項目のみ実装
・電話番号、住所などは出来るだけひとつの入力ボックス
・クレジットカードのボックスは「-」(ハイフン)ごとに分ける
・入力フォームは縦に並べる(例えば、苗字と名前のボックスを横に並べない)
・入力例を必ず表示
・カタカナ入力はさせない(スマホでカタカナにするのは面倒)
・商材やユーザー属性、使い方に合わせてデフォルトの表示を調整
・必須アイコンは目立たせる(※は禁止)
・入力フォームにあったキーボードを表示(英数では英数ボード)
・1つのフォーム内で切り替えを何度も行わせない(例えば、1982年10月19日の入力を求めるのは間違っている。理由は「数字」「ひらがな」を交互に入力しないといけないから)
・パスワード入力は直前の文字を表示させる
・パスワード入力を2回求めるのは本当に必要か(会社のポリシー次第)
・文字量が多ければラジオボタンを使う(プルダウンでは表示が切れてしまう)
・ラジオボタンやチェックボックスはラベル対応させる
・プルダウンは選択肢の文字数が少なければよいが長ければ使わない
・成約に関係のないリンクは一切排除(サイト共通のヘッダー、フッターもフロー中はなくす)
・「次へ」ではなく「入力内容を確認する」等具体的にユーザーがすることをボタン名にする
・必須内容が未入力の場合は確認画面へ進めない
・所要時間を表示(ただし10分などかかる場合は反対に書くとテンションが下がる)
・住所検索ボタンを設置
・メールアドレスは二回入力させない
・入力ステップを表示

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*