こんにちは、ミツイです。
寒いですね。もう極暖ヒートテック＆コートです。
真冬に何を着ればいいのか不安です。。
最近、一括処理のUIで迷うことがありました。
一括処理とは、複数のアイテムに対し一括してあるアクションを行う操作。
Gmailのメール一括削除とかああいうやつです。（英語だとBulk actionですね）
ぱっと思いつくのがGmailだったので参考にしようと思ったのですが、どうにもイマイチ。
もっと良いのがあるのではないかと思い、色々なサービスを探したので記事にまとめておこうと思った次第です。
ではさっそくGmailから。
Gmail
各アイテム（各メール）の左にチェックボックスがあり、選択したアイテムに対して上部の操作バーにあるアクションを実行します。
操作バーにあるチェックボックスで、表示中の全てのアイテムに対して選択・選択解除を行うこともできます。
しっかし、選択したアイテムに対して取れるアクションが非常に多い。
ラベルと移動の関係がわかりにくいとか、同じ操作ができるアクションボタンが二つあるとか、そういうのはInboxへの移行のせいですかね。
もっと良いのがないか探してみます。
Inbox
初期状態
１つでもチェックするとこうなります。
Inboxでは、チェックボックスが初期状態では隠れています。
アイテム左のアイコンをホバーするとチェックボックスになり、一つでもチェックすると全てのアイコンがチェックボックスに変わります。
また、チェックすると上部にある操作バーが、検索等の通常状態から一括処理要のアクションボタンに変わります。
マテリアルデザインガイドラインにあるとおりの仕様ですね。
このチェックした時にだけ表示が切り替わるの好きです。
初期状態の画面がシンプルになる、動的に変わるのでアクションボタンへ目が行きやすい、のが良し。
wordpress
S3
はてなブログ
wordpressの管理画面、S3、はてなブログ、一番一般的と思われるチェックボックスとプルダウンのタイプ。
S3の様にアクションの種類が多い場合は一番しっくりきます。
Google Photos
Google Keep
Google Photos、Google Keepはデータグリッドなので各アイテムの左上にチェックボックスがあります。
チェックするとアクションボタンが出てくるのは、Inboxと同じくマテリアルデザインです。
Google Drive、Mega、OneDrive
Google Drive、Mega、OneDriveは、チェックボックスはなくキーボードとマウスの操作で複数選択できます。
仕様書くと細かいので省きますが、ファインダー（Mac）、エクスプローラー（windows）でできるような操作です。
チェックボックスがないので、シンプルになる上、一部分を複数選択する場合やりやすいです。
あと、この３つは選択した上で右クリックメニュー内にアクションのリストがあります。
マウスの移動が少なくて済むので素早く作業できますね。
デメリットとして操作できることが気づかれにくいというのがありますが、何回も使われるサービスなだけに学習してくれるだろうという目論見でしょうか。
Dropbox
Dropboxはチェックボックスタイプ。
アイテムをホバーするとチェックボックスが表示されます。
チェックすると、右側サイドバーに一括操作のアクションボタンが出ます。
アクションの数が多いのでヘッダー横並びにするのは厳しい→常に表示させたいのでプルダウンにしたくない→サイドバーに入れている、って感じでしょうか。
他のストレージサービスに比べて複数選択が面倒くさい気もします。
PocketではShiftを押しながら選択すると、複数選択モードに入ります。
最初知りませんでした。ていうか、気付かないですよね、これ。
最初の頃ツールチップで教えてくれてた気もしますが、それにしても。。
Googleスプレッドシート
意外と思い至らなかったのがExcelやGoogle spreadsheetの一括操作。
選択してある状態のセルに対して各種の操作を行えます。
アクションの種類は非常に多いです。
特に一括用のアクションボタンはなく、通常のアクションボタンをそのまま一括として使うことができます。
また、チェックボックスはなく、クリックでセル選択、上部・左側のヘッダー部分をクリックすることで列・行を一括で選択、ドラッグによる複数選択、Shiftやcmdキーを使った選択など、選択方法も豊富です。
一括処理としては最強ですね。
結論
結論として、今回作ったUIではスプレッドシートを参考にして、ヘッダー部分をクリックで一括選択する形にしました。
社外秘の製作中UIなためキャプチャ等は載せられないです。。すいません。
色々見て思ったのは、UIを決める際に重要視しているのが想定される使用頻度である（んじゃないか）ということ。
アクションボタンをコンテキストメニューに入れるのは初見のユーザーにとっては気づかない恐れもありますが、慣れたユーザーにとっては非常に便利です。
あと、スプレッドシート（とExcelも）は作業を効率的に行うためのUIとしての作り込まれようには恐れ入ります。今更ですが。。
以上、まとまりのない記事ですが、一括選択・一括処理のUIに困っている方がいたら参考にして頂ければ幸いです。
好評だったら、第二弾として他のUI部品でもやるかもしれません。
ではまた。
