genkai-shobo.jp

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


著者:ソシオメディア株式会社/著 上野学/著・監修 藤井幸多/著
価格:2,980円+税
刊行日:2020/06/05

出版社:技術評論社
ISBN:978-4-297-11351-3
Cコード:3055
[単行本](電子通信)


内容紹介

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

もくじ

はじめに

■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

上野 学

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

藤井 幸多

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