優れたフォームをデザインする

デザイナーが陥りがちなミス、そして、その修正の仕方

By Andrew Coyle

サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。

そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。

横に広がらない

「列」が複数あるとユーザーの視線はさまよってしまい、縦にスムーズに流れなくなります。

項目表示はフォームの上に

項目表示はフォームの横に置くよりも上に置く方がユーザーが最後まで埋めてくれる率が高まります。モバイル機器から見やすくもなります。しかし、左揃えの長所もあります。大量かつ多様なデータ入力が必要な場合には、上から下へ通覧し易く、縦に広がり過ぎることもなく、ユーザーにデータをじっくり考えさせるのに向いているのです。

項目表示と入力欄はできるだけ近づける

項目表示と入力欄の隙間はほとんどなくしましょう。そしてまとまりとまとまりの間はしっかりと取ります。これでユーザーは戸惑うことがなくなるのです。

大文字にしない

項目表示が全部大文字だと読みづらくなってしまいます。

選択肢が5つ以下ならドロップダウンにせず全て表示させる

ドロップダウンだとユーザーは2クリックしなければならないですし、押して初めて選択肢の内容が分かります。選択肢が6つ以上の場合はインプット・セレクターを使いましょう。もし25以上選択肢があるならドロップダウン・メニューにコンテクスチュアル・サーチを取り入れるのも良いです。

プレースホルダーをラベルとして使用しない

項目表示を入力欄の内側に入れたくなるものですが、Nielsen Norman GroupのKatie Sherwinによると様々な使いづらい問題を引き起こすようです。

チェックボックスは縦に並べた方が見やすくなる

縦に並べた方が簡単に見やすくなる。

CTAを分かりやすく表示する

「サブミットする」より「サインアップする」の方がユーザーにとっては明確です。

エラーは埋め込みで表示する

エラーの場所と理由をユーザーに明確にしましょう。

ユーザーが入力している最中にではなく「入力後」にエラーを表示させる

パスワードやユーザーネーム、字数カウントがある入力のような場合、必要がない限り入力中にエラー表示しないようにしましょう。

ヘルプ表示は隠さない

ヘルプ表示は適切なところに表示させます。複雑なヘルプ表示の場合は入力に集中できるように入力欄の隣に置くようにしましょう。

アクションにおける優先順位を示す

この場合の「Cancel」のように優先順位が低い選択肢をどのように表示させるかは議論があるところです。

アフォーダンスの観点から入力欄の長さを決定する

電話番号や郵便番号など決まった長さの入力を求める時は、入力欄の長さをデータの長さに合わせましょう。

「*」は取り去り、「任意」にする

ユーザーは必ずしも必須項目を表す「*」の意味を知っているとは限りません。むしろ必須ではないものを「任意」と表示させましょう。

入力情報ごとにグルーピングする

ユーザーはまとまりのない入力欄の羅列にやりづらさを感じます。内容ごとにまとめてあげれば入力効率も上がります。

何故フォームの考察が必要なのか？

任意入力に過ぎないものは省略して、他のやり方でデータを集めましょう。無駄な質問項目はないかいつも気を配るようにしてください。

データ入力はますます自動化されています。例えば携帯電話やウェアラブルデバイスは、ユーザーの自覚なく大量のデータを収集します。あなたが活用できる方法、例えばソーシャル、双方向UI、SMS、電子メール、音声、OCR、ロケーション、指紋、生体認証などどれが活用出来るかイメージしてみましょう。

楽しんで！

人生は短い。誰だって長々とフォームに必要事項を記入したいと考えていません。気軽な表現を心がけて面白くする、それがユーザーをハッピーにさせます。思いも寄らないことをしましょう。ユーザーの心に訴えかけて反応を引き出すのが会社のブランド力を高めるデザイナーの役割なのです。うまくやれば、最後まで入力してくれる割合も高まるでしょう。上にまとめた内容をぜひ参考にしてみてください。

気に入って頂いたなら下の♡をクリックしてください。この記事を見つけやすくなります。TwitterやDribbbleでも私を探してくださいね！