オブジェクト指向UIの設計ステップ - オブジェクトの抽出について

前書き

オブジェクト指向UIとは何か？という記事を公開しました。
上記の記事に引き続き、オブジェクト指向UIのデザインに関する内容をアウトプット共有していきます。

今回はタイトルにある通り、『オブジェクト指向UIデザインの設計ステップ』について解説していきます。
「オブジェクトUIの設計ステップ」は三段階に分かれておりますので、３つの記事に分けて学んだことをアウトプットしていきます。

オブジェクトUIの設計ステップ

まずは、オブジェクトUIを設計するステップは下記になります。

1. オブジェクトの抽出
2. ビューとナビゲーションの検討
3. レイアウトパターンの適用

オブジェクトの抽出手順

今回は「学校名簿アプリケーション」をサンプルとして流れを解説します。

アプリケーション設計の手がかりとなる現実世界のあり方を元に、システムが取り扱うオブジェクトの構成をオブジェクトの抽出してきます。
これらのオブジェクト抽出を行う前にターゲットとするドメインを調査・タスク分析を行う必要があります。

また、これらのボブジェクトを抽出していき作業のことを「オブジェクトモデリング」といいます。

UIの設計者がユーザー業務や行動特性にについて把握できていない場合、オブジェクトが適切なユーザーのメンタルモデルを反映したもにならないため、システムのデザインが間違った方向に向かいます。

そのため、オブジェクトの抽出作業はオブジェクト指向UIデザインの設計において、60％の割合を占めるとも言われているそうです。

1. タスクの抽出

   

   上記のように、アプリケーションのデザインは事前にリサーチや要求分析などによって、「タスクを抽出」することから始まります。

   タスクの抽出は、そのアプリケーションで解決したい課題を元に、どのようなタスクが必要か、 という観点で考えると良いかもしれません。

2. 「名詞」の抽出

   

   オブジェクトは名詞を手がかりに抽出します。 ユーザーの関心の対象となる概念は何かを考えて抽出すると考えやすいです。

   オブジェクトといっても、「もの」や「こと」、「食べ物」や「書物」のなどもオブジェクトです。

3. 「名詞」とそれらの関係を抽出

   

   タスクごとに名詞同士を関連を示すために、UMLのクラス図を使用して関連性を可視化していきます。

4. 「名詞」の粒度を揃える。

   

   関連性を抽出したら、次に名刺をの粒度を整えていきます。
   名詞の粒度を揃える方法に関しれは、特に決まりはなく、自身が思うようにまとめてみてください。
   

   ※参照: UML図（統一モデル図）
   

5. 名詞の関係性をつなげてオブジェクトを特定

   

   ここまで、タスクごとに名詞を抽出してきたので、ここからは名詞同士つなげて、アプリケーションを通じて扱われるオブジェクトを整理します。
   名詞を統合して、上記のように関連をつなげていくと、オブジェクトを中心とした構造がはっきりと見えてきます。
   

6. オブジェクトないから「メインオブジェクト」を特定する。

   

   今回の実装するアプリケーションとしては、「学校名簿」です。
   目的としては、何年何組に誰が所属しているか、所属している生徒の詳細（個人情報、所属部活）などを管理するためのものです。
   
   そのため、今回のタスクから抽出した中で、今回の場合、上記の黒文字で記載されているものが、メインオブジェクトとなります。

   それ以外のオブジェクトは、メインオブジェクトを構成する要素の「サブオブジェクト」として取り扱います。
   

7. オブジェクトをプロパティにつける

６で「メインオブジェクト」・「サブオブジェクト」が抽出されました。
メインオブジェクトを構成するサブオブジェクトを「プロパティ」として取り扱い、上記のような関連性になります。

まとめ

上記の流れで、タスクを抽出して、タスクから名詞を抽出することで、それらの関連性を可視化することができます。
この可視化されたものが、本来アプリケーションで取り扱うべきオブジェクトとなります。

また、メインオブジェクトを構成する要素、アプリケーションで取り扱いべきプロパティが見えてきます。
ここでようやく、アプリケーションの全体像がみえてきました、次回はオブジェクト「ビューとナビゲーションの検討」についてアウトプットしていきます。