Pattern-Based Design SEII-Lecture 13

1. Pattern-Based DesignSEII-Lecture 13 Dr. Muzafar Khan Assistant Professor Department of Computer Science CIIT, 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, 7th ed., p. 355

11. Design Task [1/2] • Examine the requirements model and develop a problem hierarchy. • Determine if a reliable pattern language has been developed for the problem domain. • Beginning with a broad problem, determine whether one or more architectural patterns is available for it. • 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] • Repeat steps 2 through 5 until all broad problems have been addressed. • 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. • 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. • 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