モーダルウィンドウ｜UIデザインポリシー整理
リーガルテックAI SaaSスタートアップ、MNTSQのプロダクトデザイナーのクボスケです。
私たちは、レバレッジの効くデザインの仕組みづくりを目指しています。この記事は、MNTSQとしてのUIデザインの基準や方針を決めていく「UIデザインポリシー整理」というプロジェクトのなかで行なわれたディスカッションをもとにまとめたものです。
このプロジェクトの主旨や運営については、初回の記事でも述べていますので、ぜひご覧ください。
それでは、今回のトピックは「モーダルウィンドウ」です。
モーダルウィンドウ
モーダルウィンドウは、特定のワークフローに制限された状態（モード）をつくります。元の画面の上に層を重ねたように表示します。定型的な操作や複雑な入力をまとめることで画面をシンプルにできます。これによりユーザーの認知負荷を軽減できます。モーダルウィンドウの外側にはもとの画面が見えるため、画面を切り替えて移動するよりも、コンテキストを保ちやすくなります。
モーダルウィンドウの上部には、ユーザーが行う操作を表すタイトルを表示します。タイトルは、モーダルウィンドウを開くボタンのラベルと連続性があるようにします。体言止めで操作を表せる場合は「する」を省略します。
モーダルウィンドウを閉じるための［×］ボタンは設けません。モーダルウィンドウの外側の余白をクリックするか、下部のボタンを押すことで、フローから離脱できます。フローを完了するボタンを押すと、モーダルウィンドウも自動的に閉じます。
モーダルウィンドウの中で段階的な遷移をしたり、別のモーダルウィンドウを展開することは、必要な場合に限ります。できるだけ、多重にならないように設計します。
以下はやりとりの内容を一部抜粋したものです。
ナカシマ：いわゆる「モーダル／モードレス」の文脈で、「モード」を作るUIで、ユーザーがなんらか意思決定をしないと次の動作ができないものです。同時に複数の動作ができるものは別の扱いで、「フローティングウィンドウ」になりますかね
kassy：まず、どういう時に利用すべきなんでしょうね
ナカシマ：ダイアログもあるし、入力を含んだり、さまざまなシーンで使われますよね
クボスケ：画面の上にウィンドウを一層重ねて、ユーザーの操作をその中で展開する特定のワークフローに制限したものになりますね。もとの同一の画面で展開すると複雑になってしまうような、複層的な入力・表示を分離できるので、UIをシンプルに保てる利点があります。
モーダルウィンドウの中ではユーザーをひとつの作業に集中させることになるため、認証や申し込み手続き、課金決済など途中で横道に逸れるとユーザーに不利益が生じる場合などにも有効だと思います
kassy：MNTSQは専門性の高い業務ツールですが、幅広いリテラシーのユーザーを対象にしたソフトウェアの場合は、自由度の低いフローの中で行なう限定的なタスクが中心になることもありそうですね
ナカシマ：ユーザーの認知的負荷を軽減するのに役立ちますね。定型的かつ一定複雑な入力のまとまりで分離すると、ユーザーの学習を助ける面もあると思います
クボスケ：分離した単位でコードとしての可用性、取り回しのよさの観点でも考えられそうです
ナカシマ：逆に、分離したひとまとまりの機能群とする必然性がないのにモーダルにするのは避けよう、とも言えるかもしれません
kassy：「モーダル／モードレス」はタスクベース／オブジェクトベースと呼応するところもあるのでは、とも感じました
〈モーダルの多重〉
クボスケ：モーダルウィンドウからまた別のモーダルウィンドウを開くのは許容できますか
ナカシマ：基本的にナシなのではと思っています
クボスケ：そうですよね。どうしても多重モーダルになってしまうケースはあると思います……
ナカシマ：1つめのモーダルウィンドウが本当にモーダルウィンドウとして開くべきものなのかはよく検討したほうがいいと思います。ケースによっては、じつは元の画面から単に画面遷移でもよかったりします。それなら多重にならなくて済みます
クボスケ：スマートフォンだと「ハーフモーダル」みたいな概念も出てきてますね。モーダル内での遷移や多重モーダルも、許容されているケースも見かけます
ナカシマ：ユーザーから同じものだと認識されているかはわからないですけど。スマートフォンはまた別の観点があるので、今回の整理からは除外しましょう
クボスケ：ハーフモーダルはスワイプやフリックで切り替えたり閉じたりする、スマートフォンならではの操作性が、モーダルウィンドウ自体の挙動の許容に影響しているのかもしれません
kassy：レスポンシブも考えるとまた複雑さが増しますね
〈閉じる機能〉
クボスケ：モーダルウィンドウ内の右上に、閉じるための［×］ボタンを置くかどうか。モーダルウィンドウの外側の領域をクリックでも閉じれるのに、わざわざこの小さい［×］をクリックすることを意識させるのは負荷を強いることになるかなと思いまして
kassy：［キャンセル］［閉じる］などフローを離脱するボタン、［OK］などフローを完了するボタンがある場合は、それでも閉じますし
クボスケ：キーボードのescキーで閉じる、もありますかね
ナカシマ：あと、ヘッダー部分の右側に要素を置きたくて、右上に［×］ があるとじゃまなケースもありそうです
クボスケ：OSのウィンドウ由来なのかもしれませんね
ナカシマ：MacもOS9まではウィンドウを閉じるボタンは右上でした
〈モーダルウィンドウのヘッダータイトル〉
kassy：モーダルウィンドウのタイトルについて、文章だったり行為の名前だったりすると思いますが、タイトルの付けかたの方針はどうしましょうか
ナカシマ：モーダルウィンドウを開くときのボタンからの連続性を認識できるようにしたいですね。ボタンのラベルがタイトルになると思います
クボスケ：たとえば、もとの画面で［編集］というボタンを押して、「編集」というフローに入り（「編集」というタイトルのモーダルウィンドウを開く）、モーダルウィンドウを閉じるボタンのラベルは［変更を保存］のようにフローを完了を意味するものになっているのが、しっくりくるのではないでしょうか
ナカシマ：ユーザーのアクションで開くモーダルウィンドウはそうですね。ユーザーのアクション起点ではないモーダルウィンドウはまた違うかもしれません。モーダルダイアログやメッセージとかで、タイトル自体が不要なケースもありますね
クボスケ：MNTSQでは何かのデータを対象にしたものが多そうです。データのオブジェクトの名称と、ユーザーの行為の文脈での呼称が異なるケースもあると思います。たとえば「ユーザー」のデータを扱うけど、「担当者」を指定するフローであるとか
kassy：ボタンのラベルには「する」をつけないことにしたので、それと連続するモーダルウィンドウのタイトルも同様ですかね
ナカシマ：ボタンのラベルの抽象度が高いケースでは、モーダルウィンドウのタイトルではもう少し具体的にしてもいいかもしれません
クボスケ：たとえば、ボタンのラベルは「アップロード」で、開いたモーダルウィンドウのタイトルでは「締結版契約書のアップロード」ということですね。ところで、「〜のアップロード」or「〜をアップロード」、どちらがいいでしょうか？
ナカシマ：目的語なので「を」がいいのではないでしょうか