SlideShare a Scribd company logo
1 of 78
Download to read offline
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                                               WPF Custom Controls
                                                                             UX#Design#und#,Entwicklung

                         Björn#Busch,Geertsema                                                                                                                                                              David#C.#Thömmes
                                           User#Interface#Designer#&                                                                                                                                        User#Interface#
                                            Head#of#UI#Development                                                                                                                                          Developer









         Sponsoren:                                                                                                                                                                                                         Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Ausblick
                 Was+sind+Custom+Controls?
                 Warum+sind+Custom+Controls+gut?
                 Was+sollte+man+in+Bezug+auf+Design+und+
                 Umsetzung+beachten?








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Controls+–+Fluch+oder+Segen?
                 …kommt&drauf&an&;)

                 Unterschiedliche+Standpunkte
                 Designer(vs.(Entwickler

                 Unterschiedliche+Ausprägungen
                 Von(reinem(Styling(bis(hin(zu(komplexem(Au=au(und(
                 Verhalten






         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Einteilung
                 Ab+welchem+Punkt+sprechen+wir+von+einem+
                 Custom+Control?


                                                                                                                                         Button

                                                                                                                            Standard'Bu*on







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Einteilung
                 Ab+welchem+Punkt+sprechen+wir+von+einem+
                 Custom+Control?

                                                                      Button
                                                                                                                                        Button

                                                                                                            Einfach'gestylter'Bu*on







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Einteilung
                 Ab+welchem+Punkt+sprechen+wir+von+einem+
                 Custom+Control?

                          Button                                      Button
                                                                                                                                                        Wetter
                                                                                                                                                        Vorhersage laden

                                                                                                                          Komplex'gestylter'Bu*on







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Einteilung
                 Ab+welchem+Punkt+sprechen+wir+von+einem+
                 Custom+Control?

                          Button                               Button
                                                                                                                   Wetter                                                                                              Wetter laden
                                                                                                                   Vorhersage laden




                                                                                                                                                                                 Komplex'gestylter'Bu*on
                                                                                                                                                                               mit'zusätzlicher'Funk>onalität
                                                                                                                                                                                   Kombiniertes&Control





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Einteilung
                 Ab+welchem+Punkt+sprechen+wir+von+einem+
                 Custom+Control?

                                                                                                                                                      Wetter                                                                               Wetter laden
                                          Button                                         Button
                                                                                                                                                      Vorhersage laden                                                                                                                                 …


                    Standard
                                                                                                                                                         ?                                                                                                               Custom







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                  Eine(Frage(des(Standpunkts:+Designer
                                            Button                                                                                Standard#Control

                                             Button                                                                               Lediglich#Styling

                                        Wetter
                                        Vorhersage laden                                                                          Lediglich#Styling


                                        Wetter laden                                                                              KombinaJon#verschiedener#exisJerender
                                                                                                                                  Controls#um#besseres#Feedback#zu#liefern





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Ist+doch+nur+ein+BuGon…
                 Prominenz
                 Abhebung(von(anderen,(
                                                                                                                                                                                                                                            Wetter
                 kleineren(BuDons
                                                                                                                                                                                                                                            Vorhersage laden
                 Verständlichkeit
                 Icon(+(Label(+(Zusatzinfo
                 besser(als(nur(Label                                                                                                                                                                                                       Wetter laden

                 Feedback
                 Systemstatus(kommunizieren





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Controls+=+Schlechte+Usability?
                 Historische+Angst+vor+eigenen+Controls:
                 Custom(Controls((›((Kein(StandardMVerhalten!

                 Besondere+Sorgfalt+beim+Design+notwendig!
                    • Alle(Zustände(abbilden
                            Hover,#Pressed,#usw.
                    • SoforPge(Erkennbarkeit(sicherstellen
                            Ein#BuPon#muss#ohne#Probleme#als#BuPon#erkennbar#sein

                 WPF+ermöglicht+dies+ohne+(zu)+großen+Aufwand




         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Entscheidungshilfen
                    • Ursprungskomponente(n)(
                                                                                                                                                                                                                                                Button
                      klar(erkennbar
                    • Verbesserung(der(Usability(des(
                      Standard(Controls                                                                                                                                                                                                 Wetter
                            z.B.#Erweiterung#um#Icons,#größere#                                                                                                                                                                         Vorhersage laden
                            SchriR,#inhaltliche#Differenzierung,#
                            besseres#Feedback#u.a.
                    • KombinaPon(eines(akPven(
                                                                                                                                                                                                                                        Wetter laden
                      Controls(mit(passiven(Controls





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Vorsicht+bei
                 KombinaSon+von+akSven+Controls
                 BuDon(auf(BuDon?

                 Visuelle+und+kogniSve+Überforderung+des+
                 Anwenders
                 Zu(viele(Icons/Labels(etc.,(zu(bunt(u.ä.


                 KompleG+neuen+InterakSonen




         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 KompleG+neue+InterakSon
                 Indiskutabel,+solange+eine+Umsetzung+mit+
                 “normalen”+MiGeln+ohne+große+Nachteile+
                 möglich+ist.
                 User[TesSng+absolut+notwendig
                 Nur+sinnvoll,+wenn+Anwender+das+Control+sehr+
                 häufig+verwenden+und/oder+ein+sehr+großer+
                 Effizienzgewinn+erreicht+wird





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Kuchen+mag+eigentlich+jeder…




                                                                                                                                                                                                               Oder?
                                                                             Pie'Menü'im'3D'Modeler'MODO






         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Beispiel:+Verbesserung+des+Tab+Controls




                                                                                                                                                                                                     Live+Demo





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Aber+nun+zur+Technik
                 Wir+haben+da+schon+mal+was+vorbereitet…








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Kurzer+Einschub+zur+Erinnerung
                 Style
                 Wertegruppierung#für#verschiedene#ProperJes#
                 eines#Controls#(Se*er)

                 Control+Template
                 Strukturbaum,#AuYau#eines#Controls

                 Template+Binding
                 Anbindung#von#ProperJes#zwischen#individuellem#Control#und#
                 Template#(z.B.#Border,Background#›#BuPon,Background)






         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                  Eine(Frage(des(Standpunkts:+Developer
                                            Button                                                                                Standard#Control

                                             Button                                                                               Lediglich#Styling

                                        Wetter
                                        Vorhersage laden                                                                          Kommt+drauf+an…


                                        Wetter laden








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 “Custom+Control”+–+eine+DefiniSon

                                             Von+einer+Basisklasse+des+Frameworks+
                                             abgeleitet
                                             Zusätzliche+FunkSonalität+
                                             Methoden,(FunkPonen,(ProperPes,(InstanzM(/(
                                             Klassenvariablen








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Welche+Basisklasse?

                                                  ListBox TabControl
                                      BuPonBase ScrollViewer ItemsControl
                                                  UserControl                                                     FrameworkElement ProgressBar
                                                                                      UIElement                                                   Slider
                                                                               TabItem                                          ComboBox
                                                                                                                                                                               Control                                             TreeView
                                                                                                                                                                             Panel
                                                                                              ContentControl







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Welche+Basisklasse?

                                                  ListBox TabControl
                                      BuPonBase ScrollViewer ItemsControl
                                     UserControl? FrameworkElement                                                                                                                             ProgressBar
                                                                                      UIElement                                                   Slider
                                                                               TabItem                                          ComboBox
                                                                                                                                                                               Control                                             TreeView
                                                                                                                                                                             Panel
                                                                                              ContentControl







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 UserControl
                 • Leicht+zu+erstellen+und+benutzen
                 • Code[Behind+(Blend,+Visual+Studio)
                 • Struktur+=+Content
                 • Element[Referenzierung+mit+x:Name
                 • Styling+und+TemplaSng+möglich
                 • Erweiterungen+möglich





         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 UserControl








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 UserControl








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 UserControl+im+MVVM[Kontext

                                                                                                                                          Controls

                                                                                                               UserControls+›+Views

                                                                                                                                 ViewModels

                                                                                                                                            Models

                                                                                                                                                        …






         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 UserControl+im+MVVM[Kontext


                                             UserControls'dienen'der'
                                        Zusammenfassung'und'Gruppierung'
                                        mehrerer'Controls'und'Layout'Panels.







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control
                    • Ableitung(von(einer(konkreten(Klasse(≠(UserControl
                    • StylingM(und(TemplaPngMMöglichkeiten
                    • Visueller(Au=au(im(ControlTemplate
                    • Default(Style(möglich((Generic.xaml)
                    • Zusammenfassung(in(einer(Control(Library(möglich
                    • ElementMReferenzierung(über(OnApplyTemplate()







         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
THE CONFERENCE
                                                                                                                                                         FOR BETTER USER INTERFACES





                 Custom+Control








         Sponsoren:                                                                                                                                                  Veranstalter:
   Donnerstag, 8. Dezember 11
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference

More Related Content

More from Ergosign GmbH

Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Ergosign GmbH
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSErgosign GmbH
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSErgosign GmbH
 
Augmented Reality im ux design
Augmented Reality im ux designAugmented Reality im ux design
Augmented Reality im ux designErgosign GmbH
 
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Ergosign GmbH
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign GmbH
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign GmbH
 
2013 04-12 iud würzburg
2013 04-12 iud würzburg2013 04-12 iud würzburg
2013 04-12 iud würzburgErgosign GmbH
 
METROfizierung industrieller Bedienoberflächen
METROfizierung industrieller BedienoberflächenMETROfizierung industrieller Bedienoberflächen
METROfizierung industrieller BedienoberflächenErgosign GmbH
 
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceWPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceErgosign GmbH
 
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...Ergosign GmbH
 
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Ergosign GmbH
 
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...Ergosign GmbH
 
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)Ergosign GmbH
 
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Ergosign GmbH
 
UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)Ergosign GmbH
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)Ergosign GmbH
 

More from Ergosign GmbH (17)

Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
Talk "Multimodal Systems", VDMA ERFA Meeting, 05/2020
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
 
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSUSER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
 
Augmented Reality im ux design
Augmented Reality im ux designAugmented Reality im ux design
Augmented Reality im ux design
 
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
Quo vadis, Student? Berufsorientierung für angehende UX Designer (World Usabi...
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013Ergosign-Hilfekonzepte-2013
Ergosign-Hilfekonzepte-2013
 
2013 04-12 iud würzburg
2013 04-12 iud würzburg2013 04-12 iud würzburg
2013 04-12 iud würzburg
 
METROfizierung industrieller Bedienoberflächen
METROfizierung industrieller BedienoberflächenMETROfizierung industrieller Bedienoberflächen
METROfizierung industrieller Bedienoberflächen
 
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne ConferenceWPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
 
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
 
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
Kommunikation 2.0 als Designtool im UCD Prozess (ERGOSIGN)
 
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
UX Management: Effiziente Implementierung von UCD-Methoden in Unternehmen (ER...
 
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
A Best Practice Approach to the Design of Natural User Interfaces (ERGOSIGN)
 
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
Establishing Cross-cultural Collaboration in the Field of User Centered Desig...
 
UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)UI Design for Social Commerce (ERGOSIGN)
UI Design for Social Commerce (ERGOSIGN)
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
 

WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference

  • 1. THE CONFERENCE FOR BETTER USER INTERFACES  WPF Custom Controls UX#Design#und#,Entwicklung Björn#Busch,Geertsema David#C.#Thömmes User#Interface#Designer#& User#Interface# Head#of#UI#Development Developer  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 2. THE CONFERENCE FOR BETTER USER INTERFACES  Ausblick Was+sind+Custom+Controls? Warum+sind+Custom+Controls+gut? Was+sollte+man+in+Bezug+auf+Design+und+ Umsetzung+beachten?  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 3. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Controls+–+Fluch+oder+Segen? …kommt&drauf&an&;) Unterschiedliche+Standpunkte Designer(vs.(Entwickler Unterschiedliche+Ausprägungen Von(reinem(Styling(bis(hin(zu(komplexem(Au=au(und( Verhalten  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 4. THE CONFERENCE FOR BETTER USER INTERFACES  Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Standard'Bu*on  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 5. THE CONFERENCE FOR BETTER USER INTERFACES  Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Button Einfach'gestylter'Bu*on  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 6. THE CONFERENCE FOR BETTER USER INTERFACES  Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Button Wetter Vorhersage laden Komplex'gestylter'Bu*on  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 7. THE CONFERENCE FOR BETTER USER INTERFACES  Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Button Wetter Wetter laden Vorhersage laden Komplex'gestylter'Bu*on mit'zusätzlicher'Funk>onalität Kombiniertes&Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 8. THE CONFERENCE FOR BETTER USER INTERFACES  Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Wetter Wetter laden Button Button Vorhersage laden … Standard ? Custom  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 9. THE CONFERENCE FOR BETTER USER INTERFACES  Eine(Frage(des(Standpunkts:+Designer Button Standard#Control Button Lediglich#Styling Wetter Vorhersage laden Lediglich#Styling Wetter laden KombinaJon#verschiedener#exisJerender Controls#um#besseres#Feedback#zu#liefern  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 10. THE CONFERENCE FOR BETTER USER INTERFACES  Ist+doch+nur+ein+BuGon… Prominenz Abhebung(von(anderen,( Wetter kleineren(BuDons Vorhersage laden Verständlichkeit Icon(+(Label(+(Zusatzinfo besser(als(nur(Label Wetter laden Feedback Systemstatus(kommunizieren  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 11. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Controls+=+Schlechte+Usability? Historische+Angst+vor+eigenen+Controls: Custom(Controls((›((Kein(StandardMVerhalten! Besondere+Sorgfalt+beim+Design+notwendig! • Alle(Zustände(abbilden Hover,#Pressed,#usw. • SoforPge(Erkennbarkeit(sicherstellen Ein#BuPon#muss#ohne#Probleme#als#BuPon#erkennbar#sein WPF+ermöglicht+dies+ohne+(zu)+großen+Aufwand  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 12. THE CONFERENCE FOR BETTER USER INTERFACES  Entscheidungshilfen • Ursprungskomponente(n)( Button klar(erkennbar • Verbesserung(der(Usability(des( Standard(Controls Wetter z.B.#Erweiterung#um#Icons,#größere# Vorhersage laden SchriR,#inhaltliche#Differenzierung,# besseres#Feedback#u.a. • KombinaPon(eines(akPven( Wetter laden Controls(mit(passiven(Controls  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 13. THE CONFERENCE FOR BETTER USER INTERFACES  Vorsicht+bei KombinaSon+von+akSven+Controls BuDon(auf(BuDon? Visuelle+und+kogniSve+Überforderung+des+ Anwenders Zu(viele(Icons/Labels(etc.,(zu(bunt(u.ä. KompleG+neuen+InterakSonen  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 14. THE CONFERENCE FOR BETTER USER INTERFACES  KompleG+neue+InterakSon Indiskutabel,+solange+eine+Umsetzung+mit+ “normalen”+MiGeln+ohne+große+Nachteile+ möglich+ist. User[TesSng+absolut+notwendig Nur+sinnvoll,+wenn+Anwender+das+Control+sehr+ häufig+verwenden+und/oder+ein+sehr+großer+ Effizienzgewinn+erreicht+wird  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 15. THE CONFERENCE FOR BETTER USER INTERFACES  Kuchen+mag+eigentlich+jeder… Oder? Pie'Menü'im'3D'Modeler'MODO  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 16. THE CONFERENCE FOR BETTER USER INTERFACES  Beispiel:+Verbesserung+des+Tab+Controls Live+Demo  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 17. THE CONFERENCE FOR BETTER USER INTERFACES  Aber+nun+zur+Technik Wir+haben+da+schon+mal+was+vorbereitet…  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 18. THE CONFERENCE FOR BETTER USER INTERFACES  Kurzer+Einschub+zur+Erinnerung Style Wertegruppierung#für#verschiedene#ProperJes# eines#Controls#(Se*er) Control+Template Strukturbaum,#AuYau#eines#Controls Template+Binding Anbindung#von#ProperJes#zwischen#individuellem#Control#und# Template#(z.B.#Border,Background#›#BuPon,Background)  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 19. THE CONFERENCE FOR BETTER USER INTERFACES  Eine(Frage(des(Standpunkts:+Developer Button Standard#Control Button Lediglich#Styling Wetter Vorhersage laden Kommt+drauf+an… Wetter laden  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 20. THE CONFERENCE FOR BETTER USER INTERFACES  “Custom+Control”+–+eine+DefiniSon Von+einer+Basisklasse+des+Frameworks+ abgeleitet Zusätzliche+FunkSonalität+ Methoden,(FunkPonen,(ProperPes,(InstanzM(/( Klassenvariablen  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 21. THE CONFERENCE FOR BETTER USER INTERFACES  Welche+Basisklasse? ListBox TabControl BuPonBase ScrollViewer ItemsControl UserControl FrameworkElement ProgressBar UIElement Slider TabItem ComboBox Control TreeView Panel ContentControl  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 22. THE CONFERENCE FOR BETTER USER INTERFACES  Welche+Basisklasse? ListBox TabControl BuPonBase ScrollViewer ItemsControl UserControl? FrameworkElement ProgressBar UIElement Slider TabItem ComboBox Control TreeView Panel ContentControl  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 23. THE CONFERENCE FOR BETTER USER INTERFACES  UserControl • Leicht+zu+erstellen+und+benutzen • Code[Behind+(Blend,+Visual+Studio) • Struktur+=+Content • Element[Referenzierung+mit+x:Name • Styling+und+TemplaSng+möglich • Erweiterungen+möglich  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 24. THE CONFERENCE FOR BETTER USER INTERFACES  UserControl  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 25. THE CONFERENCE FOR BETTER USER INTERFACES  UserControl  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 26. THE CONFERENCE FOR BETTER USER INTERFACES  UserControl+im+MVVM[Kontext Controls UserControls+›+Views ViewModels Models …  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 27. THE CONFERENCE FOR BETTER USER INTERFACES  UserControl+im+MVVM[Kontext UserControls'dienen'der' Zusammenfassung'und'Gruppierung' mehrerer'Controls'und'Layout'Panels.  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 28. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control • Ableitung(von(einer(konkreten(Klasse(≠(UserControl • StylingM(und(TemplaPngMMöglichkeiten • Visueller(Au=au(im(ControlTemplate • Default(Style(möglich((Generic.xaml) • Zusammenfassung(in(einer(Control(Library(möglich • ElementMReferenzierung(über(OnApplyTemplate()  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 29. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 30. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 31. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 32. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 33. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • 34. THE CONFERENCE FOR BETTER USER INTERFACES  Custom+Control  Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11