「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」を読んだ #2

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理の第2章「オブジェクト指向UIの設計プロセス」を読んだので学びや所感をまとめます。

オブジェクト指向UIの設計メソッドはデザインサイクルを完成させる重要なノウハウ

UIデザインの方法論は

を反復することが有効とされているが、前段と後段をつなげるロジック＝特定されたユーザー要求をUIでどう扱うべきなのかのセオリーがどこにも説明されていないと本書では書かれています。

めちゃくちゃ共感です。何ができるようにしたいのか、何を解決したいのかが明確でも「どんな画面にしようかな？」の答えを持つことができないのが現状です。

この溝を埋めるのがオブジェクト指向UI（以下、OOUI）の方法論です。

ユーザー、タスク、オブジェクトの関係

タスク指向UIの場合、タスクを選ぶことが先です。

ユーザーの関心はオブジェクト（何を）にあるので、操作を開始してすぐにはそれが見えていないストレスを感じさせてしまいます。

OOUIの場合は、UIにオブジェクトを表示するので、操作中のストレスが少ないです。

また、オブジェクトに対するタスクがまとめられているため、画面もシンプルになります。

ユーザーがそのアプリケーションを使う理由・目的が「◯○するため」という動詞だったとしても、まずはオブジェクトを見せるのがOOUIの基本です。

OOUIのデザインレイヤー

以下の3つに分けられます。

• モデル
• インタラクション
• プレゼンテーション

モデル（ユーザーの関心対象の模式）

最後のそれぞれのレイヤーを反復しながらより良くしていくという考え方がアジャイル開発の考え方と同じですね。（本書にも書かれています）

抽象→具体の一方通行ではなく、抽象と具体を行き来しながらよりよいデザインに仕上げていきます。（これはプロダクトマネジメントそのものと同じ）

インタラクション（構造と機能）

そもそもインタラクションってなんですの？状態だったので調べたらこういうことらしいです。

人間が何かアクション(操作や行動)をした時、そのアクションが一方通行にならず、相手側のシステムなり機器がそのアクションに対応したリアクションをする

https://ferret-plus.com/words/929

本書ではインタラクションレイヤーは操作の言語体系を作るもので、ソフトウェアの「フィール」を決定していると書かれているのですが、「フィール」についてはインタラクションデザインとはなにか？クックパッドのエンジニアが、北欧のデザインスクール「CIID」で学んだことで以下のように書かれています。

ユーザがボタンを押したり、ドアノブを押し上げるという行動を起こす。これがDOです。次に、指先や手に対してなんらかのフィードバックを感じるのがFEELです。最後に、ボタンを押したあと、電子機器に電源が入ったり、扉が開いたことを理解するのがKNOWのプロセスです。

https://logmi.jp/tech/articles/322112

インタラクションレイヤーで定義されたソフトウェアの構造と機能は、オブジェクトモデルを現実の仕事に繋げて、実際にそれが役立つ道具にします。

3つの中でインタラクションが1番わかりづらく説明されている印象ですが、本書内に具体的があるのでそれをそのまま引用するのが理解しやすそうです。

プレゼンテーション（スタイルとレイアウト）

ここはイメージしやすく、ソフトウェアデザインの表層です。

インタラクションとプレゼンテーションの組み合わせがユーザーニーズを満たしていないと評価されるときは、モデルレイヤーに立ち返ってユーザーのメンタルモデル（個人の実世界に対する認識や解釈に関する認知モデル＝その事象に対する理解や認識）をデザインしなおすべき。

ここでモデルのところで書いた

モデリングの結果（うまくできているか／できていないか）は後続のインタラクション、プレゼンテーションを通して評価されるので、それぞれを反復する

と繋がりますね。

ユーザー中心のデザインとは

あるユーザーに最適化された手順は他のユーザーにとっては不便であり、「ユーザーフレンドリー度合い」は下がります。ユーザーが増えれば増えるほど下がります。

ユーザー中心のデザインとは「ユーザーに合わせたデザイン」ではなく、「ユーザーが自ら合わせることができるデザイン」のことと解説されています。

具体例としてりんごの皮むき機と果物ナイフの話が取り上げています。

りんごの皮むき機はりんごの皮を剥くことに特化しているため、他にもやるべきタスクが増えたときには対応することができません。

果物ナイフの場合、りんごの皮を剥くことはもちろんできるし（りんごの皮むき機よりは難易度が上がるが）、肉や野菜を切ることもできます。

果物ナイフを持った人が「あ、これ果物だけじゃなくて野菜にも肉も、パンとか魚にも使えそうだ」を考え、利便性が上がっていきます。

果物ナイフのような抽象度が高い道具が使用者に特定の行為を強要しないという意味でモードレスです。反対にりんごの皮むき機のような抽象度が低い道具はモーダルです。（りんごの皮を剥くという行為を強要しているから。強要しているという言い方はアレですが、それしかできないからです）

モードレスな道具は人と道具の相互発展をポジティブな方向に促しますが、これがモードレスなオブジェクト指向のデザインを行うことの意義です。

OOUIの基本ステップ

1. オブジェクトの抽出（モデルレイヤー）

OOUIにおけるオブジェクトの抽出は、オブジェクト指向分析におけるクラス定義、データベース設計におけるエンティティ定義と同じです。

オブジェクトを抽出するためにはドメインへの理解、ユーザーの理解が必要なので、ユーザーインタビューや既存システムの調査、市場分析などの前段の取り組みが必要です。

ある概念がオブジェクトと言えるかの判断基準

2. ビューとナビゲーションの検討（インタラクションレイヤー）

ビューとは以下のように説明されています。

ウィンドウ、ページ、分割されたレイアウト内の一つのペイン、メニューとして表示されるひとつのリストなど、ユーザーが実際に画面上で目にするひとまとまりの情報表示領域

ここで考えるべきことは

であり、どのような画面（細かいデザインは抜き）が必要かを検討します。

3. レイアウトパターンの適用（プレゼンテーションレイヤー）

ここでも細かいデザインは抜きですが、「2. ビューとナビゲーションの検討（インタラクションレイヤー）」で決めた画面をどのようなレイアウトで画面に表示するかを検討します。

PCのレイアウトとスマホのレイアウトは変える必要はありますが、画面のUIを同じして1つの画面にまとめて表示するか画面ごとに分けて表示するのかを検討します。

実際にGmailのPC版とスマホ版を見比べて、この画面がPCではここにあって、スマホだとここにあって…でも画面自体のUIは同じだな…みたいなことを見てみると良いと思いました。

（今までこんな視点持っていなかったな…）

この記事で記載している”細かいデザイン”は縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS＆テクニックで説明されている「こういうケースはこういうUIにするのが効果的だよ」ということです。

余談ですが、この本もめっちゃおすすめです。

最後に

この章を読んで思ったのですが、OOIUの設計プロセスがオブジェクトからスタートするの、なんとなくですがドメイン駆動設計に似ているなーと思いました。

（エンジニアとして働いているときにドメイン駆動設計入門 ボトムアップでわかる！ドメイン駆動設計の基本という本でキャッチアップしました。途中で挫折したけど。）

プロダクトマネジメントでもデザインでも

は共通して重要と説明されているのが印象的でした。

まあそりゃそうだよね。

次の章はこちら。