AdvancedGFormsのwebアクセシビリティとEFOについて
index
エラー箇所はわかりやすいデザインにする
エラー箇所がわかりずらいと、ユーザーの入力の手間を増やしてしまい、離脱の原因となってしまいます。
ですので、エラーのある入力フィールドは一目でエラーをわかるようなデザインにする事が望ましです。
AdvancedGFormsではエラーの入力フィールドの背景をエラー色に変更し、アイコンを表示する事で簡単にエラー箇所を認識できるようなデザインにしています。
エラーが発生しても、入力情報はクリアしない
エラーがあると修正する必要があるため、入力内容をクリアするフォームが存在しますが、値は消去してはいけません。
例えばエラーの内容が1文字修正すればクリアできるのに、すべての文字を消してしまっては再入力が面倒ですし、どのような入力内容でエラーが出たのかを確認できず、再びエラーを起こしてしまう可能性も高くなります。
リアルタイムアラートを入力途中で使わない
入力内容のチェックは送信ボタンを押した後に一括で行うパターンと、入力フィールドごとにその場で行うパターンがありますが、使いやすいのは後者の入力フィールドごとにチェックをし、エラー内容をリアルタイムで表示するパターンです。
ですが、リアルタイムと言ってもユーザーが1文字入力する毎、何かアクションを起こす毎に毎度エラー表示やアラートを出してはかえって鬱陶しいだけの存在になってしまします。
そうなるくらいなら前者の方がよっぽど良いです。
ですので、ユーザーの入力が終了し、フォーカスが外れたタイミングなどを見計らってバリデーションチェックをかけリアルタイムアラートを出した方がよいでしょう。
AdvancedGFormsでは入力系はフォーカスが外れたタイミング、選択系は選択した値が変わったタイミングでバリデーションチェックとエラー表示を行うようにしています。
入力成功サイン
エラーデザインだけでなく、成功したときのデザインも考えます。
入力が完了しているのか、未入力なのか、簡単にわかるよう、AdvancedGFormsでは入力が完了したフィールドをsuccessカラーにし、チェックマークが表示されるようなデザインにしています。
全角/半角は自動変換する
入力フィールドの内容によっては半角のみ受け付けたい場合や逆に全角のみ受け付けたいというような事があります。
その場合に、間違った形式で入力してしまった場合に、エラー表示をだすのではなく自動で変換してくれる機能があればユーザーの負荷を解消する事が可能ですので、全角/半角の自動変換機能を搭載しています。
入力モード自動変換
入力する内容によっては数字だけが必要だったり、テキスト入力を行う必要があるフィールドなど様々です。
特にスマホでは、入力のためのキーパットのモードを数字モードやテキストモードに切り替える必要があったり、パソコンの場合も半角/全角のモードを切り替える必要があり、面倒に感じます。
そのような面倒をなくすために、適切な入力モードに自動で切り替えてくれるという機能があり、ユーザーの手間を省きます。
制限事項を明記する
テキストエリアなどは送信容量の関係や、送られてきた文章を読む時間を取れないという理由で、文字数を制限する事があります。
その場合、文字数のカウントをユーザーに強いる事なりますが、テキストエリアに文字数カウント機能を付け、常に現在入力している文章の文字数が何文字なのかを表示してくれていると便利です。
ですので、テキストエリアには文字数カウント機能を搭載し、制限文字数を超えた場合はリアルタイムでエラー表示を出すような機能を持っています。
オートコンプリート機能を利用する
長い住所や、メールアドレスは覚えておくのも入力するのも面倒です。
ユーザーによっては引っ越したばかりで住所を覚えていないというような人もおり、自分の住所を調べるのが面倒だと思い離脱してしまうかもしれません。
そんなときはオートコンプリート機能を利用し、ユーザーの入力を自動保管する事入力の手間を省けます。
オートコンプリート機能とはブラウザが記憶している別のフォームなどで入力したユーザーの個人情報を提案してくれる機能です。
例えば過去に別のフォームで住所を入力していると、オートコンプリート機能を適切に設定しているフォームで同じように住所を入力する際に「もしかして、これを入力したいんじゃないですか？」と前に入力した住所を提案してくれます。
これでユーザーは再度長い住所を入力する事なく、ワンクリックで入力する事が可能となります。
オートコンプリート機能を使用するにはHTMLを適切な形で制作しなければいけませんが、AdvancedGFormsではこれをきちんと設計しています。
郵便番号からの住所自動入力
オートコンプリート機能で記載した理由と同じですが、住所の入力は面倒です。
ですので、郵便番号から検索が可能な機能があると便利です。
AdvancedGFormsでは郵便番号を入力すると自動的に住所を割り出し、入力してくれる機能があります。
もちろん、自動入力をさせたくない場合はその機能を切る事も可能です。
離脱防止ブロックを付ける
フォームの入力途中に間違って他のページのリンクをクリックしてしまったり、スマホですと間違ってスワイプし、前のページに戻ってしまったりし、入力していたデータがすべて消えるという事があります。
入力データがすべて消えてしまった瞬間、よほどお問い合わせのモチベーションが高い人でない限り再入力はしてくれないでしょう。
そのような事故を防ぐため、入力中にページを離れようとした場合にアラートを出す機能を付けるとよいです。
AdvancedGFormsではフォーム入力中に以下のような操作があった場合、本当にページを離れてもよいかの確認アラートが表示され、事故を防ぐ事が可能です。
- ブラウザバック
- リンククリック
- ブックマーククリックによるページ遷移
- タブを閉じる
- ブラウザを閉じる
アクションボタンは必須項目の入力が完了するまではアクティブにしない
送信ボタンなどのアクションボタンは送信に関する条件をすべてクリアするまで非活性だとわかるようなデザインにし、送信に関する条件がクリアしたタイミングで活性とわかるデザインへ変更する事で、ユーザーの理解を助けます。
処理に時間を要する場合にはローディングを使用する
人間は皆、とてもせっかちです。
送信ボタンなどのアクション系の操作をして0.1秒以内になにかのフィードバックがないと不安を覚えます。
ですので、例えば送信ボタンを押した場合はすぐに処理中という事をフィードバックする事が親切です。
また、すぐにフィードバックをがもらえない場合、ユーザーはクリックできなかっただと思い、何度も送信ボタンを押し、二重送信の原因にもなりますので複数回クリックしても一回のみ処理が実行されるような対策も行っております。