タッチキーボードはこれまで何十年も使用されてきたキーボードやマウスに比べると、比較的新しい入力方法です。モバイルタッチキーボードのレイアウトには、お客様への決済フローのナビゲーション能力を妨げる制約があります。お客様のUXを向上させるために、お客様が入力しやすい環境を整える必要があります。
フィールドに最適なキーボードを表示させよう
入力フィールドのコードを若干変更することで、お客様の携帯電話番号フィールドには必要な入力形式に最適化された特定のタイプのキーボードを自動的に表示できます。
たとえば、クレジットカード番号と携帯電話番号の入力フィールドには数字キーボードを、またメールアドレスフィールドにはメール用キーボードを起動させます。
クレジットカード番号など、数字を入力するフィールドには、標準的なキーボードのレイアウトを使用してはなりません（左）。代わりに、キーの数が少なく、サイズの大きい、数字のみのキーボードを使用します（右）
ベイマードのモバイルテストによると、お客様はフィールドに適した特殊キーボードが利用できることを評価しているのみならず、その恩恵も受けていることが明らかになっています。
こうした実装により、従来、キーボードレイアウト間を手動で切り替えていた時間を節約できます。また、数字入力で利用する特殊キーボードは、タイプミスを減らすために通常よりも大きいキーとなっているため、誤って入力する可能性を最小限にとどめることができます。iPhoneの数字キーのヒットエリアは、従来のタッチキーボードの数字キーボードと比べて約500%増となっています。
特殊キーボードなら重要なキーにアクセスしやすくなり、より迅速に入力できるようになります。例えば標準キーボードでは、メールアドレスの入力に必須の「@」マークが表示されていませんが（左）、メールキーボードではこれが表示されます（右）
上の図のとおり、標準キーボードの場合、お客様はメールアドレスを入力するにあたって大文字を解除しなくてはならないだけでなく、@マークも見つけなくてはいけません。 2つ目の画像で示す特殊キーボードではすべての文字が小文字で、入力を迅速にするために@マークも表示されています。
◇◇◇
HTML5コードの包括リストならびに入力タイプに基づく各種キーボードの起動に関するデモは、baymard.com/labs/touch-keyboard-typesを参照してください。なお、こうしたキーボードを利用する際、お客様は限られた文字セットのみが利用できる点に注意してください。特殊キーボードの起動は、それに適したフィールドでの使用に限定しましょう。
次回は、「③クレジットカードの番号欄」について、さらにUXを改善させるコツを解説します。ご期待ください。
※「Amazon Pay」がECサイトのユーザーエクスペリエンス改善を研究しているBaymard Institute（ベイマード・インスティテュート）に調査を委託して作成した貴重なレポートを、日本のEC事業者向けに提供しているものです。
【モバイルファーストに最適な決済フローとは？】ここまでのおさらい
"モバイル" - Google ニュース
March 09, 2020 at 06:00AM
https://ift.tt/2vGsSHH
【モバイルファーストに最適な決済フローとは？②】適切なタッチキーボードのレイアウトを用意する - ネットショップ担当者フォーラム
"モバイル" - Google ニュース
https://ift.tt/2P0XHh5
Shoes Man Tutorial
Pos News Update
Meme Update
Korean Entertainment News
Japan News Update
Bagikan Berita Ini
0 Response to "【モバイルファーストに最適な決済フローとは？②】適切なタッチキーボードのレイアウトを用意する - ネットショップ担当者フォーラム"
Post a Comment