Fluid Design Patterns
Allison Bloodworth
JA-SIG Unconference
11/12/07
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].

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
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
Pattern Libraries - Tidwell
http://www.time-tripper.com/uipatterns/
Pattern Libraries - van Welie
http://www.welie.com/patterns/index.php
Pattern Libraries - Yahoo!
http://developer.yahoo.com/ypatterns/
Pattern Libraries - UC Berkeley
http://harbinger.sims.berkeley.edu/ui_desig
Pattern Libraries - Moudil
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
???
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

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)?

Example: Drag & Drop Pattern

Tells you what to think about when
implementing the Reorderer component
Lightbox
 Drag-and-drop tabs
 Portlet Reorderer

Drag & Drop Pattern
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
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?

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/p
atterns/gallery.html
