Creating a large scale
interaction pattern library
...and why you should use one too!
(even for smaller projects)
There ar...
About me
@wolfbruening
Born and grown
up in Oldenburg
University education in
Magdeburg and Ann Arbor
Worked as Art Direct...
The task
• Develop a pattern library for an insanely large
ecommerce website with more than a billion euros of
revenue per...
But why?
Duplicate designing,
communication and
development create
misunderstandings,
redundancies and
inconsistencies
Out...
The consequences
7 solutions/styles for the same task on OTTO.de at the same time!!
(we fixed this already)
Outdated Versi...
Working without patters
• Almost certainly will create inconsistent interfaces!
• Leads to misunderstandings!
• Leads to l...
So what are patterns?
So what are patterns?
• A pattern is a single piece of your UI that solves a specific
design problem and repeats across yo...
Jared Spool!
Founding Principal of UIE
“A typical pattern describes the
problem, the chosen solution, the
rationale behind...
What are patterns?
• Atomic patterns („bricks“): i.e. Buttons, Headline, Copy!
• Patterns of patterns („components“): i.e....
What are patterns?
• Templates and Sub-Templates!
• Transitions!
• Flows!
• Wording!
• ...
Learning #1

Keep it simple

(really, really simple)
Yahoo Pattern Library
Yahoo Pattern Library
WTF?
A too complicated process
Image created by Matt Leacock
Keep it simple
• Don‘t strive for perfection!!
• Try to keep pattern definitions as scarce as possible!
• Try to keep proc...
Keep it simple
• If using your pattern library is easy and saves a lot more
time than it costs to fill and manage it, ever...
Learning #2

Use flexible &

semantic names
Semantic Naming
Shiny Blue Button XL!
???
Shiny Blue Button XL
Relaunch/
Redesign
Semantic Naming
• Use abstract pattern names that relate to function not
style:!
!
• „Primary Button“!
• „Secondary Button...
What about sizes?
Button S
Button M
Button L
Insert a new button here? Nooooooooooo!
Image created by Margaret Almon http://www.flickr.com/photos/nutmegdesigns
US house numbers
House numbers increase by 100 every block regardless of the number of
buildings. This is great for orient...
City block sizes
Button 50
Button 100
Button 200
Button 150
City block sizes
• The standard variant of the pattern gets the „100“!
• Smaller variants get „75“, „50“, „25“...!
• Large...
Learning #3

Modular solutions

are better than one size
fits all

(for large projects/teams)
Big company problems
• Lots of people involved!
• Interaction Designers!
• Visual Designers!
• User Experience Managers!
•...
Keep it modular
• We identified three main use cases!
• Prototyping & visual design!
• Development!
• Document and communi...
Prototyping & Visual Design
PSD-files with every pattern in it allow for drag-and-drop creation of prototypes
Bonus Learning

Involve your developers

(and other stakeholders)
Development
Interactive pattern list based on Twitter Bootstrap
Document and Communicate
An own chapter in our corporate design manual platform
Structure
The pattern name is the connection between the three modules
Bill Scott!
Sr. Director UI at Paypal
“Design patterns create a shared
understanding in the organization,
where designers,...
Learning #4

Keep it stable but allow for
changes
Keep it stable...
• Put up a set of rules that prevent patterns from being too
easily changed!
• Only add patterns if exis...
...but allow for change
• Continuously experiment with new patterns!
• Challenge existing patterns!
!
• Don‘t be a pattern...
Lucas Pettinati!
UX Lead at Google, former Prinicpal Designer at Yahoo
“The use of a pattern library helps designers
quick...
Learning #5

