入力フォームの工夫

http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html

1 comment | 0 points | by WazanovaNews 約3年前 edited


Jshiike 約3年前 edited | ▲upvoteする | link

今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20 guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホではドロップダウンメニューは最後の手段にしてもっとステッパーを使おうという話題もありますし。

下記がオリジナルの20件のガイダンスですが、今回のGoogleの実験結果がその後に続きます。

1) 状況からみてユーザが知っているフォーマットで回答させること。質問を直感的にわかりやすく並べること。

2) 回答が曖昧であれば、別のフォーマットでの回答も許容すること。

3) フォームは極力短くシンプルにし、不必要なインプットを求めないこと。

4) 可能であれば、必須とオプションのフィールドをわけて、必須のところは*や色でわかりやすく表示すること。

5) ユーザがフォームをなるべく早く埋められるように工夫すること。入力フィールドの上にラベルを配置すること。

6) フォームを一つのカラム以上にわけないこと。一行あたり質問は一つにすること。

7) 入力フィールドのサイズは、期待する回答の長さにあわせること。

8) 選択肢の数を制限したり、タイプミスが起きやすい内容であったり、どのような回答をすればよいのかわかりづらいときは、チェックボタン/ラジオボタン/ドロップダウンメニューを利用すること。

9) 複数選択してもらうときはリストボックスではなくて、チェックボックス形式にすること。

10) 選択肢が4つまではラジオボタン、4つを超えるとドロップダウンメニューにして画面の表示範囲を節約すること。

11) 直感的にわかりやすい順番に選択肢を並べること。意味のある順番がない選択肢であれば、アルファベット順にすること。

12) 日付の入力において、フォーマットの違いをどうしても避けたいのであれば、ドロップダウンメニューを使うこと。もしくは、一つの入力フィールドにして、入力形式(例えば、MM/YYYY)をテキストボックスの中に表示すること。

13) 回答に一定のフォーマットが必須であれば、例を追加するのではなく、ルールを事前に明確に伝えること。

14) エラーメッセージは謙虚に、誤りが起きたいことをユーザにわかりやすい言葉で伝えること。誤りが起きることになったのをわび、その内容と修正方法を明確に伝える。

15) エラーが起きた際、入力されたフィールドをクリアーしないこと。

16) エラーメッセージは、フォームが入力完了され送信された後にまとめて表示すること。

17) エラーメッセージは一目でわかるように、色、アイコン、問題箇所をハイライトしたテキストを利用。エラーの内容と修正方法がわかりやすい言葉で説明されていること。

18) 送信ボタンは押下後にすぐに無効な状態にして、ユーザに複数回押させないようにする。

19) フォームが送信されたら、送信してくれたお礼と現在のステータスと次のステップを説明したこんファメーションを表示すること。同じ内容をメールでも送ること。

20) リセットボタンは誤って押すことがあるので提供しないこと。どうしても必要な場合は、視覚的に送信ボタンと明確に違いがわかるようにして、送信ボタンの右側に、キャンセルボタンと左端を揃えておくこと。

このガイドラインの内、今回Googleが実験結果により依然重要であるとしているのが、

  • パスワードの最小値など必須とされるフォーマットの条件は送信前に明示されるべき。ユーザの入力パフォーマンス、主観的な評価、インタビューのいずれでもインパクトが大きい。
  • エラーメッセージは、エラーとなったフィールドの隣に表示されるべき、簡単にエラーが解決できるような説明が必要。入力時間の短縮と主観的評価のアップにつながる。
  • 必須項目とオプション項目の違いがわかるように明確にしてほしいという声はかなり多い。
  • アイトラッキングテストの結果からも、ラベルは入力フィールドの横でなく、上に置いた方が、ユーザはストレスなく入力できる。(テスト結果

また、ちょっと話題が変わりますが、SeatGeekが使っている、検索ボックスの高速オートコンプリート機能が、Soulmate Gemsoulmate.jsとしてオープンソースで提供されています。

オートコンプリートエンジンをメインのアプリと分けているので、ユーザエクスペリエンスを傷つけることなく、多くのトラフィックをさばけるようです。導入のステップはブログでも紹介されています。

入力フォーム関連の進化はまだまだ続きそうです。

#google #seatgeek

Back