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 2

“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 3

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 4

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 5

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 6

Access control – Access to data, features, and functionalities Concurrency – Multiple tasks in parallel Distribution – Distributed environment Persistent – Data storage 7

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 8

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

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

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. 11

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. 12

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 13

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. 14

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. 15

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. 16

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. 17

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 18

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. 19

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. 20

Pattern – ShoppingCart Brief description – Provides a list of items selected for purchase. Navigation elements – Contains ability to proceed with shopping or go to checkout. 21

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. 22

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 23