Entwurf, Evaluation und Implementierung einer ...paulkunze.de/studium/masterarbeit_vortrag.pdf ·...

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 eines verbesserten Monitoring-Tools, das die Nutzerbedürfnisse erfüllt

Paul Kunze, 15.02.2017 12

Zielsetzung

Lösungen Ziele


Weniger Anwendungen für die Erfüllung der gleichen Aufgaben


Beschleunigung der täglichen Arbeit


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


Anzahl der Programme wurde von 4 auf 2 reduziert

Paul Kunze, 15.02.2017 27

Bewertung

Ziele Ergebnisse




Arbeitsfluss wurde verbessert und beschleunigt

Paul Kunze, 15.02.2017 28

Bewertung

Ziele Ergebnisse






Neues Dashboard enthält aggregierte Daten für bessere Übersicht

Paul Kunze, 15.02.2017 29

Bewertung

Ziele Ergebnisse






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]

Entwurf, Evaluation und Implementierung einer ...paulkunze.de/studium/masterarbeit_vortrag.pdf ·...

Documents

Transcript of Entwurf, Evaluation und Implementierung einer ...paulkunze.de/studium/masterarbeit_vortrag.pdf ·...