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

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

紙版発売
電子版発売

A5判/360ページ

定価3,278円(本体2,980円+税10%)

ISBN 978-4-297-11351-3

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

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

こんな方におすすめ

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

著者の一言

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

この書籍に関連する記事があります!

動詞ではなく名詞を起点に画面を構成する ~OOUIでソフトウェアを使いやすく~
「あれ? どの入口から始めればいいんだっけ?」「ん? さっきと似た画面だけど,どこがちがうんだろう? ここでできるんだっけ?」

本書のサンプル

本書の一部ページを,PDFで確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

目次

  • はじめに

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』
  • おわりに
  • 参考文献
  • 索引
  • あとがき

著者プロフィール

ソシオメディア株式会社(ソシオメディアかぶしきがいしゃ)

著者。
デジタルプロダクトに特化したデザインコンサルティング会社。2001年の創業以来,インタラクションデザイン,ユーザビリティエンジニアリング,デザインマネジメントなどの分野で先端的な実績を積み重ねるとともに,書籍,雑誌記事,セミナー,イベントなどで活発な情報発信を行い,業界をリードし続けている。近年はOOUIのトレーニングサービスが好評。
ウェブサイト:https://www.sociomedia.co.jp


藤井幸多(ふじいこうた)

著者。
ソシオメディア株式会社ユーザーインターフェースデザイナー。各種ビジネスアプリケーションをはじめさまざまなアプリケーションのデザインコンサルティングを経験。UI設計,ユーザビリティテスト,デザインガイドライン策定,デザイン評価,OOUI メソッドとトレーニングプログラムの開発/実施などを通して,デザイン組織への支援を行う。
Twitter:@atochotto


上野学(うえのまなぶ)

著者・監修者
デザインコンサルタント/デザイナー。各種ビジネスアプリケーション,ウェブ/モバイル/デスクトップアプリケーション,その他の様々なインタラクティブメディアのヒューマンインターフェース設計およびユーザビリティ評価に従事。ソシオメディアにおいてデザインメソッド開発を担う。執筆,講演など多数。
Twitter:@manabuueno