選択パターン

漫画
健太「そろそろおやつの時間だね」ドーナツ屋にきた健太「えーっと」。『ドーナツを買う』と書かれたメモを見ながら、「これだ!」とドーナツを指さし手に取る。

人間は日々の生活の中で様々なオブジェクトを手にとります。UIデザインにおいてもオブジェクト選択は名詞→動詞の起点になる重要な操作です。選択をうまく用いることで全体をシンプルに保つことができます。

ドリルダウン

コレクションからシングルを表示する操作がそのままオブジェクトを選択する操作になります。ユーザーは表示するだけの時もあれば、必要に応じてアクションを選択することもあります。

画面の簡易的な図
コレクションから項目を一つ選択するとそのシングルが表示される。シングルにはアクションボタンがある。

モーダル選択

コレクションから選択モードに入り、そのモード内で選択を行います。

画面の簡易的な図
コレクションに選択ボタンがあり、押下するとコレクションの各項目にチェックボックスが表示される。チェックした項目に対するアクションボタンや選択モードを終了するキャンセルボタンがある。

モードレス選択

コレクションで選択を行います。チェクボックスをクリックするなどでオブジェクトの選択を行います。(ほかにもクリックで選択、ダブルクリックでシングルを表示するパターンや、チェックボックスの代わりにセル全体のクリックで選択、項目名プロパティのクリックでシングルを表示するパターンなどがあります。

画面の簡易的な図
最初からコレクションの各項目にチェックボックスがついている。選択した項目に対するアクションボタンがある。

スプリングモード選択

スプリング式の擬似モードを用います。修飾キーを押し続けている間だけ選択モードに入ります。修飾キーを推した状態でクリックすると項目が選択されます。(修飾キーを離した後も選択状態は維持されます。)

画面の簡易的な図
Shiftボタン+ コレクションの項目を選択する。選択した項目に対するアクションボタンがある。

例えばゲームのUIを改善する際に選択パターンを用いることができます。

画面の簡易的なイメージ
ゲーム機のアルバム機能。ゲーム一覧の下に各種メニューが並んでいて、その中のひとつに「アルバム」がある。

最近のゲーム機はゲーム中のスクリーンショットを他者と共有しやすいようになっていて、デバイス内に多くの画像が保存されます。

ここでは「複数枚のスクリーンショットをモバイルデバイスへ共有する」操作を検討してみます。改善前の手順は次のようになっています。

画面の簡易的な図
アルバムを選択

メニューから[アルバム]を選択するとゲームのスクリーンショットが複数表示されます。

画面の簡易的な図
画面上部にアルバムというタイトル。その下にスクリーンショットが並ぶ。下部には4つのボタン操作用のショートカットが表示されている。Yしぼり込む、Xえらんで消去、Bもどる、A決定。この中から任意の画像を選択。

スクリーンショットを一枚選びます。複数枚を共有したい場合でもここではまず一枚だけ選ばなければいけません。

画面の簡易的な図
選択した画像が全画面に表示され、画面下部のショートカットは+非表示、X消去、Bもどる、A共有や編集。

選択したスクリーンショットの詳細画面で[共有や編集]を選択します。

画面の簡易的な図
追加の選択肢が表示される。投稿、スマートフォンへ送る、テキスト入力、コピー、消去。画面下部にはBもどる、A決定。[スマートフォンへ送る]を選択して[決定]する。

共有方法を選択します。

画面の簡易的な図
モーダルダイアログ。スマートフォンへ送るというタイトル。この画像のみ、まとめて送る、もどるという選択肢が並んでいる。[まとめて送る]を選択。

どのように画像を送るのかを選択します。

画面の簡易的な図
「まとめて送る画像を選んでください」というタイトルの下に複数のスクリーンショットが並ぶ。選択されている4枚にはチェックマークがついている。その右側には4/10というテキストと、[送る]ボタン。画面下部には+拡大表示、Bもどる、A決定。[送る]を選択。

画像を複数枚選択し、[送る]を選択します。

画面の簡易的な図
全体の操作の流れ

全体の操作の流れはこのようになっています。

この操作手順上には画像一覧が2回登場しています。複数枚選択すると決めている場合でも、最初の画像一覧では画像を1つだけしか選択することができません。そしてその先にある3つの手順を踏まないと複数枚の画像をモバイルデバイスへ送ることができないため、全体としては暗黙的な手順になっています。

アプローチ1:

画面の簡易的な図
アルバムを選択後に表示される画像一覧

改めてデザインを見てみると下部に[えらんで消去]というアクションがあります。選択モードに入り複数枚を選択する点においては検討している機能と近そうです。違いは複数枚選択したあとに消去することです。こちらの機能を見てみるとスマートフォンへ送る際にあった上限10枚という制限はなく多くの画像を消去できるようになっていました。

まずはここに揃える形で改善案を考えてみましょう。

画面の簡易的な図
下部に[えらんで送る]を追加してみた案

画面下部にそのまま[えらんで送る]を配置してみるとこうなります。本来は「スマートフォンへまとめて送る」というのが正確ですが長すぎるのでここでは少しだけ省略します。

ボタン操作に割り当てるアクションの数が4つから5つに増えてしまうことが気になりますが一旦保留しておきましょう。割り当てボタンは「?」にしておきます。

その問題を除けば、手順は以下のように短くなります。

アプローチ2

さらにもう少し発展させてみましょう。

「えらんで」からはじまるものが2つできてしまったので、これらを統合するとどうなるでしょうか。

画面の簡易的な図
下部には4つのショートカット。Yしぼり込む、Xえらぶ、Bもどる、A決定

[えらぶ]として統合することでアクションを4つにおさめることができるようになりました。

[えらぶ]を選択すると複数画像を選択するモードへ入る点は同じですが統合しているので任意のアクションを選択する構造になります。

画面の簡易的な図
複数画像を選択する画面には[スマートフォンへ送る]と[削除]のボタンが右側に並ぶ。

まず画像を見ることができるので、重複した画像があれば削除したり、いい画像はスマートフォンへ送ったりと柔軟に操作できるようになりました。

仮に「スマートフォンへ送る場合は10枚まで」という現状の制約を取り除くことができない場合は、選択枚数に応じてアクションを無効にするなどを検討します。

画面の簡易的な図
画像を10枚より多く選択した場合は[スマートフォンへ送る]ボタンが無効になる。

アプローチの比較

まとめると以下のようになります。

画面の流れの図
各アプローチの操作方法の比較

改善前

アプローチ1

アプローチ2

アイデアの展開

画面の簡易的な図
複数画像選択画面。右側に[送る]、[削除]ボタンが配置されている

このゲーム機で画像を送る先がスマートフォンだけではなかった場合はどうなるか考えてみましょう。単に新たにアクションボタンを追加するだけでも良いでしょう。アクションが多い場合は[送る]に統合することも可能です。

また、今回は元のデザインにあった選択モードはそのままになっています。つまりモーダル選択のパターンを使った形になりました。仮にこれをモードレス選択にするとどうなるか考えてみることもできます。

複数画像選択画面が最初から出ているようなイメージです。拡大表示はできるものの、1枚の画像に対するアクションがある以上、シングルの画面を表示する必要があります。画像を選択する操作とシングルを表示する操作をなんらかの方法で分ける必要がありそうです。

選択のためのコントロールを配置するか、選ぶモードへ入るために割り当てていたボタンを、複数選択のためのボタンとして割り当てるなどもアイデアとしてあるかもしれません。結果として複雑になるならば、モバイルなどで一般的になっている選択モードのみ許容して、コレクションをシンプルに保つという判断もあります。

この例だけでなくオブジェクトを選択する操作は様々なアプリケーションで登場する普遍的なものです。グラフィック系のソフトであれば今回紹介していないドラッグなどのジェスチャによる選択が用いられることもあります。いずれにしても選択パターンをヒントに、シンプルな構造にすることができないか考えてみるとおもしろいと思います。