WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
3 gefällt mir8,074 aufrufe
Das Dokument behandelt die Design- und Entwicklungsaspekte von WPF Custom Controls und beleuchtet deren Vor- und Nachteile aus der Perspektive von Designern und Entwicklern. Es wird diskutiert, wann ein Custom Control sinnvoll ist, wie es die Usability verbessern kann und welche Best Practices bei der Implementierung zu beachten sind. Zudem wird auf die Wichtigkeit von Benutzer-Tests und die Notwendigkeit eingegangen, die Benutzererfahrung durch konsistente und funktionale Designs zu optimieren.
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
- 1. WPF Custom Controls UX Design und Entwicklung dotnet Cologne 2012 Björn Busch-Geertsema UX & UI Development Manager David C. Thömmes UI Developer & Software Engineer www.ergosign.de
- 2. Ausblick Was sind Custom Controls? Warum sind Custom Controls gut? Was sollte man in Bezug auf Design und Umsetzung beachten? WPF Custom Controls: UX Design und Entwicklung 2
- 3. Custom Controls – Fluch oder Segen? …kommt drauf an ;) Unterschiedliche Standpunkte Designer vs. Entwickler Unterschiedliche Ausprägungen Von reinem Styling bis hin zu komplexem Aufbau und Verhalten WPF Custom Controls: UX Design und Entwicklung 3
- 4. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? WPF Custom Controls: UX Design und Entwicklung 4
- 5. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Standard Button WPF Custom Controls: UX Design und Entwicklung 4
- 6. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button WPF Custom Controls: UX Design und Entwicklung 5
- 7. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Einfach gestylter Button WPF Custom Controls: UX Design und Entwicklung 5
- 8. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button WPF Custom Controls: UX Design und Entwicklung 6
- 9. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Vorhersage laden Komplex gestylter Button WPF Custom Controls: UX Design und Entwicklung 6
- 10. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 7
- 11. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Wetter laden Vorhersage laden Komplex gestylter Button mit zusätzlicher Funktionalität Kombiniertes Control WPF Custom Controls: UX Design und Entwicklung 7
- 12. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Wetter laden Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 8
- 13. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Wetter laden Vorhersage laden Standard Custom WPF Custom Controls: UX Design und Entwicklung ? 8
- 14. Eine Frage des Standpunkts: Designer Button Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
- 15. Eine Frage des Standpunkts: Designer Button Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
- 16. Eine Frage des Standpunkts: Designer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
- 17. Eine Frage des Standpunkts: Designer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
- 18. Eine Frage des Standpunkts: Designer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
- 19. Eine Frage des Standpunkts: Designer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 9
- 20. Ist doch nur ein Button… Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
- 21. Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
- 22. Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons Wetter Vorhersage laden Verständlichkeit Icon + Label + Zusatzinfo besser als nur Label Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
- 23. Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons Wetter Vorhersage laden Verständlichkeit Icon + Label + Zusatzinfo besser als nur Label Wetter laden Feedback Systemstatus kommunizieren WPF Custom Controls: UX Design und Entwicklung 10
- 24. Custom Controls = Schlechte Usability? WPF Custom Controls: UX Design und Entwicklung 11
- 25. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! WPF Custom Controls: UX Design und Entwicklung 11
- 26. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! Besondere Sorgfalt beim Design notwendig! • Alle Zustände abbilden Hover, Pressed, usw. • Sofortige Erkennbarkeit sicherstellen Ein Button muss ohne Probleme als Button erkennbar sein WPF Custom Controls: UX Design und Entwicklung 11
- 27. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! Besondere Sorgfalt beim Design notwendig! • Alle Zustände abbilden Hover, Pressed, usw. • Sofortige Erkennbarkeit sicherstellen Ein Button muss ohne Probleme als Button erkennbar sein WPF ermöglicht dies ohne (zu) großen Aufwand WPF Custom Controls: UX Design und Entwicklung 11
- 28. Entscheidungshilfen • Ursprungskomponente(n) Button klar erkennbar • Verbesserung der Usability des Standard Controls Wetter Vorhersage laden z.B. Erweiterung um Icons, größere Schrift, inhaltliche Differenzierung, besseres Feedback u.a. Wetter laden • Kombination eines aktiven Controls mit passiven Controls WPF Custom Controls: UX Design und Entwicklung 12
- 29. Vorsicht bei… WPF Custom Controls: UX Design und Entwicklung 13
- 30. Vorsicht bei… Kombination von aktiven Controls Button auf Button? WPF Custom Controls: UX Design und Entwicklung 13
- 31. Vorsicht bei… Kombination von aktiven Controls Button auf Button? Visuelle und kognitive Überforderung des Anwenders Zu viele Icons/Labels etc., zu bunt u.ä. WPF Custom Controls: UX Design und Entwicklung 13
- 32. Vorsicht bei… Kombination von aktiven Controls Button auf Button? Visuelle und kognitive Überforderung des Anwenders Zu viele Icons/Labels etc., zu bunt u.ä. Komplett neuen Interaktionen WPF Custom Controls: UX Design und Entwicklung 13
- 33. Komplett neue Interaktion WPF Custom Controls: UX Design und Entwicklung 14
- 34. Komplett neue Interaktion Indiskutabel, solange eine Umsetzung mit “normalen” Mitteln ohne große Nachteile möglich ist. WPF Custom Controls: UX Design und Entwicklung 14
- 35. Komplett neue Interaktion Indiskutabel, solange eine Umsetzung mit “normalen” Mitteln ohne große Nachteile möglich ist. User-Testing absolut notwendig WPF Custom Controls: UX Design und Entwicklung 14
- 36. Komplett neue Interaktion Indiskutabel, solange eine Umsetzung mit “normalen” Mitteln ohne große Nachteile möglich ist. User-Testing absolut notwendig Nur sinnvoll, wenn Anwender das Control sehr häufig verwenden und/oder ein sehr großer Effizienzgewinn erreicht wird WPF Custom Controls: UX Design und Entwicklung 14
- 37. Kuchen mag eigentlich jeder… Pie Menü im 3D Modeler MODO WPF Custom Controls: UX Design und Entwicklung 15
- 38. Kuchen mag eigentlich jeder… Oder? Pie Menü im 3D Modeler MODO WPF Custom Controls: UX Design und Entwicklung 15
- 39. Beispiel: Verbesserung des Tab Controls Live Demo WPF Custom Controls: UX Design und Entwicklung 16
- 40. Aber nun zur Technik Wir haben da schon mal was vorbereitet… WPF Custom Controls: UX Design und Entwicklung 17
- 41. Kurzer Einschub zur Erinnerung Style Wertegruppierung für verschiedene Properties eines Controls (Setter) Control Template Strukturbaum, Aufbau eines Controls Template Binding Anbindung von Properties zwischen individuellem Control und Template (z.B. Border-Background › Button- Background) WPF Custom Controls: UX Design und Entwicklung 18
- 42. Eine Frage des Standpunkts: Developer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
- 43. Eine Frage des Standpunkts: Developer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
- 44. Eine Frage des Standpunkts: Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
- 45. Eine Frage des Standpunkts: Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Kommt drauf an… Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
- 46. “Custom Control” – eine Definition Von einer Basisklasse des Frameworks abgeleitet Zusätzliche Funktionalität Methoden, Funktionen, Properties, Instanz- / Klassenvariablen WPF Custom Controls: UX Design und Entwicklung 20
- 47. Welche Basisklasse? WPF Custom Controls: UX Design und Entwicklung 21
- 48. Welche Basisklasse? ListBox TabControl ButtonBase ScrollViewer ItemsControl UserControl FrameworkElement ProgressBar UIElement Slider Control TreeView TabItem ComboBox Panel ContentControl WPF Custom Controls: UX Design und Entwicklung 21
- 49. Welche Basisklasse? ListBox TabControl ButtonBase ScrollViewer ItemsControl UserControl FrameworkElement ProgressBar UIElement Slider Control TreeView TabItem ComboBox Panel ContentControl WPF Custom Controls: UX Design und Entwicklung 22
- 50. UserControl Leicht zu erstellen und benutzen Code-Behind (Blend, Visual Studio) Struktur = Content Element-Referenzierung mit x:Name Styling und Templating möglich Erweiterungen möglich WPF Custom Controls: UX Design und Entwicklung 23
- 53. UserControl im MVVM-Kontext WPF Custom Controls: UX Design und Entwicklung 26
- 54. UserControl im MVVM-Kontext Controls UserControls Views ViewModels Models … WPF Custom Controls: UX Design und Entwicklung 26
- 55. UserControl im MVVM-Kontext UserControls dienen der Zusammenfassung und Gruppierung mehrerer Controls und Layout Panels. WPF Custom Controls: UX Design und Entwicklung 27
- 56. Custom Control • Ableitung von einer konkreten Klasse ≠ UserControl • Styling- und Templating-Möglichkeiten • Visueller Aufbau im ControlTemplate • Default Style möglich (Generic.xaml) • Zusammenfassung in einer Control Library möglich • Element-Referenzierung über OnApplyTemplate() WPF Custom Controls: UX Design und Entwicklung 28
- 63. UserControl vs. Custom Control UserControl Custom Control Technik Logik & Visual Styling Aufwand Reuse WPF Custom Controls: UX Design und Entwicklung 35
- 64. UserControl vs. Custom Control UserControl Custom Control Technik Logik & Visual Styling Aufwand Reuse WPF Custom Controls: UX Design und Entwicklung 35
- 65. UserControl vs. Custom Control UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Styling Aufwand Reuse WPF Custom Controls: UX Design und Entwicklung 35
- 66. UserControl vs. Custom Control UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Harte Verdrahtung Getrennt Styling Aufwand Reuse WPF Custom Controls: UX Design und Entwicklung 35
- 67. UserControl vs. Custom Control UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Harte Verdrahtung Getrennt Styling Hart Flexibel Aufwand Reuse WPF Custom Controls: UX Design und Entwicklung 35
- 68. UserControl vs. Custom Control UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Harte Verdrahtung Getrennt Styling Hart Flexibel Aufwand Wenig Etwas aufwändiger Reuse WPF Custom Controls: UX Design und Entwicklung 35
- 69. UserControl vs. Custom Control UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Harte Verdrahtung Getrennt Styling Hart Flexibel Aufwand Wenig Etwas aufwändiger Reuse Schlecht Gut WPF Custom Controls: UX Design und Entwicklung 35
- 70. Wann ist ein Custom Control sinnvoll? WPF Custom Controls: UX Design und Entwicklung 36
- 71. Wann ist ein Custom Control sinnvoll? WPF Standard Control? WPF Custom Controls: UX Design und Entwicklung 36
- 72. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Control? Controls gruppieren? WPF Custom Controls: UX Design und Entwicklung 36
- 73. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? WPF Custom Controls: UX Design und Entwicklung 36
- 74. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / MarkupExtension? WPF Custom Controls: UX Design und Entwicklung 36
- 75. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / Attached Properties / MarkupExtension? Behaviors? WPF Custom Controls: UX Design und Entwicklung 36
- 76. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / Attached Properties / Drittanbieter? MarkupExtension? Behaviors? WPF Custom Controls: UX Design und Entwicklung 36
- 77. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / Attached Properties / Drittanbieter? MarkupExtension? Behaviors? Eigenes Custom Control WPF Custom Controls: UX Design und Entwicklung 36
- 78. Weitere Überlegungen WPF Custom Controls: UX Design und Entwicklung 37
- 79. Weitere Überlegungen • Prototyp vs. Produktiv-Code WPF Custom Controls: UX Design und Entwicklung 37
- 80. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit WPF Custom Controls: UX Design und Entwicklung 37
- 81. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit • Produktivität bei großen Projekten WPF Custom Controls: UX Design und Entwicklung 37
- 82. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit • Produktivität bei großen Projekten • Konsistenz im User Interface WPF Custom Controls: UX Design und Entwicklung 37
- 83. Konsistenz im User Interface (Beispiel) WPF Custom Controls: UX Design und Entwicklung 38
- 91. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
- 92. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
- 93. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
- 94. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
- 95. Umsetzung Vorgehensweise + Beispiele Button Button Wetter Wetter laden Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 47
- 104. 2. Strategie
- 117. Live Demo
- 118. Blendability • XAML friendly und Blend kompatibel • Default Property Values, Styles und Templates • Zusätzliche Ressourcen als Property • Keine tiefe Verschachtelung der Templates • Mode Properties für Trigger • Design Time Features verwenden • ... WPF Custom Controls: UX Design und Entwicklung 70
- 119. Blendability - TemplatePartAttribute WPF Custom Controls: UX Design und Entwicklung 71
- 120. Blendability - ContentPropertyAttribute WPF Custom Controls: UX Design und Entwicklung 72
- 121. Blendability - AlternateContentProperty WPF Custom Controls: UX Design und Entwicklung 73
- 122. Blendability - Description Attribut WPF Custom Controls: UX Design und Entwicklung 74
- 123. Blendability - Description Attribut WPF Custom Controls: UX Design und Entwicklung 75
- 124. Blendability - StyleTypedPropertyAttribute WPF Custom Controls: UX Design und Entwicklung 76
- 125. Fazit WPF Custom Controls: UX Design und Entwicklung 77
- 126. Fazit Custom Controls machen Sinn! WPF Custom Controls: UX Design und Entwicklung 77
- 127. Fazit Custom Controls machen Sinn! • verbessern die User Experience WPF Custom Controls: UX Design und Entwicklung 77
- 128. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz WPF Custom Controls: UX Design und Entwicklung 77
- 129. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) WPF Custom Controls: UX Design und Entwicklung 77
- 130. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) • sind einfach cool ;) WPF Custom Controls: UX Design und Entwicklung 77
- 131. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) • sind einfach cool ;) WPF Custom Controls: UX Design und Entwicklung 77
- 132. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) • sind einfach cool ;) …aber mit Bedacht einzusetzen. WPF Custom Controls: UX Design und Entwicklung 77
- 133. WPF Custom Controls UX Design und Entwicklung DISKUSSION Vielen Dank für Ihre Aufmerksamkeit! Björn Busch-Geertsema David C. Thömmes UX & UI Development Manager UI Developer & Software Engineer buschg@ergosign.de thoemmes@ergosign.de www.ergosign.de
Hinweis der Redaktion
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n
- #98: \n
- #99: \n
- #100: \n
- #101: \n
- #102: \n
- #103: \n
- #104: \n
- #105: \n
- #106: \n
- #107: \n
- #108: \n
- #109: \n
- #110: \n
- #111: \n
- #112: \n
- #113: \n
- #114: \n
- #115: \n
- #116: \n
- #117: \n
- #118: \n
- #119: \n
- #120: \n
- #121: \n
- #122: \n
- #123: \n
- #124: \n
- #125: \n
- #126: \n
- #127: \n
- #128: \n
- #129: \n
- #130: \n
- #131: \n
- #132: \n
- #133: \n
- #134: \n
- #135: \n
- #136: \n
- #137: \n
- #138: \n
- #139: \n
- #140: \n
- #141: \n