AdvancedGFormsのアクセシビリティ（UIデザイン編）

AdvancedGFormsではEFO対策とアクセシビリティや使いやすさ考えたUIデザインを取り入れております。

AdvancedGFormsで行っているEFO機能とフォームで実装すべきアクセシビリティについて紹介していきます。

プレースホルダーをラベル替わりにしない

フォームでラベルとしてプレースホルダーを使うのはおすすめしません。プレースホルダーはユーザーが入力を始めると消えてしまうため、使い勝手が悪くなります。

ユーザーは通常、複数の作業を同時に行っており、フォーム入力中に他のタブを開いたり、考え事をしたりすることがよくあります。

そのため、フォームに戻ったときにプレースホルダーがなくなっていると、何を入力すべきか忘れてしまう可能性がありますのでプレースフォルダーとは別にラベルを表示する機能があります。

補足テキストを隠さない

補足テキストをツールチップに隠してしまうデザインがありますが、内容を閲覧するためにはユーザーのアクションを必要とするため、そのひと手間を面倒だと感じてしまい負荷を与えてしまいます。

ですので、なるべく初めから確認が可能な状態へ展開して表示し、スムーズなフォーム入力の理解を促す事がおすすめです。

特に入力条件、例えば、

「電話番号のハイフンは含めないでください」

などの絶対に伝える必要がある情報などは特に隠してはいけません。

ですので、ツールチップではないタイプの補足テキスト表示機能があります。

補足テキストは入力フィールドから離して記載しない

補足テキストを記載するときはなるべく入力フィールドの近くに記載し、情報の関連性が目視でわかるようにします。

離れた位置に記載していますと、どの入力フィールドに対しての説明なのか判断が付かず、混乱を招く原因になってしまいます。

ですので入力フィールドから離れすぎないようなデザインにしていると共に、何らかの理由で表示位置を変更したい場合に備えて、表示位置を変更する事ができるよういくつかのレイアウトパターンを選択可能にしています。

HTMLでの関連付け

見た目上で関連性を紐づけるという話をしていますが、HTMLでのフォームと説明文の関連付けも必要です。

視力にハンデのある方が支援ツールなどを使用してフォームの内容を理解する際に、HTMLレベルでの紐づけが行われていないと支援ツールで適切に理解する事ができなくなってしまいます。

HTMLでの説明文の関連付けについてはAdvancedGFormsのアクセシビリティ（HTMLコード編）の説明の紐づけをご覧ください。

必項という事を省略しない

入力フィールドが必項である事を*などで省略して表記する事がありますが、*という表現になれていないユーザーからすると訳が分かりません。

ですので、省略せずにきちんと「必項」とテキストを添えるべきですので、入力フィールドを必項に設定すると、テキストで「必項」とタグが付くようなデザインにしています。

チェックボックス、ラジオボタンは一列に並べる

チェックボックスやラジオボタンは余白の開け方やデザインによっては、どのラベルがどのチェックに紐づいているのかが理解しずらい部分があります。

さらに人間は横長に続くテキストを見ると認知負荷が高くなりますので、横に短く、縦に長く並べてあげる事で認知負荷を下げる事が可能です。

ですので、チェックボックス・ラジオボタンは一列に並ぶデザインにしています。

見出しを付けて情報をグループ化する

長いフォームの場合、ユーザーに単調で入力が面倒くさそうだと思われ、躊躇してしまう事があります。

その課題を解消するためにはステップにし、順番に入力させる方法がありますが、これは実装に手間がかかります。

最もコスパよくできる対策として見出しを用いて、何についての情報を聞いているのかグループ化する事です。

視点の移動をスムーズになり、フォームの見やすさがかなり向上します。

AdvancedGFormsはグーテンベルクエディタを使用してフォームを構築していきますのでデザインは自由自在です。

プログラムコードを触ることなく、お好きにデフォルトの見出し機能などを組み合わせてフォームを制作する事ができます。

ラベルと入力欄はグループにする

ラベルと入力フィールドを近づけて情報のまとまりをつくり、ラベルと入力フィールドの関連性を視覚的に表現しましょう。

このような工夫がない場合、どの項目がどの入力フィールドに紐づいているのか判断が難しくなり、負荷が高まることで離脱の原因になってしまいますので、視覚的にグループ化するデザインにしてます。

HTMLでの関連付け

見た目上で関連性を紐づけるという話をしていますが、HTMLでのフォームとラベルの関連付けも必要です。

視力にハンデのある方が支援ツールなどを使用してフォームの内容を理解する際に、HTMLレベルでの紐づけが行われていないと支援ツールで適切に理解する事ができなくなってしまいます。

HTMLでのラベルの関連付けについてはAdvancedGFormsのアクセシビリティ（HTMLコード編）のラベルの紐づけをご覧ください。

入力エリアだと簡単にわかるようにする

「洗練された」などをコンセプトにデザインを行うと多くの場合文字が薄く、補足なったり、入力フィールドの存在感も薄めになりがちです。

確かに洗練された高級感を演出する事は可能ですが、入力エリアだという事の認識の難易度があがってしまうというデメリットがあります。

コンバージョンを第一に考えるとフォームは認知負荷を高めるべきではありませんので、しっかりと認識できるデザインにしています。

電話番号や郵便番号の入力欄はハイフンごとに分けない

電話番号や郵便番号はハイフンを含む表現や含まない表現があります。

