
フォームのデザインで気をつけたい3つのポイント
エ・ビスコム・テック・ラボ
2008-07-31 22:38:01
フォームのデザイン
フォームはユーザーにデータを送信してもらうことが重要だ。入力ミスを減らすことも考えなければならない。そのため、見た目の派手さなどよりも、ユーザーにとってわかりやすく、使いやすいデザインにすることが重要になる。
項目名をわかりやすく表示する
フォームは、どこに、なにを入力してほしいのかをユーザーに伝えなければならない。そこで、テキストボックスなどには必ず項目名を付けて表示する。項目名がなければ、ユーザーは何を入力していいのかわからなくなるからだ。
たとえば、次のサンプルではテキストボックスに「名前」という項目名を表示している。日本語のテキストは左から右、上から下の順に読み進めるので、項目名はテキストボックスの上または左側に表示するのがポイントだ。テキストボックスの下や右側に表示すると、項目名がどこを指しているのかわからなくなってしまう。

※ブラウザで表示を確認する

※ブラウザで表示を確認する
項目の区切りを明確にする
複数の入力項目を用意する場合、項目の区切りを明確にすることでフォームをわかりやすくデザインすることができる。
次のサンプルでは5つの入力項目を用意した。しかし、項目の間には区切りがなく、ごちゃっとした印象になっている。特に、チェックボックスの選択肢は「趣味」と「購読希望」のどちらの項目に属しているのかがわかりにくくなっている。

※ブラウザで表示を確認する
項目の区切りが明確になるようにデザインすると次のようになる。ここでは、項目の間を緑色の罫線で区切るようにデザインした。また、項目名の部分は黄緑色の背景色で表示して、項目名が目立つようにデザインしている。

※ブラウザで表示を確認する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
保育業界のDX(前編)
-
さあ、クラウドで解決しよう。
-
講演の見どころを紹介
-
連載!プロが語るストレージ戦略
-
話題のセキュリティ事故体験ゲーム
-
連載!プロが語るストレージ戦略
-
いままさに社会にとっての転換点
-
デジタルを当たり前と言えるか?
-
明日からではもう遅い?!
-
内部不正や不注意をどう防ぐ?
-
ゼロトラストに不可欠なID管理
-
データの散在と非常率運用がネック
-
セキュリティの今を知る
-
特集:IT最適化への道
-
次の一手はこれだ!
-
モバイルデバイスもターゲットに!
-
いまさら聞けない「PPAP」
-
IDaaSって何?
-
ビッグデータ最前線!
-
いまあるデータで身近な業務をDX
-
請求書がきてからでは遅い
-
利便性とセキュリティの両立
-
保育業界のDX(後編)
-
連載!プロが語るストレージ戦略
-
企業DXのキモはクラウドにあり