WEB+DB PRESS plusシリーズオブジェクト指向UIデザイン
――使いやすいソフトウェアの原理
――使いやすいソフトウェアの原理
2020年6月5日紙版発売
2020年6月5日電子版発売
ソシオメディア株式会社,上野学,藤井幸多 著,上野学 監修
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で確認することができます。
- サンプルPDFファイル(1,387KB)
本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。
目次
- はじめに
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』
- おわりに
- 参考文献
- 索引
- あとがき
この本に関連する書籍
-
データモデリングでドメインを駆動する ――分散/疎結合な基幹系システムに向けて
本書のテーマは「データモデリング」と「基幹系システム」です。 Web上で台頭しつつある新たなビジネスは,新たな基幹系システムを必要としています。一方,既成ビジネ...
-
縁の下のUIデザイン ──小さな工夫で大きな効果をもたらす実践TIPS&テクニック
UIデザインの中でも普段はあまり注目されることのない細かい部分にフォーカスした書籍です。デザイナーがどのような意図を持ってUIをデザインしているのかを解説します...
-
Webアプリケーションアクセシビリティ ――今日から始める現場からの改善
アクセシビリティとは「利用可能な状況の幅広さ」のこと。より多くの人が,より多くの環境で,より多くの状態で利用できることです。もちろんそこには視覚・上肢・認知...
-
スタートダッシュiOS 〜アプリエンジニアの必須ノウハウをサクっと押さえる
「iOSアプリ開発に必要なものは?」 「Swiftはどうやって書くのか?」 「アプリのデザインはどうなっている?」 「開発現場で使われているOSSは?」 iOSアプリエ...
-
Atomic Design ~堅牢で使いやすいUIを効率良く設計する
「1画面を変更したつもりが,アプリ全体のUIが崩れてしまった」 「理想のデザイン通り実装したのにユーザーが使いにくい」 「コードが複雑に入り組んでいてもはやメン...
-
現場で役立つシステム設計の原則 〜変更を楽で安全にするオブジェクト指向の実践技法
「ソースがごちゃごちゃしていて,どこに何が書いてあるのか理解するまでがたいへん」「1つの修正のために,あっちもこっちも書きなおす必要がある」「ちょっとした変更...
-
失敗から学ぶユーザインタフェース 世界はBADUI(バッド・ユーアイ)であふれている
自動券売機の操作に手間取って後ろに並んでいる人が気になってしまい,焦ったことはないでしょうか? ついつい書き間違えて書類を最初から書き直すことになってしまい,...