今回は「なぞなぞとUIデザイン」について。ぼくがUI設計をする際、いつも思っていることがあります。
「なぞなぞとUIデザインは似ている」
問題に挑む側としても。出題者としても。
たとえばこんなのはいかがでしょう。
電球を用いて1から9までの数字を表現します。最も少なくて何個で表すことができるでしょうか？
一番最初に考えつきそうな答えをご紹介しましょう。9個の電球を並べ、左から順に1から9までの役割を与えます。分かりやすいですね。
もちろん、本なぞなぞの答えはもっと電球の数を減らせます。答えを考えてから続きをどうぞ。
電球とナンバリング
ここではふたつの答えをご紹介しましょう。
二進法を使うとどうだろう
先ほどとは並び方が異なりますが、二進法で電球を並べてみましょう。左に行くにつれ桁数が上がっていきます。(下記は例として5を表現しています)
解決すべき課題は1から9まで数えることですが、電球4個で15まで数えることができます。 中々良さそうですが、よく考えてみましょう。この解法はふたつの問題を作り出しています。
- 二進法の知識が必要になるため、ユーザーの負担が増える
- 課題の範囲外である9〜15までの数値を表現できてしまうため、ユーザーに混乱を与える
問題を解決するはずの対策が、より多くの問題を作り出すことはままあります。特に上記1はユーザーのターゲット層にすら影響が出るでしょう。
多くの問題を一気に解決できるUIは理想ですが、基本の考え方としてはひとつの問題にひとつの回答です。少なくともひとつの解決をするためにそれ以上の問題を増やしてはいけません。
UIができ上がったら一度クールダウンして、少し遠くから眺めてみましょう。その解決法、問題を増やしていませんか？
それはほんとうにベストな解法？
さて、一応正解(とされているもの)を紹介します。
画像のように、電球の点滅数によってナンバリングを表現しています。なんと用意する電球はたったのひとつ！これでファイナルアンサーで良さそうです。
ですがこれ、ほんとうにベストな解法なんでしょうか？
「電球を使って」「できるだけ少ない個数で」というオーダーはクリアしてるように見えます。最低でひとつは電球を使わなければいけないので、1個が最も少ない。それは間違いない。そして表現する数値は9を超えてもいくらでも対応できます。十分柔軟な気がしますね。
しかしたとえばこれがプロダクトだったとして、課題は本当にクリアされているでしょうか。
本当に必要だったもの
上記解答では本来達成すべきだった目的が「電球の数を減らす」ことにすり替わっているように見えます。これがもしプロダクトデザインであったなら「ユーザーが表示されたナンバーを間違いなく認識できる」ことがもっとも解決したかった課題のはずです。
このプロダクトを使うとき、果たして9回点滅した時と8回点滅した時、その差がはっきりと分かるでしょうか。
1から20までを表現する仕様になったとき、20回の点滅をじっと見続けることができるでしょうか。100まで表現するとなったら？
なぞなぞとして机上の空論をする上ではよいですが、実際のUIデザインにおいては最高の解決法ではなさそうですね。
続いてもうひとつなぞなぞを出してみましょう。これはちょっとトンチがきいていますよ。
コインを1枚だけ動かして、縦から数えても横から数えても4枚になるようにしてみよう
下図のように、コインが縦4枚、横3枚並んでいます。
コインを1枚だけ動かして、縦で数えても横で数えても4枚になるようにしてみましょう。
いかがでしょう。難しいのでヒントが欲しい？ではこんな感じに100円玉をリアルに表現して出題してみました。
出題の方法をかえてどうするの？と思うかもしれませんが、実はこの出題の方法もUIデザインの話に関わってきます。
答え合わせ
さて、答えをご紹介しましょう。(ちょっと他の方法が考えつきませんが、他の回答があったら知りたいです)
上記画像が答えです。一番上にあったコインを持ち上げ、下から二番目のコインの上に重ねるというのがポイントです。
十字の真ん中にコインが2枚あるためその部分が2回のカウントとなり、縦で数えても横で数えても4枚になるという訳ですね。
いかがでしたでしょうか。答えは合っていましたか？本なぞなぞのキモは平面的な思考から立体的な思考を発想するという点です。
この問題は最初に出した段階の方が難しくなっています。何故かと言うと、平面と円という抽象化した画像により現実世界のY軸が想像しづらくなるためです。
ヒントとして提示した画像は陰影を与えた画像で現実世界を想起しやすくなっています。テクスチャやライティングなどを加えてよりフォトリアルに表現したほうがより良いヒントになったかもしれません。
表現手法とその理由と
ここではWebデザインにおけるUI設計の歴史を振り返ってみます。
Webデザインの歴史の中で、スキュアモーフィックデザインという手法がもてはやされた時期がありました。やたらリアルなアイコン、一度は見たこともあるのではないでしょうか。(ぼくもその昔大量に作りました)
現実世界の質感を模すことによって、アイコンそのものが使い方やそれ自身が持つ情報を発してくれるという考え方に基づいたデザイン手法になります。*1
現在ではWebにおけるルールが十分に浸透したことによってより装飾を単純化するフラットデザインやマテリアルデザインが主流になっています。
僕らが作ることの出来る平面や空間には限りがあり、ユーザーの知見やそれまでの体験の力を借りることはより複雑化するアプリケーション設計において重要な手法のひとつになってくるでしょう。*2
また本なぞなぞの「三次元的にとらえる」という話に関連して、iOS/Android端末の台頭によってぼくらWebデザイナが失ってきたものについても思いを馳せてみましょう。
従来のWebデザインにおいて、マウスオーバーは一番手っ取り早く「ユーザーインタラクションのある場所を示す方法」であり続けました。
ボタンの上にマウスが乗ったら、とりあえず色を変えたり下に数ピクセル下げれば「お、これは押せそうだ」ということを伝えることができました。
しかし、タッチデバイスは基本的に「マウスの上にカーソルがある状態」というものがありません。当たり前ですね。カーソルがないのですから。*3
これによって、UI設計はよりシビアな要求を求められることとなりました。すなわち触る前にインタラクションとその結果が想像できるものを作るということです。
このように、時代によってUI設計に求められること・表現の仕方は変わってきます。それは単純な流行り廃りという面もありますが、その裏側には何かしらの理由があるものです。
しかしながら我々UIデザイナーが作るものの本質は「説明書がなくても使い方がわかるプロダクト」に集約されます。我々が作るものは、「絵」ではない。
なぞなぞの答を考える。もしくは出題について考える。このことがUIデザイン作成のヒントになるのではないかなと日々思っています。
面白いなぞなぞがあれば、ぼくにもぜひ教えてください。
柔軟な思考で素敵なUIを作っていきましょう。
