|
1 The Patterns of HCI Design: Origin, Perceptions, and Misconceptions |
|
|
1 | (14) |
|
1.1 Original Ideas About Design Pattern |
|
|
1 | (3) |
|
1.2 HCI Design Patterns---A Working Definition |
|
|
4 | (1) |
|
1.3 Examples of Patterns in HCI |
|
|
5 | (2) |
|
|
7 | (2) |
|
1.5 Misconceptions About Design Patterns |
|
|
9 | (1) |
|
1.6 Why and How Design Patterns Can Make a Difference? |
|
|
10 | (5) |
|
|
12 | (3) |
|
2 From HCI Patterns Languages to Pattern-Oriented Design |
|
|
15 | (20) |
|
2.1 Patterns as Tool to Capture Design Knowledge and Best Practices |
|
|
15 | (3) |
|
2.2 HCI Design Pattern Languages |
|
|
18 | (2) |
|
2.3 HCI Pattern Languages and the User-Centered Design Process |
|
|
20 | (2) |
|
2.4 Pattern Supported Approach (PSA) |
|
|
22 | (2) |
|
2.5 Pattern-Oriented Design |
|
|
24 | (7) |
|
2.6 Key Contributions of the Chapter |
|
|
31 | (4) |
|
|
32 | (3) |
|
3 HCI Design Patterns as a Building Block in Model-Driven Engineering |
|
|
35 | (24) |
|
|
35 | (1) |
|
3.2 Patterns and User Interface Model-Driven Engineering |
|
|
36 | (2) |
|
3.3 Pattern-Driven and MBUI (PD-MBUI) Framework |
|
|
38 | (3) |
|
3.3.1 Basic Concepts and Terminology |
|
|
38 | (1) |
|
3.3.2 PD-MBUI Major Models |
|
|
39 | (2) |
|
|
41 | (3) |
|
3.4.1 HCI Patterns Taxonomy and Samples |
|
|
41 | (1) |
|
3.4.2 Patterns Instantiation and Application |
|
|
41 | (3) |
|
3.5 Examples of Models Construction Using Patterns |
|
|
44 | (6) |
|
3.5.1 Patterns in Task Modeling |
|
|
44 | (2) |
|
3.5.2 Patterns in Dialog Modeling |
|
|
46 | (1) |
|
3.5.3 Patterns in Presentation Modeling |
|
|
47 | (1) |
|
3.5.4 Patterns in Layout Management Modeling |
|
|
48 | (2) |
|
3.6 An Illustrative Case Study |
|
|
50 | (6) |
|
|
50 | (2) |
|
3.6.2 Completing the Find Room Task |
|
|
52 | (1) |
|
3.6.3 Designing the Dialog Structure |
|
|
52 | (2) |
|
3.6.4 Defining the Presentation and Layout Model |
|
|
54 | (2) |
|
3.7 Key Contributions of This Chapter |
|
|
56 | (3) |
|
|
58 | (1) |
|
4 Adding Usability Quality Attributes into Interactive Systems Architecture: A Pattern-Based Approach |
|
|
59 | (22) |
|
4.1 Software Architecture---A Definition |
|
|
59 | (2) |
|
4.2 Drawbacks and Fundamentals |
|
|
61 | (1) |
|
4.3 A Pattern-Based Integration of Usability in Architecture |
|
|
62 | (1) |
|
4.4 Identifying and Categorizing Typical Scenarios |
|
|
63 | (4) |
|
4.5 From Scenario to Design Patterns |
|
|
67 | (8) |
|
4.5.1 System Design Patterns |
|
|
68 | (4) |
|
4.5.2 Interaction Design (HCI) Patterns |
|
|
72 | (3) |
|
4.6 Modeling the Cause--Effect Relationships Between the Model and User Interface |
|
|
75 | (3) |
|
|
78 | (1) |
|
4.8 Key Contributions of this Chapter |
|
|
79 | (2) |
|
|
80 | (1) |
|
5 A Pattern Framework for Task Modeling in Smart Environments |
|
|
81 | (28) |
|
5.1 Task Modeling for User Interface |
|
|
81 | (1) |
|
5.2 Proposed Pattern Framework for Task Modeling |
|
|
82 | (1) |
|
5.3 Task Modeling Patterns Notation |
|
|
83 | (7) |
|
5.3.1 The Model-Based Approach We Used |
|
|
83 | (1) |
|
|
84 | (6) |
|
5.4 Pattern References and Pattern Interfaces |
|
|
90 | (6) |
|
5.4.1 Example of a Pattern |
|
|
90 | (1) |
|
5.4.2 Application of Patterns |
|
|
91 | (5) |
|
5.5 Case Study: Task Modelling in Smart Environments |
|
|
96 | (8) |
|
|
104 | (5) |
|
|
105 | (4) |
|
6 HCI Patterns in Multiplatform Mobile Applications Reengineering |
|
|
109 | (14) |
|
6.1 On the Needs for Reengineering |
|
|
109 | (2) |
|
6.2 Steps in User Interface Reengineering |
|
|
111 | (2) |
|
6.2.1 Reverse Engineering |
|
|
111 | (1) |
|
|
112 | (1) |
|
6.2.3 Forward Engineering |
|
|
112 | (1) |
|
6.3 Patterns in Reengineering |
|
|
113 | (3) |
|
6.3.1 A Brief Overview on Patterns |
|
|
113 | (1) |
|
6.3.2 The Various Role of Patterns in the UI Reengineering Process |
|
|
114 | (2) |
|
6.4 Examples of UI Reengineering with Patterns |
|
|
116 | (5) |
|
6.4.1 Migration from Text-Based to GUI for Legacy Interactive Systems |
|
|
116 | (1) |
|
6.4.2 Reengineering a Web-Based Interface for Small Devices |
|
|
117 | (1) |
|
6.4.3 Reengineering Navigation Systems to different Architecture Sizes |
|
|
118 | (3) |
|
6.5 Key Issues and Contributions |
|
|
121 | (2) |
|
|
121 | (2) |
|
7 Generative Patterns for Cross-Platform User Interfaces: The Case of the Master-Detail Pattern |
|
|
123 | (32) |
|
|
123 | (2) |
|
|
125 | (8) |
|
7.2.1 Master-Detail Pattern---An Operational Definition |
|
|
125 | (2) |
|
7.2.2 The M-D Pattern Usage in Pattern Collections |
|
|
127 | (1) |
|
7.2.3 The Master-Detail as a Generative Pattern |
|
|
128 | (2) |
|
7.2.4 Previous Work on M-D Pattern |
|
|
130 | (2) |
|
7.2.5 Shortcomings and Requirements |
|
|
132 | (1) |
|
7.3 Revisiting the M-D Pattern Description |
|
|
133 | (3) |
|
7.4 Integrate the M-D Pattern in the Whole UI Development Process |
|
|
136 | (9) |
|
|
136 | (1) |
|
|
136 | (3) |
|
7.4.3 Abstract User Interface Model |
|
|
139 | (1) |
|
7.4.4 Concrete User Interface |
|
|
139 | (1) |
|
7.4.5 The M-D Pattern Application Support Toward FUI |
|
|
140 | (5) |
|
7.5 The M-D Pattern Application Support |
|
|
145 | (5) |
|
7.5.1 Support for M-D Pattern Application |
|
|
146 | (2) |
|
7.5.2 M-D Pattern Presentation for Tabbed List Presentation in Mobile Application |
|
|
148 | (1) |
|
7.5.3 M-D Pattern in Grouped, Ordered, or Structured List Presentation |
|
|
149 | (1) |
|
7.6 Contributions of the Chapter |
|
|
150 | (5) |
|
|
151 | (4) |
|
8 POMA: Pattern-Oriented and Model-Driven Architecture |
|
|
155 | (26) |
|
|
155 | (2) |
|
|
157 | (1) |
|
|
157 | (2) |
|
8.4 POMA Specifications and Representation |
|
|
159 | (1) |
|
8.4.1 The eXtensible Markup Language (XML) Notation |
|
|
159 | (1) |
|
8.4.2 The Unified Modeling Language (UML) Notation |
|
|
160 | (1) |
|
8.5 Architectural Levels and Categories of Patterns, Composition, and Mapping Rules |
|
|
160 | (15) |
|
8.5.1 Architectural Levels and Categories of Patterns |
|
|
161 | (7) |
|
8.5.2 Patterns Composition |
|
|
168 | (1) |
|
|
169 | (6) |
|
8.6 Model Categorizations |
|
|
175 | (4) |
|
|
176 | (1) |
|
|
176 | (1) |
|
|
177 | (1) |
|
|
177 | (1) |
|
|
178 | (1) |
|
8.6.6 Transformation Rules |
|
|
178 | (1) |
|
8.7 Key Issues and Contributions |
|
|
179 | (2) |
|
|
179 | (2) |
|
9 Patterns in Web-Based Information Systems |
|
|
181 | (38) |
|
|
181 | (2) |
|
9.2 Design Challenges of Web Applications |
|
|
183 | (2) |
|
9.3 Web Design Principles |
|
|
185 | (1) |
|
9.4 Case Study: A Detailed Discussion |
|
|
186 | (29) |
|
|
186 | (2) |
|
9.4.2 Defining the Domain Model |
|
|
188 | (5) |
|
9.4.3 Defining the Task Model |
|
|
193 | (8) |
|
9.4.4 Defining the Dialog Model |
|
|
201 | (4) |
|
9.4.5 Defining the Presentation and Layout Models |
|
|
205 | (10) |
|
9.5 Key Issues and Contributions |
|
|
215 | (4) |
|
|
216 | (3) |
|
10 HCI Pattern Capture and Dissemination: Practices, Lifecycle, and Tools |
|
|
219 | (24) |
|
10.1 Capture and Reuse of HCI (Human--Computer Interaction) Patterns |
|
|
219 | (2) |
|
10.2 A Survey on Patterns Usages |
|
|
221 | (4) |
|
10.2.1 The Survey Structure and Population |
|
|
222 | (1) |
|
10.2.2 Analysis Method and Key Findings |
|
|
222 | (3) |
|
10.3 An Extended Schema for Representing Patterns |
|
|
225 | (4) |
|
|
225 | (1) |
|
10.3.2 A Schema for a Generalized Pattern Model |
|
|
226 | (3) |
|
10.4 Modeling the Pattern Discovery and Dissemination Life Cycle |
|
|
229 | (5) |
|
10.4.1 The Challenges of Dissemination |
|
|
230 | (1) |
|
10.4.2 The 7C's Lifecycle for Collection and Dissemination of Patterns |
|
|
230 | (3) |
|
10.4.3 Qualities of Design Patterns |
|
|
233 | (1) |
|
10.5 Tools Support for Pattern Reuse and Dissemination |
|
|
234 | (6) |
|
10.5.1 An Online Database for Patterns Documentation and Sharing |
|
|
235 | (2) |
|
10.5.2 Pattern-Based Assisted Dissemination and Design Environment |
|
|
237 | (3) |
|
|
240 | (3) |
|
|
241 | (2) |
|
11 PatternCity: A Gamification Approach to Collaborative Discovery and Delivery of HCI Design Pattern |
|
|
243 | (16) |
|
|
243 | (1) |
|
11.2 The Problem of Representing and Delivering HCI Design Patterns |
|
|
244 | (11) |
|
|
246 | (1) |
|
|
247 | (2) |
|
11.2.3 The PatternCity Concept |
|
|
249 | (2) |
|
|
251 | (4) |
|
|
255 | (4) |
|
|
256 | (1) |
|
|
257 | (2) |
|
12 A Pedagogic Pattern Model for Upskilling Software Engineering Students in HCI Design Practice |
|
|
259 | |
|
|
259 | (3) |
|
12.2 A Five-Step Approach to Using a Pedagogic Pattern Model |
|
|
262 | (3) |
|
12.2.1 General Description and Context |
|
|
263 | (1) |
|
12.2.2 Spatiotemporal Boundary Markers |
|
|
263 | (1) |
|
12.2.3 Overall Action Plan of Pedagogical Techniques/Tools |
|
|
264 | (1) |
|
12.2.4 Group Interactions Between Poles of the Pedagogic Triangle |
|
|
265 | (1) |
|
|
265 | (1) |
|
12.3 Case Study in HCI Design |
|
|
265 | (5) |
|
|
265 | (1) |
|
12.3.2 Spatiotemporal Boundary Markers |
|
|
266 | (1) |
|
12.3.3 Action Plan of Pedagogical Techniques or Tools Used |
|
|
267 | (2) |
|
12.3.4 Group Interactions at Each Pole of the Pedagogic Triangle |
|
|
269 | (1) |
|
|
270 | (1) |
|
|
270 | |
|
|
271 | |