230 likes | 394 Views
Pattern-Based Design SEII-Lecture 13. Dr. Muzafar Khan Assistant Professor Department of Computer Science CIIT, Islamabad. Recap. Interface analysis User analysis, task analysis and modeling, analysis of display content and work environment Interface design steps Design issues
E N D
Pattern-Based DesignSEII-Lecture 13 Dr. Muzafar Khan Assistant Professor Department of Computer Science CIIT, Islamabad.
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
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
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
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
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
Architectural Pattern Domains • Access control • Access to data, features, and functionalities • Concurrency • Multiple tasks in parallel • Distribution • Distributed environment • Persistent • Data storage
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
Describing a Pattern • Pattern name • Problem • Motivation • Context • Forces • Solution • Intent • Collaborations • Consequences • Implementation • Known uses • Related patterns
Pattern-Based Design Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 355
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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