オブジェクト指向UIとは何か
オブジェクト指向UIとは、オブジェクトを手掛かりに操作設計されたUIのこと。
オブジェクトとは、アプリケーションが扱う情報オブジェクトのことであり、ユーザーが操作する対象物。
オブジェクト指向UIの原則
- オブジェクトを知覚でき、直接的に働きかけられる
- オブジェクトは自身の状態と性質を体現する
- オブジェクト選択→アクション選択という順序
- 全てのオブジェクトが協調しながらUIを構成する
機能的処理の概念単位をウインドウやメニューといった目に見える形に対象化したのがオブジェクト指向UIであり、そのオブジェクトは状態を視認しやすい形で表現しなければならない。
コマンド起点の操作は「動詞」→「名詞」という順序で操作するのに対し、オブジェクト指向UIの操作は「名詞」→「動詞」となることが特徴。
画面を構成する要素は全て概念が対称化されたオブジェクトであり、重要なものは大きくしたり、同じ種類のものは同じ色や形にしたり、並列関係の物は並べ、包含関係の物は入れ子構造になっていたり、一貫した表現ルールのもとで組み合わされ画面を形成している。
タスク指向との対比
オブジェクト指向
- 「名詞」→「動詞」
- まずオブジェクトを選び、次にオブジェクトに対するアクションを選ぶ
- あらゆる情報システム（特に、探索や創意工夫が期待されるものに有効）
タスク指向
- 「動詞」→「名詞」
- ナビゲーションはタスクを手掛かりにする
- オブジェクトを選択する必要がない場合や定形の入力手続きに有効
タスク思考の問題点
- タスクを探すのに複数画面を経由する場合がある
- データ一覧から対象を選ぶ画面がタスクごとに必要になる（類似画面が複数になる）
- 利便性からオブジェクトにタスクを追加などをしてしまうと、タスクの重複が起こる
- 同じ対象物に違う操作をしたい場合、ナビゲーション画面に戻る必要がある
- 商品を選ぶ前に注文をするというフローになり、ユーザーが不安になる
タスク指向設計になる背景には、「要件定義」を重要視するあまり「やること」を中心に設計される傾向がある。
UXのニーズが高まり、ユーザー体験をデザインするという考えがユーザーの利用手続きをデザインすると捉えられてしまうとタスク指向設計につながってしまう。
オブジェクト指向UIの設計プロセス
ソフトウェアデザインレイヤー
ソフトウェアを構成する3つのレイヤー
- データモデル
- インタラクション
- プレゼンテーション
ユーザーのメンタルモデルがデータモデルに反映され、そのモデルとユーザー間のインタラクションが設計される。その内容がユーザーにプレゼンテーションされる。
モデル
モデルレイヤーはデザイン全体の６０％を占めると言われる。
オブジェクトモデリングをする前にターゲットとするドメイン（ユーザーの活動領域）の調査やタスク分析を十分に行なっている必要がある。
開発者はシステム化に必要な多くの概念をオブジェクトとして抽出するが、オブジェクト指向UIのモデリングはユーザーが意識すべきオブジェクトだけを抽出する。（プログラム上の細かなロジックは気にしない）
モデリングの結果はインタラクションやプレゼンテーションによって評価されるため、インタラクションレイヤーとプレゼンテーションレイヤーのデザインはモデリングレイヤーのデザインと並行して行われる。
UIがインタラクションやプレゼンテーションの結果、ユーザーの要求を満たしていない場合はモデリングを再検討する反復作業が必要になる。
インタラクション
モデルとプレゼンテーションをつなぐためのメカニズム。
オブジェクトを表現するビューの種類、それらの呼び出し関係であるナビゲーション、データの入力操作であるCRUD（作成、閲覧、更新、削除）、それらにサービスとしての文脈を与えるビジネスロジックに関するデザインレイヤー。
ソフトウェアは一つの情報に対して複数のビューを与え、必要な粒度でまとまりを持たせる。それらをユーザーの呼び出し関係で繋ぎUIを構成する。
また、一つの情報処理を実行するために複数のアクションを用意する。
インタラクションで定義された構造と機能は、オブジェクトモデルを現実の仕事につなげて、それが役立つ道具になるようにする。
オブジェクトに対するビューの検討、ビュー同士の呼び出し関係、ビューをコントロールするための機能性を検討する。
プレゼンテーション
インタラクションのメカニズムをUI表現によってユーザーに示す。
オブジェクトを表現するグラフィックの色や形、ビューのフォーマット、画面レイアウト、アニメーション、サウンドなどに関するデザインレイヤー。
レイアウトパターンに応じたビュー の配置、オブジェクト一覧表示のバリエーション、オブジェクトを示すアイコンに工夫をめぐらす、オブジェクトに対するアクション選択肢の表現などを検討する。
インタラクションレイヤーと並行して行い、本来のユーザーのニーズが満たせていない場合はモデルレイヤーに立ち返ってユーザーのメンタルモデルをデザインし直す必要がある。
オブジェクト指向UIの設計ステップ
- オブジェクトの抽出（モデル）
- ビューとナビゲーションの検討（インタラクション）
- レイアウトパターンの適用
オブジェクトの抽出
タスクを書き出し、タスクから「名詞」を抽出する
ユーザーの関心の対象となる概念は何かを考えながら「名詞」を抜き出す。
「名詞」同士の関係を抽出する。
タスクごとに名詞を線で結ぶ。共通項を見つけて名詞を汎化（一般化）する。
「名詞」の関係性をつなげてオブジェクトを特定する
同じ名詞同士を統合して、ネットワーク状につなげる。
オブジェクトの中で「メインオブジェクト」になるものを特定する
オブジェクトを主要なものとそうでないものに分ける。
メインオブジェクトの多重性を特定する
線で繋がれたメインオブジェクトの間で多重になる可能性のある側に「＊」をつける。
メインオブジェクトに付随するオブジェクトを「プロパティ」とする
メインオブジェクトに付随するものとしてサブオブジェクトをまとめる。
タスクからアクションを見つける
タスクの動詞を手掛かりにアクションを追加する。「〜を確認する」はアクションに含めない。
ビューとナビゲーションの検討
メインオブジェクトに「コレクション」と「シングル」のビューを与える
まずは機械的にオブジェクトに「コレクションビュー」と「シングルビュー」を想定する。
コレクションビューからシングルビューへ呼び出す流れを矢印で示す。
コレクションビューとシングルビューの呼び出し関係を検討する
オブジェクトの多重性から参照関係を導き出す。一般的に、関係のあるどちらかのオブジェクトのシングルビューが参照元となり、もう一方のオブジェクトのコレクションビュー またはシングルビューが参照先となる。
メインオブジェクトからルートナビゲーションを選定する
- メインオブジェクトの中から特に大事なものを並べる
- ユーザーがアプリを使用する際に思い浮かべるオブジェクトを選択する
- 「機能」ではなく、「もの」が並んでいるイメージを捉える
- 動詞ではなく、オブジェクト名を用いる
- オブジェクトの語尾に”一覧、閲覧、確認、照会、参照、登録、情報、編集”を付与しない
- ユーザーがルートナビゲーションを選択するとコレクションビュー が表示される（省略されている場合は除く）
レイアウトパターンの適用
ルートナビゲーションの配置パターン
スマートフォンでは下部や開閉式に、デスクトップであれば上や左に表示されることが多い。
ビューの配置パターン
ドリルダウンの方向性
コレクションビュー とシングルビューの関係性を画面上で示すには、一つのページをペインに区切ってから上から下、左から右の順で表示したり、別の画面に遷移させて表示する。
- 単一メインオブジェクト
- 複数メインオブジェクト
コレクションビューの表示形式
- 1項目１行の1次元リスト
- １項目複数行の1次元リスト
- １項目複数行の1次元リスト（高さ可変）
- サムネイルグリッド
- マッピング
フィルタリングパターン
- キーワード検索
- グループ
- AND検索
- クエリビルダー
- ソート
シングルビューの表示形式
Createアクションのパターン
- ブランクパターン（内容が空のアイテムが作成される）
- パラメータパターン（モーダルが現れ、必要なパラメータの入力を促される）
- プレースホルダーパターン（最下行が常に新規作成用のプレースホルダー）
- セーブアズパターン（別名で保存）
- テンプレートパターン（あらかじめ用意されたテンプレートの選択を求められる）
- マスターパターン（マスターを選択してインスタンスを作成）
- ワンタイムモードパターン（図形作成時にドラッグで新規作成）
- ガッツパターン（デフォルトのスタイルの図形が作成される）
Deleteアクションのパターン
- モーダルコンファームパターン（モーダルメッセージで確認を促す）
- アンドゥアブルパターン（アンドゥで削除を取り消せる）
- モードレスコンファームパターン（削除ボタンを押すと意思確認のためのコントロールがモードレスに表示される）
Updateアクションのパターン
- モーダルエディットパターン（モーダルな編集画面で編集する）
- モードレスエディットパターン（常に編集可能になっていて変更は自動保存）
感想
初めはオブジェクトの図がER図に似ていると思った。
しかし、開発者目線でいるとシステム的に必要なオブジェクトを全て抽出しようとする。そこがオブジェクト指向UIと違う点。
システム目線になるとユーザーが意識するオブジェクトを見落としてしまう可能性があるためOOUIという概念が大事だと分かった。