A good pattern library
creates efficient processes
Change the way you work
In a traditional process, the IxD creates a concept and prototypes hands them
over to the visual d...
Change the way you work
With patterns the IxD is able to hand over the prototype directly to the developer
who – after the...
This sounds really cool, but...
...don‘t patterns limit my creativity?
Wrong!
Patterns support your creativity
• You don‘t need to redo or reinvent already solved
problems (and it‘s a strange sort of ...
And what about my site /
project / agency?
What about my site?
• One pager → well, you have it!
• Small site, startup → collect your patterns in a PSD (or
else), add...
Why you should use patterns
• They improve the quality of your UX!
• Consistent & predictable UI!
• Efficient prototyping!...
Thank you!
tl;dr Pattern libraries are awesome!
@wolfbruening
If you always wanted to...
• do design, testing or research for a billion-euro-revenue-
ecommerce site!
• work in a highly...
Some useful links
Resources & Tools!
• http://boxesandarrows.com/so-you-wanna-build-a-library-eh/!
• http://fadeyev.net/20...
Nächste SlideShare
Wird geladen in …5
×

Creating a large scale interaction pattern library

8.250 Aufrufe

Veröffentlicht am

PLEASE NOTE: These slides are out of date. You'll find a new and better presentation here: http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy

I wrote some articles on this topic (in German): http://www.produktbezogen.de/bauanleitung-pattern-library-1
Eine Deutsche Version mit einigen neuen Ergänzungen gibt es hier: http://de.slideshare.net/WolfBruening/pattern-libraries-aufzucht-und-pflege

Veröffentlicht in: Design, Technologie, Unterhaltung & Humor
1 Kommentar
20 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
8.250
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.803
Aktionen
Geteilt
0
Downloads
66
Kommentare
1
Gefällt mir
20
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Creating a large scale interaction pattern library

  1. 1. Creating a large scale interaction pattern library ...and why you should use one too! (even for smaller projects) There are new slides for this presentation. Please go to slideshare or click the link on slide 4.
  2. 2. About me @wolfbruening Born and grown up in Oldenburg University education in Magdeburg and Ann Arbor Worked as Art Director at webvariants and as UI designer at UCDplus Currently senior IxD at OTTO‘s eCommerce division Wolf Brüning
  3. 3. The task • Develop a pattern library for an insanely large ecommerce website with more than a billion euros of revenue per year and millions of products ranging from swimwear to chainsaws
  4. 4. But why? Duplicate designing, communication and development create misunderstandings, redundancies and inconsistencies Outdated Version. Click here for the new slides!
  5. 5. The consequences 7 solutions/styles for the same task on OTTO.de at the same time!! (we fixed this already) Outdated Version. Click here for the new slides!
  6. 6. Working without patters • Almost certainly will create inconsistent interfaces! • Leads to misunderstandings! • Leads to lots of extra work, communication and QA Outdated Version. Click here for the new slides!
  7. 7. So what are patterns?
  8. 8. So what are patterns? • A pattern is a single piece of your UI that solves a specific design problem and repeats across your website in various contexts. Fig. 1: The button, a classic example for a pattern
  9. 9. Jared Spool! Founding Principal of UIE “A typical pattern describes the problem, the chosen solution, the rationale behind that solution, related patterns that the designer should be aware of and the results of usability testing.”
  10. 10. What are patterns? • Atomic patterns („bricks“): i.e. Buttons, Headline, Copy! • Patterns of patterns („components“): i.e.Product Cinema
  11. 11. What are patterns? • Templates and Sub-Templates! • Transitions! • Flows! • Wording! • ...
  12. 12. Learning #1
 Keep it simple
 (really, really simple)
  13. 13. Yahoo Pattern Library
  14. 14. Yahoo Pattern Library WTF?
  15. 15. A too complicated process Image created by Matt Leacock
  16. 16. Keep it simple • Don‘t strive for perfection!! • Try to keep pattern definitions as scarce as possible! • Try to keep processes and discussions lean! ! • Keep work overhead for adding and managing patterns as low as possible
  17. 17. Keep it simple • If using your pattern library is easy and saves a lot more time than it costs to fill and manage it, everybody will be motivated.! • A not-so-perfect pattern library is a lot better than a perfectly documented but outdated one! ! ✓ This is the most important factor for a successful implementation
  18. 18. Learning #2
 Use flexible &
 semantic names
  19. 19. Semantic Naming Shiny Blue Button XL! ??? Shiny Blue Button XL Relaunch/ Redesign
  20. 20. Semantic Naming • Use abstract pattern names that relate to function not style:! ! • „Primary Button“! • „Secondary Button“! • „Headline“! • „Copy“! • „Link“
  21. 21. What about sizes? Button S Button M Button L Insert a new button here? Nooooooooooo!
  22. 22. Image created by Margaret Almon http://www.flickr.com/photos/nutmegdesigns
  23. 23. US house numbers House numbers increase by 100 every block regardless of the number of buildings. This is great for orientation but also very flexible for adding new houses between existing ones.
  24. 24. City block sizes Button 50 Button 100 Button 200 Button 150
  25. 25. City block sizes • The standard variant of the pattern gets the „100“! • Smaller variants get „75“, „50“, „25“...! • Larger variants get „200“, „300“...! ! ✓ Now you have a flexible naming system where it‘s easy to identify if a pattern is standard or larger or smaller
  26. 26. Learning #3
 Modular solutions
 are better than one size fits all
 (for large projects/teams)
  27. 27. Big company problems • Lots of people involved! • Interaction Designers! • Visual Designers! • User Experience Managers! • Developers! • Product Managers! • Project Managers! • Corporate Designer! • External Agencies! ! • Impossible to find a one size fits all solution
  28. 28. Keep it modular • We identified three main use cases! • Prototyping & visual design! • Development! • Document and communicate! ! • Instead of a large pattern library for all use cases we created a connected modular solution consisting of three components
  29. 29. Prototyping & Visual Design PSD-files with every pattern in it allow for drag-and-drop creation of prototypes
  30. 30. Bonus Learning
 Involve your developers
 (and other stakeholders)
  31. 31. Development Interactive pattern list based on Twitter Bootstrap
  32. 32. Document and Communicate An own chapter in our corporate design manual platform
  33. 33. Structure The pattern name is the connection between the three modules
  34. 34. Bill Scott! Sr. Director UI at Paypal “Design patterns create a shared understanding in the organization, where designers, business people, engineers, etc. really understand each other and get a sense for what‘s hard, what‘s easy, get a sense for the time crunch.”
  35. 35. Learning #4
 Keep it stable but allow for changes
  36. 36. Keep it stable... • Put up a set of rules that prevent patterns from being too easily changed! • Only add patterns if existing patterns provide not a satisfactory solution! • Change pattern if a new pattern becomes standard in the market! • Chance pattern if a new pattern beats it in user or a/b-testing
  37. 37. ...but allow for change • Continuously experiment with new patterns! • Challenge existing patterns! ! • Don‘t be a pattern nazi ;o)
  38. 38. Lucas Pettinati! UX Lead at Google, former Prinicpal Designer at Yahoo “The use of a pattern library helps designers quickly craft parts of a design so the bulk of their time is spent designing what‘s unique rather than what‘s common. It‘s like a compass. It‘ll tell you what direction you should go in, but it‘s up to you to figure out how to get there.”
  39. 39. Learning #5
 A good pattern library creates efficient processes
  40. 40. Change the way you work In a traditional process, the IxD creates a concept and prototypes hands them over to the visual designer who does the final design and briefs the developer
  41. 41. Change the way you work With patterns the IxD is able to hand over the prototype directly to the developer who – after the coding is done – teams up with the visual designer to fine tune the design directly on the website. There is no need to paint a picture of your website in photoshop anymore.
  42. 42. This sounds really cool, but... ...don‘t patterns limit my creativity?
  43. 43. Wrong!
  44. 44. Patterns support your creativity • You don‘t need to redo or reinvent already solved problems (and it‘s a strange sort of creativity to create a new button every second page)! • You can easily build and test prototypes on existing patterns, so you are able to explore more solutions! ! ✓ Using patterns buy you time to solve new problems, to tackle more complex tasks and maybe to add that special finish to your site
  45. 45. And what about my site / project / agency?
  46. 46. What about my site? • One pager → well, you have it! • Small site, startup → collect your patterns in a PSD (or else), add documentation when your team grows! • Agency → document abstract patterns that repeat with most customers (contact forms, pagination, etc.)! ! • All: involve your developers
  47. 47. Why you should use patterns • They improve the quality of your UX! • Consistent & predictable UI! • Efficient prototyping! • Time to concentrate on new problems! • They improve the quality of your code! • Quick implementation! • Prevent redundancies! • Efficient testing! • They can save everybody a lot of time! • They help you to communicate cleary with all stakeholders
  48. 48. Thank you! tl;dr Pattern libraries are awesome! @wolfbruening
  49. 49. If you always wanted to... • do design, testing or research for a billion-euro-revenue- ecommerce site! • work in a highly professional (and fun) team of 15 user experience, interaction design and visual design experts! • make use of our own testing-lab! • live and work in Germany‘s most beautiful city ;o)! • and make millions of users happy! ! is searching for IxD and UX folks. Talk to us!
  50. 50. Some useful links Resources & Tools! • http://boxesandarrows.com/so-you-wanna-build-a-library-eh/! • http://fadeyev.net/2012/03/31/the-value-of-unoriginality/! • http://twitter.github.io/bootstrap/! • http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on- user-interface-design-patterns/! ! Examples of pattern libraries! • http://www.bbc.co.uk/gel! • http://harmattan-dev.nokia.com/docs/ux/pages/getting_started.html! • http://developer.android.com/design/patterns/index.html

×