Help us understand the problem. What is going on with this article?

"なにも無いところをタップしてキャンセル"はUI・UX的にアリなのか

More than 1 year has passed since last update.

僕の数少ない友人の、たまたま携帯(iPhone)を見させてもらう機会があったんですが(そのときはLINEの会話を見てました)、間違えてキーボードを開いてしまったんですよね。邪魔なのでキーボードを閉じようと思ったんですけど、瞬間的に手が止まるんですよ。そう、iOSにはキーボードを閉じるボタンがないんです!!
20191010_012314.jpg
これはAndroid端末のキーボード。キーボードを閉じるときは、戻るボタンをタップする(キーボードを開いているときは矢印の向きが下になります)。ちなみに、アプリによってはなにも無いところをタップしても閉じるようになっていたりします。ATOKなどのキーボードアプリではメニューからも閉じれます。

僕はiOSでキーボードを閉じる方法を知りませんでした……。一生の恥です……。友人からも嘲笑されました……。

たしかに、よくよく考えれば、なにも無いところをタップして閉じる(キャンセルする)というのは直感的な気もしなくもないです。街中歩いてるときにやべーやつに絡まれてもスルーするのがいちばん無難なのと一緒な気がします。

ですが、これは本当にベストなUI・UX設計なのでしょうか? もちろん非現実的な話ですが、キーボードが表示されている状態で、キーボードを閉じるにはなにも無いところをタップしなければならない。でも、なにも無いところという画面が無くて、どこかしらのボタンを押さないと閉じれないというときはどうするんでしょう……? もしそのボタンが五千兆円支払うボタンだったら大損です。

既存のボタンと"なにも無いところをタップしてキャンセル"の共存

"なにも無いところをタップしてキャンセル"というのは、それ単体ではとてもわかりづらいですが、既存のボタンと組み合わせることでより良いUI・UXになります。

Screenshot_20191010-014414_Nova Launcher.jpg

これはAndroid端末でモバイルデータ通信をOFFにしようとしたときに現れるダイアログです。ダイアログの選択肢としてキャンセルとOFFがありますが、これはダイアログの外をタップしても、選択肢のキャンセルと同様の挙動になります。

Screenshot_20191010-012017_PrincessConnectRedive.jpg

これはスマートフォンゲームでも特にUI・UX設計が上手いとされているゲームでのダイアログです。モバイルデータ通信をOFFにするときのダイアログと同じように、キャンセルボタンとOKボタンが設置されています。これもダイアログのなにも無いところをタップすることで、キャンセルすることが可能です。

これらの2例の共通点は、キャンセルする、というボタンが設置されている点です。"なにも無いところをタップしてキャンセル"という挙動は、あくまでもキャンセルボタンの代わりであって、そのボタンのエイリアス的な存在です。この"なにも無いところをタップしてキャンセル"というのは特にタップ操作を何度も行うゲームにおいてはかなり快適なUI・UX設計で、わざわざキャンセルボタンまで指を運ばなくても、その場でタップすればその動作を取りやめることできます。

そして、"なにも無いところをタップしてキャンセル"という仕組みを知らない人でも、キャンセルボタンがあるので困惑することはありません。

既存のボタンと"なにも無いところをタップしてキャンセル"が同格の場合

前節では、「あくまでも"なにも無いところをタップしてキャンセル"というのはキャンセルボタンの代替であって、メインのアクションはボタンである」という説明をしました。が、世の中にはそうでないUI・UXなソフトウェアもあるので、それも紹介します。

image.png

まずはWindows 10の、ファイルの関連付けを選択するダイアログです。OSが未知の拡張子、関連付けされていないファイルを開いたときに表示されます(上の画像はプログラムから開くから表示させた場合のダイアログで微妙に表示が違います)。

このダイアログでは、ファイルを開くためのプログラムを選択して、実際に起動する……という役割がありますが、そこにはOKボタンがあるのみで、ぱっと見どうやってこの動作をキャンセルするのか分かりません。ちなみに、この動作をキャンセルするには、"なにも無いところをタップしてキャンセル"するか、"Escキーを押してキャンセル"するかのどちらかです。

先ほども言いましたが、この2つの方法を知らない人は残念ながらキャンセルすることができません……1度無駄に、なんらかのプログラムでファイルを開いてから閉じることになります。パソコンに詳しいのであればEscキーを使うなんて当たり前のこと、と思いますがPC初心者でこの画面を閉じれる人は限られていると思います。

ちなみにですが、Windows 7の「ファイルを開くプログラムの選択」ダイアログにはOKボタンの隣にキャンセルボタンがあります。

Screenshot_20191010-010755_Twitter.jpg

これはTwitter for Androidです。Twitter for Androidには下書きという機能があります。これはツイートの送信に失敗したツイートをローカルで保持したり、あとからツイートする内容を事前に作成したりする時に役立つ機能です。上の画像はツイートの投稿をやめようとするときに表示されるダイアログですが、ここで下書きに保存するか否かを訊かれます。保存を押すと下書きに保存され、削除を押すと完全に削除されます。このダイアログではこの2通りの選択肢しかなくツイートの作成に戻ることができません。ちなみに、この動作をキャンセルするには、"なにも無いところをタップしてキャンセル"するか"戻るボタンを押してキャンセル"する必要があります。

このキャンセル方法を知らない人は、いったん保存をして、ホーム画面を右にスワイプして下書きをタップして、そこから編集してやる必要があります。まあAndroid端末をもっている人であれば、戻るボタンで直前の画面に戻るという動作を知っているはずなので、後者のキャンセル方法を知らない人は居ないと思いますが。ここで戻るボタンが共通の動作を行うという強味が出ていますね。

ちなみにiOSでは同じUIではなく、ちゃんとキャンセルボタンがあります。

結論

  • "なにも無いところをタップしてキャンセル"というのは、たいへん便利なUI・UXであることに違いない
    • 特にタップの回数が多いスマートフォンゲームなどでは、この恩恵がとても大きいはず。
  • ただし、これは普通のボタンではない。あくまでもボタンの代替の動作として実装されるべきものである
  • もちろん、"なにも無いところをタップして○○"に破壊的な動作を入れてはいけない
AioiLight
HEPPOKO PROGRAMMER
https://aioilight.space/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away