Modeless Designとは -モードとモードレス-

どうも、都内でフロントエンドエンジニア兼フォトグラファーとして活動しています石亀と申します。

最近、デザインの世界でModeless DesignやModelessnessという言葉を耳にします。この概念自体は真新しいものではないですが、ソシオメディアさんでかなりこのテーマを取り扱っているようで、非常に参考になるのでまとめてみました。

目次

・モードレスデザインとは
・「使いやすい」とは
・なぜ、モードレスが大事なのか
・モードレスデザインの原則

モードレスデザインとは

まず、モードレスデザインの説明に入る前にモードとモードレスについて知る必要があります。

モードとは

モードとは、直接的に表現するとインターフェースによって束縛される「状態」のことです。
代表的な例は、モーダルダイアログです。ダイアログは「OK」や「キャンセル」などのボタンがありますが、それを押す（所定の手続きを踏む）まで次の状態に進むこともできなければ前の状態に戻ることもできません。そのような状態を「モード」と言います。
コンピュータは一つの物体から様々なプログラムを実行することでメールを送信したり音楽を聞いたり動画編集をすることができ、それ自体がモードの集合体であります。
しかしながら、モードは「自分の周りの環境をコントロールしたい」という人の欲求に反する概念で、無意識に使いにくさやストレスを与える原因にもなります。

モードレスとは

モードレスとは先ほど記述した「モード」が無い状態、あるいはモードが少ない状態のことであります。モードが無い（あるいは少ない）ので、ユーザーが好きな順序で好きに往き来しながら使えること、すなわちシステムの主導権がユーザーにある状態のことです。
代表的な例で言えば、日付を選択するデータピッカーや、ハーフモーダルなどが挙げられます。どちらも、UIを表示してからそれ以外の画面の状況を確認しながら出てきたUIの操作をしたり、決められた操作をしなくても元の画面の操作をすることができます。

モードは踏めべき手順やルートが決まっていて、モードの行き来には必ず所定の手続きが必要になります。

それに対して、モードレスは所定の手続きが無く（または最小限）自由に各所作を行うことができる。

ここまでくれば、なんと無くわかってきたかもしれませんが、モードレスデザインはまさにモードが無い（あるいは極力少なくした）デザインのことです。

「使いやすい」とは

使いやすいの定義は非常に抽象的で「システムによる」だとか「ユーザーによる」などありますが、どのシステムにでも共通して言えることは以下の二つに集約されるのでは無いかと考えています。

・ユーザーメンタルモデルと相違が無いこと
・モードレスであること 

ユーザーメンタルモデルと相違が無いこと

そもそも、人が外的なものに不満や不安を抱くことの根本的な要因は「期待」によるものです。コミュニケーションでも一緒ですが、期待することと異なる反応や全く予想していない挙動をされると、この人は自分の要望を聞いてくれないだとか思い通りにうまくいかないなど、苛立ちや不満を抱きます。 
逆に言えば、期待に答えることで人の感覚を満足ささせることができ、「期待に答える」→「想定したフィードバックをユーザーに伝える」→「想定通りであることを認知する」の流れでメンタルモデルの一致をさせます。
メンタルモデルはシステムやサービスに対する体系的な「期待」を形作ったある種のフレームで、このボタンを押したらこう動くだろうのコレクションでもあると思います。その期待のコレクションとインターフェースやナビゲーションの振る舞いが一致すればするほどユーザーとの親密度はますことでしょう。

モードレスであること

システムがモードを持ってしまうことは、コンピューターの性質上致し方ない側面もあります。ユーザーの仕事をタスクと捉えそれをベースとして処理を進めていく、一見正しいことをやっているようにも見えますが「あくまで主導権はユーザー」であるため、モードで縛ってしまいシステムとしてこうあるべきが出すぎてしまうと、「使いづらい」に直結していまします。 
   
モードレスであることは、常に主導権がユーザーにあり、より創造的に扱え、かつ学習によってユーザーの道具に「なっていく」というプロセスを通ることで扱いやすい道具として進化して行きます。「人がシステムを創る」ことだけでなく「システムが人を創る」という視点もあることを忘れずに、性善説に基づきながらアプリケーションとしての状態を作っていくことが重要になってきます。

なぜ、モードレスが大事なのか

そもそも、現実世界においてモードなど無く人間の所作においても流動的で区切りがありません。ですので、ユーザーが自分の道具をモードに縛られずに扱えることに違和感がないからです。
コンピューターが0/1で動いたりソフトウェアを切り替えることで、できることがたくさんあったりとモードの集合体でありながら、あくまで人間の道具としてもモードレスに動くことを要求されている矛盾が難しい部分ではあります。
派手なUXを実現するだけでなく、メンタルモデルがずれることによる違和感を極力減らすあるいは無くすことが最高にUXになり得ます。
以下に、モードレスデザインのメリットを記載しておきます。

・UIが含む機能や情報がわかりやすくなる
・ユーザーがシステムの主導権を握ることができ、利用促進に繋がる。
・ユーザーがシステムをコントロールして行きやすくできるので、学習効果が上る
・システム全体で必要な操作数が減り、作業効率が上る
・UIの構成がプログラム側の構成と近づくので、設計がシンプルになる

モードレスデザインの原則

以下がモードレスデザインの原則になります。システムを完全にモードレスにすることは少々難しいところはありますが、以下の原則を頭に入れておきながら日々のサービスをみてみると良いかもしれません。

- Show objects to the user as soon as possible. 
- Direct and reversible actions. 
- Don't give a procedure to get out the model.
- Every object reflects its status in realtime.
- Object first, verb second syntax.

※・・・https://speakerdeck.com/manabuueno/the-modeless-designから抜粋

いかがでしたでしょうか、モードレスデザインはとても抽象的な概念ですが「使いやすい」とは何か明文化できたかなと思っております。また、モード自体は言われてみないと気づかないことが多いので、普段使っているサービスがモードかモードレスか、サービスに限らず人間が日々接するものをその視点で観察してみると良いでしょう。

本記事は、以下のドキュメントから一部抜粋し記述しています。こちらドキュメントの方で今後メンテして行きますので、ぜひチェックしてみてください。

isihigameKoudai/koudai-ishigame

参考

・https://www.sociomedia.co.jp/3950
・https://www.sociomedia.co.jp/7279
・https://speakerdeck.com/manabuueno/the-modeless-design
・https://modelessdesign.com/modelessandmodal/