[AD]

タッチキーボードはこれまで何十年も使用されてきたキーボードやマウスに比べると、比較的新しい入力方法です。モバイルタッチキーボードのレイアウトには、お客様への決済フローのナビゲーション能力を妨げる制約があります。お客様のUXを向上させるために、お客様が入力しやすい環境を整える必要があります。

フィールドに最適なキーボードを表示させよう

入力フィールドのコードを若干変更することで、お客様の携帯電話番号フィールドには必要な入力形式に最適化された特定のタイプのキーボードを自動的に表示できます。

たとえば、クレジットカード番号と携帯電話番号の入力フィールドには数字キーボードを、またメールアドレスフィールドにはメール用キーボードを起動させます。

クレジットカード番号など、数字を入力するフィールドには、標準的なキーボードのレイアウトを使用してはなりません(左)。代わりに、キーの数が少なく、サイズの大きい、数字のみのキーボードを使用します(右)

ベイマードのモバイルテストによると、お客様はフィールドに適した特殊キーボードが利用できることを評価しているのみならず、その恩恵も受けていることが明らかになっています。

こうした実装により、従来、キーボードレイアウト間を手動で切り替えていた時間を節約できます。また、数字入力で利用する特殊キーボードは、タイプミスを減らすために通常よりも大きいキーとなっているため、誤って入力する可能性を最小限にとどめることができます。iPhoneの数字キーのヒットエリアは、従来のタッチキーボードの数字キーボードと比べて約500%増となっています。

特殊キーボードなら重要なキーにアクセスしやすくなり、より迅速に入力できるようになります。例えば標準キーボードでは、メールアドレスの入力に必須の「@」マークが表示されていませんが(左)、メールキーボードではこれが表示されます(右)

上の図のとおり、標準キーボードの場合、お客様はメールアドレスを入力するにあたって大文字を解除しなくてはならないだけでなく、@マークも見つけなくてはいけません。 2つ目の画像で示す特殊キーボードではすべての文字が小文字で、入力を迅速にするために@マークも表示されています。

◇◇◇

HTML5コードの包括リストならびに入力タイプに基づく各種キーボードの起動に関するデモは、baymard.com/labs/touch-keyboard-typesを参照してください。なお、こうしたキーボードを利用する際、お客様は限られた文字セットのみが利用できる点に注意してください。特殊キーボードの起動は、それに適したフィールドでの使用に限定しましょう。

次回は、「③クレジットカードの番号欄」について、さらにUXを改善させるコツを解説します。ご期待ください。

※「Amazon Pay」がECサイトのユーザーエクスペリエンス改善を研究しているBaymard Institute(ベイマード・インスティテュート)に調査を委託して作成した貴重なレポートを、日本のEC事業者向けに提供しているものです。

【モバイルファーストに最適な決済フローとは?】ここまでのおさらい


モバイルでの決済フローを最適化する改善アイデアをもっと知りたい方は、「Amazon Pay」が用意した以下のページから資料『モバイルファーストに最適な決済フローとは』をダウンロードしてください(バナーをクリックすると専用サイトにジャンプします)。

 『モバイルファーストに最適な決済フローとは』について、もっと知りたい人はこちらをクリック
[AD]
この記事が役に立ったらシェア!

Amazon Pay

Amazon Payとは、Amazonが提供するID決済サービスです。

Amazon Payを自社ECサイトに導入すれば、お客様はおなじみのAmazonアカウントを利用して、簡単・安心にお買い物ができます。このため、新規顧客獲得やカゴ落ち率削減が期待できます。

また、それに加えて、実店舗でのQRコード決済やAlexaスキルでの音声ショッピングにも対応し、単なる決済ソリューション以上の価値を提供します。

Amazon Payの詳細はこちら

記事種別: 

ネットショップ担当者フォーラムを応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

[ゴールドスポンサー]
楽天株式会社 eBay(イーベイ) ecbeing. Qoo10 Nint
[スポンサー]
株式会社アイル auWowma! クリームチームマーケティング合同会社 ユーザグラム