2014.7.23 / UI

モーダルを閉じるボタンのUIは右か左か

Tomohiro Suzuki

モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。
よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内容や一貫性によって判断する必要があります。

モーダルとは

ボタンの位置を考える前に、まずはモーダルとはどういったものかを紹介します。アプリケーションでのモーダルはユーザーに行動を制限し、特定のタスクに集中させるモードです。もちろんアプリケーションという意味では、ホームボタンを押したりマルチタスクにより他のアプリケーションを使うことができるため完全な制限ではありませんが、現在使用中のアプリケーションの中という意味では制限が発生します。
しかし下記のHuman Interface Guidelineにもある通り、ユーザーはアプリケーションを使いたいように使えることが一番であるため、行動範囲を制限してしまうモーダルは多用すべきではありません。
モーダルへの遷移のトランジションとしてはスライドアップや、フリップ、ディゾルブなどが多く、通常の右から左への遷移とは変化を付けることで特別なモードに入ったことをユーザーに伝える必要があります。

モーダル型の要素(現れている間はその要素内でしか操作ができないモード)には長所と短所があります。ユーザは気が散ることなく作業を進めたり情報を得たりできますが、逆に、アプリケーションの別の箇所をちょっと操作する、ということはできなくなります。
iOSアプリケーションは使いたいように使えるのが一番なので、モーダル型の要素は最小限に抑えるべきでしょう。モーダルコンテキストが有用なのは、次の場合に限ります。
・ユーザの注意を喚起することが重要な場合
・データが曖昧な状態にならないよう、自己完結した作業を最後まで進めさせたい(あるいは意識的に破棄させたい)場合

モーダルの種類

参考画像:Human Interface Guideline モーダルコンテキスト
モーダルには、今回メインに取り上げるモーダルビュー以外にも上記画像のようないくつかのパターンが存在します。画像はHuman Interface Guidelineに掲載されているものですが、アラートのアクティビティコントローラーもモーダルと同様のモードの一種です。
今回のモーダルビューの閉じるボタンを紹介する上で参考になるのは、この中のアラートの場合のパターンです。アラートの2つのボタンは間違ってタップしてしまう可能性があるため、左右のボタン配置についてもHuman Interface Guidelineに下記のように記述されています。簡単に言うと非破壊は右、破壊は左ということになり、右手での使用の場合に近い位置をタップしても、問題が発生する可能性を低くする意図が考えられます。この情報を元にモーダルビューでのボタン配置を実際に検証していきます。

ボタンを適切に配置する。タップするのが最も自然なボタンとは、一番実行したいであろうアクションを実行すること、誤ってタップしても問題が生じにくいこと、という条件を満たすもののことです。これを次のように配置します。
・最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。
最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。

モーダルビューの種類

少し前置きが長くなりましたがようやく本題である、モーダルビューを表示した際の「閉じる」ボタンの位置について考えていきたいと思います。必ずしもラベルは「閉じる」という表記ではなく「キャンセル」や「完了」、「X(バツ)」ということもありますが、本記事内では統一して「閉じる」ボタンとして扱います。
それぞれどのようなボタン配置のパターンがあるかを分類し、その配置はどのように考えられて成り立っているかを紹介します。

右型(第一階層)

2014-07-17_Contents01

AppStoreのカテゴリ選択や、Twitterの設定画面などのモーダルで使用されているパターンです。最もよく見かけるのがこのパターンかもしれません。位置としてはナビゲーションバーの右に閉じるボタンが存在し、第一階層ですので左にはボタンが存在しません。これは次に説明する右型(第二階層)で詳しく説明しますが、同時使用、または区別というパターンが存在します。
先ほどのHuman Interface Guidelineのアラートについての説明から解釈すると、AppStoreの場合にはカテゴリを選ぶだけですので、もし閉じてしまっても何も情報が失われることはなく、直前に選択していたカテゴリの表示に戻るだけです。Twitterの設定画面でも同様に、何か入力を必要とする設定は存在せず、全てタップで設定変更が完了できるタスクであるため閉じても失われる情報はないと判断できます。よって、非破壊的なボタンとして右側に閉じるボタンが存在しています。

