Presented by Allison Bloodworth at the Fluid Project Summit on September 28, 2007

1. Fluid Design Pattern Library
Allison Bloodworth
9/27/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
People
• Pedagogical Patterns
(Manns, 1996)
• Organizational
Patterns
(Coplien, 1998,
Cockburn, 1997)
• Business
Reengineering
Patterns
(Beedle, 1997)
Process
• Human-to-Human
Product
Communication Patterns
(Cockburn, 1997)
• HCI Patterns
(Tidwell, 1998)
• Steps and Task Patterns (Ambler,
1998; Coplien, 1995)
• Software
Design Patterns
(Gamma, 1995)
• Process Improvement Patterns
(Appleton, 1997)
From: Maximizing Reusability of Pattern Languages over the Web,
Homa Javahery, www.cusec.net/archives/2002/javahery.ppt

4. Patterns are useful for:
Gathering best practices in user-centered
design (UCD)
UCD pattern catalogues carry a significant
amount of reusable design knowledge
Educating software engineers, who are the
individuals that make most of design decisions
which affect usability
Facilitating communication among software
engineers
Adapted from Pattern Framework for Eliciting and Delivering UCD Knowledge and Practices,
A. Gaffar, H. Javahery, A. Seffah, D. Sinnig, presentation at HCI International 2003,
http://dsinnig.com/ppts/Pattern.ppt

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_desig

9. Pattern Libraries - Moudil

10. Pattern Library Organization
Models - Patrick Stapleton
Subject
Content - normally specify an application genre like
ecommerce and supply chain management.
• E.g. in the Design of Sites collection under "Site Genres"
and in Welie s collection under "Site Types".
Functional - based on logical breakup of functionality
• E.g. shopping cart and two-panel selector.
This seems to be the most common prevalent
classification type, found in many popular libraries
Client - the platform on which a UI pattern has
been design to operate.
From ui-patterns-authors mailing list

11. Pattern Library Organization
Models - P. Stapleton
Level
1. Information architecture –navigation of
content within an application
2. Screen architecture – positioning of
functionality and content within a screen
3. Site furniture – the formatting of
functionality and content
From ui-patterns-authors mailing list

12. Pattern Library Organization
Models - UPADE

13. 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)?

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

15. Questions about Fluid Design
Patterns
How can patterns add value to the Fluid
community?
What do we mean by “design patterns”?
Who is our audience?
Programmers, UX Designers, Jr. UX Designers
Individual Fluid apps, all Fluid apps, other university
websites & applications, all websites & applications
What do our target users need?
What is our scope?
Design patterns related to components, any design
patterns relevant to Fluid applications

16. Questions about Fluid Design
Patterns
Is the package we want to provide more than just
design patterns?
Patterns, style guide, component code, component
implementation instructions (design & technical)
How do we want to present the information?
Wiki, Content Management system
How can we help our target users find what they need?
Indexing, search, tags, dynamic generation of examples for
each application
How does the Fluid DP library relate to/borrow from
other DP libraries? What value do we add?
How can we ensure the Fluid DP library remains
relevant/lives on?

17. Oracle s Enterprise Pattern
Exchange Proposal
The Enterprise Pattern Exchange (EPE) is an ambitious
project, which aspires to become the major online UI
Pattern resource for pattern writers and user alike.
Proposed Features
The most comprehensive collection of patterns publicly
available online to date (Oracle, Yahoo, eBay and Tidwell)
Discussion threads for all patterns (including RSS feed
generation)
Pattern submit tool
Search tools
Role based access for patter writers, users and assessors
Distributed pattern management tools
Pattern usage statistics
From “Developing a UI Pattern Standard,” Patrick Stapleton, Oracle

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