Patterns of HCI Design and HCI Design of Patterns

During last decade, several human–computer interaction (HCI) researchers and practitioners introduced their own pattern languages with specific terminology and classification. Pattern languages have been considered as a lingua franca for crossing cultural and professional barriers between different stakeholders. Pattern languages have also been presented as building blocks at different levels of granularity, which can be combined to compose new interactive systems. Despite the obvious and acclaimed potential for supporting design, patterns languages has not achieved the acceptance and widespread applicability envisaged by their authors.This chapter provides an analysis of the facts about pattern languages and pattern-based design approaches. Some shortcomings in the presentation and application of HCI patterns languages are identified and discussed under the prevailing fallacies. Based on the analysis of how pattern languages have been used so far, we draw some recommendations and future perspectives on what can be done to address the existing shortcomings. Making pattern languages more accessible, easily understandable, comparable and integratable in software, and usability in engineering tools can promote HCI patterns to claim the usability, usefulness, and importance originally envisaged for the pattern-oriented design approach.

The main idea surrounding Model-Based User Interface (MBUI) engineering is to identify useful abstractions that highlight the core aspects and properties of an interactive system and its design. These abstractions are instantiated and iteratively transformed at different levels to create a concrete user interface. However, certain limitations prevent user interface (UI) developers from adopting model-based approaches for UI engineering. One such limitation is the lack of reusability of best design practices and knowledge within such approaches. With a view to fostering reuse in the instantiation and transformation of models, we introduce patterns as building blocks, which can be first used to construct different models and then instantiated into concrete UI artifacts. In particular, we will demonstrate how different kinds of patterns can be used as modules for establishing task, dialog, presentation, and layout models. Starting from an outline of the general process of pattern application, an interface for combining patterns and a possible formalization are suggested. The Task Pattern Wizard, tool we developed, uses an eXtensible markup language (XML approach. It is built on eXtensible user languages (XUL)-based. This tool helps designers for selecting, adapting, and applying patterns to task models. In addition, an extended example will illustrate the intimate complicity of several patterns and the proposed model-driven approach.

Traditional interactive system architectures such as MVC (Model, View, Controller) and PAC (Presentation, Abstraction and Control) decompose the system into subsystems that are relatively independent, thereby allowing the design work to be partitioned between the user interfaces (UI) and underlying functionalities. Such architectures also extend the independence assumption to usability, approaching the design of the UI as a subsystem that can be designed and tested independently from the underlying functionality. This Cartesian dichotomy can be dangerous, as functionalities buried in the application’s logic can sometimes affect the usability of the system. Likewise, in a design process where usability aspects are incorporated early on, they can affect the architecture of the system.

Our investigations model the relationships between internal software attributes and externally visible usability factors. We propose a pattern approach for modeling these relationships and for providing an effective solution. We conclude by discussing how these enhanced patterns with usability measures can lead to development approach for improving interactive system architectures, and how these patterns can support the integration of usability in the software design process.

Although, the wide range of tools that exist to support model-based approaches, creating various models, transforming, and linking them is still a time consuming and complex activity. In addition, model-based approaches lack an advanced concept of reuse of already modeled solutions. In this chapter, an attempt to overcome the high complexity of the modelling process of applications is presented. It will be shown that patterns may be employed to avoid these disadvantages, since they provide an advanced concept of reuse by definition. After introducing the concept of pattern-driven and task-based development in general concrete tool support will be discussed. In addition, the role of task models for smart environments will be discussed. Specific task patterns for this domain will be discussed as well.

With the advent of the Internet and mobile computing, more and more human–computer interaction (HCI) designers are asked to reengineer user interface (UI) for accommodating a diversity of users while taking into account variations in geographical regions, population, languages, and cultures. Developers are asked to implement the same UI with a variation of functionalities using diverse and continually changing development languages. The lack of methods that help developers with UI reengineering motivated us to explore patterns-oriented reengineering.

In this chapter, we demonstrate how patterns can drive the whole reengineering design process when dealing with the constraints of each computing platform. To illustrate our ideas, several examples will be described including how to adapt a Web navigation system to different sizes and models of abstract information structure (architecture) and to different contexts of use. We wish to ground our pattern-driven reengineering methodology as solidly as possible in empirical data and theoretical principles. In order to build the theoretical foundation of our framework, this chapter relies on a combination of proven facts, best-guess assumptions, and logic. In the long term, we will return to cover the individual issues in more detail and with more empirical and formal proof.

To become valuable, such design patterns should encode the structure of a solution and its associated forces, rather than cataloguing just a solution, often for a specific platform. We introduce the generative pattern as a way of both documenting and implementing the human–computer interaction (HCI) patterns. A generative pattern not only tells us the rules for implementing a user interface (UI) design is considered as a generic solution to a problem at different levels of abstraction (in the way that a UI could be modeled), but also shows us how to transform these expressions into programmable codes for the diverse computing platforms, while being compliant with the style guide rules that may prevail for these platforms. As a case study, the master-detail (M-D) pattern, one popular and frequently used HCI design pattern, is developed: this displays a master list of items and the details for any selected item. While this MD pattern is documented in very different, possibly inconsistent, ways across various computing platforms, the M-D generative pattern consolidates these particular implementations into a high-level pattern description based on design options that are independent of any platform, thus making this pattern “cross-platform.” A framework provides developers and designers with a high level UI process to implement this pattern in using different instances and its application in some designated languages. Some examples of applying an M-D generative pattern are explained as well as a particular implementation for the Android platform.

The proposed pattern-oriented and model-driven architecture (POMA) architecture illustrates how several individual models can be combined at different levels of abstraction into heterogeneous structures, which can then be used as building blocks in the development of interactive systems. This chapter presents the key concepts, an overview, justifications, and specifications of the proposed POMA architecture, a detailed description of architectural levels and categories of patterns used in the proposed POMA architecture, and a detailed description of five levels and categories of models used by POMA. First, we describe the model categorization as well as the key concepts of POMA. We detail POMA while comparing its architecture with N-tiers architectures, pattern-oriented design and architecture (POD), and model-driven architecture (MDA). We describe the architectural levels and categories of patterns including pattern composition rules (i.e., the relationships between pattern considered in this architecture). We describe the pattern mapping rules that enable one to obtain the final models of the proposed architecture. Finally, we define model transformation rules which apply for each type of model, [POMA.PIM] (Platform Independent Model) or [POMA.PSM] (Platform Specific Model). These rules build a relationship between models of each category, i.e., models [POMA.PIM] and [POMA.PSM].

Day-to-day experiences suggest that it is not enough to approach Web-application engineering armed with Web guidelines and user manuals on how to use the underlying technologies, such as Java and Simple Object Access Protocol (SOAP). Many of the Web designer and user problems tend to recur in various projects. Web designers often try to reinvent design solutions from scratch. Developers must be able to use proven design solutions emerging from the best design practices to solve common problems. Without this, the designer will not properly apply Web guidelines, or take full benefit of the power of Web technology, resulting in poor performance, poor scalability, and poor usability of the developed applications. In this chapter, we introduce different types of Web design patterns as a vehicle for capturing and disseminating good designs while detailing a motivating example on how Web design patterns can be combined to create a home page. Our investigations are based on several years of Web applications development, ethnographic interviews with Web developers, as well as suggestions from others. Such suggestions include reported best practices for using patterns as a bridge over the gaps between the design practices and software tools. Our experiences also highlighted that in order to render the patterns understandable by novice designers and software engineers who are unfamiliar with Web engineering, patterns should be represented to developers using a flexible structure, to make it easy for the pattern authors, reviewers, and users.

Despite the huge number of human–computer interaction (HCI) design patterns available, it has been recently identified that patterns are still difficult to find and apply, especially by patterns users, mainly software developers. In this chapter, we argue and demonstrate that the lack of an effective pattern representation is one of the main reasons for this problem. We discussed the idea of pattern lifecycle how it can lead to an environment for not only capturing and delivering patterns, but that also can automate the pattern lifecycle including the generation of applications from a pattern-oriented design. At the core of such environment, the concept of generative pattern has been introduced in other chapters.

Huge frustration is observed among the pattern users—the developers and novice designers using patterns to develop software products—as they usually spend a significant amount of time just to find the right pattern for their use from a very large and heterogeneous collection of patterns that are available via different websites and databases. Since software developers are used to working under a tight schedule in various environments with different needs, they should find patterns in a clear and understandable format or ready-to-go state along with a proper organization.

In this chapter, we describe a pedagogical pattern process that structures and transcribes salient points of simulation-based learning applied to Human–Computer Interface (HCI) design. First, we outline Christopher Alexander’s pattern language design theory. Second, we examine Jean Houssaye’s trialectic Pedagogic Triangle. Then, we combine key aspects of Alexander’s and Houssaye’s theories in order to document instructional practices in the teaching of engineering design. The practical and theoretical relevance of our unique approach is summarized in our Pedagogic Pattern Model (PPM). The model examines the instructional practices of experienced university instructors involved in HCI design courses. Through collective analysis, PPM focuses on capturing reflective classroom experiences via structured case studies of teaching HCI design practice.