『オブジェクト指向UIデザイン』のサマリーと一部個人的な解釈
本noteは、技術評論社から出版されている『オブジェクト指向UIデザイン』の書籍の1章から2章までをまとめたものです。
目的）
読者をアウトプットしたいという個人的な目的でnoteに書きました。
期待）
『オブジェクト指向UIデザイン』に興味があるけどまだ書籍を手に取っていない人や『オブジェクト指向UIデザイン』を読んだけどおさらいしたい方には、たぶんですが何かしら参考になることがあるかもしれません。
注意）
本noteは二次情報でかつ個人的な解釈を一部挟んでいるので、すべてが書籍と一致しているわけではありません。
見出し）
■ OOUI vs タスク指向
└ OOUIとは
└ タスク指向とは
└ なぜタスク指向はだめなのか？
└ OOUIが良いのか？
■ どうやってOOUIでデザインするのか？
■ 番外編）なぜタスク指向になってしまうのか？
OOUI vs タスク指向
OOUIとは
オブジェクト起点に作られたインターフェースのこと。名詞→動詞の流れ、オブジェクトを選択し、そのオブジェクトに対してのアクションを選ぶ。
例）ECを例にすると、商品を選択（=オブジェクトの選択）→その商品を購入する（=アクションの選択）
タスク指向とは
タスク（アクション・動詞）を起点に作られたインターフェースのこと。動詞→名詞の流れで、タスク（アクション）を選択し、そのアクションの該当物・オブジェクトを選択する。
例）自動販売機を例にすると、お金を入れる（=アクションの選択）→商品を選択する（=オブジェクトの選択）
なぜタスク指向はだめなのか？
先に選んだアクションとユーザーが選択したいオブジェクトがどう関係するのか予測がつかないため。必要性を理解できないまま進行されていることにフラストレーションが溜まる。
ユーザーがその選択が正しいかどうかわからないまま先へ進まなければいけない、この状態をUI設計の研究者(アラン・クーパー氏)が「情報なき合意」と呼んでいる。
では先にアクションを選択することがどうおかしいかをいくつかの事例でまとめてみます。
例）
・りんごをかじる場合、かじってからりんごを選ばない
・コンビニ（リアルな体験）だと先にお金を払って商品を選ばない
他にもアクションを先に選択する事例として、フードデリバリーのシステム例がある。「注文する」→「今すぐ配達」→「住所登録」→（最後に）「商品選択」の流れで、特に「今すぐ配達する」のCTAボタンが商品を選択していないのに配達？って混乱させる。
---------------------
※独り言
疑問）
デリバリーサービスの商品選択より先に住所を記入されている件で、もし地域によって購入できる商品とできない商品があった場合どうするのがよいか？
商品を選び、住所登録した後に、その商品はこの地域では買えないと言われたとき、ユーザーの手間は台無しになり、購入意欲が下がる(CVRの減少)のではないか。
論点）
1. 地域によって特例に該当する量としない量の比率はどうか？
2. 特例に該当する地域の人が商品を選択するときに気づく方法はあるか？（情報設計の優先度的に邪魔しない範囲で）
3. 新規対リピート比率は？システム的に一度購入したユーザーの再訪時に、どれだけログを残せるか？（Uber EatsはChromeのシークレットモードでも住所登録したエリアのショップが表示される体験を提供でき、再訪ユーザーだと定義できるか）
解決策）
仮定から入るが、1を特例に該当する地域が0.5割以下で、3はUber Eatsみたいに再訪ユーザーのほとんどが住所登録された状態で、2をタイトル下部あたりにグレーで特例地域あり的なニュアンスとツールチップを添えると特例地域ユーザーの9割が気づくならば、これでよい？
特例に該当=0.05(特例地域)*0.7(新規) ※新規が7割だと仮定
困難に合う=特例に該当*0.1
→全ユーザーの0.35%が事故ることになる
これをどうするかはビジネス・組織の状況判断で決定？
---------------------
なぜOOUIが良いのか？
以下には個人的な解釈も含みます。
すばりリアルな体験と同じ流れだから(?)。前述のりんごの例やコンビニの例のように、リアル（システム外）ではオブジェクトの選択→アクションの選択の流れが自然の流れのため。
その自然の流れをシステムに落とし込むことで、直感的に?操作ができるようになり、それが良いと言われている理由なのでは？
どうやってOOUIでデザインするのか？
結論からいうと下記のステップを踏む。
※1→3の順番は任意
1. オブジェクトの抽出（=モデル）
2. ビューとナビゲーションの検討（=インタラクション）
3. レイアウトパターンの適用（=プレゼンテーション）
まず、以下ではモデル・インタラクション・プレゼンテーションについて説明する。
モデルはソフトウェアデザインの基盤となる層でオブジェクト指向UI設計において重要な層。次にインタラクションは、モデルとインタラクションをつなぐ層。プレゼンテーションはソフトウェアデザインの表層。
個人的な解釈だが、プログラミングでいうところのMVC的なところに近いのか？
では次に、メールプロダクトを事例にステップの具体的な紹介。
1. オブジェクトの抽出（=モデル）
└メールボックス・メール
2. ビューとナビゲーションの検討（=インタラクション）
└メールボックス（一覧）→メール（一覧）→メール（詳細） ※矢印がナビゲーション
3. レイアウトパターンの適用（=プレゼンテーション）
└（プライマリー）サイドバーにメールボックス（一覧）
└（セカンダリー）サイドバーにメール（一覧）
└コンテンツにメール（詳細）
※上記はデスクトップを仮定したver
番外編）なぜタスク指向になってしまうのか？
業務の中で、ユーザーのやることをベースに組み立てられるため。
以降は個人的な想像。
例えば、業務では「商品を買う」「商品を見る」「近くの店舗を検索する」などを列挙しそのまま落とし込むせいで、某フードデリバリーサービスのように、ファーストビューが下記のようになってしまうのでは？
・「商品を買う」→メニューボタン
・「商品を見る」→注文するボタン
・「近くの店舗を検索する」→店舗検索ボタン
たしかに、サービス設計でユーザーストーリーは作るが、それを構造化せずに、適当にメインにしてしまうとこういう事故が起きる気がしている。
振り返り
以上まとめでした。
対比的でかつ事例ベースで分かりやすい書籍でした。上記の紹介以外にも、実践編などボリュームのある書籍ですので、実際の書籍で読むことをおすすめします。
特にワークアウト基礎編のレベル6~9までがとても興味深いお題でした。
この記事が気に入ったらサポートをしてみませんか？