書籍概要

WEB+DB PRESS plus

オブジェクト指向UIデザイン
――使いやすいソフトウェアの原理

著者
発売日
更新日

概要

オブジェクト指向ユーザーインターフェース(OOUI)とは,オブジェクト(もの,名詞)を起点としてUIを設計すること。タスク(やること,動詞)を起点としたUIに比べて,画面数が減って作業効率が高まり,また開発効率や拡張性も向上する,いわば「銀の弾丸」的な効果を持ちます。ブログや雑誌記事などで大きな反響を得たこの設計手法について,前半部では理論やプロセスを詳説。そして後半部の「ワークアウト(実践演習)」では18の課題に読者がチャレンジ。実際に考え,手を動かし,試行錯誤をすることにより,OOUIの設計手法を体得できます。

こんな方におすすめ

  • Web/モバイルアプリケーション開発者
  • ユーザーインターフェースデザイナー
  • フロントエンドエンジニア

著者から一言

ソシオメディアは,デザインコンサルティング会社として約20年間,UIデザインの各種メソッドや評価手法をシステム開発の現場でいろいろと試してきました。そこから得た知見として本書では,私たちが最も重視し,ほとんどすべてのデザイン案件で実践している設計手法,「オブジェクト指向ユーザーインターフェース」について解説していきます。
私たちはこれまでデザインコンサルティングの仕事で数百の業務アプリケーションを見てきましたが,世の中の業務アプリケーションの8割ぐらいはタスク指向のUI構成になっているようです。それらのほとんどは,オブジェクト指向のUI構成に変えるだけで劇的に改善できるのです。デザインはトレードオフの集合であり,常に有効なメソッドというものはほとんどありませんが,「タスク指向からオブジェクト指向への転回」だけは,半ば機械的に行えることでもあり,もう銀の弾丸と言っていいほど汎用的で強力なUI改善方法なのです。
ここでいう改善とは,操作効率,学習効率,業務効率,UI拡張性などの向上を意味します。UIの構成をタスク指向からオブジェクト指向にすると,通常,画面数は5〜20分の1に減ります。それにより,同じ目的を達成するために必要な操作手順も圧倒的に少なくなります。また設計もシンプルになり,開発工数は低減され,保守性も高まります。既存システムのUIが複雑で困っていると言う担当者を多く見てきましたが,彼らは単にオブジェクト指向ユーザーインターフェースの設計手法を知らないだけなのです。(「はじめに」より)

サンプル

samplesamplesamplesamplesamplesamplesamplesample

目次

  • はじめに

1 オブジェクト指向UIとは何か

  • 1-1 目当ての現し
    • ユーザー要求とタスク
    • 目当て=オブジェクト
  • 1-2 お金が先か,商品が先か
    • 明らかにおかしなUI
    • テストするまでもない問題
  • 1-3 オブジェクト指向UI
    • オブジェクト指向UIの原則
    • オブジェクトを知覚でき直接的に働きかけられる
    • オブジェクトは自身の性質と状態を体現する
    • オブジェクト選択→アクション選択の操作順序
    • すべてのオブジェクトが互いに協調しながらUIを構成する
  • 1-4 オブジェクト指向か? タスク指向か?
    • 対象オブジェクトを選ぶところから操作が始まる
    • タスク指向UIの問題
    • オブジェクト指向UIとタスク指向UIの対比
    • タスク指向UIを改善する ビデオカメラ画面
    • タスク指向UIを改善する フードデリバリーサービス
    • オブジェクトを前面に出す
  • 1-5 UIがタスク指向になってしまう背景
    • 業務分析では「やること」がまとめられる
    • 利用手続きをデザインしようとする
    • タスクに必要な情報オブジェクトを定義する

2 オブジェクト指向UIの設計プロセス

  • 2-1 デザインプロセスのミッシングリンクをつなぐ
  • 2-2 アプリケーションの手掛かり
    • タスクを手掛かりにすると
    • オブジェクトを手掛かりにする
  • 2-3 ユーザー,タスク,オブジェクトの関係
  • 2-4 ソフトウェアデザインのレイヤー
    • UIは複数のオブジェクトを構造的に表象した合成物
    • モデル ユーザーの関心対象の模式
    • インタラクション 構造と機能
    • プレゼンテーション スタイルやレイアウト
  • 2-5 デザインの究極の目的は形である
    • デザイナーのアブダクション
    • 一貫して作用する「原理」を備える
    • 道具の抽象性
  • 2-6 オブジェクト指向UI設計の基本ステップ
    • ステップ1. オブジェクトの抽出
    • ステップ2. ビューとナビゲーションの検討
    • ステップ3. レイアウトパターンの適用

