モードレスUIデザイン ~ ユーザーをクリエイティブにする
最近、サービスをデザインするにあたって、ユーザー（あるいは人間）のクリエイティビティを信じることと、それを発揮するにはモードレスやオブジェクト指向という考え方を持つことがとても重要であると感じています。
結構なビッグテーマで自分なんかが語るのがだいぶおこがましい気もするのですが、今の自分にとってとても大事な考え方なので、自分なりに改めてちょっとまとめてみたいと思います。
ユーザーはクリエイティブだ
これは、最近とても感じることです。ユーザーというか、大きく見れば人間は本来クリエイティブな生き物だと思います。
ここでいうクリエイティブはデザイナーのように具体的なビジュアルを作ったりエンジニアのようにシステムを構築したり…という難易度の高そうなものではないです。ユーザー自身が「自分のやり方でやりたい」「もっと効率的な方法を見つけられる」と考えて行動するくらいのイメージです。そういう意味で人間は本来十分にクリエイティブなはずです。
それではなぜ、ユーザーはサービス上でクリエイティブな振る舞いができないのでしょうか？自分で考えて行動することができなくなるのでしょうか？
それは、ユーザーがサービス上で自分の行動 / 操作に自信を持つことができないからです。ユーザーがクリエイティブになれるのは、少なくとも自分の行動に自信を持ち、能動的に行動を起こせる時です。
どうすればユーザーが自分の行動に自信を持ち、能動的に行動してくれるようになるのか？ この問いが、モードレスや、OOUIという考え方の基本であり、出発点になります。
モードレスとは？
そのままだと「モードがない」というような意味です。
したがって、まずは「モード」というものがどういうものか考えて行きます。
「モード」というのは、UIにおいてはその名の通り「モーダルウインドウ」がイメージしやすいですね。モーダルは「モードの」と言う意味です。そしてモーダルウインドウというのはいくつかの特性を持っています。AppleのModalityの説明では以下のように説明されています。
- 自己完結したタスクまたは密接に関連した一連のオプションに人々が集中できるようにする。
- 人々が重要な情報を受け取り、必要であればそれに基づいて行動することを保証する。
つまり、ユーザーが一つのタスクに集中できるように他のタスクができないよう制限している状態と言えそうです。「何らかのタスクを実行するモード」と言い換えても、何となく意味が理解できそうですね。
モードレスというのはその逆です。モードがない状態、または、より少ない状態を目指そうという考え方です。
なんでモードレスが大事なのか？
モーダルはユーザーを自由に操作させないデザインパターンです。
例えば、メールアプリを想像してみてください。メールを見る前に「削除するモード」と、「返信するモード」を先に選ばせるとしたら？おそらく先にメールを確認したくなると思います。しかし、モーダルに一度入ってしまうと、最初に選んだ操作以外の行動はできなくなります。「削除モード」で操作を進めている途中に返信したいメールを発見しても、一旦「削除モード」を抜けてから「返信モード」を選び直し、それから返信をしなければいけません。その後「返信モード」で削除したいメールを見つけたら、一度「返信モード」を抜けて、、、という形で操作を繰り返す必要があります。この間も、ユーザーはずっと今どっちのモードなのか？ということを常に意識し続けなければいけません。（これは、ユーザーがインターフェースを過剰に意識している状態とも言えますね。）
我々は多くの場合で「対象」を確認してからどういう操作をするのか決めているのが基本です。メールを見つけてから、どういう操作をするか選びたいし、選べるような状態にすることが大事です。これがモードレスという考え方の基本です。そのためには、まずはメールを確認してから、自由に操作を選べるようになっていなければいけません。おそらく、一般的なメールアプルは基本的にそういった設計になっていると思いますし、その操作やインターフェースを意識したことすらないかと思います。
このようにインターフェースを意識せずに操作が可能になるのは、人間が現実世界の物質を認識し、干渉するときのメンタルモデルと似たような発想の仕方になっているからです。そして、UIの設計をこの現実世界のメンタルモデルに近い設計にしていく、という発想が「オブジェクト指向」という考え方につながって行きます。
オブジェクト指向にすることの意味
オブジェクト指向という言葉は捉え方が難しいですね笑
最もシンプルにオブジェクト表していると思っている一文を、ソシオメディアの上野さんの「Object-oriented」から引用させていただきます。
サブジェクトが事なら、オブジェクトは物です。つまり事よりも物に着目するということです。
物というのは、先述の例でいうと「メール」の一通一通です。これはオブジェクトとして画面に表示しやすく、メタファーとしても物に近いです。
事というのは、「メールを削除する」というようなコンテキストに近いです。こちらはユーザーに依存していて、ユーザーによって様々に変化します。事は基本的に暗黙的で、ユーザー一人一人に依存します。アプリ設計者からは基本的に推察しづらいことが多いです。
オブジェクト指向というのは、この「物」に着目し、「物」に対して操作可能な振る舞いを「物」自体が持っている世界です。「メール」であればクリックすれば詳細な内容を確認できるし、右クリックすることでそのメールを削除したり、編集したりすることができるようになると思います。ドラッグ&ドロップすればメールを特定のメールボックスに移動することもできるかもしれません。
こういった考え方はデザインにおけるアフォーダンスという考え方にもつながって行きます。
アフォーダンスというのはその状況が示唆する行動可能性みたいな物です。有名なのは切り株の例ですね。切り株が存在している、ということはそこに座れるという可能性を示唆していることになります。「メール」というオブジェクトが存在することで、「詳細の閲覧」「返信」「削除」「メールボックスへの移動」といった行動とその実装可能性を持っていることを示唆します。あとは、これらの操作が可能であることを示すUI（シグニファイア）を適切に設計してくことで、ユーザーが間違えずに操作できるようになります。
アフォーダンスとシグニファイアの話は面白いので、興味ある人は深澤直人さんの以下の本とか読んでみると面白いかと思います。
こうなってくると、オブジェクトとユーザーの間にインターフェースが存在するという感覚が非常に薄くなっていきます。ユーザーに行動がより直感的になり、インターフェースが行為の中に溶けていきます。
こうなることで、ユーザーがUIの挙動に無意識の信頼を置けるようになり、より能動的で自信のある操作を行えるようになっていきます。
つまり、ユーザーがクリエイティブになっていけるということですね。
設計の落とし穴: 人間はモーダルな設計をしがち
モードはとても強力で、サービス設計者からするととてもわかりやすいデザインパターンになります。実体験から思うのは、意識的にならなければ多くの人間はモーダルに画面を設計しがちだと思います。要件からデザインを起こすときに、その要件をなぞるようにデザインを作るからです。「この流れでユーザーが使えば、要件を達成することができる」というように考え、それ以外の行動を制限してしまいがちです。状況によってはそれでもいいんですけどね。わかりやすいのでいうと決済フローとか。
余談ですが、僕はこれが人間がクリエイティブであることの証でもあるかなと思っています。チームでプロダクトを作ったことがある人はわかると思うのですが、制作のプロセスにおいて「この流れで」の部分のアイデアはいろんなメンバーから意外とたくさん出てくると思います。これはそれぞれが自分で考えを持ち、アイデアを作ることができるということに限りなく近いのでは？と思っています。
意地の悪言い方になるかもしれませんが、問題はプロダクトの開発者がそういったクリエイティビティを他の人間＝ユーザーが持つことができる、ということを意識してサービスを設計できていないことだと思います。極端な話、こういったクリエイティビティ（面白いアイデア！）をそのまま強くプロダクトに反映すると、非常に強力なモードを発生させてしまうことがよくあります。
この部分を意識できるようにチームをファシリテートしてサービスをデザインしていくことが、UIデザイナーには求められていると思います。
まとめ
結構な抽象論になって反省ですが、今自分が最も大事にしたい考え方だったので、アドベントカレンダーの機会にまとめさせてもりました。また、上野さんのModal and Modelessの思想に強く影響を受けているのは丸わかりで、結果的に上野さんの本読んだ方がいいのでは？と自分でも思うような内容になってしまったのも反省です。。ただ、個人的にModelessの発想の元となる「ユーザーはクリエイティブだ」というところからModelessやOOUIに自分なりに繋げてみたいという思いがあったので、それができたのはよかったのかなと思っています。
このような考え方、思想は単なる方法論ではなく、サービスデザインの基礎となるようなものだと思っているので、デザインを進める上で、デザインの「Why」がわからなくなった時などに改めて振り返ってみるのはいかがでしょうか。
切り株イラスト：Log Vectors by Vecteezy
2022/01/18 追記
アトラエで配信しているピープルテックトークに出演し、余白のデザインについて話しました。余白≒自由 / 自発性≒クリエイティビティのような文脈でこのnote記事の内容に近いことも話しているので、興味ある方はぜひ聞いてみてください。
前後編なので、後編が出たらまた追記します。
この記事が気に入ったらサポートをしてみませんか？