Pattern Libraries,
Aufzucht und Pflege
...und warum du auch eine haben solltest
(selbst für kleinere Projekte)
Über mich
@wolfbruening
produktbezogen.de
Geboren und
aufgewachsen in
Oldenburg
Hochschulausbildung in
Magdeburg und Ann A...
Die Aufgabe
• Eine Pattern Library für eine unglaublich große
eCommerce-Plattform entwickeln
• OTTO.de
• >1.000.000.000€ U...
Warum überhaupt?
Parallele Konzeption,
Kommunikation und
Entwicklung erzeugen
Missverständnisse,
Redundanzen und
Inkonsist...
Die Konsequenzen
7 Lösungen und Stile für die selbe Aufgabe gleichzeitig auf OTTO.de online
(das haben wir schon behoben)
Auf Patterns zu verzichten...
...führt mit großer Sicherheit zu inkonsistenten Interfaces
...führt zu Missverständnissen
....
Aber was sind Patterns
eigentlich?
Was sind Patterns?
Ein Pattern ist ein Element eines Nutzer-Interfaces,
welches ein bestimmtes Problem löst und sich in
un...
Was sind Patterns?
• Unteilbare Patterns („Bausteine“)
• Patterns aus Patterns („Komponenten“)
Was sind Patterns?
• Templates und Sub-Templates
• Animationen
• Flows
• Naming Conventions
• Wording
• ...
Jared Spool
Founding Principal of UIE
“A typical pattern describes the
problem, the chosen solution, the
rationale behind ...
Vielen Dank, jetzt weiß ich was
ein Pattern ist, aber wie komme
ich zu meiner Library?
Unsere Vorgehensweise
1. Kick-Off
• Mini-Task-Force: 1 Interaction Designer, 1 Entwickler
• Recherchieren
• Recherchieren
...
Unsere Vorgehensweise
3. Test & Learn
• Start der Dokumentation
• Ausprobieren von Prozessen
• Gradueller Übergang in das ...
Und was haben wir dabei
gelernt?
Dokumentation
Yahoo Pattern Library
Yahoo Pattern Library
WTF?
Ein viel zu komplizierter Prozess
Image created by Matt Leacock
Learning #1
So einfach wie möglich
(wirklich, wirklich einfach)
So einfach wie möglich
• Nicht nach der perfekten Pattern-Beschreibung streben
• Pattern-Dokumentation so knapp wie möglic...
So einfach wie möglich
• Ist eine Pattern Library einfach zu nutzen und erspart sie
deutlich mehr Zeit als es kostet, sie ...
Naming
Deskriptive vs. semantische
Namen
Shiny Blue Button XL
???
Shiny Blue Button XL
Relaunch/
Redesign
Semantische Namen
• Abstrakte Namen nutzen, die sich auf den Zweck des
Patterns und nicht seine visuelle Eigenschaften
bez...
Und was ist mit Größen?
Button S
Button M
Button L
Hier ein neuer Button? Neeeeiiiiiiin!!!
Image created by Margaret Almon http://www.flickr.com/photos/nutmegdesigns
US city blocks
City-Block-Größen
Button 50
Button 100
Button 200
Button 150
City-Block-Größen
• Die Standard-Variante bekommt die „100“
• Kleinere Varianten „75“, „50“, „25“...
• Größere Varianten „...
Learning #2
Semantische und flexible
Pattern-Namen nutzen
Struktur
Image created by Wolfgang Lonien, http://www.flickr.com/photos/wjlonien
Konzern-Probleme
• Viele Menschen reden mit:
• Interaction Designer
• Visual Designer
• User Experience Manager
• Entwickl...
Modularer Aufbau
• Hauptsächliche Nutzungsszenarien
• Konzeption, Prototyping & Visual Design
• Dokumentation und Kommunik...
Prototyping & Visual Design
Dokumentation & Kommunikation
Entwicklung
Learning #3
Involviert eure Entwickler
(und alle anderen Stakeholder)
Bill Scott
Sr. Director UI at Paypal
“Design patterns create a shared
understanding in the organization,
where designers, ...
Bill Scott
Sr. Director Ui Engineering, Paypal
„Design Patterns create a
shared understanding in
the organization, where
d...
Struktur
Learning #4
Modulare Lösungen sind
oft besser als One-Size-
Fits-All-Konstrukte
(insbesondere bei großen Projekten)
Struktur
Optimierte Struktur
Learning #5
Die Ideale Pattern Library
entwickelt sich erst im
Lauf der Zeit
Betrieb
Patterns müssen stabil sein...
• Regelwerk aufstellen, um zu verhindern, dass Patterns
zu leicht abgewandelt werden können...
...aber auch nicht zu starr
• Evolution der Patterns erlauben
• Kontinuierlich mit neuen Patterns experimentieren
• Immer ...
Lucas Pettinati
UX Lead at Google, former Prinicpal Designer at Yahoo
“The use of a pattern library helps designers
quickl...
Learning #6
Eine Balance zwischen
Stabilität und Evolution ist
wichtig
Herkömmliche Arbeitsprozesse
Neue Arbeitsprozesse
Learning #7
Eine gute Pattern Library
ermöglicht effizientere
Prozesse
Learning #8
Designer und Entwickler
haben sich wieder gern.
Das klingt alles echt cool, aber...
...schränkt der Gebrauch von Patterns nicht meine
Kreativität ein?
Falsch!
Patterns helfen kreativer zu sein
• Man muss nicht jedes bereits gelöste Problem erneut
lösen
• Man kann viel schneller Pr...
Und was ist mit meiner Seite /
meiner Agentur?
Was ist mit meiner Seite?
• One Pager → Fertig!
• Kleine Seite, Startup → Patterns während des Designs in einer PSD
(o.ä.)...
Warum Ihr Patterns nutzen solltet...
• Patterns verbessern die User Experience
• Konsistentes und vorhersagbares User Inte...
...und was ihr dabei beachten solltet
• Dokumentation und Prozesse einfach halten
• Semantische und flexible Namen nutzen
...
Vielen Dank!
tl;dr Eine Pattern Library ist großartig!
@wolfbruening
produktbezogen.de
Bilder
• Folie 27: Margaret Almon
http://www.flickr.com/photos/nutmegdesigns
• Folie 32: Wolfgang Lonien
http://www.flickr...
Nächste SlideShare
Wird geladen in …5
×

