Pattern-Based DesignSEII-Lecture 13

Dr. Muzafar KhanAssistant ProfessorDepartment of Computer ScienceCIIT, Islamabad.

2

Recap

• Interface analysis– User analysis, task analysis and modeling, analysis of display content

and work environment• Interface design steps• Design issues

– System response time, user help facilities, error information handling, menu and command labeling, application accessibility, internationalization

• Web application design interface guidelines– Anticipation, communication, consistency, controlled autonomy,

efficiency, flexibility, focus, Fitt’s law, learnability, readability, metaphors

• Design Evaluation

3

Design Patterns

• “Each pattern describes a problem that occurs over and over again in our environment and then describes the core of the solution to that problem in such a way that you can use the solution a million times over without ever doing it the same way twice.” [C. Alexander]

• Context, problem, and solution• Reuse rather than reinventing the wheel

4

Effective Design Pattern

• Coplien (2005)• It solves a problem– Solution, not principles/strategies

• It is a proven concept– Proven track record, not theories

• The solution is not obvious– Indirect solution

• It describes a relationship– Deeper system structures / mechanisms

• It has a significant human component– Aesthetic and utility

5

Types of Patterns [1/2]• Architecture patterns

– Structure related– Examples: pipes and filters, adapter, proxy, bridge

• Data patterns– Data related– Examples: data replication, master-master replication

• Component / design patterns– Subsystems related– Examples: Add another, build an expression, slide down

• Interface design patterns– User interface related– Examples: breadcrumb, card stack, wizard, simple search

• Webapp patterns– Webapp related– Examples: advanced search, search area, search tips

6

Types of Patterns [2/2]

• Object-oriented patterns• Creational patterns– Creation, composition, and representation– Examples: singleton, factory, builder, absract factory

• Structural patterns– Organization– Examples: composite, decorator, bridge, proxy

• Behavioral patterns– Communication– Examples: command, iterator, interpreter, mediator

7

Architectural Pattern Domains

• Access control– Access to data, features, and functionalities

• Concurrency– Multiple tasks in parallel

• Distribution– Distributed environment

• Persistent– Data storage

8

Framework

• Implementation specific skeletal infrastructure• Generic structure and behavior• Skeleton with a collection of “plug points”• How it differs from pattern– Design patterns are more abstract– Design patterns are smaller architectural elements– Design patterns are less specialized

9

Describing a Pattern

• Pattern name• Problem• Motivation• Context• Forces• Solution• Intent• Collaborations• Consequences• Implementation• Known uses• Related patterns

10

Pattern-Based Design

Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7 th ed., p. 355

11

Design Task [1/2]

1. Examine the requirements model and develop a problem hierarchy.

2. Determine if a reliable pattern language has been developed for the problem domain.

3. Beginning with a broad problem, determine whether one or more architectural patterns is available for it.

4. Using the collaborations provided for the architectural Pattern, examine subsystem or component-level problems and search for appropriate patterns to address them.

12

Design Task [2/2]

5. Repeat steps 2 through 5 until all broad problems have been addressed.

6. If user interface design problems have been isolated (this is almost always the case), search the many user interface design pattern repositories for appropriate patterns.

7. Regardless of its level of abstraction, lf a pattern language and/or patterns repository or individual pattern shows promise, compare the problem to be solved against the existing pattern(s) presented.

8. Be certain to refine the design as it is derived from patterns using design quality criteria as a guide.

13

User Interface Design Patterns

• Category: Whole UI• Pattern– TopLevelNavigation

• Brief description– Used when a site or application implements a number of

major functions. Provides a top-level menu, often coupled with a logo or identifying graphic, that enables direct navigation to any of the system's major functions.

• Navigation elements– Each function/content name represents a link to the

appropriate function or content

14

Page Layout

• Pattern– CardStack

• Brief description– Used when a number of specific sub-functions or content

categories related to a feature or function must be selected in random order. Provides the appearance of a stack of tabbed cards, each selectable with a mouse click and each representing specific sub-functions or content categories.

• Navigation elements– A mouse click on a tab causes the appropriate card to appear.

Navigation features within the card may also be present, but in general, these should initiate a function that is related to card data, not cause an actual link to some other display.

15

Forms and Input

• Pattern– Fill-in-the-Blanks

• Brief description– Allow alphanumeric data to be entered in a "text

box."• Navigation elements– A text or graphic indicator that initiates validation and

processing.

16

Tables

• Pattern– SortableTable

• Brief description– Display along list of records that can be sorted by

selecting a toggle mechanism for any column label.• Navigation elements– Each column header initiates a sort on all records. No

other navigation is provided, although in some cases, each record may itself contain navigation links to other content or functionality.

17

Direct Data Manipulation

• Pattern– BreadCrumbs

• Brief description– Provides a full navigation path when the user is

working with a complex hierarchy of pages or display screens.

• Navigation elements– Any of the entries within the bread crumbs display

can be used as a pointer to link back to a higher level of the hierarchy.

18

Navigation

• Pattern– EditInPlace

• Brief description– Provide simple text editing capability for certain types

of content in the location that it is displayed. No need for the user to enter a text editing function or mode explicitly.

• Navigation elements– None

19

Searching

• Pattern– SimpleSearch

• Brief description– Provides the ability to search a website or persistent

data source for a simple data item described by an alphanumeric string.

• Navigation elements– Each entry in the list of hits represents a navigation

link to the data referenced by the entry.

20

Page Elements

• Pattern– Wizard

• Brief description– Takes the user through a complex task one step at a

time, providing guidance for the completion of the task through a series of simple window displays.

• Navigation elements– Forward and back navigation allows the user to

revisit each step in the wizard process.

21

E-Commerce

• Pattern– ShoppingCart

• Brief description– Provides a list of items selected for purchase.

• Navigation elements– Contains ability to proceed with shopping or go to

checkout.

22

Miscellaneous

• Pattern– ProgressIndicator

• Brief description– Provides an indication of progress when an operation

takes longer than n seconds.• Navigation elements– Often contains a button that allows the user to pause

or cancel processing.

23

Summary

• Patterns, effective design patterns• Describing patterns• Types of patterns– Architecture, data, component, interface design, and

webapp patterns– Creational, structural, and behavioral patterns

• Design tasks• User interface design patterns