見出し画像

デスクトップGUI:フォーカスの勘所

フォーカスの定義

デスクトップGUIでいう「フォーカス」の意味を次のように置いて考えます。

GUIにおいて、ユーザーからの入力を受け付ける状態を示すもの。イベントの送信対象。多くの実装例ではユーザーが選択したものを直接知覚できるようにビジュアルでフォーカスが明示されるが、ビジュアルが示されない暗黙的なフォーカスも存在する。クリックしたらアクティブ状態(=フォーカスがある)になったり、逆に非アクティブ状態(=フォーカスがない)にもなる。

フォーカスはユーザーが今この瞬間に何を考えているかにかかわらず、機械的に「入力可能な状態」「アクティブな状態」を示すステートとして置かれます。ですから逆に言えば、ユーザーがそのオブジェクトにコマンド入力をしたくないと考えていたとしても、フォーカスが当たっているオブジェクト以外のものとは対話することができません。それには「フォーカスを移動させる」という操作がまず必要になります。

このことは、ジェフ・ラスキンが「フォーカス (focus)」「注意の所在 (locus of attention)」という二つの概念で区別していきましょうと述べています。

フォーカス (focus):
GUIにおいて、イベント送信可能な状態を示すもの。選択状態を示すもの。

注意の所在 (locus of attention):
動詞としても読めてしまう“focus”に対し、所在を示す概念として“locus”の語を当てて、名詞として表せるようにした。
GUIの状態である「フォーカス」は、ユーザーの注意が実際にどこに向いているかに関わらず不変なものであるが、「注意の所在」はユーザーの意識や注意の向き方に着目している。

実際のフォーカスは一つ、選択状態は同時に複数

主要なGUIシステムではフォーカスが当たった状態のオブジェクトは同時に一つだけ存在するようデザインされています。例えばウインドウを考えてみると、アクティブな状態にあるウインドウはどれか一つのみで、それ以外は非アクティブになります。Tabキーフォーカスも一つだけが存在する形になります。

一方で、選択状態にあるオブジェクトは同時に複数個存在することができます。選択状態フォルダやファイルが複数並ぶことがあります。この場合、システム的な「フォーカス」はどこかに一つのみ存在する形をとるが、ユーザーのメンタルモデル…要するに注意の所在的な見方をすると、選択状態にあるオブジェクト群すべてをまとめて「一つの群としてのオブジェクト」と見立ててしまう方が自然に感じられます。

GUIのさまざまな“フォーカス”的表現1.001

実際macOS版Keynoteなどでは、複数選択したシェイプは個別に選択状態になるのと同時に、それらの外接矩形で一つの(目に見えない)バウンディングボックスを形成するようになっています。グリッド線への吸着などはこのバウンディングボックス単位で行われます。

フォーカス的表現のパターン:ドラッグ&ドロップ中

GUIのさまざまな“フォーカス”的表現2.001

ファイルのドラッグ&ドロップではさまざまなフォーカス的表現が行われます。

macOS Finderのリスト表示(テーブルビュー)では、次のような強調表示パターンがあります。

・ドラッグ中アイテムの既選択状態を示すハイライト
・ドロップ先アイテムの強調表示

これはフォーカスが複数存在するとか、選択状態が都度変化しているというわけではなく、細かなモード変化や状態遷移に応じて専用のステートが表現されていると見た方が自然です。ですから、ドラッグ可能オブジェクトやドロップ可能オブジェクトには、それぞれのステートをあらかじめ実装しておく必要があります。

GUIのさまざまな“フォーカス”的表現2.002

ドロップ先アイテムの強調表示では別のパターンもあります。ドロップ先がウインドウで直接展開されている場合には、テーブルビュー全体が枠線で強調表示されます。

フォーカス的表現のパターン:コンテクストメニュー

メニュー操作は「名詞—動詞」構文のインタラクションを取り入れている代表例です。まず操作対象となるオブジェクトを選択してから、次にコマンドをメニューから選び実行します。

コンテクストメニューがドロップダウンメニューと異なるのは、メニュー展開とオブジェクトの選択がほぼ同時に行われる点です。ですから、マウスの副ボタン(大抵は右ボタン)でクリックする際にオブジェクトへのポインティングも同時に行われます。コンテクストメニューを展開することはすなわちオブジェクトも選択するということです。

(アクセシビリティ機能を駆使してコンテクストメニューを展開するような操作の場合は、ドロップダウンメニューと同様に段階的に操作が行われる場合があります。)

画像5

macOS Finderのリスト表示(テーブルビュー)では、次のような強調表示パターンがあります。

・既選択アイテムの強調表示
・コンテクストメニューのフォーカスを示す強調表示

既選択アイテムとコンテクストメニューのフォーカスが一致した場合は、両者の区別は行われません。不一致の時には区別のために強調表示が個別に行われる仕組みです。

フォーカスの勘所

マウスカーソルを用いたフォーカスに係るインタラクションの設計では次の事柄に注意し考慮すること。

・GUIシステムが採用するフォーカスは原理的に一つになる(場合が多い)。
・アイテムの強調表示や選択状態を示す表示は、フォーカスとは別に表現される。
・アイテムへのフォーカスとアイテムの強調表示は一致すると区別がなくなる。
・メンタルモデルを検討する場合には、フォーカスとは別に「注意の所在」という概念を導入して区別する。
・ユーザーが思い描くメンタルモデルをベースに振る舞いを実装する。
・GUI側のフォーカスとユーザー側の注意の所在は必ずしも一致しない。
・個別のオブジェクトにイベントを送信する形で実装すると、選択オブジェクトが群である場合に、イベントレシーバーとしての「代表者」が必要になる。※CocoaではFirst responderとも呼ばれる。
・イベントレシーバーのプロキシー役(不可視のバウンディングボックスに当たるオブジェクト)を設けるか、群の代表者が選択中オブジェクト全体を統括する形をとる。

この記事が気に入ったらサポートをしてみませんか?