最適なキーボードを設定する

デスクトップブラウザーだけでなく、スマートフォンでも多くのユーザーがフォームを利用しています。キーボードを適切に設定されていないと入力時にユーザーがストレスを感じてしまい、コンバージョン率の低下につながります。

下記は一例ですが、入力項目に応じて適切なキーボードを設定しましょう。

メールアドレス

<input type="email" name="email" autocomplete="email">

type="email"と指定すると、iOSでの場合はUSキーボードが起動し、[Space]の横に@.のボタンが表示されます。

emailキーボード(iOS)

電話番号

<input type="tel" name="tel" autocomplete="tel">

type="tel"と指定すると、テンキーのキーボードが起動します。

TELキーボード(iOS)

英字入力の項目

<input name="username" type="text" autocomplete="username" autocorrect="off" autocapitalize="off">

iOSでは英字入力の場合に、先頭の文字を自動的に大文字入力にする機能(Auto Capitalize)やアルファベットのスペルミスを正してくれる機能(Auto Correct)が動作します。文章を入力する際はこれらの補助機能は便利なのですが、フォームでのユーザー名の入力などでは意図した文字が入力できなかったりと、ユーザーにストレスを与えてしまいます。

autocorrect="off"autocapitalize="off"を設定し、これらの機能が不要な項目では設定を無効にしましょう。

Auto Correct

ページ離脱時にアラートを表示する

ページ離脱時にアラートを表示する

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "入力内容を破棄します。";
  e.returnValue = confirmationMessage;
  return confirmationMessage;
});

フォーム入力時に誤って閉じてしまい、はじめからやり直した事はありませんか? 再度やり直してくれればよいですが、そのまま離脱してしまうケースもあると思います。上記のJavaScriptを実装しておくと、画面遷移時に警告を出し、誤って閉じてしまうケースを無くせます。

beforeunloadイベントはiOS Safariには対応しておりません。

おわりに

エントリーフォームの最適化は、サイト設計やデザイン面だけでなく、コーディングフェーズでも考慮すべき点は多くあります。コーディング時に上記のようなちょっとした対応を行うだけで、ユーザービリティーが大きく向上します。マークアップエンジニアの方もコンバージョン率アップのために意識して制作をおこないましょう