Das Dokument beschreibt die Entwicklung und Pflege einer Pattern Library für die große E-Commerce-Plattform otto.de, um Inkonsistenzen und Missverständnisse in der Benutzeroberfläche zu vermeiden. Patterns sind wiederverwendbare Elemente, die spezifische Probleme lösen und den Designprozess effizienter gestalten. Die wichtigsten Erkenntnisse umfassen die Notwendigkeit einfacher, semantischer Bezeichnungen, die Einbeziehung aller Stakeholder und eine Balance zwischen Stabilität und Evolution der Patterns.

1. Pattern Libraries,
Aufzucht und Pflege
...und warum du auch eine haben solltest
(selbst für kleinere Projekte)

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. 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. Warum überhaupt?
Parallele Konzeption,
Kommunikation und
Entwicklung erzeugen
Missverständnisse,
Redundanzen und
Inkonsistenzen

5. Die Konsequenzen
7 Lösungen und Stile für die selbe Aufgabe gleichzeitig auf OTTO.de online
(das haben wir schon behoben)

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. Aber was sind Patterns
eigentlich?

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. Was sind Patterns?
• Unteilbare Patterns („Bausteine“)
• Patterns aus Patterns („Komponenten“)

10. Was sind Patterns?
• Templates und Sub-Templates
• Animationen
• Flows
• Naming Conventions
• Wording
• ...

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. Vielen Dank, jetzt weiß ich was
ein Pattern ist, aber wie komme
ich zu meiner Library?

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. 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. Und was haben wir dabei
gelernt?

16. Dokumentation

17. Yahoo Pattern Library

18. Yahoo Pattern Library
WTF?

19. Ein viel zu komplizierter Prozess
Image created by Matt Leacock

20. Learning #1
So einfach wie möglich
(wirklich, wirklich einfach)

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. 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. Naming

24. Deskriptive vs. semantische
Namen
Shiny Blue Button XL
???
Shiny Blue Button XL
Relaunch/
Redesign

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. Und was ist mit Größen?
Button S
Button M
Button L
Hier ein neuer Button? Neeeeiiiiiiin!!!

27. Image created by Margaret Almon http://www.flickr.com/photos/nutmegdesigns

28. US city blocks

29. City-Block-Größen
Button 50
Button 100
Button 200
Button 150

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. Learning #2
Semantische und flexible
Pattern-Namen nutzen

32. Struktur
Image created by Wolfgang Lonien, http://www.flickr.com/photos/wjlonien

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. Modularer Aufbau
• Hauptsächliche Nutzungsszenarien
• Konzeption, Prototyping & Visual Design
• Dokumentation und Kommunikation
• Entwicklung

35. Prototyping & Visual Design

36. Dokumentation & Kommunikation

37. Entwicklung

38. Learning #3
Involviert eure Entwickler
(und alle anderen Stakeholder)

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. 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. Struktur

42. Learning #4
Modulare Lösungen sind
oft besser als One-Size-
Fits-All-Konstrukte
(insbesondere bei großen Projekten)

43. Struktur

44. Optimierte Struktur

45. Learning #5
Die Ideale Pattern Library
entwickelt sich erst im
Lauf der Zeit

46. Betrieb

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. ...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. 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. Learning #6
Eine Balance zwischen
Stabilität und Evolution ist
wichtig

51. Herkömmliche Arbeitsprozesse

52. Neue Arbeitsprozesse

53. Learning #7
Eine gute Pattern Library
ermöglicht effizientere
Prozesse

54. Learning #8
Designer und Entwickler
haben sich wieder gern.

55. Das klingt alles echt cool, aber...
...schränkt der Gebrauch von Patterns nicht meine
Kreativität ein?

56. Falsch!

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. Und was ist mit meiner Seite /
meiner Agentur?

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. 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. ...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. Vielen Dank!
tl;dr Eine Pattern Library ist großartig!
@wolfbruening
produktbezogen.de

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/