Von Windows Forms zu Web Components: robuste und flexible User Experience mit Storybook und Angular
0 gefällt mir197 aufrufe
Andreas Wissel präsentiert die Bedeutung robuster Designsysteme mit Storybook und Angular, betont die Notwendigkeit einer engen Zusammenarbeit zwischen Design und Entwicklung zur Verbesserung der User Experience. Er beleuchtet, wie moderne Designsysteme verschiedene Plattformen und Geräte unterstützen können und beschreibt den Entwicklungsprozess vom Design in Figma bis zur Implementierung in Code. Zudem betont er die Vorteile von Komponenten-basiertem Design und die Möglichkeit von automatisierten Tests zur Sicherstellung der Qualität.
Von Windows Forms zu Web Components: robuste und flexible User Experience mit Storybook und Angular
- 1. Andreas Wissel @andreas_wissel User Experience Architect Von Windows Forms zu Web Components Robuste Design Systems mit Storybook und Angular
- 2. Robuste Design Systems mit Storybook und Angular • Design Systems • Tooling • framework-agnostisch • am Beispiel Angular • platform-unabhängig Was Sie erwartet 2 • technischer Deep Dive • Angular Deep Dive Was Sie nicht erwartet
- 3. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 3 💡 Enterprise UX ❤ Design Systems # Cross-Platform Design 🏢 Thinktecture AG ✍ andreaswissel.com 🐦 @andreas_wissel
- 4. Robuste Design Systems mit Storybook und Angular User Experience Architect Andreas Wissel 4 • Designer-Developer-Schnittstelle • Workflow-Optimierung • Beratung & Begleitung von Redesigns • Fokus auf Design Systems mit Storybook
- 5. Robuste Design Systems mit Storybook und Angular • Dachbegriff • “all aspects of the user’s experience when interacting with the product, service, environment or facility” (ISO 9241-210) • ganzheitliche Betrachtung davon, wie unsere Produkte Anwender, Geschäftsprozesse und Umwelt beeinflussen Was ist UX? 5
- 6. Robuste Design Systems mit Storybook und Angular Menschen denken in Mustern 6 User Experience im Alltag
- 7. Robuste Design Systems mit Storybook und Angular7 Menschen denken in Mustern User Experience im Alltag
- 8. Robuste Design Systems mit Storybook und Angular8 Menschen denken in Mustern User Experience im Alltag
- 9. Robuste Design Systems mit Storybook und Angular9 Und ohne Muster sind wir verloren.. User Experience im Alltag
- 10. Robuste Design Systems mit Storybook und Angular • Features müssen sichtbar sein • Features müssen benutzbar sein • UX schafft Zugang: • Discoverability • Usability • Accessibility User Experience für Entwickler 10 Access denied
- 11. Robuste Design Systems mit Storybook und Angular Enge Zusammenarbeit und gemeinsames Verständnis führt zu guter User Experience Dieser Talk soll das nötige Handwerkszeug für enge Zusammenarbeit geben Denn User Experience dreht sich vor allem um eins: Mission Statement 11 Menschen
- 12. Robuste Design Systems mit Storybook und Angular12 Kollaboration ⚡ Fachbereiche Konsistenz ⚡ Projektalltag Skalierbarkeit ⚡ Agile Prozesse Menschen
- 13. Robuste Design Systems mit Storybook und Angular • echte, lebendige Komponenten • direkt benutzbar • gekapselt • Use Case-spezifisch • Dokumentation • Styleguide • Verwendung von Komponenten Design Systems 13
- 14. Robuste Design Systems mit Storybook und Angular Moment mal.. 14 Ein alter Bekannter?
- 15. Robuste Design Systems mit Storybook und Angular • eine Plattform (Windows) • eingeschränkte Geräteklassen (vorrangig Desktop) • Microsoft Design-Sprache Windows Forms und WPF 15
- 16. Robuste Design Systems mit Storybook und Angular “Früher war alles einfacher” 16
- 17. Robuste Design Systems mit Storybook und Angular relevante Zielplattformen früher: Windows oder Web 17
- 18. Robuste Design Systems mit Storybook und Angular relevante Zielplattformen heute: Windows, (Mac), Web/PWA, iOS, Android 18 ✝ R.I.P. Windows Phone
- 19. Robuste Design Systems mit Storybook und Angular Doch damit nicht genug! 19
- 20. Robuste Design Systems mit Storybook und Angular Stetig wachsender Zielmarkt 20
- 21. Robuste Design Systems mit Storybook und Angular • extrem viele Geräteklassen • verschiedenste Eingabemöglichkeiten • viele Zielplattformen • völlig neue Möglichkeiten • völlige neue Fehlerquellen Stetig wachsender Zielmarkt 21
- 22. Robuste Design Systems mit Storybook und Angular Moderne Design Systems: Bausteine 22 Branding Guidelines Komponenten- bibliothek Dokumentation Animation, a11y, etc. Inhalte isoliert iterativ erweiterbar brown field-Einsatz Prozess viele Plattformen viele Geräteklassen eigene Designsprache Kapselung Anforderungen }+
- 23. Robuste Design Systems mit Storybook und Angular • geraten durch anspruchsvollen B2C-Markt unter Druck • müssen einfach zu bedienen sein • aber dabei trotzdem viele Funktionen liefern • nach Möglichkeit auf allen Plattformen verfügbar sein Moderne Business Anwendungen 23 “Machen wir es doch wie Facebook”
- 24. Robuste Design Systems mit Storybook und Angular • iterative Entwicklung von UX und Code • fail early, fail often • robuster Prozess • isolierte Komponenten • enge Zusammenarbeit • starker Austausch • interdisziplinär Die Herausforderung 24
- 25. Robuste Design Systems mit Storybook und Angular • Browserbasiert mit nativen Apps • Zusammenarbeit in Echtzeit • Components, Constraints, Grids, uvm. • Prototyping • (rudimentäre) CSS-Generierung • Kommerziell, kostenfrei nutzbar (für öffentliche Projekte) Figma: Komponentenbasiertes Design 25
- 26. Robuste Design Systems mit Storybook und Angular Figma: Komponentenbasiertes Design 26 Demo Time
- 27. Robuste Design Systems mit Storybook und Angular • Komponenten-Modell • Test von “Worst Case”-Werten • Responsive Design im Tool • Prototyping bildet Workflows ab Figma: Zusammenspiel mit Developer-Workflows 27
- 28. Robuste Design Systems mit Storybook und Angular • Design System in Code abbilden • Schnittstelle zwischen Design & Code • isolierte Entwicklung von Komponenten • Vorbereitung auf Unit Tests • Dokumentation direkt an Komponenten Storybook 28
- 29. Robuste Design Systems mit Storybook und Angular • framework-agnostisch • Open Source • Verwaltet von der JS Foundation • vielfältiges Plugin-Ökosystem • Möglichkeit von Snapshot Tests (visuell, code) Storybook 29
- 30. Robuste Design Systems mit Storybook und Angular Storybook am konkreten Beispiel 30 Demo Time
- 31. Robuste Design Systems mit Storybook und Angular Designer • einfache Abnahme • Testen am lebenden Subjekt • Konsens Storybook - wer profitiert davon? 31
- 32. Robuste Design Systems mit Storybook und Angular Developer • Edge Cases • schwierig zu erreichende States • Regression Testing • lebendige Dokumentation Storybook - wer profitiert davon? 32
- 33. Robuste Design Systems mit Storybook und Angular Tester • Mock-Daten • Automatisierung • Eingrenzung auf Komponenten Storybook - wer profitiert davon? 33
- 34. Robuste Design Systems mit Storybook und Angular Designer • einfache Abnahme • Testen am lebenden Subjekt • Konsens Developer • Edge Cases • schwierig zu erreichende States • Regression Testing • lebendige Dokumentation Tester • Mock-Daten • Automatisierung • Eingrenzung auf Komponenten Storybook - wer profitiert davon? 34
- 35. Robuste Design Systems mit Storybook und Angular Gesamtes Team • gemeinsames Verständnis • einfacherer Zugang zu Komponenten • Übersicht und Dokumentation Storybook - wer profitiert davon? 35
- 36. Robuste Design Systems mit Storybook und Angular • verwendet das Konzept komponentenbasierter Softwareentwicklung • erlaubt die Kapselung von CSS (ViewEncapsulation) zur Vermeidung von monolithischem CSS • eröffnet einen möglichen Migrationspfad auf Web Components Angular 36
- 37. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 37
- 38. Robuste Design Systems mit Storybook und Angular Komponentenbasiertes Design 38 Form Group Header Input Input Button Login Background
- 39. Robuste Design Systems mit Storybook und Angular Die Input-Komponente in Storybook mit Angular Live Coding 39
- 40. Robuste Design Systems mit Storybook und Angular Wrap-Up: Technologien 40 Universell einsetzbar
- 41. Robuste Design Systems mit Storybook und Angular 1. Der Designer erstellt eine Komponente in Figma 2. Der Entwickler generiert ein passendes Modul, eine Komponente sowie eine Story 3. Der Entwickler übernimmt die CSS-Stile aus Figma 4. Der Entwickler implementiert den HTML-Aufbau und übernimmt die Logik 5. Der Entwickler implementiert eine passende Story (und Unit-Tests) 6. Review mit dem Designer, bei Bedarf die obigen Schritte wiederholen Wrap-Up: Workflow 41
- 42. Robuste Design Systems mit Storybook und Angular • echte Komponenten • modulare, isolierte Entwicklung • einfachere Wartbarkeit • brown field-geeignet • Dokumentation • konsistentere User Experience • Bonus: Unit-Tests profitieren von Mock-Daten Wrap-Up: Design Systems mit Storybook und Angular 42
- 43. Robuste Design Systems mit Storybook und Angular43 User Experience Architect Andreas Wissel 🐦 @andreas_wissel 📨 inquiries@kaeku.io ✍ andreaswissel.com Vielen Dank!
- 44. Robuste Design Systems mit Storybook und Angular44 Figma Projekt: bit.ly/ng-ds-figma Repository: bit.ly/basta-ds-repo Slides: bit.ly/basta-ds-slides Links
- 45. Robuste Design Systems mit Storybook und Angular45 Quellen https://twitter.com/DougCollinsUX/status/1021789284846788609 https://www.htc.com/us/newsroom/2019-03-26/ https://www.heise.de/select/ix/2017/11/1509663159694094 https://www.samsung.com/sg/refrigerators/family-hub-rf56n9740sg/ https://www.apple.com/shop/buy-watch/apple-watch-series-3/38mm-gps-silver-aluminum-white-sport-band https://support.apple.com/kb/sp770?locale=de_DE https://www.apple.com/de/shop/buy-ipad/ipad-pro https://www.apple.com/de/shop/buy-mac/macbook-pro https://www.apple.com/de/shop/buy-mac/imac https://www.microsoft.com/de-de/p/surface-studio-2/8sbjxm0m58t4 https://twitter.com/rsg/status/1148421102009344000 https://twitter.com/Talk_To_The_Hat/status/1166460235982233600 https://www.reddit.com/r/CrappyDesign/comments/c55puw/piss_poor_location/ https://twitter.com/DougCollinsUX/status/1122881214040420352