Patterns of HCI Design and HCI Design of Patterns (eBook)

Executive Summary 7
Audience 9
Book Structure and Contributions 10
Contents 12
Chapter-1 17
The Patterns of HCI Design: Origin, Perceptions, and Misconceptions 17
1.1 Original Ideas About Design Pattern 17
1.2 HCI Design Patterns—A Working Definition 20
1.3 Examples of Patterns in HCI 21
1.4 Pattern Benefits 23
1.5 Misconceptions About Design Patterns 25
1.6 Why and How Design Patterns Can Make a Difference? 26
References 28
Chapter-2 30
From HCI Patterns Languages to Pattern-Oriented Design 30
2.1 Patterns as Tool to Capture Design Knowledge and Best Practices 30
2.2 HCI Design Pattern Languages 33
2.3 HCI Pattern Languages and the User-Centered Design Process 35
2.4 Pattern Supported Approach (PSA) 37
2.5 Pattern-Oriented Design 39
2.6 Key Contributions of the Chapter 46
References 47
Chapter-3 49
HCI Design Patterns as a Building Block in Model-Driven Engineering 49
3.1 Motivations 49
3.2 Patterns and User Interface Model-Driven Engineering 50
3.3 Pattern-Driven and MBUI (PD-MBUI) Framework 52
3.3.1 Basic Concepts and Terminology 52
3.3.2 PD-MBUI Major Models 53
3.4 Examples of Patterns 55
3.4.1 HCI Patterns Taxonomy and Samples 55
3.4.2 Patterns Instantiation and Application 55
3.5 Examples of Models Construction Using Patterns 58
3.5.1 Patterns in Task Modeling 58
3.5.2 Patterns in Dialog Modeling 60
3.5.3 Patterns in Presentation Modeling 61
3.5.4 Patterns in Layout Management Modeling 62
3.6 An Illustrative Case Study 64
3.6.1 The Task Model 64
3.6.2 Completing the Find Room Task 66
3.6.3 Designing the Dialog Structure 66
3.6.4 Defining the Presentation and Layout Model 68
3.7 Key Contributions of This Chapter 70
References 72
Chapter-4 73
Adding Usability Quality Attributes into Interactive Systems Architecture: A Pattern-Based Approach 73
4.1 Software Architecture—A Definition 73
4.2 Drawbacks and Fundamentals 75
4.3 A Pattern-Based Integration of Usability in Architecture 76
4.4 Identifying and Categorizing Typical Scenarios 77
4.5 From Scenario to Design Patterns 81
4.5.1 System Design Patterns 82
4.5.2 Interaction Design (HCI) Patterns 86
4.6 Modeling the Cause–Effect Relationships Between the Model and User Interface 89
4.7 Application 92
4.8 Key Contributions of this Chapter 93
References 94
Chapter-5 95
A Pattern Framework for Task Modeling in Smart Environments 95
5.1 Task Modeling for User Interface 95
5.2 Proposed Pattern Framework for Task Modeling 96
5.3 Task Modeling Patterns Notation 97
5.3.1 The Model-Based Approach We Used 97
5.3.2 Pattern Notation 98
5.3.2.1 Structure Attributes 100
5.3.2.2 Variable Declarations and Assignments 102
5.4 Pattern References and Pattern Interfaces 104
5.4.1 Example of a Pattern 104
5.4.2 Application of Patterns 105
5.5 Case Study: Task Modelling in Smart Environments 110
5.6 Summary 118
References 119
Chapter-6 122
HCI Patterns in Multiplatform Mobile Applications Reengineering 122
6.1 On the Needs for Reengineering 122
6.2 Steps in User Interface Reengineering 124
6.2.1 Reverse Engineering 124
6.2.2 Transformation 125
6.2.3 Forward Engineering 125
6.3 Patterns in Reengineering 126
6.3.1 A Brief Overview on Patterns 126
6.3.2 The Various Role of Patterns in the UI Reengineering Process 127
6.4 Examples of UI Reengineering with Patterns 129
6.4.1 Migration from Text-Based to GUI for Legacy Interactive Systems 129
6.4.2 Reengineering a Web-Based Interface for Small Devices 130
6.4.3 Reengineering Navigation Systems to different Architecture Sizes 131
6.5 Key Issues and Contributions 134
References 134
Chapter-7 136
Generative Patterns for Cross-Platform User Interfaces: The Case of the Master-Detail Pattern 136
7.1 Introduction 136
7.2 Related Work 138
7.2.1 Master-Detail Pattern—An Operational Definition 138
7.2.2 The M-D Pattern Usage in Pattern Collections 140
7.2.3 The Master-Detail as a Generative Pattern 141
7.2.4 Previous Work on M-D Pattern 143
7.2.5 Shortcomings and Requirements 145
7.3 Revisiting the M-D Pattern Description 146
7.4 Integrate the M-D Pattern in the Whole UI Development Process 149
7.4.1 Task Model 149
7.4.2 Domain Model 149
7.4.3 Abstract User Interface Model 152
7.4.4 Concrete User Interface 152
7.4.5 The M-D Pattern Application Support Toward FUI 153
7.4.5.1 Description of the Framework Supporting the M-D Pattern in Abstract High Level UI Models 155
7.4.5.2 Possible Presentation Options Toward FUI Model 156
7.5 The M-D Pattern Application Support 158
7.5.1 Support for M-D Pattern Application 159
7.5.2 M-D Pattern Presentation for Tabbed List Presentation in Mobile Application 161
7.5.3 M-D Pattern in Grouped, Ordered, or Structured List Presentation 162
7.6 Contributions of the Chapter 163
References 164
Chapter-8 167
POMA: Pattern-Oriented and Model-Driven Architecture 167
8.1 Key Concepts of POMA 167
8.2 POMA Overview 169
8.3 POMA Justifications 169
8.4 POMA Specifications and Representation 171
8.4.1 The eXtensible Markup Language (XML) Notation 171
8.4.2 The Unified Modeling Language (UML) Notation 172
8.5 Architectural Levels and Categories of Patterns, Composition, and Mapping Rules 172
8.5.1 Architectural Levels and Categories of Patterns 173
8.5.1.1 Information Patterns 173
8.5.1.2 Interoperability patterns 176
8.5.1.3 Visualization Patterns 177
8.5.1.4 Navigation Patterns 178
8.5.1.5 Interaction Patterns 178
8.5.1.6 Presentation Patterns 179
8.5.2 Patterns Composition 180
8.5.3 Patterns Mapping 181
8.6 Model Categorizations 187
8.6.1 Domain Model 188
8.6.2 Task Model 188
8.6.3 Dialog Model 189
8.6.4 Presentation Model 189
8.6.5 Layout Model 190
8.6.6 Transformation Rules 190
8.7 Key Issues and Contributions 191
References 191
Chapter-9 193
Patterns in Web-Based Information Systems 193
9.1 Introduction 193
9.2 Design Challenges of Web Applications 195
9.3 Web Design Principles 197
9.4 Case Study: A Detailed Discussion 198
9.4.1 Overview 198
9.4.2 Defining the Domain Model 200
9.4.3 Defining the Task Model 205
9.4.4 Defining the Dialog Model 213
9.4.5 Defining the Presentation and Layout Models 217
9.5 Key Issues and Contributions 227
References 228
Chapter-10 230
HCI Pattern Capture and Dissemination: Practices, Lifecycle, and Tools 230
10.1 Capture and Reuse of HCI (Human–Computer Interaction) Patterns 230
10.2 A Survey on Patterns Usages 232
10.2.1 The Survey Structure and Population 233
10.2.2 Analysis Method and Key Findings 233
10.2.2.1 Who Develops the User Interface? Who are the Users of Patterns? 234
10.2.2.2 The Current Practices of Guidelines and Patterns 234
10.2.2.3 The Status of Pattern Tools 235
10.2.2.4 The Mainstream Perception About Patterns 235
10.3 An Extended Schema for Representing Patterns 236
10.3.1 Why a Schema? 236
10.3.2 A Schema for a Generalized Pattern Model 237
10.4 Modeling the Pattern Discovery and Dissemination Life Cycle 240
10.4.1 The Challenges of Dissemination 241
10.4.2 The 7C’s Lifecycle for Collection and Dissemination of Patterns 241
10.4.2.1 Combine—Place Different Pattern Languages in One Central Place 242
10.4.2.2 Clear Out—Add on the Top the Different Formats, One Unifying Description 242
10.4.2.3 Certify—Define a Domain and Clear Terminology 242
10.4.2.4 Contribute—Receive Input from Pattern Community 243
10.4.2.5 Connect—Establishing Semantic Relationships Between Patterns 243
10.4.2.6 Categorize—Mapping Patterns into the Assimilation Channels 243
10.4.2.7 Control—Machine Readable Format for Future Tools 243
10.4.3 Qualities of Design Patterns 244
10.4.3.1 Formality 244
10.4.3.2 Practicality 244
10.4.3.3 Experience 244
10.4.3.4 Reusability 245
10.4.3.5 Abstract, Modular Framework 245
10.4.3.6 Community 245
10.5 Tools Support for Pattern Reuse and Dissemination 245
10.5.1 An Online Database for Patterns Documentation and Sharing 246
10.5.2 Pattern-Based Assisted Dissemination and Design Environment 248
10.5.2.1 Usability Pattern-Assisted Design Environment (UPADE) Architecture 248
10.5.2.2 Key Features Offered to Both Pattern Authors and Users 249
10.6 Key Contributions 251
References 252
Chapter-11 254
PatternCity: A Gamification Approach to Collaborative Discovery and Delivery of HCI Design Pattern 254
11.1 Introduction 254
11.2 The Problem of Representing and Delivering HCI Design Patterns 255
11.2.1 Early Prototype 257
11.2.2 Exploration Phase 258
11.2.2.1 Pattern of Minesweeping 258
11.2.2.2 Metaphors for Learning Patterns 259
11.2.2.3 Metaphors for Recognizing Patterns 260
11.2.3 The PatternCity Concept 260
11.2.3.1 Pattern Buildings 260
11.2.3.2 Players 261
11.2.4 Implementation 262
11.2.4.1 The Top Bar 263
11.2.4.2 The Bottom Bar 263
11.2.4.3 The Street View 264
11.2.4.4 The Accordion Pattern 264
11.3 Conclusion 266
Appendix A 267
References 268
Chapter-12 269
A Pedagogic Pattern Model for Upskilling Software Engineering Students in HCI Design Practice 269
12.1 Introduction 269
12.2 A Five-Step Approach to Using a Pedagogic Pattern Model 272
12.2.1 General Description and Context 273
12.2.2 Spatiotemporal Boundary Markers 273
12.2.3 Overall Action Plan of Pedagogical Techniques/Tools 274
12.2.4 Group Interactions Between Poles of the Pedagogic Triangle 275
12.2.5 Feedback 275
12.3 Case Study in HCI Design 275
12.3.1 Protocol 275
12.3.2 Spatiotemporal Boundary Markers 276
12.3.3 Action Plan of Pedagogical Techniques or Tools Used 277
12.3.4 Group Interactions at Each Pole of the Pedagogic Triangle 279
12.3.5 Feedback 280
12.4 Conclusions 280
References 281