すてきな入力フォームを作るために調べてみたこと
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。
旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。
入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。
入力フォームについて読んだもの
参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。
僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。
- RIAC：RIAコンソーシアムユーザビリティガイドライン
- LukeW | Web Form Design Best Practices
- LukeW | Input: Moving Beyond Static Forms
- LukeW | Sign Up Forms Must Die!
- LukeW | Mobile Input
RIACのものは@hiromitsuuuuuに、Luke Wroblewskiさんのスライドは@cssradarさんに教えていただいた。ありがとうございます。
Luke Wroblewskiさんは Mobile First の著者。すごい人の資料がたくさん公開されていてうれしい。
- LukeW Ideation + Design | Digital Product Strategy & Design
- LukeW | Presentations on Digital Product Strategy & Design
こっちのジェスチャーの資料の方が有名かな。
RIAC：RIAコンソーシアムユーザビリティガイドライン
Webというよりクラサバっぽい業務システムついての資料。業務システムは表示も入力も多いので、すぐに煩雑になってしまう。このドキュメントでは、基本的だけど具体的な内容が充実している。
例えば、登録ナビゲーションマップ(何ステップあって、どのステップにいるか分かるようにするやつ)の役割やメリットが解説されていたり、検索フォームでは入力のヒントとなる入力内容説明や入力例の表示を行うといいよ、ってことが書いてある。
ページのレイアウトや様々なコンポーネントについて解説されているので、ひと通り目を通しておくと、普段は無意識で使っているものの必要性を考えることができる。そういえば、こういうコンポーネントあると便利だよね、と思ったりした。
関係ないけど、この文章になごんだ。
菅原健太さんは株式会社ヤコブ製造の営業課長さんです。勤務形態は外勤。38 歳、妻子あり。週末はゴルフに行くのかが趣味です。
Web Form Design Best Practices
これ、すてきなスライドだった。入力フォームについて、細かくて具体的な事例が紹介されている。133ページもある。
例えばラベルの位置について。入力フォームの近くにはラベルがある。ラベルの表示位置について3つ紹介され、それぞれのメリット、デメリットが書いてある。
- Top Aligned Labels
- 入力フォームの上部にラベルがある場合、上から下に視線がスムーズに流れるので、入力にかかる時間が削減できる。また同じようなデータを入力するのに適している。
- Right Aligned Labels
- 右揃えでラベルがある場合、縦のスペースが短くてすむ。上部にラベルがあると、ページが長くなっちゃう。ラベルと入力フォームが近いので、視線の移動も少なめで入力しやすい。
- Left Aligned Labels
- 左揃えでラベルがある場合、ラベルが左に整列しているので、ラベルの内容が読みやすい。ラベルの内容を読まなくてはいけないような、不慣れな内容や難しいデータの入力に適している。
こういうことが知りたかった！
他には必須項目の表示方法、フォームのグルーピング、エラー表示など、入力フォームに関することがたくさん書いてある。アイトラッキングやヒートマップによる解析結果についても書いてある。2008年のスライドだけど、いまでも充分に役立つ、すばらしい資料だった。
ラベルのレイアウトやグルーピングについては、ノンデザイナーズ・デザインブックも参考になるなーと思いだした。
![ノンデザイナーズ・デザインブック [フルカラー新装増補版]](http://ecx.images-amazon.com/images/I/41nvddaG9BL._SL160_.jpg)
ノンデザイナーズ・デザインブック [フルカラー新装増補版]
posted with amazlet at 13.08.22
Input: Moving Beyond Static Forms
静的なフォームから、動的なフォームへ。
インラインバリデーション、マルチステップフォームなどについて紹介されている。
リアルタイムなバリデーションは便利そうだけど、エラーが表示される可能性が高くなる。それはそうだよね。入力が完了していないと、invalidな状態の可能性が高い。だから、ユーザが入力し終わったあとに、バリデーションを掛けた方がいい。
複数ページに渡る入力フォームより、インラインマルチステップフォーム(次の入力フォームがアコーディオンなどで開く)がよさそう。
最後のほうで、sign up や mobile の話がでてくるけど、それはこの後の資料のほうが詳しい。
Sign Up Forms Must Die!
これは33ページと短い資料。でもいいことたくさん書いてある。
Facebook認証なんかを利用して、アカウント作成の障壁を下げる。入力するのではなく、選択肢を選ぶようにして、簡単にサービスを利用できるようにする。
こういうちょっとしたことで、アカウント作成の手間を減らせるかもしれない。スライドに出てくる例がわかりやすいのがいい。
関係ないけど、サンプルとしてPosterousが出てくるのが懐かしい。
Mobile Input
なんと365ページもある。流し読みした。ぱらぱら眺めたといったほうが正確だけど。
スマートフォンのWeb、iOS/Androidのネイティブアプリの入力フォームについて、いろいろ書いてある。
スマートフォンでの入力、面倒だよね。 キーボードで画面の半分は隠れちゃうし、hoverでtipsを出したりできないし、input typeをちゃんと指定したり、placeholderをうまく使った、フォーカスがあたったらフォームを大きくするとか、入力中はテキストエリアの行数を増やしたりとか、入力の負荷をできるだけ軽減したい。
いろいろなサイトの入力フォーム
画像上げると、長くなっちゃうので割愛。
Appleはマルチステップフォームで、1ページでボタンを押すと、新しいフォームがにゅーんとでてくる。プレースホルダを使っているのでラベルがほとんどない。
クックパッドの入力フォームは短い。？をクリックするとバルーンでヒントがでてくる。バルーンは☓ボタンを押さないと消えない。hoverだとマウスが動くと見えなくなっちゃうからかな。メールマガジンの選択が左側にあるので、入力項目が1画面に収まっていていい感じ。
nanapiはステップナビゲーションがあって、登録 => 確認 => 完了 の3ステップがすぐに分かる。こちらも入力項目が少なめでいい感じ。
インフォメーションアーキテクチャについて
こういうのはIA(インフォメーションアーキテクチャ)の領域だよね、と思って、IA100とIAシンキングをぱらぱら眺めた。というかUIに関連したことを考えるときは、とりあえずこの2冊を読み返してる。
どちらも入力フォームにフォーカスした内容は少ないけど、入力フォームまでのページ遷移や全体構成については参考になる。
もうちょっとWebアプリケーションよりの、1ページでいろいろ動いたりするようなサイトのIAの本がでてくるとうれしいな。あまり見かけない気がする。
あるいはオライリーのデザイニング・なんとかシリーズを読んだほうがいいのかもしれない。どれも読んだことないので。
IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
posted with amazlet at 13.08.22
長谷川 敦士
ビー・エヌ・エヌ新社
売り上げランキング: 183,337
ビー・エヌ・エヌ新社
売り上げランキング: 183,337
IAシンキング Web制作者・担当者のためのIA思考術
posted with amazlet at 13.08.22
まとめ
入力フォームで、JavaScriptを使ってあれこれすることも多い。スライドダウンでコンテンツを表示したり、ポップアップやモーダルのなにかを出したり、バリデーション掛けたり。
そういうのを作るのはエンジニアだから、よいパターンを知っておけば、どの要素に何を追加するのがよいのか、どんなセレクタを指定するのがよいのか、あるいはどういった変更が発生するだろうか、といったことを予め考えることができる。
自分でデザインをするわけじゃないけど、自分もサービスの1ユーザなので、できるだけ使いやすいサイトにしたい。
さいきん、これまでにやってきたことが、ちょっとずつ繋がりはじめている気がするので楽しい。