3 オブジェクト指向UI設計の実践

  • 3-1 オブジェクト指向UIの設計ステップ
  • 3-2 本章でデザインするものの全体像
  • 3-3 ステップ1. オブジェクトの抽出
    • 「名詞」を抽出する
    • 「名詞」とそれらの関係を抽出する
    • 「名詞」を汎化し,粒度を揃える
    • 「名詞」の関係性をつなげ,オブジェクトを特定する
    • オブジェクトの中で「メインオブジェクト」になるものを特定する
    • メインオブジェクトの多重性を特定する
    • メインオブジェクトに付随するオブジェクトをプロパティとする
      • コラム メインオブジェクト選びのポイント
    • タスクからアクションを見つける
      • コラム タスク,オブジェクト,プロパティ,アクション
  • 3-4 ステップ2. ビューとナビゲーションの検討
    • 基本のビュー形式
    • メインオブジェクトに「コレクション」と「シングル」のビューを与える
      • コラム シングルビューとコレクションビューの省略
    • コレクションビューとシングルビューの呼び出し関係を検討する
    • メインオブジェクトの中からルートナビゲーション項目を選定する
      • コラム ルートナビゲーションの項目,アイコン,ラベリング
  • 3-5 ステップ3. レイアウトパターンの適用
    • ルートナビゲーションの配置パターン
    • ビューの配置パターン
    • メインオブジェクト同士の参照関係を踏まえて配置パターンを適用する
      • コラム ビューの配置パターン適用のポイント
    • コレクションビューの表示形式のパターン
      • コラム オブジェクトへのフォーカスとコレクションビュー
    • コレクションの性質や用途に合わせて表示形式を決定する
    • コレクションのフィルタリングのパターン
    • シングルビューの表示形式のパターン
      • コラム シングルビューの表示内容
    • シングルビューの性質や用途に合わせて表示形式を決定する
    • アクションの性質や用途に合わせて表示形式を決定する
    • Create(作成)アクションのパターン
    • Delete(削除)アクションのパターン
    • Update(更新)アクションのパターン
    • ビジュアルデザイン
  • 3-6 タスクをどう扱うか
    • タスクの特徴
    • タスクはどこへ行くのか?

4 ワークアウト:基礎編

  • 進め方
  • レベル1 メモアプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル2 社員名簿アプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル3 イベント店舗管理アプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル4 会議室予約アプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル5 家族で遊べる場所を探すアプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル6 商品管理アプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル7 商品管理アプリケーション
    • ヒント・チャレンジ
    • 解説
  • レベル8 商品管理アプリケーション
    • ヒント
    • 解説
  • レベル9 商品管理アプリケーション
    • ヒント
    • 解説

5 ワークアウト:応用編

  • 進め方
  • レベル10 スマートフォン用の営業支援アプリケーション
    • ヒント
    • 解説
  • レベル11 イベント管理アプリケーション
    • ヒント
    • 解説
  • レベル12 保険契約の顧客管理アプリケーション
    • ヒント
    • 解説
  • レベル13 アセット管理アプリケーション
    • ヒント
    • 解説
  • レベル14 サイト管理アプリケーション
    • ヒント
    • 解説
  • レベル15 出張申請・精算アプリケーション
    • ヒント
    • 解説
  • レベル16 契約管理アプリケーション
    • ヒント
    • 解説
  • レベル17 通貨換算アプリケーション
    • ヒント
    • 解説
  • レベル18 販売実績照会アプリケーション
    • ヒント
    • 解説

