教材

https://www.amazon.co.jp/オブジェクト指向UIデザイン──使いやすいソフトウェアの原理-WEB-DB-PRESS-plusシリーズ/dp/4297113511

モチベーションと背景

• webアプリケーションについて勉強したいが、何から手をつけて良いかわからない
• コーディングについてはある程度知識がある
• なんとなくのデザインではなく、知識をもとにデザインを行いたい
• 個人開発において自身で一貫して、デザインから開発までを行いたい

オブジェクト指向UIデザインとは

オブジェクト(ユーザが操作したい目当てのもの)を主体としたデザインです。

全ての操作にはオブジェクトとタスクが存在します。

オブジェクトは名詞、タスクは動詞とほぼイコールです。

例えば

• りんごを食べる場合、オブジェクトは「りんご」、タスクは「食べる」である
• 商品を買う場合、オブジェクトは「商品」、タスクは「買う」である
• メールを送信する場合、オブジェクトは「メール」、タスクは「送信する」である
• メールを確信する場合、オブジェクトは「メール」、タスクは「検索する」である

このように、操作というものは、「ユーザがオブジェクト(対象とするもの)を選択してから、タスク(それに対する操作)を選ぶ」ことが自然である。

この原理に則ってデザインすることをオブジェクト指向UIデザインと呼ぶ。

タスク指向UIデザイン

逆に、「ユーザがタスク(それに対する操作)を選択してから、オブジェクト(対象とするもの)を選ぶ」ようにデザインすることをタスク指向UIデザインと呼ぶ

基本的に、タスク指向UIデザインはアンチパターンである。

タスク指向UIデザインとオブジェクト指向UIデザインの例

以下の操作を行うアプリケーションをタスク思考とオブジェクト指向でそれぞれで考えてみる。

タスク指向でのUIデザイン

ユーザにタスク(動作)を選ばせた後に、オブジェクトを選ぶため、下記のような構成になる

- トップ画面
  - メール送信画面
  - メール作成画面
  - メール検索画面
  - メール一覧表示画面
  - メール詳細画面
  - メール削除画面

上記のような画面の場合

• アプリが何のオブジェクトを扱うがあいまいである
• タスクが増えるごとにトップ画面のメニューが増えていく
• 他のタスクを行うには一旦、トップ画面に戻らなくてはいけない
• メール検索画面とメール検索画面など同じような見た目のページがある。

オブジェクト指向でのUIデザイン

ユーザにオブジェクト(メール)を選ばせた後、タスクを選ぶため下記のような構成になる

- メール一覧画面
  - メール作成/確認画面

上記のような画面の場合

• 何を操作するのかが明確
• 画面数が少なくて済む
• 同じ見た目のページは統合できる

とりあえず一度実践してみる

要件の整理

1. 要件一覧を書き出す
2. 要件から名詞を抜き出し、その関係性を書く
3. メインとなる名詞(オブジェクト)を決める。今回の場合は「メモ」
4. オブジェクトと動詞(アクション)を結びつける
5. コレクションビューとシングルビューを作成する

UIの作成

• メモ一覧画面(コレクションビュー)とメモ編集画面(シングルビュー)を作る
• 最初の画面でユーザにメモ一覧画面を表示し、オブジェクトの一覧を掲示する
• アクションはできるだけアイコンで示す

メモ一覧画面

メモ編集画面

オブジェクト指向UIデザインのステップ

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

• ステップ1~3は順番通り進める必要はなく、行き戻りしながら進める。
• 必ずしも1~3の順番でやるものではない

以下、病院用アプリを作成する仮定を立てて実装してみる

オブジェクトの抽出

1. タスク一覧を書き出す

作りたいアプリケーションの実現したいタスク一覧を書き出す
実際にデザインするときにはタスクが要件になるため、きちんと吟味しながら書き出す必要がある。

2. 名詞を抽出する

タスクの中から名詞(オブジェクト)を抽出する。
無造作に抜き出すのではなく、ユーザの関心の対象となるものを抜き出す。