yuheijotaki.com

【読書メモ】オブジェクト指向UIデザイン ─ 使いやすいソフトウェアの原理

UI/UX系の知識を身につけるということで、少し前に発売して話題にもなった「オブジェクト指向UIデザイン」を読みました。

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ)

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ)

UIまわりの本ですが、こういうボタンはどういう見た目にしよう、のようなスタイル的な話ではなくソフトウェアの設計が主題です。

タイトルに入っている「オブジェクト指向UI（OOUI）」について、特にスマホアプリを普段扱っている人にとってはおそらく慣れた（普段から意識している）指向なのかなと思います。
ただ実際にソフトウェアを設計する際の方法論や実例を学ぶことなく「なんとなく」決めていることが多いと感じています。（自身はそうでした）
この本にはその方法論や実例が多く説明されていたので、気に留めておこうというポイントを中心にメモしておきたいと思います。

目次

  • 1 オブジェクト指向UIとは何か
  • 2 オブジェクト指向UIの設計プロセス
  • 3 オブジェクト指向UI設計の実践
  • 4 ワークアウト：基礎編
  • 5 ワークアウト：応用編
  • 6 オブジェクト指向UIのフィロソフィー

使いやすい or 使いづらいと感じる画面（UI）にはどんな特長があるのか、なかなか論理的・客観的に説明するのは難しいですが、技術評論社の記事 動詞ではなく名詞を起点に画面を構成する ～OOUIでソフトウェアを使いやすく～ にも書かれている通り、下記の考え方で設計することであらゆるソフトウェアの構成が整理され使いやすくなります。

タスクではなくオブジェクトを起点に画面を構成する。もっと一般的な言葉を使うと，「動詞（やること）」ではなく，「名詞（もの）」を起点に画面を構成する。たとえば「本を買う」であれば，「買う」ではなく「本」を起点にする。これだけのことです。ごくシンプルですよね。

4章の実践では、こういう要件があるものはどのような考えで作るのかが説明されていますが、本を通してメインで説明されている核は上記です。
5章のワークアウト基礎編では何個かお題があり、これまで説明された内容で自身でアプリケーションデザインをしてみて答え合わせしましょう、という内容です。
6章のワークアウト応用編では既存のタスク指向のアプリケーションをどのように改善すると良いUI（OOUI）になるかを考える設問と答えが掲載されています。

ソシオメディアさんというUI分野で古くから有名な会社に所属する方が書いており、さまざまなプロジェクトを通して得たノウハウが詰まっているように感じました。

ポイント

なぜオブジェクト指向UIなのか（はじめに）

ユーザーインターフェースという言葉は「コンピューター画面」などにとどまらず、使う人とその対象をつなぐものすべて。

そもそも扱うべき対象 = オブジェクトが「在る」という前提そのものが、UIの概念なのです。UIははじめから存在論的であり、オブジェクト指向なのです。

オブジェクト指向UIとは（p.9）

オブジェクト指向UIとは、オブジェクトを手掛かりに操作設計されたUIのことです。

オブジェクトとは、アプリケーションが扱う情報　オブジェクトのことであり、ユーザーが操作するときの対象物のことです。

例えば蔵書アプリの場合、最初に表示される画面で

  • 「登録する」「確認する」・・・などユーザが行うタスクを始点とするのではなく（動詞 → 名詞）、
  • 本の一覧表示でその中のひとつを選択すると編集作業や詳細ページでの確認ができるような、対象物が始点となるソフトウェア（名詞 → 動詞）

がオブジェクト指向となる。

オブジェクト指向UIの原則（p.11）

  • オブジェクトを知覚でき直接的に働きかけられる
  • オブジェクトは自身の性質と状態を体現する
  • オブジェクト選択 → アクション選択の操作順序
  • すべてのオブジェクトが互いに協調しながらUIを構成する

タスク指向UIとは（p.17）

CLIのように、動詞を起点として設計された操作モデル。動詞 = やることを指向しているという意味
タスク指向の例としてATMや券売機、自動販売機など。

UIがタスク指向になってしまう背景（p.29）

UXへの注目の高まりによって、ユーザーの体験価値の向上がUIデザインのひとつの重要なゴールとして認識されてきていることも関係しているのではないでしょうか。

体験をデザインするということが、ユーザーの利用手続きをデザインするという意味で捉えられることが多いのです。

オブジェクト指向UIの設計プロセス ソフトウェアデザインのレイヤー（p.42）

モデル、インタラクション、プレゼンテーションのレイヤーに分けることができる。

  • モデル
    • ユーザーの関心対象の模式
      • ユーザーの特性、業務の形態、情報の書式、要求事項の種類と関係性などをもとに、システムが扱うオブジェクトの構成をモデリングする
  • インタラクション
    • 構造と機能（フィール）
      • 構造と機能に関する層。モデルとプレゼンテーションをつなぐためのメカニズム。CRUD（作成、閲覧、更新、削除）などが含まれる。
  • プレゼンテーション
    • スタイルやレイアウト（ルック）
      • 表層。オブジェクトを表象するグラフィックの形や色、画面レイアウトなど。

オブジェクト指向UI設計の基本ステップ（p.51）

ステップ1,2,3はどこからはじめてもOK、行きつ戻りつ進めていく。

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

下記の各ステップ例は学校名簿アプリケーションを想定