含む表現を使用する場合、ブロックに応じて入力フィールドを分ける事がありますが、電話番号であれば初めの3桁を入力し、次の4桁目を入力するフィールドをマウスでクリックし、また入力を始めなければいけません。

これはユーザーの入力の手間を増やしてしまい、離脱の原因になってしまいます。

ですので、ハイフン事に分けずに1つのフィールドで入力させるようなデザインにしています。

エラー文は正確に、すぐそばに表示する

入力内容をバリデーションチェック後、もしもエラーがあればユーザーにエラーメッセージのフィードバックを表示しますが、そのエラーメッセージも補足テキストと同じように入力フィールドの近くに表示し、関連性が目視でわかるようにします。

逆によくない例としてはエラー内容をフォームのトップや送信ボタンの上にまとめて記載していまうようなデザインです。

これでは、エラー内容がどの入力項目を指しているのか一目ではわかりずらく、エラーメッセージと入力フィールドが離れいた場合、行ったり来たりと操作負荷が高くなってしまいます。

ですので、エラー表示はエラー内容と入力フィールドの関連をわかりやすくし、どの値をどのように直せばよいのかすぐにわかるようなデザインにしています。

HTMLでの関連付け

こちらも見た目の話であり、視力にハンデのある方など支援ツールを使用している方はエラー内容を目視で認識する事が難しいですので支援ツールに適切にエラーの関連性を伝える必要あり、HTMLレベルでの紐づけが必要となってきます。

HTMLでのエラーメッセージの関連付けについてはAdvancedGFormsのアクセシビリティ（HTMLコード編）のエラー表示と動的に変化するエラーメッセージを通知するをご覧ください。

他のエレメントとの違いをはっきりさせる

このように入力フィールドとボタンの見た目が同じであると操作にまよいがでてしまうので、別のエレメントであり、役割が異なる事を視覚的伝える事が大切ですので、区別できるようなデザインにしています。

フィールドの幅は適切なサイズにする

入力フィールドの幅は入力内容によって適切な幅にしましょう。

長いテキストの入力を求めるのに、フィールドの幅が狭いとテキストが隠れてしまい、入力の難易度が上がってしまいます。

ですので、入力内容に合わせて自動的に可変するような仕組みにしています。

16px以下の文字サイズにしない

テキストの視認性から16px以下のフォントサイズにする事は望ましくありません。

特にiPhoneでは16px以下のフォントサイズの入力フィールドの場合、自動的ズームインし、フォントサイズを大きく見せるという機能が付いており、その自動ズームインがユーザーの操作性を損なわせてしまします。

これは実質、16px以下に設定をするなと言っているようなものです。

ですので、はじめから入力フィールドのフォントサイズは16px以上に設定しています。

スマホ最適化をおこなう

スマホでお問い合わせを行う事もサービスの内容によては多くなるでしょう。

スマホの状態でもユーザーの操作性を損なわないよう、スマホの時はスマホに適したデザインになるよう、レスポンシブデザインにも対応させます。

例えば、デスクトップパソコンの状態では2つ横並びの入力フィールドをスマホでは縦並びにするなどです。

どのようなデバイスで閲覧されても問題なく入力作業が行えるようなデザインにしております。

フォームを制作する際に制作者が気を付けるべき事

選択肢が4つ以上になる場合はセレクトボックスにまとめる

選択肢が4つ以上になる場合はなるべくセレクトボックスなどにまとめ、フォームが縦に長くなってしまう事を避けましょう。

ただ、セレクトボックスにしてしまうと選択肢が隠れてしまうので、隠さない方がよいと判断できる場合や、複数選択を許可する場合はチェックボックスにし、縦に展開して並べたほうがよいです。

ユーザー視線をZの形にしない

ラベルと入力フィールドを以下のような配置にする事でユーザーの目線がZのような動きになります。

Zに動くと無意識のレベルで認知負荷を上げてしまうのでなるべくIの形にし、スムーズな目線の動きにする事が望ましいです。

AdvancedGFormsでは様々なフォームのデザインを制作できるように配置のパターンをいくつか用意しています。

配置のデザインは入力フィールドの内容にもよりますので、知識として頭に置きつつ、総合的に考えて配置を考えましょう。

アクションボタンのテキストは何が起こるのかを明確にする

AdvancedGFormsは送信ボタンのテキストを変更可能です。

自由な文字を入れる事ができるので、どのようなテキストにしようか悩む所ですが、意識したいのは、ボタンをクリックすると何が起こるのかがわかるような表現にする事です。

プレースホルダーで例文を表示する

入力フィールドに何を入力していいかわからない….

というような経験はないでしょうか？

例えば、「お問い合わせ内容を入力」という項目を必項で用意しているフォームをよく見かけますが、そこにどんな文章を書いて送信すればいいのか、とくにその業界の知識があまりなかったりすると困った経験がよくあります。

そのような事が懸念される場所にはプレースホルダーを使用して例文を記載してあげるとユーザーの思考の助けになります。

外部への導線は設けない

離脱の一番の原因になりますので、リンクはあまり載せない方がよいでしょう。

リンク先で気になる記事やコンテンツを見つけてしまい、フォームの入力を途中でやめてしまうという事も珍しくありません。

リンクを張る事をプライバシーポリシーや同意を求める文章などの最低限にとどめておきましょう。