誤操作を防ぐためのボタンサイズと配置

イントロダクション

Blogger の画像のプロパティのダイアログボックスは、次のように「OK」ボタンと「キャンセル」ボタンが隙間なく隣接しています。

Blogger:画像のプロパティ
「OK」ボタンと「キャンセル」ボタンが隙間なく隣接している

OKボタンとキャンセルボタンが隣接していると、OKボタンを押したつもりでキャンセルボタンを押していることがある

素早く作業を行っている場合

これは実際に自分自身に起こったことなのですが、画像のプロパティのタイトルテキストと代替テキストに情報を入力して、OKボタンを押したつもりでいたら、誤ってキャンセルボタンを押しており、情報が反映されていなかったことがありました。


基本的に、決まりきった定型作業（作業に失敗しても大きな被害をもたらすものではないもの）を行っているときには、マウスカーソルをボタンの上に移動してちゃんと停止してからボタンをクリックするようなことはしておらず、マウスカーソルが停止する前にマウスクリック時にボタンがクリックされるであろう位置でマウスクリックを行っています。

つまり、マウスの移動速度と、クリックしようとしてから実際にクリックされるまでの各種遅延を考慮して、未来のクリック位置をシミュレーションしているわけです。

	ボタンのクリック（通常）	ボタンのクリック（素早く）
動画バージョン	YouTubeで見る	YouTubeで見る

そうすることで、数百ミリ秒～数秒程度作業時間を短縮でき、作業の効率化が出来るからです。


このように、作業時間を短縮するために素早く作業を行っている場合には、ボタンが小さく、ボタン同士が隣接していると押し間違えの原因になります。

マウスクリック操作時の手の震え

ボタンの上にマウスカーソルが止まったのを確認してから、ボタンをクリックする場合でも、マウスのボタンをクリックするときに手が震えてしまい目的のボタンではなく隣のボタンを押してしまうということがあります。

タッチパネルにおける誤タッチ

タッチパネルでボタンをクリックする場合には、タッチ対象のボタンのサイズが指のサイズよりも小さい場合には、目的のボタンを押したつもりが、隣のボタンに触れてしまうことがあります。

ボタンは十分大きく、かつ、ボタン同士の間を十分に離しておく

ボタンの押し間違えを防ぐためには、ボタンは十分に大きく、ボタン同士の間を十分に離しておく必要があります。

Blogger においては、画像ファイルをブログへアップロードするためのダイアログである「ファイルを選択」ダイアログの「選択した画像を追加」ボタンと「キャンセル」ボタンは、十分に大きく、ボタン同士の間が十分に離れているので、ボタンの押し間違えを防止する効果があると思います。

Blogger:「ファイルを選択」ダイアログ
「選択した画像を追加」ボタンと「キャンセル」ボタンは、
十分に大きく、ボタン同士の間が十分に離れている

とはいえ、ソフトウェア側で対応していなければユーザ側で注意深く操作する必要がある

初めからソフトウェア側で誤操作を防止するようなボタン配置になっていればよいですが、そうなっていないものについては、最終的にはユーザ側で注意深く操作する必要があります。

具体的には、ボタンをクリックする際には、クリック対象のボタンの上でマウスカーソルが止まっていることを確認してから、ボタンを押すといった慎重な操作をすることになります。


特に、ファイルの保存や削除といった、取り返しのつきにくい重要な操作をする場合には、慎重な操作をすることが求められます。

まとめ

以上のように、ボタン同士が隣接していると、目的のボタンを押したつもりで隣のボタンを押していることがあります。


開発者においては、ソフトウェアのボタンを配置する上で、誤操作を防止するために、ボタンは十分に大きく、ボタン同士の間を十分に離しておく必要があります。

ユーザに優しい優れたユーザインターフェースをデザインするために、心にとどめておきたいことです。