SlideShare a Scribd company logo
Fluid Design Pattern Library
Allison Bloodworth
9/27/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
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
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
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
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
Pattern Library Organization
Models - UPADE
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)?
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
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
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?
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
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

More Related Content

Similar to Fluid Design Pattern Library

Instructional Design for the Semantic Web
Instructional Design for the Semantic WebInstructional Design for the Semantic Web
Instructional Design for the Semantic Web
guest649a93
 
Come to the Fiesta! Join the OLE Project
Come to the Fiesta! Join the OLE ProjectCome to the Fiesta! Join the OLE Project
Come to the Fiesta! Join the OLE Project
Doreen Herold
 
Painless XML Authoring?: How DITA Simplifies XML
Painless XML Authoring?: How DITA Simplifies XMLPainless XML Authoring?: How DITA Simplifies XML
Painless XML Authoring?: How DITA Simplifies XML
Scott Abel
 
Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009
Suite Solutions
 
Generation of Automatic Code using Design Patterns
Generation of Automatic Code using Design PatternsGeneration of Automatic Code using Design Patterns
Generation of Automatic Code using Design Patterns
IRJET Journal
 
Activating Research Collaboratories with Collaboration Patterns
Activating Research Collaboratories with Collaboration PatternsActivating Research Collaboratories with Collaboration Patterns
Activating Research Collaboratories with Collaboration Patterns
CommunitySense
 
Building a Single User Experience
Building a Single User ExperienceBuilding a Single User Experience
Building a Single User Experience
Nina McHale
 
single ux il2011
single ux il2011single ux il2011
single ux il2011
jjbattles
 
Building a Single User Experience
Building a Single User ExperienceBuilding a Single User Experience
Building a Single User Experience
Rachel Vacek
 
Let us understand design pattern
Let us understand design patternLet us understand design pattern
Let us understand design pattern
Mindfire Solutions
 
Introduction to design patterns
Introduction to design patternsIntroduction to design patterns
Introduction to design patterns
Amit Kabra
 
Structured design: Modular style for modern content
Structured design: Modular style for modern contentStructured design: Modular style for modern content
Structured design: Modular style for modern content
Christopher Hess
 
Design systems
Design systemsDesign systems
Design systems
Burton Smith
 
LOR Characteristics and Considerations
LOR Characteristics and ConsiderationsLOR Characteristics and Considerations
LOR Characteristics and Considerations
Scott Leslie
 
Unit No 6 Design Patterns.pptx
Unit No 6 Design Patterns.pptxUnit No 6 Design Patterns.pptx
Unit No 6 Design Patterns.pptx
DrYogeshDeshmukh1
 
Scalable architectures for phenotype libraries
Scalable architectures for phenotype librariesScalable architectures for phenotype libraries
Scalable architectures for phenotype libraries
Martin Chapman
 
Patterns, Components, and Code, Oh My!
Patterns, Components, and Code, Oh My!Patterns, Components, and Code, Oh My!
Patterns, Components, and Code, Oh My!
Erin Malone
 
Term Paper VirtualizationDue Week 10 and worth 210 pointsThis.docx
Term Paper VirtualizationDue Week 10 and worth 210 pointsThis.docxTerm Paper VirtualizationDue Week 10 and worth 210 pointsThis.docx
Term Paper VirtualizationDue Week 10 and worth 210 pointsThis.docx
mattinsonjanel
 

Similar to Fluid Design Pattern Library (20)

Instructional Design for the Semantic Web
Instructional Design for the Semantic WebInstructional Design for the Semantic Web
Instructional Design for the Semantic Web
 
Come to the Fiesta! Join the OLE Project
Come to the Fiesta! Join the OLE ProjectCome to the Fiesta! Join the OLE Project
Come to the Fiesta! Join the OLE Project
 
Painless XML Authoring?: How DITA Simplifies XML
Painless XML Authoring?: How DITA Simplifies XMLPainless XML Authoring?: How DITA Simplifies XML
Painless XML Authoring?: How DITA Simplifies XML
 
Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009
 
Generation of Automatic Code using Design Patterns
Generation of Automatic Code using Design PatternsGeneration of Automatic Code using Design Patterns
Generation of Automatic Code using Design Patterns
 
Activating Research Collaboratories with Collaboration Patterns
Activating Research Collaboratories with Collaboration PatternsActivating Research Collaboratories with Collaboration Patterns
Activating Research Collaboratories with Collaboration Patterns
 
Building a Single User Experience
Building a Single User ExperienceBuilding a Single User Experience
Building a Single User Experience
 
