Tags

閉じる

Category

閉じる

Search

Search

閉じる

戻る

 

突然ですが、フォーム使い分けてますか?

ネットでお買いものするとき、ブログを書くとき、なんとな~く使っているフォーム。

デザインするときには、その特性にあわせて使い分けることが大事です。
利点と欠点、どんなときに使うかを、説明できますか?
 

【問題】ユーザに下記を入力してほしい場合に、どのフォームをえらぶ?

==
<お好きな野菜どれでも5種類 1500円で宅配します!>
下記から、お好きなものを5種類を選んで注文してください。
 
なす/ピーマン/おくら/かぼちゃ/トマト/きゅうり/小松菜/
にんじん/じゃがいも/玉ねぎ/レタス/とうもろこし
==
 

次のうちどのフォームを使いますか?

A:ラジオボタン
B:チェックボックス
C:ドロップダウン
D:トグルボタン
 

各フォームを使う利点と欠点を説明してください。

A:ラジオボタン
B:チェックボックス
C:ドロップダウン
D:トグルボタン
 
こたえは続きで!

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
こたえはそう、Bのチェックボックスです。
簡単でしたね!
 

どのフォームを使うかを考えるときのポイント

1:ユーザーが自分のするべきことが直感的にわかるか

一つだけ選択できるの?

複数選択できる?

自由に入力できる?

 

2:スペースの確保

フォームによっては、スペースを消費してしまうものがあります。
スクロールさせたり、ページ遷移させる、flashなどを使ったリッチなUIにするかなど
設計段階でディレクターと相談しましょう。
 

どんなときに使う?利点と欠点

A:ラジオボタン

複数の選択肢から一つしか選べないときに使用します。

利点:すべての選択肢がみえている。
欠点:項目が多い場合、スペース消費量が多い。
 
radio.png

B:チェックボックス

複数の選択肢から、順不同で複数選択できるときに使用します。

利点:すべての選択肢がみえている。
欠点:項目が多い場合、スペース消費量が多い。
 
checkbox.png
 

C:ドロップダウン(1行)

複数の選択肢の中で一つを選択するときに使用します。

上下に広がるので、単位を選択させる場合にもよく使用されます。

利点:スペース消費量が少ない。
欠点:メニューが開いているとき以外は1つしか選択肢が見えない。
 
pulldown.png
 

D:トグルボタン(ベベルボタンとも呼ばれます)

複数選択と、一つしか選択できない場合の両方で用いられます。

リッチテキストのフォームの上部やアプリケーションでよく見られます。

利点:すべての選択肢がみえている。
欠点:アイコンの場合、解読しにくいおそれがあるため、ツールチップが必要になる。
 
toggle.png
 
 
新人Webデザイナーのみなさん、用法容量を守って、
使いやすいフォームを作りましょうー!