オブジェクト指向UIデザイン
https://images-na.ssl-images-amazon.com/images/I/41ncKIL-yRL._SX350_BO1,204,203,200_.jpg
上掲書の内容の概略です
まだ構想段階だった本書の草稿？
1 オブジェクト指向UIとは何か
目当ての現し
デザインの方法でよくあるのは、タスク想定に応じたUIを考えること
例えば蔵書アプリを作るとき、想定されるタスクは
本の情報を登録する
本を蔵書から検索する
しかし追加のユーザー要求を満たそうとすると、UIが冗長になる
問題は、UIがユーザーの目当てを現していないこと
問題とその解法が、利用者に対する恣意的な行動統制として一方的に決定されている
目当て＝オブジェクト
ob-（それに向かって） ject（投げる）
https://gyazo.com/652ce9c7ec4d41ea647a4ff55a356619
このようなタスク指向で作られたUIの問題は、オブジェクト指向でUIを作ることによって解決できる
ユーザーが関心のある「本」の存在を見せる
お金が先か、商品が先か
ひどいUIの例
お金を入れてからでないと選択できないタッチパネル式券売機
従来の自販機もそうだが、すでに慣れてしまっている
オブジェクト指向UI
オブジェクト指向におけるオブジェクトとは
アプリケーションが扱う情報オブジェクト、ユーザーが操作をするときの対象物
オブジェクト指向UIの原則
オブジェクトを知覚でき直接的に働きかけられる
オブジェクトは自身の性質と状態を体現する
オブジェクト選択→アクション選択 の操作順序
すべてのオブジェクトが互いに協調しながらUIを構成する
オブジェクト指向か？ タスク指向か？
タスク思考UI
「動詞→名詞」の動詞を起点として設計された操作モデル
タスク（やること）を選び、次に引数として対象物やパラメーターを指定する
タスク思考UIの問題
従来の自販機
商品を選んでからお金を渡すという直感に反する
モードが発生する（モーダル）
お金を入れたユーザーが途中で購入をやめるとき、「商品選択モード」から抜け出す必要がある
タスク志向UIを改善する
ビデオカメラのメニュー画面
「再生機能」→「イベントビュー」→日付ごとのフォルダ→録画選択→削除ボタン→「画像選択」→…
録画データの一覧を表示し、後からアクションを選べるとよい
フードデリバリーサービス
「注文する」→「今すぐ配達」→お客様情報→「商品選択へ」→…
いきなり商品の一覧を表示すればよい
オブジェクトを前面に出す
タスクはオブジェクト同士の間にある可能性として存在
オブジェクトを使って何をするかはユーダーに委ねる
UIがタスク指向になってしまう背景
業務分析では「やること」がまとめられる
ユーザーの要求が「やること」として要件定義にまとめられていく
UIの構成も「やること」ベースに組み立てられてしまう
利用手続きをデザインしようとする
ユーザー中身設計／人間中心設計というデザイン思想
「順番通りにやるだけ」のものになりがち
タスクに必要な情報オブジェクトを定義する
決められたことを決められた手順で行うという業務アプリケーションの性質
業務自体をオブジェクト指向のシステムに合わせた創造的な方向に変えていかないといけない
デジタルトランスフォーメーション（DX）の本質
2 オブジェクト指向UIの設計プロセス
アプリケーションの手掛かり
タスク（やること）を手掛かりにすると
タスクごとにボタンがずらりと並ぶ
やりたいこと、入口、出口をユーザーは意識しないといけなくなる
オブジェクト（対象物）を手掛かりにすると
そのままそれが画面に表示される
まずはオブジェクトを抽出する
ユーザー、タスク、オブジェクトの関係
タスク指向のUI
ユーザー → タスク1, タスク2, … → オブジェクト
タスクの数が多いため認知負荷が高く、オブジェクトが見えない
オブジェクト指向のUI
ユーザー → オブジェクト → タスク1, タスク2, …
オブジェクトが見えており、操作の手順を考える認知負荷が小さい
ソフトウェアデザインのレイヤー
UIは複数のオブジェクトを構造的に表象した合成物
インターフェースはオブジェクトモデルの反映、データモデルはメンタルモデルの反映
モデル
オブジェクトを概念的な処理の単位として定義
システムが扱うオブジェクトの構成をモデリング
インタラクション
ユーザーとインタラクトし、入出力をモデルレイヤーにつなげる仕組み
ビューの種類やナビゲーション、CRUDやビジネスロジックに関するデザイン
プレゼンテーション
インタラクションの様子を現し、ユーザーの知覚を作る部分
グラフィックの色や形、フォーマット、レイアウト、アニメーション、サウンドなど
デザインは必ずしも抽象的なものから具象的なものへ線形的に作られるわけではない
抽象と具象を行き来しながら全体性と適合性を獲得していく
オブジェクト指向UI設計の基本ステップ
メインオブジェクトの一覧を早い段階で見せ、操作イディオムを推測させる
オブジェクト選択→アクション選択という操作構文をできるだけ踏襲
1. オブジェクトの抽出（モデルレイヤー）
ユーザーの操作対象となるオブジェクトを定義
クラス定義やエンティティ定義と同じ作業
業務の内容をよく把握している必要
2. ビューとナビゲーションの検討（インタラクションレイヤー）
ウィンドウ、ページ、ペイン、リストなどのこと
大きく分けて以下の二つ
コレクション
ひとつのビューの中に同種のオブジェクトを複数並べて表示するもの
一覧画面
シングル
ひとつのビューでオブジェクトひとつ分を表示するもの
詳細画面
3. レイアウトパターンの適用（プレゼンテーションレイヤー）
画面上のレイアウトとして配置
デスクトップ vs モバイル
3 オブジェクト指向UI設計の実践
オブジェクト指向UIの設計ステップ
モデル：オブジェクトの抽出
インタラクション：ビューとナビゲーションの検討
プレゼンテーション：レイアウトパターンの適用
ステップ1. オブジェクトの抽出
名詞を抽出する
「名詞」とそれらの関係を抽出する
「名詞」を汎化し、粒度を揃える
「名詞」の関係性をつなげ、オブジェクトを特定する
オブジェクトの中で「メインオブジェクト」になるものを特定する
メインオブジェクトの多重性を特定する
https://www.sociomedia.co.jp/assets/images/email-objects-1.png
メインオブジェクトに付随するオブジェクトをプロパティとする
タスクからアクションを見つける
ステップ2. ビューとナビゲーションの検討
基本のビュー形式
コレクションビュー
複数のオブジェクトの集合
眺める（一覧）
シングルビュー
単数のオブジェクト
よく見る（詳細）
メインオブジェクトの中からルートナビゲーション項目を選定する
ステップ3. レイアウトパターンの適用
経験則として「良いパターン」がある
タスクをどう扱うか
タスクの特徴
粒度がさまざま、増える、変わる、やり終えないと分からない…
タスクはどこへ行くのか？
コンテンツ、表示形式、アクション、初期値、テンプレート、フィルタリンググループ
6 オブジェクト指向UIのフィロソフィー
GUI
GUI
https://upload.wikimedia.org/wikipedia/commons/6/6b/Gem_11_Desktop.png
グラフカルユーザインタフェース
オブジェクトを選択して、アクションを実行
名詞 動詞
CUI
コンソールユーザインタフェース/コマンドラインユーザインタフェース
コマンドを実行、しばしば対象を同時に指定 echo "hoge"
動詞 名詞
TUI
テキストユーザインタフェース
ちょっとリッチだが、本質的にはCUI
モードレス
モーダル
モーダルダイアログ