6 オブジェクト指向UIのフィロソフィー

  • 6-1 オブジェクトの原義
  • 6-2 オブジェクト指向
    • クラスとインスタンス
    • イデア論
    • GUIにおけるオブジェクト
    • プログラミングにおける記述法
  • 6-3 GUI
    • マン – マシン インターフェースからユーザーインターフェースへ
    • インターフェースはユーザーとオブジェクトを接着する
    • Whirlwind GUIという発想の原型
    • SAGE 防空システムに組み込まれた最初期のGUI
    • Sketchpad グラフィック言語による対話型コンピューター
    • NLS 知的生産活動のためのコンピューター
    • Smalltalk 誰もが使えるパーソナルコンピューター
    • TUI テキストベースのUI
    • Star GUIベースのビジネス用ワークステーション
    • Macintosh 商業的に成功した最初のGUIシステム
    • iPhone パーソナルコンピューターの新しいフォームファクター
    • メタメディアとしてのオブジェクト指向UI
  • 6-4 モードレス
    • モードレスネスを信奉しなさい
    • ラリー・テスラー テキスト編集のモードレス化
    • ドナルド・ノーマン モードエラーの分析
    • ジェフ・ラスキン モードレスにすることで劇的に使いやすくなる
    • モードレスにする方法
  • 6-5 オブジェクト指向UIについての文献
    • 『Object-Oriented User Interfaces and Object-Oriented Languages』
    • 『Object-Oriented Interface Design』
    • 『Designing Object-Oriented User Interfaces』
    • 『The Elements of User Interface Design』
    • 『Designing for the User with OVID』
  • おわりに
  • 参考文献
  • 索引
  • あとがき

サポート

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。

(2022年7月29日最終更新)

以下は第1刷から第5刷が対象です(第6刷では修正済みです)

P.55 8行目

これについてはまた追って説明します。
これについては第3章であらためて追って説明します。

(以下2021年7月30日更新)

以下は第1刷から第4刷が対象です(第5刷では修正済みです)

P.118 図3-5-36

正

左図のマウスポインタの位置を修正しました。

P.279 7行目

そこで私はブレンダ・ローレルの図をアップデートし、
そこでブレンダ・ローレルの図を一段アップデートし、

(以下2020年12月8日更新)

以下は第1刷から第3刷が対象です(第4刷では修正済みです)

P.iii 13行目から

そしてコンピューターのような情報処理の道具では、UIこそが、その道具が何であるかというユーザーの認知を作る、最大の設計テーマとなります。
そしてコンピューターのような多態的な情報処理の道具では、UIこそが、その道具が何であるかというユーザーの認知を作る、最大の設計課題となります。

P.24 5行目

「録画データ一覧」という
「録画データ」という

「一覧」が不要でした。

P.24 9行目

「録画データ一覧」を押すと
「録画データ」を押すと

「一覧」が不要でした。

P.24 図1-4-5 さしかえ

1-4-5

録画データ一覧
録画データ

「一覧」が不要でした。

P.75 図3-3-14 さしかえ

3-3-14

印刷
新規
削除 ほか
印刷する
新規する
削除する ほか

アクションの文末を「する」に統一しました。

P.137 図4-1

3/4-1

印刷
新規
削除 ほか
印刷する
新規する
削除する ほか

アクションの文末を「する」に統一しました。

P.315 図6-4-12

6-4-12

図の縦横比がやや異なっていたため,修正しました(図の内容は同一です)。

(以下2020年8月3日更新)

以下は第1刷および第2刷が対象です(第3刷では修正済みです)

P.55 2行目から

 一方、オブジェクトとして適当でない概念としては、たとえば「受信」や「フラグ」などがあるでしょう。「受信」という概念は名詞的にも動詞的にも取れてしまいますし、「受信する」という動詞としてみればそれはタスクですからオブジェクトとは言えません。「フラグ」も同様に名詞的でもあり動詞的でもあり、名詞としてみるとそれは各メッセージにひとつだけ付けられる「属性」で、「フラグを付ける」という動詞としてみると各メッセージに対して行う「処理」ですから、オブジェクトとは言えません。
 一方、Eメールクライアントにおいてオブジェクトとして適当でない概念としては「受信」や「フラグ」などがあるでしょう。「受信」は主に動詞的に使われるものでタスクですから、オブジェクトとは言えません。「フラグ」は主に名詞的に使われますが、各メッセージに付随する「オンオフ属性」にすぎないのでオブジェクトとは言えません。
 ただし動詞的な概念や属性的な要素でもシステムの目的によってはオブジェクトにすることもあります。これについてはまた追って説明します。

P.290 下から6行目

WYSIWYG(印刷イメージと画面イメージが一致している)ことが重視され
WYSIWYG(印刷イメージと画面イメージが一致していることが重視され

P.339 左段 下から16行目

ディスプレイサイズ……63
[て]
データバインド……314
[て]
ディスプレイサイズ……63

データバインド……314

商品一覧