1. Fluid Design Patterns Allison Bloodworth JA-SIG Unconference 11/12/07

2. What is a pattern? A pattern is a proven solution to a common problem in a specified context There may be many different implementations of each pattern “Each pattern is a three-part rule, which expresses a relation between a certain context, a problem, and a solution” [Alexander 1979].

3. Software Engineering Patterns Organization Process Product Organizational Patterns (Coplien, 1998, Cockburn, 1997) Business Reengineering Patterns (Beedle, 1997) Steps and Task Patterns (Ambler, 1998; Coplien, 1995) Process Improvement Patterns (Appleton, 1997) HCI Patterns (Tidwell, 1998) Software Design Patterns (Gamma, 1995) People Pedagogical Patterns (Manns, 1996) Human-to-Human Communication Patterns (Cockburn, 1997) From: Maximizing Reusability of Pattern Languages over the Web, Homa Javahery, www.cusec.net/archives/2002/javahery.ppt

4. Why use UI patterns? To help designers and developers create the proper user interface for a specific context Design patterns libraries may: Be very general or organization-specific Communicate best practices & reusable design knowledge Prescribe specific guidelines/act as style guide replacements Connect to component libraries

5. Pattern Libraries - Tidwell http://www.time-tripper.com/uipatterns/

6. Pattern Libraries - van Welie http://www.welie.com/patterns/index.php

7. Pattern Libraries - Yahoo! http://developer.yahoo.com/ypatterns/

8. Pattern Libraries - UC Berkeley http://harbinger.sims.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/home.php

9. Pattern Libraries - Moudil

10. What are Fluid UI Design Patterns? Open Source Design Patterns (OSDP) Library Used for: Help with implementing components Document patterns found in Fluid applications (standards) Bring together patterns from other collections which are helpful to Fluid applications Space for Fluid communities to grow their own design pattern libraries ???

11. OSDP Library Audiences Junior interaction designers & new designers to the community Developers who need to design the UIs they build More experienced designers Creators of patterns

12. Pattern Library Issues Proper granularity for a pattern Serve one organization or many/all? Use classification hierarchies or tags? Use mark-up language to facilitate reuse (e.g. PLML)?

13. Example: Drag & Drop Pattern Tells you what to think about when implementing the Reorderer component Lightbox Drag-and-drop tabs Portlet Reorderer

14. Drag & Drop Pattern

15. Advice on creating a pattern library First of all, read all the articles and books etc. related to this topic to get started. Second, it is really important to understand organization's culture to select suitable patterns and create tool for sharing and managing patterns. And, when you have created the library, you need to find the ways to keep the library living. From ui-patterns-authors mailing list

16. What can you do to help? How do you currently design and implement user interface elements? How might you use UI design patterns and Fluid (or other) components? What additional information might you need?

17. More Pattern Resources Yahoo! UI Patterns Authors mailing list: http://tech.groups.yahoo.com/group/ui- pattern-authors/ http://tech.groups.yahoo.com/group/ui- pattern-authors/ The Pattern Gallery: http://www.cs.kent.ac.uk/people/staff/saf/p atterns/gallery.html http://www.cs.kent.ac.uk/people/staff/saf/p atterns/gallery.html