オブジェクト指向UIデザインとは？ プロセスもざっくりまとめた！

これは何

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 を読んで、学んだことをまとめた記事です

できるだけ短くなるように頑張りましたが、まとめきれてない部分あるかもしれません

オブジェクト指向UI とは？

ユーザーが「すること」ではなく、ユーザーが「得るもの」を先に考えるのがオブジェクト指向UI

紹介されていた自動販売機の例

• タスク指向
  • お金を払う → 飲み物を選ぶ
    • 動作 → 物を選択
• オブジェクト指向
  • 飲み物を選ぶ → QRコード決済で払う
  • 物を選択 → 動作

おまけ

objectの語源

• ob: 「その方向に対して」（toward,to,on,over,againstなどの意味合い）
• ject: 「投げる」（throw）

• 語源的なニュアンスは「その方へ投げる」
  • 知覚するものがいて、その前に知覚されるものとして、何かが投げかけられる感じ

オブジェクト指向UI の特徴

メインオブジェクトの一覧を早い段階でみせる
ユーザーがアプリケーションの用途・作業範囲を把握できる
オブジェクトに直接働きかけて作業開始できる
アプリケーション内の作業が、オブジェクト選択→アクション選択の順番になっている
インタラクションがモードレス

オブジェクト指向UIのメリット

タスク指向のほうが適切な場合もあります

1. 自由

• 手順がないからユーザーが好きな方法で目的に向かえる
  • オブジェクトを起点に操作を選択できる
  • アプリケーションにユーザーが自らを合わせることができるデザイン

• タスク指向だと
  • 少しだけ異なる他のタスクに対応できない
  • モードが発生する
    • 対象がわからないまま、行動を選択しないといけない状態

2. ユーザーの負荷が減らせる

ユーザーが目的に辿り着きやすく、感覚的に操作ができる

• タスク指向だと
  • タスクから選択させようとすると、ユーザーに負荷がかかる
  • タスクの数は大体オブジェクトの数より多い

3. ユーザーによって、アプリケーションの意味性が高まる

ユーザーがオブジェクトを起点に自由に操作することで、開発者が意図してなかった有用性を発見できる

• タスク指向だと
  • 決まった手順で操作することが多く、想定されたタスク以外は実行しにくい

オブジェクト指向でUIを作成するプロセス

実際に本にあったお題を元に、オブジェクト指向でUIを考えてみました！

お題「社員名簿アプリケーション」

📝想定タスク
・野坂さんの所属チームを確認する
・西村さんをファイナンスチームに追加する
・横田さんをデザインチームから削除する
・マーケティングチームの社員を確認する
・社員を新規登録する
・城之内さんのオンラインステータスを確認する
・エンジニアリングチームの紹介文を確認する
・田坂さんの連絡先を確認する

1. オブジェクトとタスクの抽出

想定タスクから名詞を抜き出して、それを汎化する

例えば、「野坂さん」は「社員」、「ファイナンスチーム」は「チーム」として粒度を揃えます。

抜き出して汎化してみました↓

• 社員
• チーム
• オンラインステータス
• 紹介文
• 連絡先
• 氏名

メインオブジェクトとプロパティの整理

抜き出した名詞の中から、メインオブジェクトを考えます。
アプリケーションを使う際に、ユーザーにとって主要なものは何かを特定します。

今回だと、アクションの起点となりそうなのは「社員」と「チーム」では？
「社員」と「チーム」を元にプロパティも追加しました

社員	チーム
氏名	名称
連絡先	紹介文
オンライン ステータス

タスクを考える

CRUD操作は多くのアプリケーションで主要なアクションになる

• C：Create（作成）
• R：Read（閲覧）
• U：Update（更新）
• D：Delete（削除）

「確認する」「閲覧する」などオブジェクトを表示するだけで良いものは、タスクに含めない

：タスク

社員	チーム
氏名	名称
連絡先	紹介文
オンライン ステータス
新規登録	新規登録
削除	削除
所属チームを追加する	社員を追加する
所属チームを削除する	社員を削除する

2. ビューとナビゲーションの検討

検討すること

• ビューの表現を考える（コレクションとシングル）
  • 「コレクション」：一つのビューでオブジェクト複数表示
  • 「シングル」：一つのビューでオブジェクト一つ分の表示
• メインオブジェクトからルートナビゲーションにするものを決める
  • アプリケーション使用時に起点になるものはルートナビゲーションにする

今回の場合

• メインオブジェクトが2つある
• それぞれのビューを横断しそう

なので、ビューごとに画面を分ける方向で考えてみます。

また、ルートナビゲーションはメインオブジェクトの「社員」「チーム」で良さそうです。

3. レイアウトパターンの適用

気をつけること

• 同じUIモデルでも、画面の単位を変えれば違う画面環境に対応できるようにする
• ビューのよびだしに伴うインタラクションは方向性が大事
  • 左で操作した結果が右に反映される
  • 上で操作した結果が下に反映される

実際に考えたUI

社員のコレクションビュー	社員のシングルビュー
チームのコレクションビュー	チームのシングルビュー

• 社員の新規追加：社員のコレクションビューから
• 社員の削除：社員のシングルビューから
• チームの新規追加：チームのコレクションビューから
• チームに社員を追加/削除：チームのシングルビューから

想定タスクは網羅できてそうです。

考えたこと

• 「〜確認する」のアクションが多そうなので、それがスムーズにできるようにしたい
  • コレクションビューに絞り込み・検索をつけた
  • リストにある程度情報を持たせた
  • チームはアイコンで感覚的にわかるようにした
• 「社員」「チーム」のシングルビューをそれぞれ行き来する想定

オブジェクト指向をマスターするには実践大事！

今回本を読んで、プロセスを理解して実践編もチャレンジしました。
それでも、まだ考え方を飲み込みきれてない感じがします...！

まずは、UIのステップが多くなった時や、なんとなく使いにくいぞと思った時、オブジェクト指向に立ち直ってみるところから始めます！

最後までお読みいただき、ありがとうございます