複数選択UIの調査

複数選択UIの調査

#UI
#UX
#デザイン
2024-08-06

背景

ツールのような複雑なアプリケーションでは、しばしば複数の選択ができる要素が存在します。身近な例では、ファイルの選択などです。

使い慣れた人はあまり意識せずに行っているこの操作ですが、実装するとなると、その挙動を明確に言語化する必要があります。自分でツールを作る上で他のアプリケーションの挙動を参考にしたく、いくつかのアプリケーションを調査しました。

調査

大抵のアプリケーションでは、複数選択をする際には、以下のような操作が行われます。

要素がドラッグ可能である場合など、押下時に選択や、離上時に選択など、ツールによってはさまざまな操作が行われます。

Finder

finderでフォルダの選択や解除をしている様子、入力したキーとクリック状態が表示されている

何も選択していない状態での選択は離上時で、追加の選択の際は押下時になっているのが特徴的です。 そのため、ドラッグを行う場合でも、要素は選択状態のハイライトがされません。一方で追加の選択を行う際は押下時にハイライトされるという違いがあります。ハイライトにあまり強い意味を持っていないのかもしれません。

選択の解除が離上時になっているのは、選択した要素に対してドラッグを開始できるためだと考えられます。 また、フォルダの開閉ボタンをクリックした際は、選択などの操作は行われません。

ユーザーインターフェースに力を入れている Apple 製品の挙動は、1 つの基準とも言えるかもしれません。細かいそれぞれの挙動の理由が気になりました。

バージョン: macOS 14.5

Adobe After Effects

After Effectsでタイムラインの要素の選択や解除をしている様子、入力したキーとクリック状態が表示されている

基本的に押下時にアクションを起こすという一貫性があってシンプルです。そのままドラッグを行うことができます。

プレビュー上の要素などについては、Cmd キーではなく Shift キーで複数選択を行います。 また、矩形選択も行えるため、Shit キーを押しながら矩形選択で追加選択を行えます。この時の矩形の当たり判定は接触しているか否かで、既に選択状態であれば解除されます。

キーフレームに対しては Cmd キーを押しながら押下は、別の操作に割り当てられているため、選択の追加は行えません。

バージョン: 24.5.0

Studio One

Studio Oneでノーツ要素の選択や解除をしている様子、入力したキーとクリック状態が表示されている

押下でドラッグを開始することができますが、追加の選択が離上時になっているため、複数選択と同時にドラッグを開始できません。

バージョン: 5.5.2.X

Blender

Blenderで3Dオブジェクトの選択や解除をしている様子、入力したキーとクリック状態が表示されている

Blender のオブジェクト選択は、選択状態が 2 つあるのが特徴です。最後に選択したかどうかの状態も保持しています。 最後に選択した要素であれば、Shift クリックで離上時に選択を解除できますが、それ以外の要素では最後に選択した状態が移ります。

また、矩形選択では 3D オブジェクトのビューと矩形の当たり判定が接触しているか否かで選択されるかが決まります。

Nonlinear Animation Editor や、Dope Sheet などでは最後の選択状態はありません。

ただし、Shift キークリックの押下ではドラッグを開始できないのが特徴です。単一要素に対する押下では選択からドラッグに移行できます。

バージョン: 4.0.1

Unity

Unity の Project ウィンドウでは、概ね Mac の Finder と同じですが、選択要素の解除が Cmd と押下で行われるのにそのままドラッグできるのが特徴です。その場合は最後に解除した要素も一緒に選択されます。

Scene ウィンドウでは、Shift もしくは Cmd の離上で要素を選択できます。矩形選択では 3D オブジェクトのビュー上でのバウンディングボックスを内包した時点で選択可能になります。

バージョン: 2022.3.9.f1

終わりに

異なるソフトでも基本的な部分は共通しており、ソフトを跨いでも大きな障壁なく利用することができますが、細かい挙動については異なっているようです。詳しく調査してみるとろいろな発見があり非常に興味深かったです。

このような複雑だけどよく見られるインターフェースはどこかで標準化されているのでしょうか…?

シェア