1. まとめトップ

間違えやすい「エレベーターの開閉ボタン」をJAYPEGでデザイナーたちがリデザインしてみた

「エレベーターの開閉ボタン、押し間違えることけっこうありません?」個人的にずっと疑問だった開閉ボタンをリデザインしたものをJAYPEGに投稿したら、いつの間にかたくさんのデザイン案が上がってきました!!

更新日: 2013年01月29日

akirafukuokaさん

  • このまとめをはてなブックマークに追加
151 お気に入り 274508 view
お気に入り追加

ことの発端はfladdictさんのこんなツイート

主張の強すぎるエレベーターのサインUI。 サインの方をボタンと間違えて押してしまったメモ。 pic.twitter.com/j6Csu4FN

ちょっと話は変わるけど、開く・閉じるをつい押し間違えちゃうことありません?

深津さんのツイートを見て遂にエレベーターの開閉ボタンの正しいデザインが思いついた気がする。出来上がったらJAYPEGに投稿したい。

やっぱりみんなも押し間違えてるっぽい

じゃあベストな開閉ボタンとは?まず自分でデザインしてみた

…でももっといいデザインはないのか?JAYPEGで募集してみた

…正直もっといい解法がありそうな気もします。ということで、今回のデザインファイル(PSD、おまけレイヤー入り)を添付しておきますので、ぜひ皆さんなりのご回答をデザインしてJAYPEGに投稿してみてはどうでしょう?

するとすてきな続々とデザインを投稿していただきました!

出典jypg.net

「エレベーターの開閉ボタン」は以前から未完成なUIだと感じており、
以前、考察・デザインしたものに少しブラッシュアップしています。
実際にご自身がエレベーターに乗って、操作していることを鮮明にイメージしながら観ていただけると、よりデザインの実用性がわかりやすいと思います。
https://jypg.net/works/2365

ドアが閉まりかけた瞬間に誰かが駆け込んできた時、
UIの問題が表面化し、記憶にも留めていなかったボタンの
「あれ?どっちだ!?」が起こります。

(akirafukuokaより)
問題は「やはり慌てて選んだときに間違えてしまう」ことですよね。開くボタンが間違えなく選べればいいわけです。やはり開くボタンの方が大きく、目立つデザインというのは一つの解法でしょう。

出典jypg.net

閉じるボタンと開くボタンが同じ形だから間違えるのでは?と考え、開くボタンは丸く大きく、そして少しだけ出っ張っています。こうすることで拳でも勢いよく押せるのではないでしょうか〜w。
https://jypg.net/works/2365

(akirafukuokaより)
「ボタンは立体的なものである」ということを再認識させてもらえる、シンプルながら確実性のあるデザインですね。開くのプライオリティを大きさ、そして押しやすさで表現する。個人的には障がい者の方用のトイレの開くボタンを思い出しました。優しいデザインです。

出典jypg.net

「開ボタン」は咄嗟に押しやすい出っ張った大きめなボタンに。
「閉ボタン」はドア側に配置。普通の平坦なボタンに。
https://jypg.net/works/2422

(akirafukuokaより)
このデザインも開くボタンを立体的に強調していますね。閉じるボタンの配置やアイコンの作り(ボタンと扉の位置関係から一方向だけの矢印)も理にかなっているように思います。他の部分の作り込みも素晴らしいです!

押すだけじゃない変わり種アイデアも

出典jypg.net

ピンチインピンチアウトで開いたり閉じたりして、スワイプで階を移動します。慣性でうまく止まれません!
https://jypg.net/works/2366

"くぱぁ"で開くエレベーター! ある意味一番正しい気がする

(akirafukuokaより)
ピンチイン・ピンチアウトというiPhone世代ならではのUIアイデアですね。押す以上に開く・閉じるの動作につながりがあり、色物のようで実は一番実用的にも思えるアイデアかも!ただ手が塞がっている人や身体が不自由な人に優しいインターフェースとは限らない、というのも考えなければならないかも。

出典jypg.net

イメージ的にはMacのトラックパッドみたいに、
ドア方向にパネルをなぞると閉、
反対方向になぞると開、
となるイメージです。
https://jypg.net/works/2433

(akirafukuokaより)
こちらもタッチセンサーを用いたアイデア。スワイプする方向でドアが動く方向を指定する仕組み。実際の機器がイメージできるいいデザインですね。こうなると停止階の選択方法も気になってきます。

まだまだあるアイデア開閉ボタンデザイン

出典jypg.net

咄嗟に判別する必要があるのは開く場合のみなので、思い切って閉じるボタンは左右に。
開く場合は正面のボタンを押して、閉じる場合は左右のボタンをつまみます。
https://jypg.net/works/2402

(akirafukuokaより)
これも開くにプライオリティを置いたボタンのアイデア。ただし閉める際のアクションが「両端を指でつまむ」というのは新しいですね。ちゃんとアクションと扉の動きが連動している。機構も難しくなさそうなのもポイントが高いです。

(akirafukuokaより)
中央の矢印の意味とそれを囲んでいる四角が連動している。エレベーターの箱を上から見た、というのは新しいアイデアですね。

出典jypg.net

正解すると開く、間違えると閉じるといったクイズ番組的なノリを意識して◯☓をモチーフとした開閉にしてみました。
閉は☓をイメージして赤にしましたが、緊急ボタンとかぶってしまうので実際に用いるのは難しいですね(-_-;)
https://jypg.net/works/2395

(akirafukuoka)
「開く」→○、「閉じる」→×というこれも意味合い的な連想から作られたデザイン。緑(正解・安全)の反対は赤(間違い・危険)というのは合っているんですが、おっしゃる通り赤は「緊急ボタン」に使われているので勘違いを引き起こしやすいかもしれません。(周りにリサーチしたところ閉じると間違えて緊急ボタンを押してしまった、という経験談もありました)

1 2 3





このまとめへのコメント2

  • pleistさん|2013.01.29

    1つのボタンを押すと開いて離すと閉じるというのを昔考えました。

  • k_ootaさん|2013.01.28

    うちの娘は小さい頃、「キャベツ(開)」と「ちょうちょ(閉)」っていってたな……。

1

akirafukuokaさん

毎度おなじみ @akirafukuoka です。
http://www.akirafukuoka.com/



  • 話題の動画をまとめよう