OOUI 設計の「構造と機能」を見つめ直す

こんにちは、UIデザイナーの水澤です。
入社当時に「OOUI を実践してみました」という記事を書きました。あれから数ヶ月が経ち、新しい気づきがあったのでそれを書いていきます。

OOUI に関する書籍「オブジェクト思考 UIデザイン　使いやすいソフトウェアの原理」では、ソフトウェアデザインをモデル・インタラクション・プレゼンテーションの 3つのレイヤーに分解できると説明されています。今回はその中のインタラクションに関する気づきです。

インタラクションレイヤーとは

インタラクションレイヤーはソフトウェアデザインの構造と機能に関する層で、モデルとプレゼンテーションをつなぐためのメカニズムです。

（中略）

ソフトウェアはユーザーにとっての道具となるべく、作業環境としての入力機構とそれに応じた段階的なフィードバック機構を持つ必要があります。その意味でインタラクションレイヤーは、操作の言語体系を作るものであり、ソフトウェアの「フィール」を決定しています。

「オブジェクト思考UIデザイン　使いやすいソフトウェアの原理」p44より引用

インタラクションレイヤーでは、下記を検討します。

• オブジェクトに対するビューの割り当て
• ビュー同士の呼び出し関係
• ビューをコントロールするための機能性

なお、ビューとは画面のことではなく、ひとまとまりの情報表示領域を指しています。一つの画面にビューがひとつだけの場合もあれば、複数のビューを組み合わせる場合もあります。

インタラクションレイヤーを理解するための気づき

以前の記事を読み返すと、当時の自分がモデルレイヤーの検討に集中してしまっていたり、インタラクションレイヤーで扱う「構造と機能（フィール）」への意識が薄かったと感じます。

インタラクションレイヤーで「構造と機能」を正しく検討するために、設計プロセスに囚われすぎず、まずは 3つのレイヤーそれぞれで検討するものとレイヤー同士のつながりを改めて認識すること。そして上記書籍のワークアウト：応用編に取り組み、モデリングの記法を知ること。この 2つによって理解が深まると感じました。

応用編では工夫されたモデリング図がいくつか挙げられているため、それぞれの記法を理解することで検討がしやすくなります。

モデリングの記法を知る

オブジェクト指向UI設計のメゾットにおいてはモデリングの記法についてはさまざまな工夫の余地があり、表現の粒度やスコープの範囲はその都度必要な情報の性質に応じて判断してよいと考えています。

「オブジェクト思考UIデザイン　使いやすいソフトウェアの原理」p253より引用

上記の通り、記法は状況に応じてさまざまな工夫ができるとされています。今回はインタラクションレイヤーに関連する 2つの記法に注目しました。

同じオブジェクトの異なるビューを検討する

モデルレイヤーでオブジェクトの抽出を行った後は、インタラクションレイヤーとしてビューとナビゲーションの検討に入ります。そのとき、基礎編では機械的にオブジェクトのコレクションビューとシングルビューを示していきました。

オブジェクトのアクションに新規登録・照会・編集・削除などの CRUD機能が想定される場合（契約情報を管理するシステムなど）、同じオブジェクトのシングルビューにおいて、例えば閲覧用のビューと編集用のビューに分割することを検討してみても良いかもしれません。

実際に分割するかどうかはユーザーの要求に応じて判断しますが、「同じオブジェクトのビューに対して複数の異なるビューを検討できる」と知っているだけでも、考え方の視野が広がります。

コントローラーの存在を示す

ソフトウェアは複数のアクションを持っているものですが、インタラクションレイヤーの「構造と機能」の機能はアクションを指しています。

基礎編では、機能に関する記述はオブジェクトのアクションとナビゲーションを示す矢印だけで表現しますが、先ほどのように閲覧用のビューと編集用のビューがある場合、この表現だけでは検討が進みにくいように感じます。

その場合はコントローラーの存在を示すという記法があります。

上の図では、契約オブジェクトのシングルとして閲覧用のビューと編集用のビューが存在しています。閲覧用のビューで編集アクションを行うと編集用のビューに処理が移行し、編集用のビューで保存アクションを行えば閲覧用のビューに処理が移行するというモデリングが示されています。

コントローラーを示すとより実装に近い視点で検討できるため、より具体的な「構造と機能」の検討ができます。なお、書籍ではさらにこのコントローラーにオブジェクトのプロパティを含める記法が示されており、より複雑な検討が可能です。

さいごに

OOUI設計を理解しようとするとき、どうしても設計プロセスを覚えようと意識が引っ張られてしまいますが、そんなときは各レイヤーで何を検討するのか、それぞれのレイヤー同士でどのようなつながりがあるか、原点回帰することが重要だと思いました。