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 Arbor

Als Art Director und UI Designer bei webvariants und UCDplus gearbeitet

Aktuell Senior Interaction Designer für OTTO.de

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

Warum überhaupt?

Parallele Konzeption, Kommunikation und Entwicklung erzeugen Missverständnisse, Redundanzen und Inkonsistenzen

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...führt zu viel zusätzlicher und doppelt erledigter Arbeit und überflüssigen QA-Runden

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 unterschiedlichen Kontexten (bzw. mit unterschiedlichen Inhalten) wiederholt.

Was sind Patterns?

• Unteilbare Patterns („Bausteine“)• Patterns aus Patterns („Komponenten“)

Was sind Patterns?

• Templates und Sub-Templates• Animationen• Flows• Naming Conventions• Wording• ...

Jared SpoolFounding 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.”

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

2. Vertiefung• Hilfe von Außen• Interviews mit allen Beteiligten• Workshops

• Sammeln und Dokumentation von Patterns• Entwickler• Struktur und Verfeinerung

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

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öglich halten

• Prozesse und Diskussionen schlank halten

➔ Overhead für das Hinzufügen und Verwalten von Patterns so gering wie möglich halten

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!

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 beziehen

• Primary Button• Secondary Button• Headline• Copy• Link

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 „200“, „300“...

Nun hat man ein einfaches Benennungssystem, bei dem es leicht ist, die Standardvariante zu identifizieren

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• Entwickler• Produktmanager• Projektmanager• Corporate Designer• Externe Agenturen

• Unmöglich eine One-size-fits-all-Lösung zu finden

Modularer Aufbau

• Hauptsächliche Nutzungsszenarien• Konzeption, Prototyping & Visual Design• Dokumentation und Kommunikation• Entwicklung

Prototyping & Visual Design

Dokumentation & Kommunikation

Entwicklung

Learning #3

Involviert eure Entwickler (und alle anderen Stakeholder)

Bill ScottSr. 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.”

Bill ScottSr. Director Ui Engineering,

Paypal

„Design Patterns create ashared understanding inthe 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.“

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

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

Lucas PettinatiUX 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.”

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

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.ä.) sammeln, später Dokumentation hinzufügen

• Agentur → Abstrakte Patterns definieren (Wireframes, Flows, etc.), die sich regelmäßig in Kundenprojekten wiederholen

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

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

Vielen Dank!

tl;dr Eine Pattern Library ist großartig!

@wolfbruening

produktbezogen.de

Bilder

• Folie 27: Margaret Almonhttp://www.flickr.com/photos/nutmegdesigns

• Folie 32: Wolfgang Lonienhttp://www.flickr.com/photos/wjlonien

• Folien 16, 23, 46: http://unsplash.com/