Designsysteme (deutsch) #UXcampHH

User Interface-Design gewinnt zunehmend an Bedeutung für Produkte und Dienstleistungen, da es deren Nutzererlebnis beeinflusst. User Experience selbst bestimmt maßgeblich den Wert digitaler Angebote und ist oft deren tragendes Unterscheidungsmerkmal. Leider zerstören „historisch gewachsene“, unzusammenhängende Benutzeroberflächen eben jenen Wert von Produkten und Markenerlebnissen

Dieser Vortrag dreht sich um Designsysteme. Diese helfen – richtig aufgesetzt und angewendet – UX- und Designversäumnisse zu beheben oder gar gleich zu vermeiden. Modularität und Standardisierung wiederkehrend eingesetzter Aspekte helfen dabei, Arbeits- und Bedienabläufe zu beschleunigen sowie den Geschäfts- und Nutzwert zu steigern. Designsysteme helfen UX und Markenwerte für alle Beteiligten (Product, UX, UI & Dev) begreif- und anwendbar zu machen.

#DesignSysteme #DesignSystem #ProductDesign #DesignProcess #InteractionDesign #UserExperience #UX #UI #ModularDesign #AtomicDesign #PatternLibraries #PatternLibrary #StyleGuides #StyleGuide #UXguidelines #UXguideline #Elemente #Module #Komponenten #ButtonFixing #ButtonBurnout

Transcript