右型(第二階層以降)

先ほどの右型から階層を進んだ場合のパターンです。AppStoreでは上記のようにナビゲーションバー左に戻るボタン、右に閉じるボタンを設置しています。これはタスクとしては前の画面と情報構造もあまり変わらなりため失う情報は無く、もし目的のカテゴリが見つからないのであれば、すぐに閉じることができるのを優先した結果だと考えられます。
続いて第一階層では同じように右側に閉じるボタンが存在していたTwitterの設定画面ですが、こちらは第二階層以降に閉じるボタンは表示されていません。AppStoreの場合と少し違うのは、Twitterの設定画面には階層を進む項目が多く、第三階層まで存在する項目もあります。もし間違って閉じるボタンを押してしまっても情報は失われませんが、間違って押したのならまた同じ画面に戻ることが考えられます。その時にはまた項目を探す必要があり二度手間という意味ではユーザーの時間を失っている(破壊している)と考えられます。わずかな違いではありますが、ヒューマンエラーを回避するためにも閉じるボタン表示していないと推測できます。

並列型

2014-07-17_Contents03

左型を紹介する前に、左型と少し関係している並列型を紹介します。上記はメールの新規作成画面と、Instagramのプロフィール編集画面です。
この場合のモーダルでは左右に配置されているどちらのボタンもビューを閉じることになりますが、意味としては全く異なります。右側に配置されているボタンは「完了」「保存」「送信」などのタスクを完了させて閉じるもので、ユーザーは情報を失うことなくタスクを終えることができる非破壊的ボタンです。反対に左側に配置されているボタンは情報を破棄して閉じるということで、もし編集途中に間違って押してしまうとユーザーがそれまで編集していた情報が失われてしまいます(たいていは編集情報が存在すればアラートを出しますが)。
このようにアラートビューでのボタン配置の概念に基づき破壊的なものは左、非破壊的なものは右に配置しているのが並列型になります。

左型

最後に少し難しいですが、右型と対象的に左に閉じるボタンが存在するパターンです。この場合にはふたつのケースがあります。
まずは既に右側にボタンが存在している、TwitterでURLを開いた時のケースから考えていきます。この場合にはアラートビューでのボタン配置に基づくと、表示されたWebビューではフォームなどの入力をすることもあって、それを閉じるという意味では破壊的だと解釈できるため、左に配置していると考えられます。少なくとも、右側に存在しているアクションボタンよりは誤タップしてしまった際に破壊的だと考えられるでしょう。
続いてInstagramの撮影画面では右側に何も存在しないにも関わらず、左に閉じるボタンが配置されています。これは破壊と非破壊の概念ではなく、一貫性の概念に基づいての設計だと考えられます。この撮影後に控える編集のフローでは左から右に画面は進んでいくため、右側に存在するボタンは次のステップへ進むものだという意味が含まれています。もし写真編集の途中でこの画面に戻り、さらに右側に閉じるボタンが存在していたとしたら、写真撮影をキャンセルしてもう一度写真編集に戻るのではないかとユーザーが解釈する可能性があります。そのため、実際にはカメラの起動を閉じるという非破壊的な挙動になりますが、一貫性を優先し左側に配置していると考えられます。


Human Interface Guidelineの記述を元にモーダルビューでのボタン配置を考えてみました。基本的にどれも直前のモーダルビューを起動するためのトリガーの位置などは関係なく、あくまでもビューに表示されている内容に影響を受けていることが分かります。
ただの左か右かの2択ではありますが、そのボタンの位置にはユーザーが時間をかけて生み出した情報も含まれていることを意識し、意味のある配置を行なうことを心がけましょう。しかし、これは必ずしも唯一の解ではないため、押し間違えるという問題を解決できるUIをその時の状況に合わせて考え続けることが私達には必要です。

記事一覧へ

Related Articles

About us

アプリやWebサービスなどの新規事業や既存事業における
アイデアの仮説検証からデザインまでをサポートします

株式会社スタンダードは、アプリやWebでサービスを展開される方の企画制作をサポートするデザインファームです。