UIとしてのモーダルと概念としてのモーダル

これはなに

社内でUIについてのモーダル/モードレスに関する話が上がって、軽い議論に発展した。

簡単にいうと「状態としてのモード/モードレスと、UI Componentとしてのモーダルは無理に結びつけずに考えた方がいいよね」という話だった。

その結論が個人的にしっくり来たのでざっくり残しておこうと思う。

たとえば、「モーダル/モードレス」でググるとめちゃくちゃ記事がいっぱい出てくる。

（3つめの記事より）

モーダル
モードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由に操作を行えなくなることと、モード別に機能の意味や振る舞いが変化することから、ユーザーインターフェースのデザインでは、できる限りモードを設けないほうがよいとされる。

モードレス
モードがない状態。ユーザーインターフェースをデザインする際に目指すべき状態。状況に依存した機能制限がなく、自由な手順でタスクを進行することができ、かつ特定の操作がシステムによって常に一定に解釈される状態。

この用語を知った時自分はこのようなことを考えた。

「えっと〜... xx機能におけるXxxModalコンポーネントは、モーダル/モードレス状態を正しく表現できていたかな...」

つまり状態として表されるモーダル/モードレスが、UI Componentとしてのモーダルと意味が適切に一致しているかという点に主軸をおいて思考を整理していた。

こちらの記事の結論が、自分たちの考えと似ていた。

状態・行為を表す言葉
UI名称として適正なもの

繰り返しになるが、これらを分けて考えたほうがいいということである。

つまり以下のようなこと。

「設計としてここはあえてモーダルにした方がユーザー体験がよくなるよね」

「このUIはページ遷移でなくモーダルで表現したほうがシンプルじゃない？」

この2つのモーダルは別々のものを指す。

Frontend Enginner