Fusic Developers Weblog

こんにちは山本です。
なんとも小難しいタイトルにしてしまいましたが、今回は技術というよりはUIについて書きたいと思います。

要素を左から右へ移動させる

Webに携わっている方なら誰もが以下のようなUIを見た・扱ったことがあるんじゃないでしょうか。

複数の選択肢から、任意の項目だけ選びたい場合によく使われますね。

最近では、上のようなHTMLだけのシンプルなUIは見かけなくなりましたが、これだと何が問題なんでしょうか。
自分なりにちょっと考えてみたいと思います。

■問題点
1,左のリストが膨大な量だった場合、探すのが大変
2,移動させるのに「選んで」「ボタン」の２クリック必要
3,ぱっと見て、何をしたらいいのかわからない
4,左の領域と右の領域の意味がそれぞれわからない
5,項目名が長い場合、デザインが崩れる可能性
6,普通

かなり主観も混じっています。
6なんかは、普通と言ってもシンプルですし好む人もいるでしょう。
3や4は、アフォーダンス（※）に絡むことで、「右へ」ボタン一つとっても、何をどうしたらどういう動きをするのかが予測しづらいです。

※アフォーダンス
環境がユーザーに対して与える「意味」のこと

blog.livedoor.jp/lunarmodule7/archives/3283889.html

の記事がわかりやすかったです。

ただ、1と2は優先度が高いのかなと思います。
項目が100個あったら探す気も失せますし、100個全部右に移そうと思ったら200クリック必要です。

1の解決策としては、絞り込み機能の付加でしょうか。
項目名を対象に、文字入力による絞り込み機能を付けたいところです。

2については色々あると思います。
ドラッグアンドドロップでの移動、選択と同時に移動、複数同時選択して移動、など。
最近の傾向が何かはわからないですが、ドラッグアンドドロップはよく見る気がします。
ただ、それだとジェスチャーに制約のあるスマホでは操作が難しいですね。
選択と同時に移動、もアクションは減りますが、但し書きを徹底しないと逆にユーザーのストレスになるかもしれません。

う〜ん、大変。。。

解消策

以上の1,2の問題を解消したのが以下のUIになります。

弊社JavaScriptの巨匠・島田が作ってくれたものをベースに改良して作りました。
ポイントとしては、左のリストの絞り込みを行う機能を付け、ボタンの操作で左右の移動が可能となってます。
移動のアクションのためのボタンにはラベル名を付けています。
ここは、文字よりも、押すことで次のアクションが予測できるようなアイコンを当てるとよりいいのでしょう。

ただ、しっかりとメッセージ性のある簡潔な文字をあてています。「選択」とすることで、ユーザーはこのリストから選択するんだ！ということを自覚し、「解除」も、リストから外すことを明確に意識させることができるかなと思います。
また、項目名が長くなっても折り返すのでデザイン崩れは起きないのと、補助的に「全選択」「全解除」ボタンもあります。

ボタンの色は妥当か、複数同時に選択する場合はどうするか、といった課題もありますが、かなり使いやすくなったのではないかと思います。

よりよい使い勝手を求めて

上記の解消策でも、実際に使ってみると問題も出たりするでしょうし、改良していく必要があると思います。
ちょっとした機能一つとっても考慮することが多いので、他にも、いろんな人がいろんなケースで、どのようにしていけばいいか、何がより正解に近いか、頭を悩ましていることと思います。
UXデザインという言葉がよく聞かれるようになり、製品の使い勝手が重視されるようになってきたので、いろんな方との意見交換や事例の収集ができればなと思います。