1.  DESIGNSYSTEME  UXCAMP, HAMBURG 11. AUGUST 2018 @BENNOLOEWENBERG
2. @BennoLoewenberg selbst „einfache“ Dinge können kompliziert werden  BUTTON 
3. Danger DANGER Danger Danger Positive Good Positive positive Quelle: Richard Saunders dies nicht jenes
4. Quelle: Dominic McPhee
5. Quelle: David Roessli Website Investoren-Site Shop Mobile-App
6.   VIELFÄLTIGES WIRRWAR  Quelle: open device lab Helsinki Produkte, Platformen, Geräte
7. „HISTORISCH GEWACHSEN“ @BennoLoewenberg Code, Tech, Design, Org
8. @BennoLoewenberg – Viele Personen und Werkzeuge im Einsatz – Kaum bis kein Testen (technisch und UX) – Minimale bis keine Spezifikation und Dokumentation – Verschiedene Komponenten über alle Geschäftsbereiche   UX & DESIGN DEBT 
9. @BennoLoewenberg – Zeit - Geld – Fokus – Marke – Engagement – Wert und Qualität – Kundenzufriedenheit   KOSTSPIELIGES CHAOS 
10. @BennoLoewenberg   UI-ELEMENTE BESTIMMEN OB & WIE    FUNKTIONEN NUTZBAR SIND 
11. @BennoLoewenberg jede Kombination aus Wasser- menge und -temperatur wählbar …   EU DUSCHARMATUR 
12. @BennoLoewenberg … einfacher zu bedienen, aber eingeschränkte Möglichkeiten (z. B. nur ein wenig warmes Wasser ist nicht wählbar)   US/CA DUSCHARMATUR 
13. @BennoLoewenberg UI design wird zunehmend wichtig für Produkte und Dienstleistungen. UX bestimmt Nutz- und Marktwert digitaler Angebote und ist ein Unterscheidungsmerkmal .   MULTI-SCREEN & OMNI-CHANNEL 
14. @BennoLoewenberg + Verringerung der Design-Schuld (stimmige und durchgängige Marke & UX) + Konzentration auf UX & Besonderheiten (keine Rendundanzen) + Beschleunigte Prozesse (Design, Handover, Code) + Geschäftswertsteigerung (Pflege, Skalierbarkeit)  ZIELE 
15. Alta, Archipelago, Argon, Apex, Axiom, Backpack, Base, Binary, Bloom, Blueprint, Boundless, Build, Bouy, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Cosmos, DressCode, Eos, Evergreen, Fabric, Feather, Feelix, Fiori, Fishtank, Fleet, Float, Fluent, Foundation, Frontier, Fuse, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Harmony, Hedwig, Honeycomb, Horizon, Indigo, Kotti, Lexicon, Lightning, Luci, Material, Mind, Mineral, Nachos, Northstar, Nova, One, Opattern, Orbit, Origami, Otkit, PatternFly, Photon, Plasma, Polaris, Skin, Predix, Primer, Purple, Ratio, Ring, Rizzo, Scooter, Show- Car, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, s, Starling, Swarm, ThingWorx, Uniform, nison, Unity, Ustyle, @BennoLoewenberg  DESIGNSYSTEME 
16. @BennoLoewenberg  DEFINITION    EINES DESIGNSYSTEMS 
17. @BennoLoewenberg Designsystem ≠ Styleguide Designsystem ≠ Pattern-Library Designsystem ≠ System-Design  DE-TERMINATION  sprich: ist NICHT gleich
18. Quelle: Nathan Curtis [kommentiert] “ A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
19. @BennoLoewenberg + Blaupause für UI und Interaction-Patterns + Regeln für das Zusammenspiel technischer und visueller Kompnenten für konsistente UX + Kodifiziertes System zur Mehrfachverwendung über alle Produkte hinweg für stimmige UX  ZUSAMMENSPIEL 
20. @BennoLoewenberg + Standardisierte Grundlangen befreien Kapazitäten für z. B. Reseach, Inspiration für neue Konzepte, Handoff-Prozess, ganzheitlicher Blick auf Eigenschaften und deren Auswirkungen. + Strukturierte Basis für alle Produkte und Produktversionen ohne jedes Mal viel Zeit und Arbeit zu erfordern.  ERLEICHTERUNG 
21.  ANATOMIE    VON MODULAREM DESIGN  @BennoLoewenberg
22. “ As a front-end dev, it is my job to abstract design into repeatable rules.” Quelle: Hidde de Vries [kommentiert] Design system
23.   ANSTATT FESTER LAYOUTS …  @BennoLoewenberg
24.   … FLEXIBEL NUTZBARE ELEMENTE  @BennoLoewenberg
25. @BennoLoewenberg Gestalten für Module und deren Zusammenspiel auf unterschiedlichen Bildschirmen, nicht statischen Masken. Gestalten für sich verändernde Produkte, Plattformen und Nutzeranforderungen.  ANPASSBARKEIT 
26.   ZUSAMMENSPIEL DER TEILE  @BennoLoewenberg (nach Diana Mounter) Element Komponente Seitenlayout Interaktionsmodell
27. “ Describing what something IS before attempting to describe what it looks like: Defining the semantics of a design language is fundamental to design at scale.” Quelle: Mark Dalgleish [kommentiert]
28.  DESIGN-TOKENS  @BennoLoewenberg (nach Jina Anne) KEINE hartkodierten Werte
29. @BennoLoewenberg (nach Sophia Voychehovski Prater)  RESPONSIVE  Teaser-Box Suchergebnisraster Landing-Page
30. @BennoLoewenberg (nach styltil.es)  THEMABLE  LOGO LOGO LOGO Partner-Site Produkt B Produkt A
31. @BennoLoewenberg  ZUSAMMENSETZUNG    EINES DESIGNSYSTEMS 
32. EINIGE RESSOURCEN @BennoLoewenberg STYLE GUIDE & PATTERN LIB   VIELE „DESIGNSYSTEME“ 
33. Quelles: Jeremy Keith & Tim Bendt [kommentiert] “ It’s not very useful to create a library of patterns without providing any framework for using  those patterns.” “ A design system is [primarily] a tool for documentation and communication.”
34. @BennoLoewenberg am Wichtigsten WIE ANWENDEN WIE ES AUSSIEHT & KLINGT DIREKT VERWENDBARES
35. @BennoLoewenberg GUIDELINES STYLE & PATTERNS DES & DEV RESSOURCEN am Wichtigsten
36. BAUSTEINE (STYLEGUIDE) Farbpaletten Typogr. Maße Rasterdefinitionen Icons & Assets MUSTER (PATTERN-LIBRARY) Elemente Komponenten Module Vorlagen REGELN (GUIDELINES) Designprinzipien Umsetzungsrichtlinien Richtlinien für Inhalte @BennoLoewenberg (nach UXpin)
37. @BennoLoewenberg (nach Dominic McPhee) STYLEGUIDE PATTERN-LIBRARY Designspache Umsetzung PRINZIPIEN DOKUMENTATION LIVING-STYLEGUIDE UI- & UX-KITS tragender Erfolgs- faktor ORGA/STEUERUNG
38. @BennoLoewenberg  BEISPIELE    VON DESIGNSYSTEMEN 
39. @BennoLoewenberg WIE ES AUSSIEHT & KLINGT
40.  STYLEGUIDE  Quelle: Atlassian Design
41.  STYLEGUIDE  Quelle: Atlassian Design
42.  PATTERN-LIBRARY  Quelle: IBM Carbon
43.  PATTERN-LIBRARY  Quelle: IBM Carbon
44.  ANIMATION-GUIDELINES  Quelle: Google Material Design
45. Quelle: Google Material Design  ANIMATION-GUIDELINES 
46. WIE ANWENDEN @BennoLoewenberg WIE ANWENDEN
47.  DESIGN-PRINZIPIEN  Quelle: Apple Human Interface Guidelines [kommentiert]
48.  DESIGN-PRINZIPIEN  Quelle: Apple Human Interface Guidelines [kommentiert]
49. Quelle: SAP Fiori  UX-GUIDELINES 
50. Quelle: SAP Fiori  UX-GUIDELINES 
51. Quelle: Shopify Polaris  CONTENT-GUIDELINES 
52. Quelle: Shopify Polaris  CONTENT-GUIDELINES 
53. @BennoLoewenberg DIREKT VERWENDBARES
54.  LIVING-STYLEGUIDE  Quelle: Salesforce Lightning
55.  LIVING-STYLEGUIDE  Quelle: Salesforce Lightning
56.  UI-KITS  Quelle: Material Design Themer – Sketch Library
57.  PROTOTYPING-KITS  Quelle: SAP Fiori – Axure Widgets
58. Quelle: Facebook Design – Sound Files  MEDIA-ASSET-KITS 
59. @BennoLoewenberg  ERSTELLUNG    EINES DESIGNSYSTEMS 
60.  GESAMTBILD  + Ein grundlegendes Framework etablieren + Untern.weites Bewusstsein schaffen (inkl. Nutzung) + Globalen Design & Dev Werkzeugkasten bauen + Eine „Quelle der Wahrheit“ für alle Gesch.ber. etablieren + Das Designsystem fortwährend prüfen und pflegen @BennoLoewenberg
61. Quelle: Nathan Curtis   DEFINIERTER ABLAUF 
62.  EINFÜHRUNG  1. Elementebestandsaufnahme 2. Nutzerrecherche und Eigenschaftenbestimmung 3. Objektestamm identifizieren 4. Minimum Viable Designsystem 5. Pilotprojekt (Referenz Design-Showcase) @BennoLoewenberg
63.  INVENTUR  Quelle: Design System Worksheet – Nathan Curtis
64. Quelle: Gall’s Law on Complex Systems [kommentiert] “ A complex system that works, has evolved from a simple system that worked. A complex system designed from scratch never works nor can be patched up to work. Start (over) with a working simple system ”
65.   KLEINE SCHRITTE  Klein anfangen Allgemeinverständliche und verwendbare Kernelemente Mach es anwendbar Designoptionen als Merkmale („Tokens“), anschaulich als Seiten und Elemente dargeboten Verwende es Priorisiere es, mache Design-Demos & -Überprüfungen, für Design-Development-Konvergenz @BennoLoewenberg
66. @BennoLoewenberg  ASPEKTE    EINES DESIGNSYSTEMS 
67.  PRODUKT  Es ist KEIN einfaches Nebenprojekt ! Ein Designsystem ist ein vollwertiges Produkt das anderen Softwareprodukten dient. Es beeinflusst im erheblichen Maße die Qualität jener Produkte, welche damit gebaut wurden und ist daher ein Erfolgsfaktor . @BennoLoewenberg
68.  ERFOLGSFAKTOREN  Ein Designsystem benötigt Strategie & Ressourcen wie jedes „normale“ Produkt. Für dessen erfolgreiche Umsetzung müssen viele Beteiligte aktiv dazu beitragen . Designer und Entwickler werden es unterstützen , nur wenn sie Teilhabe am Designsystem haben. @BennoLoewenberg
69.   NIEMALS FERTIG  Es ist KEINE Einmalgeschichte ! Um ein Designsystem am Leben und relevant zu halten, benötigt es fortwährende Pflege . Je größer es wird, desto kürzer die Zyklen bzgl. Anforderungs & Qualitätsprüfung sowie Aktualisierung . @BennoLoewenberg
70. @BennoLoewenberg (nach Ken Skistim)  BALANCE  Flexibilität Konsistenz Designsystem alles von Grund auf neu machen nur Vorgefertigtes verwenden
71. @BennoLoewenberg (nach Firefox Photon)  BALANCE  Ähnlichkeit Plattform Produkt Vertrautheit 0 Designsystem Schlechte Usability Keine Marke
72.   SKALIERBARE UX  Designsysteme machen UX begreifbar und Markenwerte anwendbar für Teams. @BennoLoewenberg
73.   @BENNOLOEWENBERG   LINKEDIN / XING / TWITTER Design Sprint