デザイン

デザイン

【保存版】ベストな「入力フォーム」をデザインする14のUIガイドライン

22,839 views

読了時間 : 約2分56秒

Webサイトのゴールの代表的なものといえば、「問い合わせ」「資料請求」「会員登録」「決済(ECサイト)」などですが、いずれもユーザーの情報を入力してもらうことにあります。

 

せっかくうまく目標のページまでユーザーを導けても、情報を入力する「フォーム」のUIが残念な状態だと、ゴール目前で離脱を誘ってしまいますね。

 

そこで本稿では「フォーム」に関するデザインのガイドラインを確認しておきましょう。

 

「フォーム」デザインの14のUIガイドライン

以下の画像は、左「Do(推奨される)」右「Don’t(すいしょうされない(非推奨)」の順に並んでいます。

 

【1】フォームは1カラムに

1 XhzxeTnAuWoaeJmlPBP0bw

フォームが並列に並んでいると(右図)、ユーザーの垂直方向の推進力を阻害してしまいます。フォームは基本的に「垂直」に並べるのが適切です。

 

【2】ラベルはフォーム上部に置く

 

1 tnR_OXAKMJW8S9cqRy416A

フォームの項目を示すラベルは上部に置くと、左サイドに置くよりもユーザーのフォームに記入する割合が高くなるそうです。また上部にラベルを配置したほうがモバイルフレンドリーでもありますよね。

 

しかし、フォームに入力する情報が多いときは「左配置」も検討してみてください。というのも、左側に置いたほうがユーザーは全体を視認しやすく、高さを減らすことができますし、ユーザーに考慮させる余裕を与える傾向があります。

 

 

【3】フォームとラベルはグループにする

 

1 obwyjb54NCWy3sOPfm2WEg

 

ラベルとフォームは近くに配置してグループ化しましょう。そして別のグループとはユーザーが誤認しないように十分なスペースを空けておくことが大事です。

 

【4】選択肢が6つ未満なら全部表示する

1 LJ0JHTq5_k1u23Fl9XTNmA

ドロップダウン形式の選択肢はユーザーに「2回のクリック」を強いることになります。ドロップダウンを使う時は6つ以上の選択肢があるときにしましょう。また都道府県など選択肢が25以上あるときは、「語検索」から選べる仕様も検討しましょう。

 

 

【5】代替テキストをラベルとして使わない

1 XvUnJwHtQhJ3Wl8Apj9lhQ

調査によると、フォーム内の代替テキストをラベルとして使用した際、ユーザビリティが低下することが判明したそうです。

 

 

【6】読みやすいようにチェックボックスやラジオボタンは垂直に並べる

1 VLqTEZP8OrH24FooksePbQ

1と同様にユーザーの視線の流れから、チェックボックスやラジオボタンは垂直に並べたほうが可読性がよくなります。

 

【7】ユーザーのクリックを「意思表示」にする

1 x5Pd-IP-Z4Mf5TqZnJU2Yw

左図のボタンは「Sign Up(登録する)」という意思表示になっていますが、右図は「Submit(送信する)」でユーザーの意思を反映しているわけではありません。行動喚起ボタンはユーザーの意思を的確に反映したものにしましょう。

 

【8】エラー箇所が特定できるメッセージを表示する

1 xEJu91MpUlUblEfGbIQVhw

エラーになっている箇所と、その理由をユーザーにフィードバックするようにしましょう。

 

 

【9】ユーザーが記入し終わってから「不一致」確認を表示する

1 IvQg8ovqOJTjX1Tl6yMR0w

ユーザーが記入している途中に「一致しません」というメッセージを表示すると、これがパスワードの場合、第三者にヒントを与えているのと同じになります。

 

【10】基本的な「ヘルプ」は隠さない

1 BA2sPvjZq7a9BlbNFcqslg

「パスワード欄には5文字以上入力してください」という基本的なヘルプ情報は隠さずに表示するようにしましょう。

 

【11】最優先される要素は他の要素よりも目立たせる

1 PvvS04bY3ryTNFDirjPbdA

「なにを最優先するのか?」という議論はありますが、上図のように「登録」を最優先するのら目立たせるようにしましょう。

 

【12】フォームの長さは回答を類推できる長さに

1 3rOjyzcj68Dm7badROWuxg

長さはユーザーに回答の長さを暗示します。郵便番号や電話番号など文字数が少ないものはフォームの長さも適宜短くしましょう。

 

【13】「*」(アスタリスク)は使わない

1 riNfOVAxTChvaQ29n-6IPQ

アスタリスクは一般的に「必須項目」の意味で使われているますが、世界すべてのユーザーがその意味を理解しているわけではありません。ユニバーサルデザインの観点からもアスタリスクを使うのではなく、「任意の項目」を明示するようにしましょう。

 

【14】入力項目は種類によって分類する

1 nmeMIuW7csU9uVTB9BIBTg

 

入力欄が多い場合、ユーザーは全てに記入するモチベーションを保つために「まとまり」を考えます。論理的に意味のあるグループにまとめると、ユーザーの入力は早くなります。

まとめ

いずれも基本的なことではありますが、ついついスケジュールがタイトだったりすると見落としがちな項目もありますね。

 

先述の通り、ユーザーの情報を入力するフォームはWebのゴール。ユーザビリティが損なわれるUIは避けましょう!

 

(※本稿は「Design Better Forms」を翻訳・再編集したものです)

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