オブジェクト指向UIデザイン──使いやすいソフトウェアの原理の第3章「オブジェクト指向UI設計の実践」を読んだので学びや所感をまとめます。
- オブジェクト指向UIとは何か
- オブジェクト指向UIの設計プロセス
- オブジェクト指向UI設計の実践（←この記事はこの章について）
- ワークアウト：基礎編
- ワークアウト：応用編
- オブジェクト指向UIのフィロソフィー
第1章、第2章については別の記事にまとめています。
オブジェクト指向UIの設計ステップ
これは第2章の記事でも書いた話ではありますが、オブジェクト指向UI（以下、OOUI）の設計ステップは3ステップです。
- オブジェクトの抽出（モデル）
- ビューとナビゲーションの検討（インタラクション）
- レイアウトパターンの適用（プレゼンテーション）
1、2、3と数字を振っていますが、本書では必ず1から順にしないといけないわけではないと書いています。
1から始めて2に着手しながら再度1に戻ることも良しとしています。
オブジェクトの抽出（モデル）
オブジェクトを定義するためのステップが明確に説明されています。
まずは思いつく限り、「◯◯する」という形でどんなやることがあるのかを出していく。
1文が長くなって、色々な登場人物ができても気にしないで良いと思う。
例：月曜日の朝食でパンを食べる
出したタスクから名詞を抽出する。
抽出する名詞は全て。とりあえず抽出する。（多分これで良い）
例：月曜日の朝食でパンを食べる
抽出した名詞ごとの関係性を図示する。
例の「月曜日の朝食でパンを食べる」というタスクだったら（まあそのままやけど）こんな感じになる。
上の画像でいうと、こんな感じで月曜日→曜日、朝食→食事、パン→メニューと汎化（僕は上位概念に抽象化するという意味で捉えました）する。
複数のタスクの名詞を汎化させて、それぞれの名刺の関係性をネットワーク状に広げて図示することでオブジェクトが見えてくる。
ひとまずは全てオブジェクトとする。
上記の図からそのアプリケーションでメインで扱うオブジェクトを特定する。
今回でいうと、Object2が多くのオブジェクトと関係を持っているか重要だと考えるのでメインオブジェクトの1つとする。
なお、メインオブジェクトは1つである必要はない。
オブジェクト間の関係性の多さで決定するわけではなく、「主要なもの」がメインオブジェクトとなる。（難しい）
メインオブジェクト間の「多重性」を図示する。（メインオブジェクト以外は薄いグレーにしています）
多重性はRDBでのリレーションと同じで、1対多（とかNとか）の多の部分には✳︎をつけるように説明されている。
メインオブジェクトに紐づくメインオブジェクト以外のオブジェクト（サブオブジェクト）をそのメインオブジェクトのプロパティとしてまとめる。
オブジェクトを識別するために名称情報もプロパティとしてピックアップする。「名称」でも「名前」でも「氏名」でも良い。
メインオブジェクトにアクションを紐づける。
アクションはタスクを手掛かりに洗い出す。
編集可能なアプリケーションにする場合はそのオブジェクトに対して登録・削除の機能もセットで必要になる。
ビューとナビゲーションの検討（インタラクション）
ビューに関してはオブジェクトに対してコレクションビュー（一覧画面）とシングルビュー（詳細画面）があります。
オブジェクトによってはコレクションビューが不要なもの、シングルビューが不要なものがあります。
アプリケーション内でユーザー視点で情報が1つしか存在しないものはコレクションビューを省略することができます。
必要なビューを洗い出したら、ビュー同士の関係性を考えます。
あるビューからどのビューを参照する必要があるのかを考えてビュー同士の呼び出し（ナビデーション）をまとめます。
この作業を初めにしておくとデザインを考えるときに作業に着手しやすくなるなと思いました。
ルートナビゲーションにはオブジェクト名＋アイコンを並べます。
デザイナーの知人にアイコンを選ぶ際には以下を気をつけると良いと聞きました。
- 似た形のアイコンを用いない
- アウトラインアイコンか塗りつぶしアイコンかは統一する
レイアウトパターンの適用（プレゼンテーション）
本書ではOOUIのレイアウトにはすでに一般化しているパターンが存在すると書かれています。
オブジェクトの
- 一覧表示
- 追加
- 閲覧
- 更新
- 削除
などのレイアウトには経験則として良いパターンが存在し、それを踏襲することでユーザーがアプリケーションの振る舞いを短時間で学習し、自らの工夫も含めて思いどおりに使えるようなUIにすることができます。
詳しい内容は割愛しますが以下のケースのレイアウトパターンの具体例が複数紹介されているので、実際に何かアプリケーションを新たにつくるときや、既存アプリに画面を追加するときの参考にできます。（というかそのまま流用する、で間違いなさそうです）
- ルートナビゲーションの配置
- ビューの配置
- コレクションビューの表示形式
- コレクションのフィルタリング
- シングルビューの表示形式
- アクションの表示形式
上記のレイアウトパターンはデスクトップ向け、スマホ向けどちらもあるので開発するアプリケーションの提供先（Webでもスマホでも）に関わらず適用することができるのでかなり良いです。
最後に
この章はかなり実践的な内容がまとめられていてとても満足でした。
1章、2章でインプットした情報をベースにとてもイメージしやすく実用性が高い内容なので何か新しいアプリケーションを作るときのバイブルとして使えそうだなと思いました。
個人開発者にもおすすめしたいです。
コメント