Entwurf, Evaluation und Implementierungeiner einheitlichen Benutzeroberfläche zur Anzeige von Statusdaten unterschiedlicher Monitoring-Systeme
Masterarbeit am Institut für Informatik
Paul Kunze15.02.2017
Paul Kunze, 15.02.2017 2
Inhalt
● Problemstellung● Anforderungsanalyse● Zielsetzung● Konzeption● Implementierung● Bewertung● Zusammenfassung
Paul Kunze, 15.02.2017 3
Problemstellung
● In jedem IT-Unternehmen: unregelmäßige Fehlerfälle● Spezielle Teams für die Vorbeugung und Behebung● Monitoring-Tools für die Überwachung und Fehleranalyse
● Bei der DB: Middleware-Abteilung verantwortlich für den Betrieb der Message-oriented Middleware
● 4 verschiedene Anwendungen für unterschiedl. Teile der Infrastruktur
● Veraltete Nutzeroberflächen + unterschiedliche Bedienkonzepte + häufige Kontextwechsel
Paul Kunze, 15.02.2017 4
Anforderungsanalyse
● Anhand eines realen Beispiels● Vorstellung der Anwendungen● Erläuterung der Arbeitsweise
● Richard arbeitet an einem Skript, das er regelmäßig auf einen entfernten Server kopiert
● Plötzlich bemerkt er ein fehlerhaftes Serververhalten
Paul Kunze, 15.02.2017 5
● Öffnet MonX und prüft Server-Zustand● Server-Eintrag ist rot gefärbt → Fehler vorhanden● er navigiert durch die Baumstruktur und sieht eine
maximale RAM-Auslastung
Paul Kunze, 15.02.2017 6
● Dies war am Vormittag nicht der Fall● Er prüft im Patchday-Kalender,
ob es heute eine Aktualisierung gab → nein
Paul Kunze, 15.02.2017 7
● Er öffnet die Konsole und liest die letzten SaltStack-Funktionen
● Ein Kollege hatte kürzlich eine Änderung vorgenommen● Grund: Änderungswunsch eines Kunden
Quelle: https://docs.saltstack.com/en/getstarted/fundamentals/remotex.html
Paul Kunze, 15.02.2017 8
● Er öffnet den HP Service Manager● Sucht das entsprechende Ticket● Fügt hinzu, dass der RAM erweitert werden muss● Weist das Ticket der Hardware-Abteilung zu
Paul Kunze, 15.02.2017 9
Zielsetzung
Aktuelle Probleme Lösungen
Zu viele unterschiedliche Anwendungen und Bedien-konzepte
Mehraufwand beim Beheben von Fehlern durch häufige Anwendungswechsel
Zusammenhänge nicht ersichtlich→müssen manuell gesucht werden
Paul Kunze, 15.02.2017 10
Zielsetzung
Aktuelle Probleme Lösungen
Zu viele unterschiedliche Anwendungen und Bedien-konzepte
Erstellung einer Anwendung mit einheitlicher Nutzer-oberfläche
Mehraufwand beim Beheben von Fehlern durch häufige Anwendungswechsel
Abrufen der Daten von allen nötigen Datenquellen
Zusammenhänge nicht ersichtlich→müssen manuell gesucht werden
Aggregation der Daten für das Aufzeigen von Beziehungen
Paul Kunze, 15.02.2017 11
Zielsetzung
Lösungen Ziele
Erstellung einer Anwendung mit einheitlicher Nutzer-oberfläche
Abrufen der Daten von allen nötigen Datenquellen
Aggregation der Daten für das Aufzeigen von Beziehungen
Erstellung eines verbesserten Monitoring-Tools, das die Nutzerbedürfnisse erfüllt
Paul Kunze, 15.02.2017 12
Zielsetzung
Lösungen Ziele
Erstellung einer Anwendung mit einheitlicher Nutzer-oberfläche
Weniger Anwendungen für die Erfüllung der gleichen Aufgaben
Abrufen der Daten von allen nötigen Datenquellen
Beschleunigung der täglichen Arbeit
Aggregation der Daten für das Aufzeigen von Beziehungen
Vermeidung manueller Datenanalyse
Erstellung eines verbesserten Monitoring-Tools, das die Nutzerbedürfnisse erfüllt
Erhöhung der Produktivität und Zufriedenheit bei der Arbeit
Paul Kunze, 15.02.2017 13
Wie können die Ziele erreicht werden?
● Dashboard Design für eine optimale Anzeige der Daten● Material Design für eine einheitliche Gestaltungsweise● User Centered Design um die Anforderungen sicher zu erfüllen
Paul Kunze, 15.02.2017 14
Wie können die Ziele erreicht werden?
● Dashboard Design für eine optimale Anzeige der Daten● Material Design für eine einheitliche Gestaltungsweise● User Centered Design um die Anforderungen sicher zu erfüllen
Wie gut eignet sich Material Design für die Entwicklung von Dashboards?
Paul Kunze, 15.02.2017 15
Inhalt
● Problemstellung● Anforderungsanalyse● Zielsetzung● Konzeption● Implementierung● Bewertung● Zusammenfassung
Paul Kunze, 15.02.2017 16
Konzeption
● Dashboard Design● Google Material Design● User Centered Design
● Definition● Beispiele
● Papier-Prototyp● High-Fidelity-Prototyp
Paul Kunze, 15.02.2017 17
Dashboard Design
● Dashboard: Kombination von Diagrammen, Graphen und Tabellen auf einer Übersichtsseite
● Möglichkeit der Interaktion für Filterung & Spezifizierung
● Ziele: Darstellung großer Datenmengen, Ermöglichung einfacher Interpretation
● Verständnis über die Situation auf einen Blick
Paul Kunze, 15.02.2017 18
Dashboard Design● Prinzipien für den Aufbau
● Hervorhebung der wichtigsten Informationen● Aggregation von Daten zur Verdeutlichung von
Zusammenhängen● Echtzeitdaten● Korrektheit zu jeder Zeit● Interaktivität
● Gestaltungsprinzipien● Angemessene Diagrammtypen● Reduzierte Farbpalette● Einfachheit● Angemessene Genauigkeit
Paul Kunze, 15.02.2017 19
Material Design
● Öffentlicher Styleguide von Google für Android- und Web-Apps
● Ziel: Kombination von gutem Design mit den Möglichkeiten heutiger Technologien
● Einheitliche, plattformübergreifende Designsprache● Grundidee: Nutzung von natürlichen Materialien der
realen Welt● Inspiriert von Papier und Tinte● „Motion provides meaning“● Beziehungen geben das Verhalten der Elemente vor
Quelle: https://material.io/guidelines/motion/material-motion.html
Paul Kunze, 15.02.2017 20
Material Design
● Intensive Farben● Vordefinierte Farbpaletten
● Einheitliche Schriftart: Roboto● Richtlinien für Icons, Abstände,
Formulierungen, Bilder, ...
Bildquellen: https://material.io/guidelines/
Paul Kunze, 15.02.2017 21
User Centered Design – Definition
● Nutzerzentrierter Prozess zur Erstellung von Produkten oder Anwendungen
● Schrittweises, iteratives Vorgehen
● Frühe Einbeziehung der späteren Nutzer● Ziel: Gutes Verständnis der Anforderungen und
Bedürfnisse● Erreichung von optimaler Nutzbarkeit und User
Experience
Paul Kunze, 15.02.2017 22
UCD – Papier-Prototyp
Paul Kunze, 15.02.2017 23
UCD – Hi-Fi-Prototyp
Paul Kunze, 15.02.2017 24
Implementierung:Nutzeroberfläche
Paul Kunze, 15.02.2017 25
Implementierung:Datenflüsse
Paul Kunze, 15.02.2017 26
Bewertung
Ziele Ergebnisse
Weniger Anwendungen für die Erfüllung der gleichen Aufgaben
Anzahl der Programme wurde von 4 auf 2 reduziert
Paul Kunze, 15.02.2017 27
Bewertung
Ziele Ergebnisse
Weniger Anwendungen für die Erfüllung der gleichen Aufgaben
Anzahl der Programme wurde von 4 auf 2 reduziert
Beschleunigung der täglichen Arbeit
Arbeitsfluss wurde verbessert und beschleunigt
Paul Kunze, 15.02.2017 28
Bewertung
Ziele Ergebnisse
Weniger Anwendungen für die Erfüllung der gleichen Aufgaben
Anzahl der Programme wurde von 4 auf 2 reduziert
Beschleunigung der täglichen Arbeit
Arbeitsfluss wurde verbessert und beschleunigt
Vermeidung manueller Datenanalyse
Neues Dashboard enthält aggregierte Daten für bessere Übersicht
Paul Kunze, 15.02.2017 29
Bewertung
Ziele Ergebnisse
Weniger Anwendungen für die Erfüllung der gleichen Aufgaben
Anzahl der Programme wurde von 4 auf 2 reduziert
Beschleunigung der täglichen Arbeit
Arbeitsfluss wurde verbessert und beschleunigt
Vermeidung manueller Datenanalyse
Neues Dashboard enthält aggregierte Daten für bessere Übersicht
Erhöhung der Produktivität und Zufriedenheit bei der Arbeit
Mitarbeiter sind zufrieden mit neuer Anwendung & bemerken Produktivitätssteigerung
Paul Kunze, 15.02.2017 30
Zusammenfassung
● Viele Dashboard-Prinzipien werden bereits intuitiv befolgt
● Doch die Erfolgsrate der Anwendung kann durch das Studium & die genaue Umsetzung erhöht werden
● Richtlinien für Material Design sind komplexer & genauer● Erfordern intensive Einarbeitung● Genaue Vorgaben für fast jeden Aspekt einer Anwendung● JavaScript-Frameworks sind sehr hilfreich, ersetzen aber
nicht das Wissen
Paul Kunze, 15.02.2017 31
ZusammenfassungWie gut eignet sich Material Design für die
Entwicklung von Dashboards?
● Viele Dashboard-Prinzipien werden im Material Design vorausgesetzt
● Bewusst gewählte und reduzierte Farbpalette● Einfache und klare Seitenstruktur● Intuitive Menüführung● Präzise, aber kurze Texte
Paul Kunze, 15.02.2017 32
ZusammenfassungWie gut eignet sich Material Design für die
Entwicklung von Dashboards?
● Viele Dashboard-Prinzipien werden im Material Design vorausgesetzt
● Bewusst gewählte und reduzierte Farbpalette● Einfache und klare Seitenstruktur● Intuitive Menüführung● Präzise, aber kurze Texte
Material Design eignet sich sehr gut für die Implementierung eines Dashboards
Paul Kunze, 15.02.2017 33
Quellen (1)● Chadia Abras, Diane Maloney-Krichmar, and Jenny Preece. User-centered design. Bainbridge, W. Encyclopedia of Human-Computer
Interaction. Thousand Oaks: Sage Publications, 37(4):445–456, 2004.
● Sunil Arora. JavaScript Frameworks: The Best 10 for Modern Web Apps. http://noeticforce.com/best-Javascript-frameworks-for-singlepage-modern-web-applications, März 2016. (Online; last accessed: 26.08.2016).
● Yussif Barcelos, Flavia Aburjaile, Laura R Leite, Solange T Oliveira, and Raquel C de Melo-MinarcTi. Combining traditional and high-density visualizations in a dashboard to network health monitoring. In Visual Analytics Science and Technology (VAST), 2012 IEEE Conference on pages 295–296. IEEE, 2012.
● Alistair Cockburn. Writing Effective Use Cases. Addison-Wesley Professional, 2000.● Code Conquest. Static vs. Dynamic Websites. http://www.codeconquest.com/website/static-vs-dynamic-websites/, 2016. (Online; last
accessed: 09.09.2016).
● Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel. About face: the essentials of interaction design. John Wiley & Sons, 2014.
● Catherine Courage and Kathy Baxter. Understanding your users: a practical guide to user requirements: methods, tools, and techniques. Gulf Professional Publishing, 2005.
● Refsnes Data. AngularJS Tutorial. http://www.w3schools.com/angular/, 2016. (Online; last accessed: 09.09.2016).● Wayne W Eckerson. Performance dashboards: measuring, monitoring, and managing your business. John Wiley & Sons, 2010.● Micheline Elias and Anastasia Bezerianos. Exploration views: understanding dashboard creation and customization for visualization
novices. In Human Computer Interaction–Interact 2011, pages 274–291. Springer, 2011.
● Stephen Few. Information dashboard design. O’Reilly, 2006.
● Roy Thomas Fielding. Architectural styles and the design of network-based software architectures. PhD thesis, University of California, Irvine, 2000.
● International Organization for Standardization. DIN EN ISO 9241-210. Ergonomics of human-system interaction – Part 210: Human-centred design for interactive systems, 2015.
● Moritz Fröhner, Julian Mengel, and Sebastian Ammermüller. Prototyping hoch Drei–interaktiv, dynamisch und konsequent (in der Zusammenarbeit). Komplexe Industrie-Interfaces mit Prototypen nachhaltig entwickeln, optimieren und umsetzen. Mensch und Computer 2015–Usability Professionals, 2015.
● Jesse James Garrett. Elements of user experience, the: user-centered design for the web and beyond. Pearson Education, 2010.
● Martin Gudgin, Marc Hadley, Noah Mendelsohn, Jean-Jacques Moreau, Henrik Frystyk Nielsen, Anish Karmarkar, and Yves Lafon. SOAP Version 1.2. W3C recommendation, 24, 2003.
Paul Kunze, 15.02.2017 34
Quellen (2)● Patrick Hillert, Christian Meder, and Johannes Reuter. Polymer 1.0: Das Experiment ist vorüber. https://www.inovex.de/blog/polymer-1-
0-das-experiment-ist-vorueber/, Februar 2016. (Online; last accessed: 26.08.2016).
● Karen Holtzblatt, Jessamyn Burns Wendell, and Shelley Wood. Rapid contextual design: a how-to guide to key techniques for user-centered design. Elsevier, 2004.
● iMatix Corporation. Distributed Messaging - zeromq. http://zeromq.org, 2014. (Online; last accessed: 27.07.2016).● Google Inc. Angular Material - Introduction. https://material.angularjs. org/latest/, 2014 - 2016. (Online; last accessed: 26.08.2016).
● Google Inc. AngularJS - HTML enhanced for web apps! https://angularjs. org/, 2016. (Online; last accessed: 09.09.2016).
● Google Inc. AngularJS: Developer Guide. https://docs.angularjs.org/ guide, 2016. (Online; last accessed: 09.09.2016).
● Google Inc. Material design. https://material.google.com/, August 2016. (Online; last accessed: 08.09.2016).
● Google Inc. Material Icons. https://design.google.com/icons/, 2016. (Online; last accessed: 20.09.2016).
● SaltStack Inc. Salt in 10 minutes. https://docs.saltstack.com/en/ latest/topics/tutorials/walkthrough.html, 2016. (Online; last accessed: 27.07.2016).
● SaltStack Inc. SaltStack automation for CloudOps, ITOps & DevOps at scale. https://saltstack.com, 2016. (Online; last accessed: 27.07.2016).
● Ralph E Johnson and Brian Foote. Designing reusable classes. Journal of object-oriented programming, 1(2):22–35, 1988.
● Hoontae Kim, Yong-Han Lee, Hongsoon Yim, and Nam Wook Cho. Design and implementation of a personalized business activity monitoring system. In Human-computer interaction. HCI applications and services, pages 581–590. Springer, 2007.
● Andy Kirk. Data Visualization: a successful design process. Packt Publishing Ltd, 2012.
● Irina P Kuzheleva-Sagan and Natalya A Suchkova. Designing trust in the Internet services. AI & SOCIETY, pages 1–12.● Agata Kwapien. 10 Dashboard Design Principles That Will Make Your Data Analysis Worth The Effort.
http://www.datapine.com/blog/dashboarddesign-principles-and-best-practices/, April 2016. (Online; last accessed: 20.09.2016).● Jonathan Lazar, Jinjuan Heidi Feng, and Harry Hochheiser. Research methods in human-computer interaction. John Wiley & Sons,
2010.
● Bih-Ru Lea and Fiona Fui-Hoon Nah. Usability of performance dashboards, usefulness of operational and tactical support, and quality of strategic support: a research framework. In Human Interface and the Management of Information. Information and Interaction for Health, Safety, Mobility and Complex Environments, pages 116–123. Springer, 2013.
● Simon Ludwig. One-Way-Data-Binding, Two-Way-Data-Binding und Virtual DOM Diff. https://frontend.namics.com/2016/01/18/one-way-databinding-two-way-data-binding-und-virtual-dom-diff/, Januar 2016. (Online; last accessed: 07.09.2016).
Paul Kunze, 15.02.2017 35
Quellen (3)● Shadan Malik. Enterprise dashboards: design and best practices for IT. John Wiley & Sons, 2005.
● Oliver Matthews. What is a breaking change in software? http:// stackoverflow.com/questions/21703216/what-is-a-breaking-changein-software, 2014. (Online; last accessed: 27.07.2016).
● Jakob Nielsen. Usability engineering. Elsevier, 1994.
● Judith S Olson and Wendy A Kellogg. Ways of Knowing in HCI. Springer, 2014.● Christiane Pütter. Vier Vorfälle pro Jahr: IT-Ausfall kostet bis zu 41.000 Euro pro Stunde. http://www.cio.de/a/it-ausfall-kostet-bis-zu-41-
000- euro-pro-stunde,2918599, Februar 2013. (Online; last accessed: 27.07.2016).● Kurt Rivard and Doug Cogswell. Are You Drowning in BI Reports? Using Analytical Dashboards to Cut Through the Clutter. Information
Management, 14(4):26, 2004.
● Liam Spradlin. Exclusive: Quantum Paper And Google’s Upcoming Effort To Make Consistent UI Simple. http://www.androidpolice.com/2014/06/ 11/exclusive-quantum-paper-and-googles-upcoming-effort-to-makeconsistent-ui-simple/, Juni 2014. (Online; last accessed: 27.07.2016).
● Frank Thissen and Werner Schweibenz. Qualität im Web: Benutzerfreundliche Webseiten durch Usability-Evaluation. Springer Berlin Heidelberg, 2002.
● Stefan Werning. Swipe To Unlock. Digital Culture & Society, 1(1):55–72, 2015.
● Darrell M West. Big data for education: Data mining, data analytics, and web dashboards. Governance Studies at Brookings, pages 1–10, 2012.
● IT Process Wiki. Request Fulfilment. http://wiki.de.it-processmaps.com/ index.php/Request_Fulfilment, 2016. (Online; last accessed: 27.07.2016).
● Wikipedia. Call Management. https://en.wikipedia.org/wiki/Call_ management, 2016. (Online; last accessed: 27.07.2016).● Wikipedia. Material Design. https://de.wikipedia.org/wiki/Material_ Design, August 2016. (Online; last accessed: 08.09.2016).● Wikipedia. Model View Controller. https://de.wikipedia.org/wiki/Model_ View_Controller, 2016. (Online; last accessed: 12.09.2016).● Wikipedia. Representational State Transfer. https://de.wikipedia.org/ wiki/Representational_State_Transfer, 2016. (Online; last
accessed: 13.09.2016).
● Wikipedia. SaltStack. https://de.wikipedia.org/wiki/Saltstack, 2016. (Online; last accessed: 27.07.2016).
● Wikipedia. Single User Mode. https://en.wikipedia.org/wiki/Single_ user_mode, 2016. (Online; last accessed: 27.07.2016).
● Wikipedia. SOAP. https://de.wikipedia.org/wiki/SOAP, 2016. (Online; last accessed: 13.09.2016).
● Wikipedia. Software versioning. https://en.wikipedia.org/wiki/ Software_versioning, 2016. (Online; last accessed: 26.08.2016).
● Wikipedia. Solaris Containers. https://en.wikipedia.org/wiki/Solaris_ Containers, 2016. (Online; last accessed: 27.07.2016).
Paul Kunze, 15.02.2017 36
Fragen?
● Vollständige Arbeit: http://paulkunze.de/studium/masterarbeit.pdf● Ausführbare Demo: http://paulkunze.de/apps/monigator● Programm-Quelltext: https://github.com/paulkunze/monigator● Kontakt: [email protected]