Pattern-Based Design SEII - Lecture 13

Pattern-Based DesignSEII-Lecture 13Dr. Muzafar KhanAssistant ProfessorDepartment of Computer ScienceCIIT, Islamabad.RecapInterface analysisUser analysis, task analysis and modeling, analysis of display content and work environmentInterface design stepsDesign issuesSystem response time, user help facilities, error information handling, menu and command labeling, application accessibility, internationalizationWeb application design interface guidelinesAnticipation, communication, consistency, controlled autonomy, efficiency, flexibility, focus, Fitt’s law, learnability, readability, metaphorsDesign Evaluation2Design 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 solutionReuse rather than reinventing the wheel3Effective Design PatternCoplien (2005)It solves a problemSolution, not principles/strategiesIt is a proven conceptProven track record, not theoriesThe solution is not obviousIndirect solutionIt describes a relationshipDeeper system structures / mechanismsIt has a significant human componentAesthetic and utility4Types of Patterns [1/2]Architecture patternsStructure relatedExamples: pipes and filters, adapter, proxy, bridgeData patternsData relatedExamples: data replication, master-master replicationComponent / design patternsSubsystems relatedExamples: Add another, build an expression, slide downInterface design patternsUser interface relatedExamples: breadcrumb, card stack, wizard, simple searchWebapp patternsWebapp relatedExamples: advanced search, search area, search tips5Types of Patterns [2/2]Object-oriented patternsCreational patternsCreation, composition, and representationExamples: singleton, factory, builder, absract factoryStructural patternsOrganizationExamples: composite, decorator, bridge, proxyBehavioral patternsCommunicationExamples: command, iterator, interpreter, mediator6Architectural Pattern DomainsAccess controlAccess to data, features, and functionalitiesConcurrencyMultiple tasks in parallelDistributionDistributed environmentPersistentData storage7FrameworkImplementation specific skeletal infrastructureGeneric structure and behaviorSkeleton with a collection of “plug points”How it differs from patternDesign patterns are more abstractDesign patterns are smaller architectural elementsDesign patterns are less specialized 8Describing a PatternPattern nameProblemMotivationContextForcesSolutionIntentCollaborationsConsequencesImplementationKnown usesRelated patterns9Pattern-Based Design10Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 355Design 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.11Design 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.12User Interface Design PatternsCategory: Whole UIPatternTopLevelNavigationBrief descriptionUsed 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 elementsEach function/content name represents a link to the appropriate function or content13Page LayoutPatternCardStackBrief descriptionUsed 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 elementsA 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.14Forms and InputPatternFill-in-the-BlanksBrief descriptionAllow alphanumeric data to be entered in a "text box."Navigation elementsA text or graphic indicator that initiates validation and processing.15TablesPatternSortableTableBrief descriptionDisplay along list of records that can be sorted by selecting a toggle mechanism for any column label.Navigation elementsEach 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.16Direct Data ManipulationPatternBreadCrumbsBrief descriptionProvides a full navigation path when the user is working with a complex hierarchy of pages or display screens.Navigation elementsAny of the entries within the bread crumbs display can be used as a pointer to link back to a higher level of the hierarchy.17NavigationPatternEditInPlaceBrief descriptionProvide 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 elementsNone18SearchingPatternSimpleSearchBrief descriptionProvides the ability to search a website or persistent data source for a simple data item described by an alphanumeric string.Navigation elementsEach entry in the list of hits represents a navigation link to the data referenced by the entry.19Page ElementsPatternWizardBrief descriptionTakes 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 elementsForward and back navigation allows the user to revisit each step in the wizard process.20E-CommercePatternShoppingCartBrief descriptionProvides a list of items selected for purchase.Navigation elementsContains ability to proceed with shopping or go to checkout.21MiscellaneousPatternProgressIndicatorBrief descriptionProvides an indication of progress when an operation takes longer than n seconds.Navigation elementsOften contains a button that allows the user to pause or cancel processing.22SummaryPatterns, effective design patternsDescribing patternsTypes of patternsArchitecture, data, component, interface design, and webapp patternsCreational, structural, and behavioral patternsDesign tasksUser interface design patterns23