本日はフォームのユーザービリティにまつわる興味深い海外の記事を紹介します。
取り上げるのは、SmashingMagに掲載された「An Extensive Guide To Web Form Usability（訳：フォームの使いやすさの広範囲なガイド）」というタイトルの記事です。
フォームのユーザビリティといえば、ボタンの色やエラーの表示方法など、見た目にまつわることが中心に考慮されますが、この記事では、それ以外にもある２つの側面、見た目に関することと合わせて３つの側面からユーザビリティを考えることが重要だと示唆します。
フォームのユーザビリティにおいて重要な３つの側面
さっそくですが、紹介されていた「３つの側面」をまずはご紹介しましょう。
以下の３つの側面はCaroline Jarrett氏とGerry Gaffney氏の著書*1で述べられていたもののようで、「レイアウト、機能、目的の違いにかかわらず、すべてのフォームが持つ主要な側面」と定義されています。
- 関係性
フォームはユーザーと組織との関係を確立します。 - 会話
フォームはユーザーと組織の間の対話を確立します。 - 外観
フォームの見た目により、関係が生まれ、会話が確立されます。
フォームが使いやすい状態にあるためには、上記3つの側面すべてについて取り組まれている必要があると著者は述べます。
当ブログでも、「外観」に関するテクニックをお伝えすることが多いですね。
今回はこの「３つの側面」のうち、外観以外の「関係性」「対話」の２つの側面についておもにご紹介していきたいと思います。
関係性
フォームは、ユーザーと組織の間の関係を確立または強化するための手段であり、使いようによってはもとある関係性を阻害したり終わらせてしまうかもしれない、と著者は述べます。
弊社で以前実施したアンケート結果では、ユーザーの半数以上が、＜フォームが使いやすいと、そのサイトについて「親切」「サービス意識が高い」などの好印象を感じる＞と解答していました。このアンケート結果でも、フォームがユーザーと事業者の関係性（印象）に影響を与えていることが見て取れますね。
【ユーザーアンケート】使いやすいフォームの印象とは？
https://f-tra.jp/blog/data/2539
ユーザーが繰り返しサイトを訪れたり、ニュースレターで継続的に接点を持ったりなど、ユーザーとサイトが良好な関係を築くための最初の関門はフォーム入力だと言えるかもしれませんね。
この関係性について、具体的に以下の７つの原則が重要であると紹介されています。
信頼
和訳：関係性は信頼に基づきます。そのためフォームで信頼を確立することが重要です。
これは、ロゴ、画像、色、タイポグラフィ及び文言によって達成することができます。ユーザーはフォームが誠実な組織のものだと知り安心できます。
良い関係性とは、相手を信頼していることで初めて成り立ちます。
人間関係においても、信用できない相手と継続的に良好な関係を築くのは難しいですし、第一印象が怪しい人とは距離を保ちたくなるものです。
フォームにおいても同じです。いかに自分たちが信用に足る存在かをユーザーに知らせることは重要です。
ユーザーを不安にさせない！安心感を与えるフォームをつくる5つのEFOテクニック
https://f-tra.jp/blog/column/2458
ゴール
和訳：すべての関係性にはゴールがあります。例えば恋愛関係における愛や幸福、ビジネス関係における金銭的利益などです。あなたのフォームの目的は何か自問してみましょう。
EFOにおいては、ユーザーをいかに送信完了へ導くかという短期的目標も大切ですが、ユーザーとの関係性を見据えたマクロな視点での目標やKPIも念頭に置きながら、ユーザー体験を設計することはもちろん重要ですね。
名前
和訳：フォームの名前はその目的に基づいたものにするべきです。
この名前によってユーザーは、フォームが何についてものなのか、なぜそれを埋める必要があるのかを知ります。
良い関係性の前提として、関係性を持つ目的が共有されている必要があります。
相手を理解する
和訳：人間関係と同じように、相手を理解することは重要です。
ユーザーを知り、いつでも質問は適切か、タイムリーかどうかを検討しましょう。そうすることでフォームに自然な流れが生まれます。
相手を理解することは必須です。関係性には段階がありますので、相手の状況に応じた適切なタイミングで必要な情報をリクエストすることが肝心です。
文言
和訳：ユーザーを知ることは、あなたが適切な言語を選択し、余分なテキストを削除するのにも役立ちます。
そしてそれは、あなたとユーザー双方のニーズに対しバランスのとれたインタフェースを作るのに役立ちます。
ユーザーの特徴やサービスの理解度により必要とされるインターフェースは異なります。UIの設計においても相手の理解が必要です。
質問内容
和訳：フォームの範囲を超えて質問しないでください。
人間関係においては、場違いな質問をすることで誰かの不信を買うことになります。オンライン上でも同じです。本当に必要とされる情報を確認するには、該当する利害関係者と相談してください。
根掘り葉掘り質問されると不信感を抱いてしまうもの。適切な内容の質問を投げかけるようにしたいものです。
急激な変化を避ける
和訳：動作や外観の急激な変化はユーザーをいらいらさせます。フォーム間またはフォーム内のステップの間に急激な変化を導入しないでください。
人間は変化を恐れるもの。サイトに訪れフォームを利用することは連続的な動作だということを忘れずにいたいものです。
会話
フォームは会話です。と著者は述べます。
フォーム入力のひとつひとつを会話だと考えると、いくつかの有用な指針が得られます。記事では６つの指針が紹介されています。
尋問ではく会話
和訳：フォームは尋問ではなく会話です。ラベルでの積極的すぎるな文言は、ユーザーをいらいらさせ、（離脱していない場合）彼らは真実よりも、望まれた内容を解答するでしょう
一方的すぎる質問は、会話でなく尋問になってしまい、ユーザーの率直な解答や心地良い入力を妨げてしまうおそれがあります。
論理的構造
和訳：会話の自然な流れを反映しつつ、論理的にラベルを設定しましょう。例えば、他の質問の後に名前を聞かれるのは奇妙ではないでしょうか？より複雑な質問は、フォームの終わりに配置する必要があります。
通常の会話で、名前も知らない相手に家族構成について尋ねることは少ないですよね。質問には適切な順番があり、違和感のないように構成するべきです。
関連
和訳：個人情報など関連しあう情報をまとめて配置しましょう。より会話らしくなります。
会話において、話題があっちこっちに前後すると相手は混乱してしまうでしょう。フォームでも同様に、あるテーマに関してはまとめて設問を設置するべきです。
対話
和訳：実際の会話のように、各ラベルは、対応する入力フィールドにその都度表示し、ユーザーが該当の項目に対応するのを支援しましょう。
理想的な会話はテンポの良いキャッチボールのようなもの。どちらかが一方的に話すものではありません。ユーザーがスムーズに解答できる「合いの手」の存在は重要です。
自然な流れ
和訳：会話でも自然になるように、空白の導入、ラベルのグルーピング、フォームの分割を行いましょう。
実際の会話においては適切なテンポや間、話題の移り変わりがあるもの。同じようにフォームも設計するべきですね。
集中させる
和訳：どんな会話でも、人々は周りの騒がしさに気を取られます。フォームに入力からユーザーをそらす可能性があるバナーや不必要なナビゲーションなどはフォームから削除しましょう。
どうすれば入力（＝会話）に熱中できるかを考えれば当然のことですね。
まとめ
いかがだったでしょうか。本日は海外記事より、フォームのユーザビリティに関わる３つの側面のうちの２つ「関係性」「会話」についてご紹介しました。
以前エラーメッセージに関する記事で、エラーを実店舗での会話に例えたことがありましたが、フォームでの入力を実際の人間関係やコミュニケーションに置き換えることで、思わぬ使いにくさの発見や改善のアイデアの発想につながることがあります。
上記でご紹介した指針を参考に、ぜひあなたのフォームでもユーザーとの関係性や会話について考えてみてはいかがでしょうか。
※エラーメッセージについての記事はこちら
フォームのエラーメッセージには、ネガティブな言葉を使わないように注意
https://f-tra.jp/blog/column/5995
参考記事: An Extensive Guide To Web Form Usability – Smashing Magazine
*1: Forms That Work: Designing Web Forms for Usability
