行頭チェックボックス
一覧操作(Manipulator)において、リストの各行の先頭にチェックボックスを配置し、それをチェックすることで複数行の選択ができるようにする。
理由:Control キーや Shift キーといったモディファイアキーを併用しなくても、マウスだけで複数行選択できるようにするため。また、複数行の選択ができるということを視覚的に明示するため。
行頭チェックボックス
効能
- デスクトップアプリケーションの一般的なリスト(Window のエクスプローラ画面など)では、Control キーや Shift キーを使って複数行/項目を選択するが、そのことが明示的でない。チェックボックスがあれば、複数行・項目の選択が可能であることを明示できる。
- マウスだけで複数行選択ができ、また選択状態のオンオフがチェックの有無として分かりやすく表現されるため、初心者にも分かりやすい。
- 名詞 → 動詞という操作手順のための選択だけでなく、「その項目をアクティブにする」という意味を表現できる。例えばコントロールパネルなどの設定(Configurator)において、リストボックス内に一覧されたオプション項目をオンオフさせる場合など。
用法
- 一覧操作(Manipulator)において、リストの行頭(もしくはできるだけ左の列)にチェックボックスを配置する。
- チェックしたものに対して何らかの一括アクションさせる場合は、そのためのボタンもしくはドロップダウンメニューをリストの外に配置する。
- リスト外に配置したボタン/ドロップダウンメニューが、チェック選択した項目に対する一括アクションであることを強調したい場合は、それらをリストの左上もしくは左下に配置する。チェックボックスが並ぶ縦の線上に位置するように。
- 「単数行に対するアクション」と「複数行に対する一括アクション」の両者を併存させたい場合は、行内ボタンを用いる。単数行へのアクションは行内ボタンで、複数行に対する一括アクションは「チェックボックス+リスト外ボタン/ドロップダウンメニュー」で表現。
- 「単数行に対するアクション」と「複数行に対する一括アクション」の両者を併存させたいが、行内ボタンは使いたくないという場合には、いずれのアクションもリスト外ボタン/ドロップダウンメニューで提示し、選択操作はチェックボックスのみで行わせる。そして複数行が選択された状態では、「単数行に対するアクション」のボタン/ドロップダウンメニュー項目をディスエーブルにして実行できないようにする。
- リストに複数列がある場合、一番左の列をチェックボックス用とし、その列ヘッダーに「すべてにチェックを入れる」ためのチェックボックスを配置してもよい。その場合、これをチェックすると全行のチェックボックスにチェックが入り、またこれのチェックをはずすと全行のチェックがはずれるようにする。ページングを用いている場合には、現在見えている項目に対してのみの操作とする。見えていない項目までが選択されたことになるのかどうかは明示的でないので、意図しない一括アクションを行ってしまうリスクを避けるため。
注意書き
- ユーザーがデスクトップアプリケーションの一般的な振る舞いに慣れているなら、モディファイアキーを使って複数行選択が行えることが期待されるので、この行頭チェックボックスは必要ない。
- シングルクリック実行とはできるだけ併用しない。チェックボックスのクリックは選択を意味し、行自体のクリック(行のハイライト選択)は実行を意味するとなると、誤操作の恐れが増すため。
- ダブルクリック実行とはできるだけ併用しない。ダブルクリック実行を併用するとなると、行自体のクリック(行のハイライト選択)をさせなければならないが、チェックとハイライトの意味の違いが不明瞭になるため。
- アプリケーションによっては、MV 展開を行う画面において、一括アクション(選択行の一括削除など)のための複数行選択はチェックボックスのクリックで行い、シングルクリック実行もしくはダブルクリック実行(選択行の詳細を表示するなど)は行自体のクリックによるハイライト選択で行わせるものがある。しかしこの操作方法は複雑で分かりにくい。
蘊蓄
HTML の画面では、リストボックスを用いて複数行選択可能な一覧をつくることができる。しかし複数列をもつ一覧をつくりたければ、table 要素を使わなければならない。table 要素でつくるリストで複数行選択を可能にしたければ、(JavaScript + CSS によるダイナミックな表現を用いない限り)チェックボックスを使わざるをえない。そのためウェブベースのシステムでは、一覧における複数行選択をチェックボックスで行わせることが多くなっている。