SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
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

Contenu connexe

Similaire à 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 Webguest649a93
 
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 ProjectDoreen 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 XMLScott Abel
 
Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Suite 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 PatternsIRJET Journal
 
Activating Research Collaboratories with Collaboration Patterns
Activating Research Collaboratories with Collaboration PatternsActivating Research Collaboratories with Collaboration Patterns
Activating Research Collaboratories with Collaboration PatternsCommunitySense
 
Building a Single User Experience
Building a Single User ExperienceBuilding a Single User Experience
Building a Single User ExperienceNina McHale
 
single ux il2011
single ux il2011single ux il2011
single ux il2011jjbattles
 
Building a Single User Experience
Building a Single User ExperienceBuilding a Single User Experience
Building a Single User ExperienceRachel Vacek
 
Let us understand design pattern
Let us understand design patternLet us understand design pattern
Let us understand design patternMindfire Solutions
 
Introduction to design patterns
Introduction to design patternsIntroduction to design patterns
Introduction to design patternsAmit 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 contentChristopher Hess
 
LOR Characteristics and Considerations
LOR Characteristics and ConsiderationsLOR Characteristics and Considerations
LOR Characteristics and ConsiderationsScott Leslie
 
Unit No 6 Design Patterns.pptx
Unit No 6 Design Patterns.pptxUnit No 6 Design Patterns.pptx
Unit No 6 Design Patterns.pptxDrYogeshDeshmukh1
 
Scalable architectures for phenotype libraries
Scalable architectures for phenotype librariesScalable architectures for phenotype libraries
Scalable architectures for phenotype librariesMartin 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.docxmattinsonjanel
 

Similaire à 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
 

Plus de 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_fullAllison 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 NetworkAllison Bloodworth
 
Introduction to User-Centered Design
Introduction to User-Centered DesignIntroduction to User-Centered Design
Introduction to User-Centered DesignAllison 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 FruitAllison Bloodworth
 
Use Cases in the Fluid Project
Use Cases in the Fluid ProjectUse Cases in the Fluid Project
Use Cases in the Fluid ProjectAllison 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 DesignsAllison Bloodworth
 

Plus de 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
 

Dernier

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 

Dernier (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 

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