1. 101 User Interface Patternsand its applications Tonya Groover Department of Computer Science

2. Format of Seminar • what is a pattern? • historical context • good UI patterns • elements of a UI pattern • pattern languages • applications

3. Designing User Interfaces (UI) • Should I use icons? • Where should the header data and detail be positioned? • How do users search for objects or data? • How should new rows be inserted into a table? • Which working areas make up a new view? [Arend, 2004]

4. Patterns help to answer these [and other] questions.

5. Patterns are reusable components. insight into design problems. design principles. relationships . . .

6. The most useful patterns are generative. These patterns in our minds are, more or less, mental images of the patterns in the world: they are abstract representations of the very morphological rules which define the patterns in the world. However, in one respect they are very different. The patterns in the world merely exist. But the same patterns in our minds are dynamic. They have force. They are generative. They tell us what to do; they tell us how we shall, or may, generate them; and they tell us too, that under certain circumstances, we must create them. Each pattern is a rule which describes what you have to do to generate the entity which it defines. (pp. 181-182) [Alexander, 1979]

7. Historical Context • Christopher Alexander • Emerged in SE mid-late 1990’s • Gang of Four (GoF)

8. Why Patterns? • Solve "real world" problems • Capture domain expertise • Document design decisions and rationale • Reuse wisdom and experience of master practitioners • Convey expert insight to novices • Form a shared vocabulary for problem-solving discussion • Show more than just the solution http://www.cmcrossroads.com/bradapp/docs/patterns-nutshell.html

9. Good Patterns • Solve a problem • Is a proven concept • The solution isn’t obvious • Describes a relationship • Significant human component [ http://hillside.net/patterns/definition.html]

10. Name Problem Context Forces Solution Examples Resulting Context Rationale Related Patterns Known Uses Defining A Pattern http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html

11. A Pattern Language … defines a collection of patterns and the rules to combine them into an architectural style. Pattern languages describe software frameworks or families of related systems. [ http://hillside.net/patterns/definition.html] “It not only tells us the rules of arrangement, but shows us how to construct arrangements -- as many as we want -- which satisfy the rules." (p. 186) [Alexander, 1979]

12. Application of Patterns Business Application [Arend, 2004]

13. SAP Design Guild • Users working practices is the starting point. • Usability • Designers configure the interface using predefined components. • Use one component for a large number of applications. • “A user interface pattern fulfills one or more generic tasks, such as searching for and selecting a business object.”

14. Pattern Approach

15. This approach only works if there are a small number of “generic” tasks, which can describe very different business activities.

16. Design Method

20. Results • powerful and general components. • generic functions. • simple. • easy.

21. Advantages of UI Patterns • Highly consistent user interfaces • Usability can be optimized • High production gains

22. Application of Patterns Web Interfaces http://www.welie.com/patterns/

23. User Needs

24. Application Needs

25. Context of the Design

26. Finally … there are pattern library resources.

27. http://developer.yahoo.com/ypatterns/

28. http://msdn2.microsoft.com/en-us/practices/default.aspx Microsoft's recommendations for how to design, develop, deploy, and operate architecturally sound applications for the Microsoft application platform.

29. http://norvig.com/design-patterns/ppframe.htm

30. Thank you, for your attention!

31. References • Von Udo Arend (2004). User Interface Patterns http://www.sapdesignguild.org/editions/edition8/print_patterns.asp • Brad Appleton (2000). Patterns and Software: Essential Concepts and Terminology http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html • Brad Appleton. Patterns in a Nutshell http://www.cmcrossroads.com/bradapp/docs/patterns-nutshell.html • James O. Coplien (2007). Software Patterns http://hillside.net/patterns/definition.html • Bill Venners (2005). How to Use Design Patterns: A conversation with Erich Gamma. http://www.artima.com/lejava/articles/gammadp.html • Christopher Alexander (1979). The Timeless Way of Binding