フォームデザイン虎の巻：複数の選択肢を提供する

エ・ビスコム・テック・ラボ
2008-07-25 15:57:01
  • このエントリーをはてなブックマークに追加

セレクトボックス

　セレクトボックスは複数の選択肢をコンパクトに表示するフォームのタイプで、プルダウンメニューかスクロールボックスの形で表示することができる。

プルダウンメニュー

　プルダウンメニューの形で表示した場合、複数の選択肢から1つだけを選択することができる。また、1行分のスペースでレイアウトできるので、年月日や都道府県など、選択肢の多い項目の表示に適している。

プルダウンメニューの形で表示したもの プルダウンメニューの形で表示したもの
クリックするとプルダウンメニューが開く クリックするとプルダウンメニューが開く 




SAMPLE












都道府県：
※ブラウザで表示を確認する

　しかし、一覧性が低く、1クリックで項目を選択できないというデメリットもある。そのため、選択肢が少ない場合はラジオボタンやチェックボックスを利用した方がユーザーにとってはわかりやすい。

スクロールボックス

　スクロールボックスの形で表示した場合、プルダウンメニューより一覧性を高くすることができる。また、複数の項目を選択できるようにすることも可能だ。

スクロールボックスの形で表示したもの スクロールボックスの形で表示したもの 




SAMPLE












都道府県：
※ブラウザで表示を確認する

　しかし、選択肢が多い場合はスクロールして閲覧しなければならない。さらに、一般的なフォームでは利用される機会が少なく、ユーザーが使い慣れていないという問題もある。

　そのため、スクロールボックスではなく、プルダウンメニューやラジオボタン、チェックボックスの方が利用される。

　スクロールボックスは、次のようなインタフェースの作成に利用されることが多い。ここでは、左のボックスでアイテムを選び、右のボックスに追加するインタフェースを作成している。

左のボックスでアイテムを選択して「追加」をクリック 左のボックスでアイテムを選択して「追加」をクリック
選択したアイテムが右のボックスに追加される 選択したアイテムが右のボックスに追加される 




SAMPLE
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]