Design Pattern Libraries, Aufzucht und Pflege

3.734 Aufrufe

Veröffentlicht am

Die Präsentation als Artikel: http://www.produktbezogen.de/bauanleitung-pattern-library-1/
An english version is available here: http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy

Veröffentlicht in: Design
0 Kommentare
7 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.734
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.475
Aktionen
Geteilt
0
Downloads
29
Kommentare
0
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Design Pattern Libraries, Aufzucht und Pflege

  1. 1. Pattern Libraries, Aufzucht und Pflege ...und warum du auch eine haben solltest (selbst für kleinere Projekte)
  2. 2. Über mich @wolfbruening produktbezogen.de Geboren und aufgewachsen in Oldenburg Hochschulausbildung in Magdeburg und Ann Arbor Als Art Director und UI Designer bei webvariants und UCDplus gearbeitet Aktuell Senior Interaction Designer für OTTO.de
  3. 3. Die Aufgabe • Eine Pattern Library für eine unglaublich große eCommerce-Plattform entwickeln • OTTO.de • >1.000.000.000€ Umsatz/Jahr • 1.000.000 Visits/Tag • Millionen Artikel, alles vom Bikini bis zur Kettensäge
  4. 4. Warum überhaupt? Parallele Konzeption, Kommunikation und Entwicklung erzeugen Missverständnisse, Redundanzen und Inkonsistenzen
  5. 5. Die Konsequenzen 7 Lösungen und Stile für die selbe Aufgabe gleichzeitig auf OTTO.de online (das haben wir schon behoben)
  6. 6. Auf Patterns zu verzichten... ...führt mit großer Sicherheit zu inkonsistenten Interfaces ...führt zu Missverständnissen ...führt zu viel zusätzlicher und doppelt erledigter Arbeit und überflüssigen QA-Runden
  7. 7. Aber was sind Patterns eigentlich?
  8. 8. Was sind Patterns? Ein Pattern ist ein Element eines Nutzer-Interfaces, welches ein bestimmtes Problem löst und sich in unterschiedlichen Kontexten (bzw. mit unterschiedlichen Inhalten) wiederholt.
  9. 9. Was sind Patterns? • Unteilbare Patterns („Bausteine“) • Patterns aus Patterns („Komponenten“)
  10. 10. Was sind Patterns? • Templates und Sub-Templates • Animationen • Flows • Naming Conventions • Wording • ...
  11. 11. 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.”
  12. 12. Vielen Dank, jetzt weiß ich was ein Pattern ist, aber wie komme ich zu meiner Library?
  13. 13. Unsere Vorgehensweise 1. Kick-Off • Mini-Task-Force: 1 Interaction Designer, 1 Entwickler • Recherchieren • Recherchieren • Recherchieren 2. Vertiefung • Hilfe von Außen • Interviews mit allen Beteiligten • Workshops • Sammeln und Dokumentation von Patterns • Entwickler • Struktur und Verfeinerung
  14. 14. Unsere Vorgehensweise 3. Test & Learn • Start der Dokumentation • Ausprobieren von Prozessen • Gradueller Übergang in das Tagesgeschäft 4. Aktiver Betrieb • Kontinuierliche Befüllung der Pattern Library während der Plattform-Entwicklung • Weiterentwicklung der Pattern-Library als Tool • Weiter: Lernen, optimieren, lernen, optimieren
  15. 15. Und was haben wir dabei gelernt?
  16. 16. Dokumentation
  17. 17. Yahoo Pattern Library
  18. 18. Yahoo Pattern Library WTF?
  19. 19. Ein viel zu komplizierter Prozess Image created by Matt Leacock
  20. 20. Learning #1 So einfach wie möglich (wirklich, wirklich einfach)
  21. 21. So einfach wie möglich • Nicht nach der perfekten Pattern-Beschreibung streben • Pattern-Dokumentation so knapp wie möglich halten • Prozesse und Diskussionen schlank halten ➔Overhead für das Hinzufügen und Verwalten von Patterns so gering wie möglich halten
  22. 22. So einfach wie möglich • Ist eine Pattern Library einfach zu nutzen und erspart sie deutlich mehr Zeit als es kostet, sie zu füllen und zu verwalten, wird jeder motiviert sein, sie auf einem aktuellen Stand zu halten. • Eine alles andere als perfekte Pattern Library ist um Längen besser als eine umfassend dokumentierte aber veraltete Library ➔Einfachheit ist der wichtigste Faktor für den Erfolg einer Pattern Library!
  23. 23. Naming
  24. 24. Deskriptive vs. semantische Namen Shiny Blue Button XL ??? Shiny Blue Button XL Relaunch/ Redesign
  25. 25. Semantische Namen • Abstrakte Namen nutzen, die sich auf den Zweck des Patterns und nicht seine visuelle Eigenschaften beziehen • Primary Button • Secondary Button • Headline • Copy • Link
  26. 26. Und was ist mit Größen? Button S Button M Button L Hier ein neuer Button? Neeeeiiiiiiin!!!
  27. 27. Image created by Margaret Almon http://www.flickr.com/photos/nutmegdesigns
  28. 28. US city blocks
  29. 29. City-Block-Größen Button 50 Button 100 Button 200 Button 150
  30. 30. City-Block-Größen • Die Standard-Variante bekommt die „100“ • Kleinere Varianten „75“, „50“, „25“... • Größere Varianten „200“, „300“...  Nun hat man ein einfaches Benennungssystem, bei dem es leicht ist, die Standardvariante zu identifizieren
  31. 31. Learning #2 Semantische und flexible Pattern-Namen nutzen
  32. 32. Struktur Image created by Wolfgang Lonien, http://www.flickr.com/photos/wjlonien
  33. 33. Konzern-Probleme • Viele Menschen reden mit: • Interaction Designer • Visual Designer • User Experience Manager • Entwickler • Produktmanager • Projektmanager • Corporate Designer • Externe Agenturen • Unmöglich eine One-size-fits-all-Lösung zu finden
  34. 34. Modularer Aufbau • Hauptsächliche Nutzungsszenarien • Konzeption, Prototyping & Visual Design • Dokumentation und Kommunikation • Entwicklung
  35. 35. Prototyping & Visual Design
  36. 36. Dokumentation & Kommunikation
  37. 37. Entwicklung
  38. 38. Learning #3 Involviert eure Entwickler (und alle anderen Stakeholder)
  39. 39. 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.”
  40. 40. Bill Scott Sr. Director Ui Engineering, 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.“
  41. 41. Struktur
  42. 42. Learning #4 Modulare Lösungen sind oft besser als One-Size- Fits-All-Konstrukte (insbesondere bei großen Projekten)
  43. 43. Struktur
  44. 44. Optimierte Struktur
  45. 45. Learning #5 Die Ideale Pattern Library entwickelt sich erst im Lauf der Zeit
  46. 46. Betrieb
  47. 47. Patterns müssen stabil sein... • Regelwerk aufstellen, um zu verhindern, dass Patterns zu leicht abgewandelt werden können, z.B. • Es dürfen nur neue Patterns hinzugefügt werden, wenn mit den bestehenden Patterns keine zufriedenstellenden Lösungen erreicht werden können. • Patterns dürfen erst geändert werden, wenn sich eine neue Standardlösung am Markt durchsetzt • Patterns dürfen erst ersetzt werden, wenn neue Patterns sie in Nutzer- oder A/B-Tests schlagen
  48. 48. ...aber auch nicht zu starr • Evolution der Patterns erlauben • Kontinuierlich mit neuen Patterns experimentieren • Immer wieder bestehende Patterns in Frage stellen • Nicht zum Pattern-Nazi werden
  49. 49. 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.”
  50. 50. Learning #6 Eine Balance zwischen Stabilität und Evolution ist wichtig
  51. 51. Herkömmliche Arbeitsprozesse
  52. 52. Neue Arbeitsprozesse
  53. 53. Learning #7 Eine gute Pattern Library ermöglicht effizientere Prozesse
  54. 54. Learning #8 Designer und Entwickler haben sich wieder gern.
  55. 55. Das klingt alles echt cool, aber... ...schränkt der Gebrauch von Patterns nicht meine Kreativität ein?
  56. 56. Falsch!
  57. 57. Patterns helfen kreativer zu sein • Man muss nicht jedes bereits gelöste Problem erneut lösen • Man kann viel schneller Prototypen erschaffen und so viel mehr Iterationen produzieren • Der Einsatz von Patterns verschafft einem Zeit, um neue und komplexere Probleme angehen, um sich um den Feinschliff zu kümmern
  58. 58. Und was ist mit meiner Seite / meiner Agentur?
  59. 59. Was ist mit meiner Seite? • One Pager → Fertig! • Kleine Seite, Startup → Patterns während des Designs in einer PSD (o.ä.) sammeln, später Dokumentation hinzufügen • Agentur → Abstrakte Patterns definieren (Wireframes, Flows, etc.), die sich regelmäßig in Kundenprojekten wiederholen
  60. 60. Warum Ihr Patterns nutzen solltet... • Patterns verbessern die User Experience • Konsistentes und vorhersagbares User Interface • Schnelles Prototyping • Gewonnene Zeit, um sich auf neue Probleme zu konzentrieren • Patterns verbessern die Code-Qualität • Schnelle Implementierung • Vermeidung von Code-Redundanzen • Effiziente QA • Patterns sparen jede Menge Zeit • Patterns ermöglichen eine klare Kommunikation mit allen Stakeholdern und vermeiden Missverständnisse
  61. 61. ...und was ihr dabei beachten solltet • Dokumentation und Prozesse einfach halten • Semantische und flexible Namen nutzen • Modulare Struktur einsetzen (in großen Unternehmen) • Alle Beteiligten mit ins Boot holen (besonders Entwickler) • Balance zwischen Stabilität und Weiterentwicklung von Patterns finden • Testen, lernen, anpassen
  62. 62. Vielen Dank! tl;dr Eine Pattern Library ist großartig! @wolfbruening produktbezogen.de
  63. 63. Bilder • Folie 27: Margaret Almon http://www.flickr.com/photos/nutmegdesigns • Folie 32: Wolfgang Lonien http://www.flickr.com/photos/wjlonien • Folien 16, 23, 46: http://unsplash.com/

×