エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)

ele14

発端はfladdictさんのtweet
そのあとJAYPEGこんなお題が生まれた。
みんなエレベーター好きすぎだろっていう。
いや、私も大好きだけどな!

そんなわけで考えた人たちを独断と偏見によりまとめてみたい。
※画像をクリックすると、JAYPEGの元のページに飛びます。



グラフィックまたはWebデザイナーが真っ先に考えそうなタイプ


ele01 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲アイコンにしちゃえって発想。かわいいけれど、公共性が低い気がする。顔である必要性があまりないし。

ele02 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲パックマン的な。

ele03 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲これはちょっと… と言いつつ、自分でも煮詰まったら作っちゃいそうな気がする。ピクトグラムから発想が脱却していないと、こうなるのかー。
最初の要件としていた「見分けづらい」というところはあまり解決されていないですな。



タッチパネルがイケてるだろ!派

ele04 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲タッチパネル方式1。
タッチパネルを触ったことのない人には絶対ピンとこないUIだな…。あとたぶん、ボタンだって分からない。
え? くぱぁ、がいいじゃんって?
…さっさと次いきますよ、次。

ele05 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲タッチパネル方式も多数出ているけれど、あんまり現実的でない気がする。
これだったらそのままボタンでいいのに。閉じている時にUIを減らす、というところがポイントではあるものの。
現実にボタンを押している感覚って、タッチパネルになれない人には必要なんじゃないかねえ。

あーあと、アクセシビリティの面から見ても、タッチパネル方式は全面アウトですね。
タッチパネルだけじゃなく音声対応くらいしたら、ユニバーサルデザインと言えるのだろうけど。公共のものだからなあ。



ボタンだから間違えるのなら形を変えればいいじゃない派

ele06 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲形を変える+ラベルを変える。…んー、すすむ?


ele07 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲スライドバー方式。さぁ、何が何だかよくわからなくなってまいりました。

ele08 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲大きさを変える案1。
ただしこれだと、大きさの判別をする+色の判別をする+アイコンの判別をする必要があるので、「とっさに開くボタンを押す」などといったときに判断材料が多くなりますね。

ele09 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲大きさを変える案2。現実のエレベータのメタファ。
これはかなり好き。とはいえアイコンが従来通りなので、やはりとっさの時に考えてしまう気がする。

ele10 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲大きさ・形を変える案3。開けるボタンが外側になっているので左右どちらを押してもよい、っていうのは重要なポイントかもしれない。
だってエレベーターのドアは右にも左にも開くのだもの。
右左に並べることも混乱のポイントよね。つまりボタンだってどっちにも押されてもいいじゃない。



ここまできて整理しよう。紛らわしくなるのは何故?

ele11 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲なぜ、押し間違えるのかというところからスタートした発想。

こちらを見て、自分でも考えたくなりました。
まず、なぜ押し間違えるか?
・両ボタンともに矢印でドアの動きを表現しているが、矢印がくっつきすぎている&尾がないので、そもそも矢印として認識しにくい。
・閉じるボタン、左右にだんだん大きくなるので「末広がり=開く」的な発想をしてしまう。
・開くボタン、中心にむけて膨らんでいるので「凝縮=閉じる」的な発想をしてしまう。
・2つのボタンを比べたとき、こんな動きを想像してしまう
 http://p.tl/Jplf
 この場合あきらかに開いているのは「閉」のほうで、閉じているのは「開」
以上をふまえて工夫。
・矢印に尾をつけ、矢印として認識できるように
・面積的アプローチ(開くほうが面積が大きく、閉じるほうが面積が少ない)
・物理的イマジネーションがわくように(中央の正方形をドアに見立てて)

他のたくさんの素敵なデザインも拝見しましたが、物理的にボタンの形を変えてしまうのは非現実的だと思いました。2つのボタンというパブリックなアフォーダンスが既にあるからです。少しでも住みやすい世の中になりますように!!


そう。アフォーダンス。UIを勉強しているとよく出てくるこのキーワード。
人は一度学習したことって、他に応用しようとするので、ボタンの形を変えるのは結構危険。
今のは便利ではないけれど、変えすぎるとわかってもらえない可能性が高い。
たとえがいいか分からないけれど、あのソフトやどこかのウェブサイトで見かける「保存」のアイコンやボタンが、
未だに今は亡き「フロッピーディスク」(!)であるようなもの。
これを突然別の絵に変えると、ユーザー側が混乱をきたすのです。


そんなわけで、マイ・ベスト・エレベータUIは

ele12 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲現実的な面から見て、大がかりな改変をしない・できない前提で作られた見事な案。
シンプル。そして俺的No.1!素晴らしい!
何より言語にとらわれない(日本語以外でも伝わる)。そして過剰でない。素敵です。

ele13 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲ランプエリアの大小での差異化。俺的No.2。
日本と英語圏で使用するということと前提すれば、これもとても素晴らしいです。
光っているエリアでひと目でわかること。緑と赤が伝える意味。
光っているエリアといないエリアで素材感に違いが出せれば、アクセシビリティ面でもいいのではないかなーと思いました。

ちなみに

ele141 エレベータUIを考えた人たちのまとめ(独断と偏見が含まれます…)
▲たぶん一番案としては多いパターンですが、私の草案(ちゃんと作れよ)もこれに一番近かった!
ボタンを押した結果、どうなるのかを示さなきゃいけないと思うんだ。

いやーしかし考え方を聞いていると、私自身が日々UIやデザインを考えているプロセスと似ていますし、とても参考になりました。
現実のものを作ることの方が制限が多いので、より工程が多そうです。
みなさんの意見はどうでしたか?
ベストオブエレベータUI、もっとあれば是非教えてください。


エレベーターと言えば、エレベータの制御プログラムって大変らしいです。機械としてもかなり繊細なんだとか。
うちの会社のエレベータのルールはよくわかりません。
基本2基なのですが、向かい合わせ。ボタンはそれぞれについている。
玄関フロアーに両方いる場合に、Aのボタンを押すとAが開く場合と、Bが開く場合がある。
しかしBのボタンを押してもAが開くことがある…っていう。
お願いします、うちのオフィスのエレベータだけは何とかしてくれ!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>