single ux il2011
single ux il2011single ux il2011
single ux il2011
 
Building a Single User Experience
Building a Single User ExperienceBuilding a Single User Experience
Building a Single User Experience
 
Let us understand design pattern
Let us understand design patternLet us understand design pattern
Let us understand design pattern
 
Introduction to design patterns
Introduction to design patternsIntroduction to design patterns
Introduction to design patterns
 
PLE
PLEPLE
PLE
 
Structured design: Modular style for modern content
Structured design: Modular style for modern contentStructured design: Modular style for modern content
Structured design: Modular style for modern content
 
Design systems
Design systemsDesign systems
Design systems
 
LOR Characteristics and Considerations
LOR Characteristics and ConsiderationsLOR Characteristics and Considerations
LOR Characteristics and Considerations
 
Unit No 6 Design Patterns.pptx
Unit No 6 Design Patterns.pptxUnit No 6 Design Patterns.pptx
Unit No 6 Design Patterns.pptx
 
Scalable architectures for phenotype libraries
Scalable architectures for phenotype librariesScalable architectures for phenotype libraries
Scalable architectures for phenotype libraries
 
Patterns, Components, and Code, Oh My!
Patterns, Components, and Code, Oh My!Patterns, Components, and Code, Oh My!
Patterns, Components, and Code, Oh My!
 
Website Migration Planning
Website Migration PlanningWebsite Migration Planning
Website Migration Planning
 
Term Paper VirtualizationDue Week 10 and worth 210 pointsThis.docx
Term Paper VirtualizationDue Week 10 and worth 210 pointsThis.docxTerm Paper VirtualizationDue Week 10 and worth 210 pointsThis.docx
Term Paper VirtualizationDue Week 10 and worth 210 pointsThis.docx
 

More from Allison Bloodworth

Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...
Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...
Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...
Allison Bloodworth
 
Selling userneedsassessment 7-30-07_full
Selling userneedsassessment 7-30-07_fullSelling userneedsassessment 7-30-07_full
Selling userneedsassessment 7-30-07_full
Allison Bloodworth
 
Model-driven Application Design for a Campus Calendar Network
Model-driven Application Design for a Campus Calendar NetworkModel-driven Application Design for a Campus Calendar Network
Model-driven Application Design for a Campus Calendar Network
Allison Bloodworth
 
Introduction to User-Centered Design
Introduction to User-Centered DesignIntroduction to User-Centered Design
Introduction to User-Centered Design
Allison Bloodworth
 
User-Centered Design in IT: the Low-Hanging Fruit
User-Centered Design in IT: the Low-Hanging FruitUser-Centered Design in IT: the Low-Hanging Fruit
User-Centered Design in IT: the Low-Hanging Fruit
Allison Bloodworth
 
Use Cases in the Fluid Project
Use Cases in the Fluid ProjectUse Cases in the Fluid Project
Use Cases in the Fluid Project
Allison Bloodworth
 
Using Personas to Create User-centered Designs
Using Personas to Create User-centered DesignsUsing Personas to Create User-centered Designs
Using Personas to Create User-centered Designs
Allison Bloodworth
 

More from Allison Bloodworth (7)

Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...
Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...
Make Your Data Come Alive: Visual Design's Role in Creating Compelling Visual...
 
Selling userneedsassessment 7-30-07_full
Selling userneedsassessment 7-30-07_fullSelling userneedsassessment 7-30-07_full
Selling userneedsassessment 7-30-07_full
 
Model-driven Application Design for a Campus Calendar Network
Model-driven Application Design for a Campus Calendar NetworkModel-driven Application Design for a Campus Calendar Network
Model-driven Application Design for a Campus Calendar Network
 
Introduction to User-Centered Design
Introduction to User-Centered DesignIntroduction to User-Centered Design
Introduction to User-Centered Design
 
User-Centered Design in IT: the Low-Hanging Fruit
User-Centered Design in IT: the Low-Hanging FruitUser-Centered Design in IT: the Low-Hanging Fruit
User-Centered Design in IT: the Low-Hanging Fruit
 
Use Cases in the Fluid Project
Use Cases in the Fluid ProjectUse Cases in the Fluid Project
Use Cases in the Fluid Project
 
Using Personas to Create User-centered Designs
Using Personas to Create User-centered DesignsUsing Personas to Create User-centered Designs
Using Personas to Create User-centered Designs
 

Recently uploaded

Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
ThomasParaiso2
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 

Recently uploaded (20)

Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 

Fluid Design Pattern Library

  • 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
  • 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
  • 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