ステップ1. オブジェクトの抽出（モデルレイヤー）

  • タスクのサンプルを何個か挙げる
    • 「ある生徒が所属している部活を確認する」、「3年C組のある生徒の成績を確認する」など
  • 名詞を抽出する
    • 「ある生徒」「部活」、「3年C組」「ある生徒」「成績」など
  • 名詞とそれらの関係を抽出する
    • 「ある生徒」-「部活」、「3年C組」-「生徒」-「成績」など
  • 名詞を汎化し、粒度を揃える
    • 「生徒」-「部」、「組」-「生徒」-「成績」など
  • 名詞の関係性をつなげ、オブジェクトを特定する
    • 「成績」-「生徒」-「部」など
  • オブジェクトの中で「メインオブジェクト」となるものを特定する
    • 「生徒」など、ユーザーの関心領域に置いて主要なものは何か？を考える
  • メインオブジェクトに負づいするオブジェクトをプロパティとする
    • 「生徒」の場合、氏名/成績 など
  • タスクからアクションを見つける
    • タスクとは最初に挙げたもの。「新規」「削除」など。「確認」は詳細ビューで表示されるので特記しない。

ステップ2. ビューとナビゲーションの検討（インタラクションレイヤー）

  • 基本のビュー形式
    • コレクション（一覧）とシングル（詳細）の2通り。
    • メインオブジェクトにコレクションとシングルのビューを与える
  • コレクションビューとシングルビューの呼び出し関係を検討する
    • 互いに参照可能性のあるビューを矢印でつなぐ
  • メインオブジェクトの中からルートナビゲーションを選定する
    • メインオブジェクトで優先度の高いもの、ユーザがアプリケーションを使用する際に最初に思い浮かべるオブジェクトを選定する。
    • 動詞ではなくオブジェクト名を用いる（語尾に「管理」などを用いない）
    • ルートナビゲーションを選択すると、そのオブジェクトのコレクションが表示される

ステップ3. レイアウトパターンの適用（プレゼンテーションレイヤー）

特にこれは書籍の図解のほうが分かりやすいです。
（参考）ソシオメディアさんWebの UIデザインパターン

  • ルートナビゲーションの配置パターン
    • 下固定 / 開閉式
  • ビューの配置パターン
    • 単一メインオブジェクト / 複数メインオブジェクト
    • ドリルダウンの方向性（上→下、左→右、同ページなど）の決定
  • コレクションビューの表示パターン
    • コレクションの性質や用途に合わせて表示形式を決定
      • 1項目1行の1次元リスト / 1項目複数行の1次元リスト / 1項目複数行の1次元リスト（高さ可変） / サムネールのグリッド/ マッピング
    • フィルタリングのパターンとしては下記がある
      • キーワード検索 / グループ / AND条件 / クエリビルダー / ソート
  • シングルビューの表示パターン
    • 他のオブジェクトのコレクションの一部を表示する
    • 他のオブジェクトのコレクションを強調する
    • 他のオブジェクトのコレクションだけを表示する
  • シングルビューの性質や用途に合わせて表示形式を決定する
  • アクションの性質や用途に合わせて表示形式を決定する
    • 作成
      • ブランク / パラメータ / プレースホルダー / セーブアズ / テンプレート / マスター / ワンタイムモード / ガッツ
        • 印象に残ったので、ガッツパターンとは図形作成時などにオブジェクトを選択するとすぐにアイテムが作成されるもの。Keynoteの四角形作成など。「操作をモードレスにするためにガッツをみせた仕様」
    • 削除
      • モーダルコンファーム / アンドゥアブル / モードレスコンファーム
    • 更新
      • モーダルエディット / モードレスエディット
  • ビジュアルデザイン
    • やっとこさUIのグラフィックに着手します

オブジェクト指向とは（おわりに）

オブジェクト指向UIは、単にナビゲーションのラベルを「名詞」にしたり、操作順序を「対象選択 → アクション選択」にするといった表現上のスタイルのことではなく、ユーザーの前に対象の理念をストレートに表象するということです。ユーザーに手順を指示するのではなく、目当てそのものを差し出す態度なのです。

とあるように、決まりきった手順で操作するのではなくユーザーが自由にUIを触れる感覚を持たせるようにする。

良かった点

  • 図やイラストが分かりやすい
  • 基本的な思想や設計方法の説明〜ワークアウトまで網羅している
  • 章構成もよい感じ。6章のフィロソフィーがはじめの方に来てたら心折れそうな気がするので
  • 補足も適切

中身の話でないですが、レイアウトはきれいだったのですが文字が小さいところが残念ポイントでした。

まとめ・感想

なかなか会社のプロジェクトでこのレベルの設計面から携わる（口が出せる）機会はないのですが、設計する人 / デザイナー / エンジニアみんながこの思想や設計方法を理解していると、かなりスムーズに機能を絞れたり開発が進むような気がします。
読む前は正直ちょっと胡散臭い感じがしていましたが、ふだん触っているアプリ（Spotify や Uber Eats）もオブジェクト指向UIですし、その仕組みや設計の方法を学べたのでとてもよい機会になりました。

本で出される例に関して、例えばメールアプリ、メモ帳アプリ、アドレス管理アプリなどがありますが、どれも Apple の純正アプリと画面構成が同じでオブジェクト指向UIになっています。
HIGなどにも書かれているとは思いますが、Appleも社内で設計する際に同じような手法なのかなと感じました。

これから使うアプリやサービスを見るときもこの本で学んだ視点で見ることができるかなと思います。

ほか参考