Open7
オブジェクト指向UIデザイン
教材
モチベーションと背景
- webアプリケーションについて勉強したいが、何から手をつけて良いかわからない
- コーディングについてはある程度知識がある
- なんとなくのデザインではなく、知識をもとにデザインを行いたい
- 個人開発において自身で一貫して、デザインから開発までを行いたい
オブジェクト指向UIデザインとは
オブジェクト(ユーザが操作したい目当てのもの)を主体としたデザインです。
全ての操作にはオブジェクトとタスクが存在します。
オブジェクトは名詞、タスクは動詞とほぼイコールです。
例えば
- りんごを食べる場合、オブジェクトは「りんご」、タスクは「食べる」である
- 商品を買う場合、オブジェクトは「商品」、タスクは「買う」である
- メールを送信する場合、オブジェクトは「メール」、タスクは「送信する」である
- メールを確信する場合、オブジェクトは「メール」、タスクは「検索する」である
操作 | オブジェクト | タスク |
---|---|---|
りんごを食べる | りんご | 食べる |
商品を買う | 商品 | 買う |
メールを送信する | メール | 送信する |
メールを検索する | メール | 検索する |
メールを削除する | メール | 削除する |
このように、操作というものは、「ユーザがオブジェクト(対象とするもの)を選択してから、タスク(それに対する操作)を選ぶ」ことが自然である。
この原理に則ってデザインすることをオブジェクト指向UIデザインと呼ぶ。
タスク指向UIデザイン
逆に、「ユーザがタスク(それに対する操作)を選択してから、オブジェクト(対象とするもの)を選ぶ」ようにデザインすることをタスク指向UIデザインと呼ぶ
基本的に、タスク指向UIデザインはアンチパターンである。
タスク指向UIデザインとオブジェクト指向UIデザインの例
以下の操作を行うアプリケーションをタスク思考とオブジェクト指向でそれぞれで考えてみる。
操作 | オブジェクト | タスク |
---|---|---|
メールを送信する | メール | 送信する |
メールを作成する | メール | 作成する |
メールを検索する | メール | 検索する |
メールを一覧表示する | メール | 一覧表示する |
メールを詳細を表示する | メール | 詳細を表示する |
メールを削除する | メール | 削除する |
タスク指向でのUIデザイン
ユーザにタスク(動作)を選ばせた後に、オブジェクトを選ぶため、下記のような構成になる
- トップ画面
- メール送信画面
- メール作成画面
- メール検索画面
- メール一覧表示画面
- メール詳細画面
- メール削除画面
上記のような画面の場合
- アプリが何のオブジェクトを扱うがあいまいである
- タスクが増えるごとにトップ画面のメニューが増えていく
- 他のタスクを行うには一旦、トップ画面に戻らなくてはいけない
- メール検索画面とメール検索画面など同じような見た目のページがある。
オブジェクト指向でのUIデザイン
ユーザにオブジェクト(メール)を選ばせた後、タスクを選ぶため下記のような構成になる
- メール一覧画面
- メール作成/確認画面
上記のような画面の場合
- 何を操作するのかが明確
- 画面数が少なくて済む
- 同じ見た目のページは統合できる
とりあえず一度実践してみる
要件の整理
- 要件一覧を書き出す
- 要件から名詞を抜き出し、その関係性を書く
- メインとなる名詞(オブジェクト)を決める。今回の場合は「メモ」
- オブジェクトと動詞(アクション)を結びつける
- コレクションビューとシングルビューを作成する
UIの作成
- メモ一覧画面(コレクションビュー)とメモ編集画面(シングルビュー)を作る
- 最初の画面でユーザにメモ一覧画面を表示し、オブジェクトの一覧を掲示する
- アクションはできるだけアイコンで示す
メモ一覧画面
メモ編集画面
オブジェクト指向UIデザインのステップ
- モデル : オブジェクトの抽出
- インタラクション : ビューとナビゲーションの検討
- プレゼンテーション : レイアウトパターンの適用
ステップ1~3は順番通り進める必要はなく、行き戻りしながら進める。
以下、病院用アプリを作成する仮定を立てて実装してみる
オブジェクトの抽出
1. タスク一覧を書き出す
作りたいアプリケーションの実現したいタスク一覧を書き出す
実際にデザインするときにはタスクが要件になるため、きちんと吟味しながら書き出す必要がある。
2. 名詞を抽出する
タスクの中から名詞(オブジェクト)を抽出する。
無造作に抜き出すのではなく、ユーザの関心の対象となるものを抜き出す。