クリックスルーを活用するUI設計
クリックスルー（Click-through）とは、レイヤー構造を成しているUIにおいて、裏側に位置している要素に対してのクリックイベント伝達を制御することを言い、UIのユーザビリティやモード性の表現に深く関わる考え方です。
レイヤー構造のUIでは、基本ルールとして、最前面にあるアクティブな要素に対してフォーカスやカーソルが適用されるので、各種イベントは優先的にその要素に対して伝達されます。特にフォーカスベースのインタラクションを基本とするキーボード操作では、この仕組みが前提になります。
マウスを使ったポインティング操作においては、UI要素が最前面にあるか裏側にあるかに関わらず、ディスプレイ上にそれの一部分がわずかでも見えていて、かつクリックすることができるならば、その要素に対してクリックイベントを送信することができる可能性があります。裏側にある要素のいずれかの見えている部分をポインティングしてから、そこをクリックすることによって、その要素に何かアクションを送ったりすることができるということです。
しかし、この仕組みではある問題が生じることがあります。例えば2つ以上のウインドウが重なり合っている状態で、裏側のウインドウのどこかをクリックした時に、クリックした部分がボタンなどのコントロール要素であった場合にどう振る舞うべきなのかという観点です。このことは、設計上でしっかり考慮しなければならないのですが、多くの場面で見逃されがちです。しっかり作り込まれた既存のUIフレームワークを使用していると、この仕組みはほとんどのケースで自動的にアプリに適用されるため、そもそもデザイナーやプログラマーがこの仕組みの存在自体を認識していないことがあります。
裏側のウインドウやビューに載っているボタンの真上でクリックが生じたら、それはボタンが直接クリックされたと解釈するのか、あるいはボタンではなくウインドウがクリックされたと解釈して、ウインドウ全体を最前面に移動させるのかを区別しなければなりません。
クリックスルー対応要素
クリックスルー対応要素は、非アクティブな裏側のウインドウ上でそれがクリックされた時に、直接イベントを受け取ることができます。すなわち、裏側にあっても、ボタンの上でクリックが生じたら「ボタン押下」がすぐに実行されます。それと同時にそのボタンが属するウインドウはアクティブにもなることができます。
裏側にあるクリックスルー非対応の要素の場合には、それの上でクリックが生じてもイベントはその要素には到達せずに、それが載っているウインドウそのものに届き、ウインドウを最前面に移動させたり等のアクションが実行されることになります。
クリックスルー制御の効能
クリックスルーを活用すると、非アクティブのウインドウやビューの内容に対する操作を容易にし、ユーザーがいちいちウインドウやビューをアクティブにする手間を省くことができます。あるいはその逆も可能です。このことは、モードレスUIの実現や、その逆のモーダルUIの実現、またはメニューを閉じる際のアクションである「外側クリック」の仕組みも実現可能になります。
・裏側にあるウインドウやビューの内容に対する操作を容易にする
・裏側にあるウインドウやビューをクリックしてアクティブにする手間を省ける
・外側へのクリックイベントを防ぐことにより、モーダルUIを実現する
クリックスルーの副作用
クリックスルーを取り入れると、ユーザーが意図しない操作を誘発してしまう可能性が高まり、ユーザビリティを損なう懸念も高くなります。ツールバーやコントロールバーのような多くのコントロール要素が密に隣り合って並んでいるような領域では、それらが誤って押されないようにクリックスルーを許容しない（非アクティブなウインドウの状態では、コントロールバーを操作できないようにする）ことも検討してみましょう。
・ウインドウやビューを掴むつもりが、誤ってその上のボタンを押してしまう可能性が高まる（掴める部分が少なくなる）
・クリックイベントが過度に防がれることによって、UIがモーダル化する
・メニューを閉じようとして外側をクリックしたら、裏側のボタンを押してしまう
クリックスルー制御を考慮すべきケース
後ろのウインドウやビューの直操作を許容するケース
デスクトップ環境で複数のウインドウが重なった状態で、裏側のウインドウの閉じるボタンを直に押せるようにします。マウスホバーによるインジケーションを組み合わせることによって、裏側のボタンでも押せることをユーザーに認知させることができます。
ボタンなどのコントロール要素を全般的にクリックスルー対応することによって、ウインドウのZ軸上の前後に関わらず、コントロールを直に操作できるようになります。
メニューやモーダルビューの外側をクリックして閉じるケース
メニューやモーダルビュー（ポップアップビュー、簡素なダイアログ、フローティングビュー、バナー、トースト等）を表示している際に、ビューの外側をクリックすることでそれを閉じられるようにするケースが考えられます。この時には、その要素の外側（裏側）へのクリックイベントを捕まえて、そのクリックアクションを防ぎつつ、同時にメニューやビューを閉じられるように処理すると良いでしょう。これは、明示的な閉じるボタンを備えていない「弱いモーダルビュー」のパターンでよく使われるテクニックです。
もしもメニュー等を開いた状態で「外側」へのクリックが有効になっていたとしたら、メニューを閉じるつもりが裏側にあるボタンを押してしまう等、誤ったクリックアクションを誘発してしまう懸念が高まり、ユーザビリティに悪影響が生じます。逆にこのことを利用して、前面に展開しているフローティングビューをモードレス化し、UI全体を同時に操作可能にすることもできます。
参考資料
Human Interface Guidelines (2004) 「Click-Through」
Daring Fireball「Much Ado About Click-Through」
Daring Fireball「The Problems With Click-Through」
the Weblog of Matthew Thomas「Aw, you really shouldn’t have」
ここから先は
UI設計ビジュアライズノート集
usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノート（デザインパターン解説）を収録しています。新…
この記事が気に入ったらチップで応援してみませんか？
購入者のコメント