入力フォームのデザイン・UXを高める15のルール


この記事はuxdesign.ccの記事を許可のもと翻訳したものです。

翻訳元記事:Design Better Forms (2016/7/5)

著者:Andrew Coyle

サインアップのフローやデータの入力インターフェースなど、フォームはデジタルプロダクト設計の最も重要なコンポーネントの1つです。
この記事では、入力フォームデザインにおけるUXを高めるための一般的なルールに焦点を当てています。
これらは一般的なガイドラインであり、すべてのルールに例外があることに注意してください。

1.フォームは縦一列配置にする


ユーザーは垂直方向への入力が自然で、入力行が横に複数列配置されると入力しづらく感じます。

2.ラベルは入力データの上に配置する

ユーザーは入力データの左にラベルがあるよりも、データの上にラベルがある方が入力しやすいものです。上に配列されたラベルはモバイル上でも変換されやすくなります。

ただし、変数オプションのある大量のデータを入力するフォームの場合は左配置のラベルがおすすめです。上に配置されたラベルよりも使用する行数が減り一度に入力しやすくなります。

3.ラベルと入力データはグループ化する


ラベルと入力データは寄せて配置しましょう。フィールド間には十分な間隔をあけることも忘れずに。そうすればユーザーが混乱せずにすみます。

4.すべて大文字での表記は避ける


大文字だけの表記は読みづらく入力がしにくいです。

5.6項目以下の選択肢はすべて表示する


ドロップダウンの選択肢を選ぶためには2回のクリックが必要です。
もし5つ以上の選択肢があるのであればドロップダウンは避け、全ての選択肢をひと目でわかるように配置しましょう。
また、もし25以上の選択肢があるのならドロップダウンメニューの中にテキスト検索機能を組み込みましょう。

6.プレースホルダテキストをラベルとして使わない


プレースホルダテキストをラベルとして使用することで、スペースを最適化できると考えがちですが、はニールセン・ノーマン・グループのケイティ・シャーウィンが発表したように、たくさんのユーザビリティにおける課題を抱えています。

7.チェックボックスとラジオボタンを縦に配列する


チェックボックスが縦に配列されていると入力しやすくなります。

8.CTAに説明を加える


CTAはそれがどのようなアクションを起こすものなのか、明確に説明していると良いでしょう。

9.エラー表示はインラインで


エラーになっている場所とその原因をインラインでユーザーに示しましょう。

10.入力途中でのリアルタイムアラート(バリデーション)は使わない


パスワードやユーザーネームあるいはメッセージといったユーザーのアカウントに関する情報を入力している間は、ユーザーに役立たない限りリアルタイムアラート(バリデーション)は使わないようにしましょう。

11.基本的なヘルプテキストを表示する


可能な限りどのスペースでも基本的なヘルプテキストは提示しましょう。複雑なヘルプテキストの場合は、重要入力事項は何なのかを明示した上で、入力データの横に配置することも考えてください。

12.現在のアクションと次のアクションをわける


次のアクションをわけるかどうかについては多くの議論があります。

13.入力フォームの幅を適切に


入力項目の長さがフィールドの幅を決めます。電話番号、郵便番号といった入力される文字数が明確なフィールドにはこのルールを適用しましょう。

14.*ではなく任意表示を設ける


入力必須を表す*のようなフィールドマーカーが暗示する内容をユーザーが常に分かっているわけではありません。フィールドマーカーの代わりに、任意の表示を設けることで入力必須の項目がどこなのかを暗示しましょう。

15.関連情報ごとにグループ化を


ユーザーは表示画面を一つのものとして捉えるので、フォームが長くなると圧倒されてしまいます。
関連する項目ごとにグループ化することでユーザーはより早くフォームの塊が意味するところを理解することができるのです。

何のために尋ねるのか

任意項目は設けず、データを収集するための別のやり方を考えましょう。
疑問に対し推論はできているのか、後回しにしていないか、完全に除外してしまっていないかを常に自身に問いたださねばなりません。
例えばモバイル機器やウェアラブルデバイスは、ユーザーがはっきりと意識していなくても大量のデータを収集しています。ソーシャル、会話型UI、SMS、電子メール、音声、OCR、位置情報、指紋、バイオメトリックなどを活用できる方法を考えましょう。

デザインに楽しさを

人生は短いのです。誰もフォームを機械的に埋めるのに時間を費やしたくありません。
対話しているかのような画面にしましょう。それも愉快なものに。そうすれば徐々に引き込まれていきます。予測できないことをやりましょう。ユーザーの感情的な反応を引き出せるように会社のブランドを表現するのはデザイナーの役割です。もしこれがうまくいっていれば成功率はアップします。上記のようなルールがおざなりにならないようご注意ください。
この記事は、ユーザビリティと美しさが交わる点に焦点をあてたUIを構築するための大きな戦略の一部です。

翻訳元記事

Design Better Forms (2016/7/5)

画像は翻訳元記事より引用


The following two tabs change content below.
ポップくん

ポップくん

株式会社ポップインサイトの公式キャラクター、ポップくんです。ユーザビリティやユーザテストをはじめとして、Webマーケティング全般にわたり、皆様に役立つ情報を発信してまいります。


グロースハック・アイデアが満載!ユーザインサイト事例60選

3,500件以上のユーザテスト実績から、様々な業界におけるユーザインサイトや、良いサイト・悪いサイトの事例をご紹介!あなたのサイトを改善するヒントが詰まっています。
ダウンロード(無料)

【動画教材付き】今日からできる!ユーザテスト入門

500回以上のユーザテスト経験を踏まえて、現場で実際にできる「簡易ユーザテスト」について、準備の方法、当日の進行のコツ、レポート作成のパターンなどを余すところなくご紹介!実際のテスト様子の動画教材もあるので、習得しやすい!
ダウンロード(無料)