設計/UX/UI 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第29回】
0 likes94 views
MaruLaboの浅海ゼミでの講座のスライドです。 https://www.marulabo.net/docs/asami29/ OOAD(Object-Oriented Analysis & Design)の観点から、OOADにおけるUI設計の位置付けを整理します。 本講座ではOOADの基本となるUP(Unified Process)をベースにしていますが、コンシュマー向けWebシステムのUI開発ではアジャイル開発やUCD(User Centered Design)、情報アーキテクチャの活用が有効です。 これらの複数のパラダイムをどのように組み合わせてOOAD開発とUI設計を進めていくのか考えていきます。
![第1部 基本編の構成(1)
• 概論 [第1回]
• 開発プロセス [第2回]
• 基本モデル [第3回]
• 静的モデル(1) [第4回]
• 静的モデル(2) [第5回]
• 動的モデル [第6回]
• 協調モデル [第7回]
• 関数モデル [第8回]
• 物理モデル [第9回]
• 作業分野 [第10回]
• ビジネス・モデリング [第11回]
• 要求 [第12回]
• 要求/ユースケース [第13回]
• 要求/シナリオ [第14回]
• 分析 [第15回]
• 分析/コンポーネント分析 [第16回]
• 分析/イベント駆動 [第17回]
• 作業分野
• 設計 [第18回]
• 設計/アーキテクチャ設計 [第19回]
• 設計/コンポーネント設計(1) [第20回]
• 設計/コンポーネント設計(2) [第21回]
• 設計/コンポーネント設計(3) [第22回]
• 設計/ドメイン設計(1) [第23回]
• 設計/ドメイン設計(2) [第24回]
• 設計/ドメイン設計(3) [第25回]
• 設計/ドメイン設計(4) [第26回]
• 設計/ドメイン設計(5) [第27回]
• 設計/原理 [第28回]
• 設計/ UX/UI設計 [第29回]
• 実装 [第30回]
• テスト [第31回]](https://image.slidesharecdn.com/uxui-231119224937-b61883c3/85/UX-UI-29-3-320.jpg)
![第1部 基本編の構成(2)
• アプリケーション・アーキテクチャ [第32回]
• ドメイン・モデル [第33回]
• アプリケーション・モデル [第34回]
• プレゼンテーション・モデル [第35回]
• ケーススタディ[第36回]
• 要求モデル [第37回]
• 分析モデル [第38回]
• 設計モデル [第39回]
• 実装 [第40回]
• テスト [第41回]](https://image.slidesharecdn.com/uxui-231119224937-b61883c3/85/UX-UI-29-4-320.jpg)
![原理 (Principle)
• Agile Software Development [ASD]
• SRP (The Single Responsibility Principle)
• OCP (The Open-Close Principle)
• LSP (The Liskov Substitution Principle)
• …
• GRASP (General Responsibility Assignment Software Patterns or principles)
• Low Coupling
• High Cohesion
• …
• Writing Effective Use Cases [WEUC]
• Scope
• …](https://image.slidesharecdn.com/uxui-231119224937-b61883c3/85/UX-UI-29-6-320.jpg)
![パターン (Pattern)
• Design Patterns [DP]
• Observer, Strategy, …
• Domain Driven Design [DDD]
• Ubiquitous Language, Intention-
Revealing Interfaces, …
• Analysis Patterns [AP]
• Party, Quantity, …
• Pattern-Oriented Software
Architecture [POSA]
• Layers, Pipes and Filters, …
• Patterns of Enterprise
Application Architecture [PEAA]
• Unit of Work, Data Transfer Object,
…
• Enterprise Integration Patterns
[EIP]
• Message Bus, Aggregator, …
• Patterns for Effective Use
Cases [PEUC]
• CompleteSingleGoal,
VerbPhraseName, …
• AntiPatterns [AnP]
• Stovepipe System, Analysis
Paralysis, …](https://image.slidesharecdn.com/uxui-231119224937-b61883c3/85/UX-UI-29-7-320.jpg)
設計/UX/UI 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第29回】
- 2. SimpleModeling2021 • オブジェクト指向分析設計での共通範囲 • UML/UP • 本講座で使⽤するUMLプロファイル • プロファイル：SimpleModeling2021 (SM2021) • オブジェクト指向分析設計の基本からの拡張部を明確化 • アジャイル開発 • Communication • Embrace Change • Travel Light • Scaling • Component-Based Development • クラウド・アプリケーション • モデル駆動開発 SM2021 Travel Light Embrace Change Cloud Model-Driven Scaling CBD Testability Serviceability • ⾮機能要件 • Testability • Serviceability
- 3. 第1部 基本編の構成(1) • 概論 [第1回] • 開発プロセス [第2回] • 基本モデル [第3回] • 静的モデル(1) [第4回] • 静的モデル(2) [第5回] • 動的モデル [第6回] • 協調モデル [第7回] • 関数モデル [第8回] • 物理モデル [第9回] • 作業分野 [第10回] • ビジネス・モデリング [第11回] • 要求 [第12回] • 要求/ユースケース [第13回] • 要求/シナリオ [第14回] • 分析 [第15回] • 分析/コンポーネント分析 [第16回] • 分析/イベント駆動 [第17回] • 作業分野 • 設計 [第18回] • 設計/アーキテクチャ設計 [第19回] • 設計/コンポーネント設計(1) [第20回] • 設計/コンポーネント設計(2) [第21回] • 設計/コンポーネント設計(3) [第22回] • 設計/ドメイン設計(1) [第23回] • 設計/ドメイン設計(2) [第24回] • 設計/ドメイン設計(3) [第25回] • 設計/ドメイン設計(4) [第26回] • 設計/ドメイン設計(5) [第27回] • 設計/原理 [第28回] • 設計/ UX/UI設計 [第29回] • 実装 [第30回] • テスト [第31回]
- 4. 第1部 基本編の構成(2) • アプリケーション・アーキテクチャ [第32回] • ドメイン・モデル [第33回] • アプリケーション・モデル [第34回] • プレゼンテーション・モデル [第35回] • ケーススタディ[第36回] • 要求モデル [第37回] • 分析モデル [第38回] • 設計モデル [第39回] • 実装 [第40回] • テスト [第41回]
- 5. 本講座のアプローチ • オブジェクト指向分析設計の基本を確認 • UML + UP(Unified Process) • CBD (Component-Based Development) • 最新技術でアップデート • クラウド・コンピューティング • イベント駆動、分散・並列 • ビッグデータ、AI、IoT • コンテナ • 関数型 • OFP(Object-Functional Programming), Reactive Streams • ルール, AI • DevOps • アジャイル開発 • DX (Digital Transformation) 第25回 アプリケーション・アーキテクチャ 第2回 開発プロセス 第9回 物理モデル 第11回 ビジネス・モデリング 第2部 クラウド・アプリケーション編 第21回 設計/ドメイン設計 第20回 設計/コンポーネント設計 第2部 クラウド・アプリケーション編
- 6. 原理 (Principle) • Agile Software Development [ASD] • SRP (The Single Responsibility Principle) • OCP (The Open-Close Principle) • LSP (The Liskov Substitution Principle) • … • GRASP (General Responsibility Assignment Software Patterns or principles) • Low Coupling • High Cohesion • … • Writing Effective Use Cases [WEUC] • Scope • …
- 7. パターン (Pattern) • Design Patterns [DP] • Observer, Strategy, … • Domain Driven Design [DDD] • Ubiquitous Language, Intention- Revealing Interfaces, … • Analysis Patterns [AP] • Party, Quantity, … • Pattern-Oriented Software Architecture [POSA] • Layers, Pipes and Filters, … • Patterns of Enterprise Application Architecture [PEAA] • Unit of Work, Data Transfer Object, … • Enterprise Integration Patterns [EIP] • Message Bus, Aggregator, … • Patterns for Effective Use Cases [PEUC] • CompleteSingleGoal, VerbPhraseName, … • AntiPatterns [AnP] • Stovepipe System, Analysis Paralysis, …
- 8. 内容 • UI設計の論点 • UX(User Experience) • 情報アーキテクチャ • UCD & OOAD
- 9. 本講座のUX/UI設計に対するアプローチ • UI設計の詳細には踏み込まない • OOADの観点から、OOADにおけるUI設計の位置付けを整理 • Web系技術との接点をさぐる • 要求モデルの選択 • Webコンテンツとサービスの実現⽅法
- 10. UI設計の論点
- 11. UI設計の論点 • 実現⽅法 • アプリケーションの⽬的 • 利⽤者 • 利⽤シーン • 画⾯サイズ • アプリケーション機能
- 12. 実現⽅法 • CUI (Character User Interface) • 開発者向けの端末UI • メインフレームなどの業務端末 • GUI (Graphical User Interface) • プラットフォーム固有機能を使⽤したグラフィカル機能を⽤いたUI • WindowsやMacのアプリケーション • iPhone/iPadやAndroidなどのモバイル・アプリケーション • WebUI (Web User Interface) • Web(HTML&JavaScript)を⽤いたUI
- 13. アプリケーションの⽬的 • 情報公開 • Webアプリケーションの場合、振る舞いは伴わずコンテンツの公開を ⾏うだけのものがある • UI設計はコンテンツの配置やナビゲーション、画⾯設計になる • サービス提供 • 定型業務 • ビジネス・モデリングで抽出した定型処理が効率よく遂⾏できる観点でUI設計が ⾏われる • ⾮定型業務 • 利⽤者からの⾃由な利⽤も想定したUI設計が必要
- 14. 利⽤者 • ビジネス・ユーザー • ビジネス・システム内のロールを遂⾏するユーザー • ビジネス・モデリングで抽出した定型業務/⾮定型業務が効率よく実⾏ できる観点でUI設計が必要 • コンシュマー • 利⽤者の⽬的や使⽤⽅法が多岐にわたるため、これらの要因を想定し たUI設計が必要
- 15. 利⽤シーン • 会社でデスクトップ • キーボード＆マウス • 資料作成などの更新作業 • コミュニケーション • 居間でタブレット • タッチパネル • 情報閲覧 • コミュニケーション • モバイル • タッチパネル • 情報閲覧 • コミュニケーション • 位置情報を活⽤
- 16. 画⾯サイズ • 種類 • デスクトップ • タブレット • スマートフォン • 画⾯サイズごとに利⽤シーン、利⽤者の⽬的が異なる • 画⾯サイズごとに画⾯設計の⽅針も異なる
- 17. アプリケーション機能 • アプリケーション機能の種類(代表例) • アプリケーション本体 • 管理コンソール • 分析ダッシュボード • アプリケーション機能の種類ごとにUI設計の⽅針が異なる • アプリケーション本体に加えて、運⽤管理やビジネス上の分析 機能といったアプリケーション機能が必要で、それぞれにUIが 必要なる
- 19. ユーザビリティ (Usability) • 特定のユーザが特定の利⽤状況において，システム，製品⼜は サービスを利⽤する際に，効果，効率及び満⾜を伴って特定の ⽬標を達成する度合い。(JIS Z 8521:2020 (ISO 9241-11:2018)) • 有効さ • 効率 • 満⾜度 • 利⽤状況
- 20. UX (User Experience) • ユーザーが製品、システム、サービスとの相互作⽤によって得 られる体験 • 有⽤性 (utility) • 使いやすさ (ease of use) • 効率性 (efficiency)
- 21. UCD (User Centered Design) • HCD (Human Centered Design) : ISO 9241-210:2010 • 開発プロセスのフレームワーク • 開発対象 • 製品、サービス、プロセス • 要素 • ユーザビリティの⽬標 • ユーザーの特性、環境、タスク、ワークフロー
- 22. 情報アーキテクチャ
- 23. 情報アーキテクチャ • IA (Information Architecture) • 共有された情報環境の構造設計 • ⾒つけやすさや使いやすさをサポートするWebサイト、イント ラネット、オンライン・コミュニティ、ソフトウェアの組織化、 ラベリング、検索、ナビゲーション
- 24. Webシステムの構造
- 25. UCDを実現するアーキテクチャ例 『The Elements of User Experience』
- 26. UCD & OOAD
- 27. UCD & OOAD • UCD (User Centered Design) • OOAD (Object-Oriented Analysis & Design) • Webアプリケーション開発での組み合わせ • ポイント • 要求モデルの選択 • Webコンテンツとサービスの実現⽅法
- 29. 要求モデル
- 31. 利⽤者分析 • OOAD (UML/UP) • アクター • OOAD (アジャイル) • ユーザー • UCD • ペルソナ
- 32. シナリオ分析 • OOAD(UML/UP) • ユースケース • OOAD(アジャイル) • ユーザー・ストーリー • ユースケースの軽量版 • オン・サイト・カスタマーと併⽤ • UCD • 構造化シナリオ • 価値のシナリオ • ⾏動のシナリオ • 操作のシナリオ • カスタマー・ジャーニー・マップ • ペルソナの体験のさまざまな要素を⼀枚のマップに記述
- 33. 開発プロセスとモデル
- 34. ユースケース vs ユーザー・ストーリー • ユースケース • 出⾃：OOAD (OOSE) → UML/UP • ユーザの⽬的を達成するための物語 • 要求仕様を軽量級から重量級の詳細度で記述することができる • ユーザー・ストーリー • 出⾃：アジャイル開発 (XP) • ユーザの⽬的を達成するための物語を完結に記述 • オン・サイト・カスタマーと併⽤
- 35. アクター vs ペルソナ • アクター • 出⾃：OOAD(OOSE)→UML/UP • ビジネス・システムの中で定められたロール • ロールに割り当てられた⽬的を達成するためにシステムを利⽤ • ペルソナ • 出⾃：UCD • Webサイトを利⽤するコンシュマー • コンシュマーの⽬的を達成するためにシステムを利⽤ • コンシュマーの⽬的のモデル • コンシュマーの⽬的を達成するシナリオはコンシュマーに依存する
- 36. 本講座のアプローチ • コンシュマー向けのWebサイトの分析ではUCDを⽤いる • コンシュマーの特性の詳細な分析が有効 • 業務アプリケーションの分析ではUPを⽤いる • アクターの定義で⼗分な分析ができる • オン・サイト・カスタマーによって詳細なモデリングが不要な場合は ユーザー・ストーリーを⽤いることも可能 • コンシュマー向けのWebサイトの場合でも、管理コンソールや 分析ダッシュボードなどのビジネス・システム内部で使⽤する ビジネス・アプリケーションはアクター＆ユースケースを⽤い る
- 37. 分析・設計
- 38. 分析・設計 • コンシュマー向けアプリケーションの場合は、ペルソナ＆構造 化シナリオなどの形でシナリオ・モデルが作成される • 業務向けアプリケーションでは、アクター＆ユースケース(また はユーザー・ストーリー)の形でシナリオ・モデルが作成される • いずれの場合もシナリオ・モデルが作成されので、ここからシ ナリオ分析でOOADに合流することができる
- 39. UIアンチ・パターン
- 40. UIとサービス
- 41. 要求モデルとUCD&OOAD
- 42. 本講座のアプローチ • Webのコンテンツ設計はUCD • Webのサービス設計はUCD&OOAD • アプリケーション層、ドメイン層の分析設計はシナリオ・モデ ルからシナリオ分析でOOADに合流する
- 43. まとめ • UX(User Experience) • 情報アーキテクチャ • UCD & OOAD • 要求 • コンシュマー向けアプリケーションはUCD • 業務アプリケーションはOOAD • 分析 • アプリケーション層、ドメイン層の分析設計はシナリオ・モデルからシナリオ分 析でOOADに合流する
- 44. 参考⽂献 • The Unified Modeling Language Reference Manual, 2nd (Rumbaugh他, 2004) • The Unified Modeling Language User Guide, 2nd (Booch他, 2004) • The Unified Software Development Process (Jacobson他, 1999) • The Object Constraint Language, 2nd (Warmer他, 2003) • UML 2 and the Unified Process: Practical Object- Oriented Analysis and Design (Arlow他, 2005) • OMG Unified Modeling Language Version 2.5 (OMG, 2015) • 上流⼯程UMLモデリング (浅海, 2008) • Usability Engineering (Nielsen, 1993) • The User is Always Right : A Practical Guide to Creating and Using Personas for the Web. (Mulder, 2007) • Information Architecture 100 : ユーザーエクスペ リエンスのための情報アーキテクチャ設計 : (⻑⾕川, 2009) • Designing with the Mind in Mind : Simple Guide to Understanding User Interface Design Rules (Johnson, 2010) • The Elements of User Experience : User-Centered Design for the Web and Beyond, 2nd (Garret, 2011) • IA/UXプラクティス : モバイル情報アーキテク チャとUXデザイン (坂本, 2016) • Web制作者のためのUXデザインをはじめる本 : ユーザビリティ評価からカスタマージャー ニーマップまで (⽟飼他, 2016)