CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Chapter 13 Design Patterns “A pattern is a named nugget of insight which conveys the essence of a proven solution to a recurring problem within a certain context amidst competing concerns.” Brad Appleton A way of capturing a description of a particular problem and a good solution to that problem The intent of each design pattern is to provide a description that enables a designer to determine (1) whether the pattern is applicable to the current work (2) whether the pattern can be reused (hence, saving design time), and: (3) whether the pattern can serve as a guide for developing a similar, but functionally or structurally different pattern.

CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Design Pattern Template Pattern name. Describes the essence of the pattern in a short but expressive name Intent. Describes the pattern and what it does Also-known-as. Lists any synonyms for the pattern Motivation. Provides an example of the problem Applicability. Notes specific design situations in which the pattern is applicable Structure. Describes the classes that are required to implement the pattern Participants. Describes the responsibilities of the classes that are required to implement the pattern Collaborations. Describes how the participants collaborate to carry out their responsibilities Consequences. Describes the “design forces” that affect the pattern and the potential trade-offs that must be considered when the pattern is implemented Related patterns. Cross-references related design patterns

CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Types of Design Patterns Information architecture patterns relate to the overall structure of the information space and the ways in which users will interact with the information. Navigation patterns define navigation link structures, such as hierarchies, rings, and tours. Interaction patterns contribute to the design of the user interface. Patterns in this category address how the interface informs the user of the consequences of a specific action, how a user expands content based on usage context and user desires, how to best describe the destination that is implied by a link, and how to inform the user about the status of an ongoing interaction, and interface-related issues. Presentation patterns assist in the presentation of content to the user via the interface. Functional patterns define the workflows, behaviors, processing, communications, and other algorithmic elements within a WebApp.

CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Granularity When a problem involves “big picture” issues, we attempt to develop solutions (and use relevant patterns) that focus on the big picture. Conversely, when the focus is very narrow (e.g., uniquely selecting one item from a small set of five or fewer items), the solution (and the corresponding pattern) is targeted quite narrowly. In terms of the level of granularity, patterns can be described at the following levels: WebApp. Relates to architectural patterns that define the overall structure of the application, indicates the relationships among different components or increments, and defines the rules for specifying relationships among the elements (pages, packages, components, subsystems) of the architecture. Page/screen/subsystem. Addresses a specific element of the design such as an aggregation of components, relationships among elements on a page, or the mechanisms for effecting component-to-component communication. Component. Component patterns relate to individual small-scale elements of a WebApp. Examples include individual interaction elements (e.g. radio buttons, textbooks), navigation items (e.g., how you might format links), or functional elements (e.g., specific algorithms).

CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Pattern Repositories An organized collection of proven patterns that may be of use to a WebE team. In essence, it is a database that enables you describe and find existing patterns Table 13.1 (p. 332) provides a list of patterns repositories A patterns repository grows and evolves as time passes. A good WebE team (or rather, a Web shop which has multiple teams) will establish a process for capturing new patterns as they are identified.

CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Finding Patterns Possible patterns might be identified in one of two ways: Based on the characteristics of the problem at hand, a repository is searched and one or more candidate patterns emerge. Patterns in the repository are browsed in a more general fashion in the hope of finding a pattern that matches the problem at hand. The information contained within the pattern template is evaluated by asking the following questions: Is the pattern appropriate for the WebApp domain? That is, is the context appropriate? Is the pattern indeed appropriate for the design focus and granularity of the problem? Can the pattern be used without making any trade-offs or compromises that are incompatible with the current WebApp design? Can the pattern be used without making any trade-offs or compromises that are incompatible with other elements of the design?

CMPS 435 F08 These slides are designed to accompany Web Engineering: A Practitioner’s Approach (McGraw-Hill 2008) by Roger Pressman and David Lowe, copyright Example Pattern Providing a navigation context: Map Navigator* Problem:Users need to find a location of choice on a map. Use when: The site has the possibility to search for a special location. For example, a corporate site or e-commerce site may have a store locator to allow users to find a physical store. In other cases, such as a website that allows people to find arbitrary destinations, users will see their search results as positions on a map. Solution:Show a map with the points of interest and provide navigation links in all corners. The map is displayed with the points of interest (POIs) in the center of the image. Mark different POIs using different flags or colors, and provide a legend explaining them. If there is only one POI, provide the exact details of that POI. When there are multiple POIs, minesweeping [another pattern] can be used to display details of the POI as the user moves the mouse over it. Users can move their “window” on the map by selecting any of the navigation links in the corners. The page will reload and show a slightly different portion of the map. Add zooming, and indicate the scale of the map. Many people may want to print the map so that they can take it with them, so a printer-friendly page must be available. Why: We know maps from the real world, and we are comfortable with seeing them on the Web. The navigation features are not ideal on the Web since it requires reloading of the page, but this will not lead to usability problems … From Welie.com interaction design patterns website at (accessed at 13-Aug-2007)