DISられないUIを作るために最低限守るべき5つの鉄則

ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。

曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。

反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1

ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。

なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。

クリックできる場所はcursor:pointerを指定しろ

これを忘れるとこの世のものとは思えないくらい壮絶にDISられるので注意しよう。例えば以下の箇所はクリックできるか否か。

できる。できてしまうんだ。本当にすまんかった。今では反省している。

普通の人はマウスカーソルが変わらないとその場所はクリックできるとは認識しない。もう何はともあれこうしておこう。超大事。

これで全ての問題が解決するわけではないが、それはそれ、これはこれ。

トグルスイッチの状態をボタン色のみで表すな

あなたの前にこのボタンがひとつだけある、としよう。果たしてこのクエリは現在、実行される状態だろうか、停止されている状態だろうか。押すとどうなるだろう？

ということで、わからん、と言われないために、とりあえずこうしてみる。

これなら青が押されてるっぽいし、赤を押せそうだ。んで一応、赤を押したときには更に説明をダメ押ししておく。

ここまでやれば、まあ分からない人がいたとしても、きっと努力は認めてもらえるはずだ。有効/無効であれば、無効アイテムの背景をグレーアウトするのもたぶん効果がある。

使えるならこういうのがいい。いろいろライブラリとかあるはず。アニメーションはどうかと思うが、世間の常識に乗っておくのは大事。

クリックしたら何か反応を出せ

画面のどこかをクリックしたとき、裏側で何かの状態が変わっており、そのアイテムが選択されている、みたいなやつ。ダメゼッタイ。わからん。

ダイアログを出すでも画面のどこかでアイテムがぷるぷる震えるでもいいので、反応を出そう。画面に出ないで何かやるのはダメだ。

いやぷるぷる震えるのは多分ダメだ。考え直せ。

コピペは全選択でやれ

前のにかぶるが。ボタンをクリックすると情報がクリップボードにコピーされるというやつ、あれは超ムズい。ZeroClipboardみたいなのを使ってうまくやる方法をつい考えたくなるが、あれも本当にクリップボードに入ったかどうかを確認する手段がユーザにない。

あとFlashがフォーカスを奪う。GitHubのリポジトリURLのコピペボタン、あれのことだ。あれをクリックするとその後なぜかキーボード操作がうまく働かないという経験があなたにもあるはずだ。

コピペはもう面倒だからTextareaをポップアップさせ、その中身にコピペしたいテキストを放り込んで全選択状態にしとけ。そしたらユーザが勝手に Ctrl-C する。そのくらいのリテラシーはユーザに期待しよう。わかりやすいし。どのブラウザでも動くし。

最後に: 暗い背景にしとけ！

正確には、管理画面系なら白背景にしとけ。グレーアウトでdisabledとかが示しやすくなるから。

モニタリング系なら暗い背景にしとけ。つまりこういうやつだ。Kibana3は格好よさが全てだ。

同じKibana3でも白背景だとこうなる。これはいかん。いやいいと言う人はいるだろうが、というか自分は実はモニタリング系でも白背景のほうが好きだが、世の中の人は暗い背景というだけで(以下省略

いいか、モニタリング系の画面を作りたいなら悪いことは言わないから暗い背景にしておけ。

最後に

お前の作ったアレはいまだに上記の鉄則が守られてないじゃねえか！ というあなた。

そういうことも世の中にはある。

*1:もちろんそれができないから何度もDISられてるんだけど……。