Datum: 23.12.21

Autoren:

Anna Kurikalow

Lukas Hügel

Abstract

In diesem Blogbeitrag werden die Begriffe „User Experience“ (UX) und „User Interface“ (UI) definiert, um ein Grundverständnis der Thematik zu vermitteln. Davon ausgehend wird ein Visualisierungskonzept mit UX Design für einen Soll-/Ist-Vergleich von Rüstzeiten entwickelt. Diese Zeitdaten stammen aus dem FORCAM MES einer virtuellen Fabrik, die im Rahmen der Use Case-Erarbeitung im Fach Advanced Manufacturing durchgeführt wurde. Um das Konzept praktisch umzusetzen, findet zudem eine Prototypisierung der Visualisierungen nach UX Design mit Beispieldaten statt.

1       Einleitung

Im industriellen Kontext können Visualisierungen der übersichtlicheren, verständlicheren und vertiefenden Überwachung und Kontrolle von Produktionsprozessen dienen (Ulrich et al. 2019). Im behandelten Use Case wird ein Soll-Ist-Vergleich bildlich dargestellt, der genau diese Ziele verfolgen soll. Zur Klärung der theoretischen Grundlagen werden in Kapitel 2 und 3 die wichtigsten Definitionen und Methoden zu UX (User Experience, dt. Nutzererlebnis) und UI (User Interface, dt. Benutzeroberfläche) vorgestellt. Das in Kapitel 4 vorgestellte Visualisierungskonzept soll dabei die Grundlagen zu Verbildlichung von Daten aufzeigen und anhand des Use Cases exemplarisch darstellen. Der finale Modellierungsschritt erfolgt in Kapitel 5, wobei auf Use-Case-Daten zurückgegriffen und das Visualisierungskonzept anhand dieser Daten realisiert wird. Im abschließenden Fazit liegt der Fokus auf der Zusammenfassung des Modellierungsergebnisses und einem Ausblick zum weiteren Verfahren im Bereich der Use-Case-Visualisierung. 

2       Was ist UX im Allgemeinen?

Die Abkürzung UX steht für den Begriff User Experience, welcher laut Roto et al. (2011: S. 2) auf unterschiedliche Weise beschrieben werden kann. Somit gibt es keine eindeutige Definition, die allen Perspektiven gerecht wird (Roto et al. 2011, S.2). Nachfolgend werden deshalb verschiedene Definitionen gesammelt, um den multidisziplinären Charakter zu veranschaulichen.

Preim und Deichselt (2015: S. 4) definieren User Experience als erlebte Nutzungserfahrung, die Aufschluss über die Interaktion von Menschen mit Technik gibt. 

Näher beschreibt User Experience alle Gefühle, Emotionen und Wahrnehmungen, die eine Person vor, während und nach der Nutzung eines Systems oder Produkts empfindet und ausdrückt (Bevan et al., 2015). Dieses Erlebnis ist somit subjektiver Natur (Hassenzahl et al., 2009).

Außerdem kann User Experience in mehrere zeitliche Phasen eingeteilt werden (Roto et al., 2011: S. 5). Abbildung 1 und 2 zeigen graphische Darstellungen dieser Einteilung. Hierbei wird vor allem zwischen Zeiten der Nutzung und nicht-Nutzung sowie vor und nach dem Erstkontakt mit dem System unterschieden.

Laut Garrett (2011, zitiert nach Pamparău und Vatavu, 2020) besteht eine gelungene UX aus fünf Elementen, zu denen unter anderem strukturelle Aspekte, wie Interaktions- oder Interfacedesign zählen. Denn eine effektive Interaktivität in Mensch-Computer-Systemen führt wiederum zu einer guten UX (Garon et al., 2016; Guan, 2016, zitiert nach Essmiller et al., 2020). Entscheidend sind daher vor allem Aspekte der Benutzerfreundlichkeit, welche auch als Usability bezeichnet werden und in enger Verbindung zu UX stehen (Roto et al., 2011: S: 2). 

Auf der Plattform „All about UX“  befinden sich weitere eingängige Definitionen und zusätzlich Methoden zur Bewertung einer UX (Roto et al. 2021).

3       Was ist UI im Allgemeinen?

Eine nach ISO normierte Definition für eine Benutzeroberfläche lautet: „{User interface is a} set of all the components of an interactive system that provides information and controls for the user to accomplish specific tasks with the interactive system.” (DIN EN ISO 9241). Der aus zahlreichen Teilen bestehende Standard beschreibt im Wesentlichen Grundvoraussetzungen für eine ergonomische, interaktive und intuitive Gestaltungen von Benutzeroberflächen. Dabei werden im Rahmen von Leitlinien und methodischen Ansätzen eine Vielzahl von Designspezifikationen vorgestellt. Neben dem Design sind die Einführung und das langfristige Management des User Interfaces Teil der Gesamtentwicklung und können im Aufwand als ungefähr gleichverteilt gesehen werden (Myers und Rosson 1992).

Für die Entwicklung eines UI ist festzulegen, welche Inhalte wie vermittelt und dargestellt werden sollen. Diesem Grundkonzept können weitere Attribute hinzugefügt werden, wodurch ein inklusives Design definiert wird. Die resultierenden Grundfunktionen können dann individuell gestaltet und realisiert werden. Letztlich sollte das UI inhaltlich, design- und zielbezogen evaluiert werden, wodurch ein Abgleich zum ursprünglichen Visualisierungsziel stattfinden kann (Alomari et al. 2020, 6).

Grundsätzlich kann ein UI unterschiedliche Ausprägungen und Ziele verfolgen, wobei eine Klassifikation in die folgenden getroffen werden kann: generisch, interaktiv, adaptiv und personalisiert, entscheidungsunterstützend. Für die Wahl eine dieser Ausprägungen ist vor allem der Kontext entscheidend, in dem das UI entwickelt wird. (Oulasvirta et al. 2020, 440)

Eine mögliche Methode zur Einführung eines UI ist die user-centered Design (dt. benutzerorientiertes Design) Methode, die sowohl Aspekte der Usability-Standards beinhaltet (bspw. der frühe Einbezug der Nutzer in den Entwicklungsprozess) als auch Requirements Engineering-Elemente (z.B. Personas) besitzt. Diese Methode besitzt sechs Phasen: Forschung, Modellierung, Anforderungsdefinition, Definition der Rahmenbedingungen, Verfeinerung und Support. (Pangestuti et al. 2017)

Für die Modellierung eines UI müssen verschiedene Analysen und Modellierungsstufen durchlaufen werden, die grob in die Phase der Prototypisierung, Evaluation und dem Realisierungsmodell untergliedert werden können (Villegas et al. 2017, 562).

4       Entwicklung eines Visualisierungskonzeptes mit UX-Design

Die Verbildlichung verschiedener Daten und Informationen ist ein fester Bestandteil aller Forschungsdisziplinen und ist somit je nach Forschungsgegenstand anders strukturiert (Groß 2007).

Nahezu jede Visualisierung besteht aus einer Vielzahl an Einzelelementen, die entsprechend eines Konzeptes angeordnet und strukturiert werden müssen, wobei je komplexer die Einzelelemente in sich und zueinander aufgebaut sind, desto überlegter muss das Konzept gestaltet werden (Bácsi und Mezei 2018). Dabei zielt das Visualisierungskonzept darauf ab, speziell in dynamischen Produktionsvisualisierungen, wie im aktuellen Use Case angewandt, Verständnis, Analyse und Kontrolle für die Mitarbeiter zu ermöglichen (Reuter 2018, 249). Grundsätzlich kann eine entsprechend konzipierte Visualisierung horizontale und vertikale Automatisierungssysteme miteinander verknüpfen  und veranschaulichen (Wellenreuther und Zastrom 2005, 714). Ein wesentlicher Teil eines Visualisierungskonzeptes ist es bei leistungsabhängigen Mess- und Managementgrößen Kennzahlen einzusetzen und diese eindeutig definiert für alle beteiligten aufzuzeigen (Kleindienst 2017).

Bestandteile eines Visualisierungskonzepts:

• Kennzahlen (Kleindienst 2017)
• Einsatz von Visualisierungsprinzipien: ungerichteter Graph, Flussdiagramm, Venn-Diagramm, Rendering, Matrix, Igelkurve, Sankey Diagramm, Wasserfalldiagramm, Sunburst, Baumdiagramm, Portfolio, Handskizze; Je nach Datentyp werden unterschiedliche Visualisierungsprinzipien verwendet z.B.: quantitative Daten > Wertediagramm, Matrizen; sequentiell > Flussdiagramm; mehrdimensional > Matrizen/Netzwerke; hierarchisch und quantitativ > Sunburst-Diagramm; Visualisierungstechniken können dabei sein: Form, Position, Größe, Orientierung, Linienart, Linienstärke, Länge, Farbe, Sättigung, Symbole, Textinhalt und -formatierung, Fotos, Schärfe, Transparenz, Skizzen, Textur (Gebhardt 2020, 22)

• Einsatz des sog. Information-Seeking Mantra mit den Prinzipien: Überblick schaffen, Zoom und Filter ermöglichen, Detailansichten bei Bedarf. (Kriglstein und Rinderle-Ma 2013)

Die Anwendung verschiedener Techniken und Prinzipien kann, wie bereits in Kap. 2 erläutert, auf der Idee einer Persona basieren und im Zusammenhang mit einer User Story aufgebaut werden. Als methodische Entwicklungsgleichung kann außerdem Abb. 3 herangezogen werden, die den Einsatz verschiedener Schemata und Kodierungsmaßnahmen zu einem Konzept zusammenfasst. 

Zur konzeptionellen Fundierung verschiedener Designentscheidungen kann ein Lösungskatalog mit den Visualisierungsprinzipien für das jeweilige Visualisierungskonzept entworfen werden (vgl. Abb.4). Dieser Lösungskatalog enthält dabei verschiedene Auswahlparameter für Inhaltselemente, die nach unterschiedlichen Kriterien gegliedert sind. Grob können die Kategorien in räumliche, beziehungsbezogene, ablaufbezogene, quantitativ und qualitative Merkmale aufgeteilt werden. 

Als ein Aspekt der Spezifikation von Visualisierungen ist die Berücksichtigung der sog. Pipeline zu sehen, die im Allgemeinen immer wieder einen Einfluss auf die verbildlichten Daten besitzt (vgl. Abb. 5). Dabei stehen die Daten (inkl. Rohdaten), das Visualisierungssystem und der Nutzer in einer Dreiecksbeziehung und beeinflussen sich gegenseitig. 

Zur Definition eines Visualisierungskonzeptes, das auf den Use Case angewendet werden kann, ist die Betrachtung verschiedener Personas, die die Visualisierung im täglichen Gebrauch haben könnten, eine Möglichkeit zur näheren Anforderungsdefinition (Partsch 2010). Mögliche Personas könnten im vorliegenden Fall Werkleiter, Manager, Werker, Fertigungsplaner, Instandhalter, Produktions- und/oder Qualitätsleiter, Meister, Teamleiter, Shopfloor Manager sein. Bei der Wahl der Darstellungsformen kann auf gängige Visualisierarten zurückgegriffen werden, da diese auch personaübergreifend selbsterklärend sind. Zu diesen zählen vor allem Liniendiagramme und Verläufe, Kreisdiagramme, Abbildung großer Zahlen (Absolut- oder Relativwerte), Säulen- und Balkendiagramme oder Tachometer. Die nach dem Information-Seeking Mantra geforderten Filter- und Zoomfunktionen können mittels zeitlichen, visuellen oder wertemäßigen Filters in den Datenstrukturen realisiert werden. Für die Abbildung des Überblicks-Grundsatzes dieses Mantras können statistische Kenngrößen wie Minimal-, Maximal-, Durchschnittswerte oder Standardabweichung herangezogen werden. 

Bei dem im Use Case betrachteten SOLL-IST-Vergleich von Zeiten ist in erster Linie ein Soll-Wert zu definieren, der entweder durch Managementvorgaben oder durch einen gemittelten Ist-Wert definiert werden kann. Je nach Verfahren kann somit der Soll-Wert bzgl. des aktuellen Produktionsstands schwanken oder als Festwert angezeigt werden. 

Kern des Visualisierungskonzeptes ist der bildliche Vergleich zwischen Soll-Rüstzeiten und tatsächlichen Ist-Rüstzeiten. Dabei sollen Abweichungen (relativ/absolut) in einem Balken/Säulendiagramm dargestellt werden. Der Soll-Wert soll allerdings stets deutlich und hervorgehoben zu sehen sein. 

In einer Tabelle können absolute und relative Werte bzgl. der Erreichung des Sollwertes abgebildet werden. Abgerundet wird das Visualisierungskonzept mit der Darstellung eines Liniendiagramms, sodass der zeitliche Verlauf über die Werteentwicklung (z.B. innerhalb eines Tages) zu sehen ist. 

Visualisierungskonzept Use Case „Vergleich von Soll- zu Ist-Rüstzeiten“ 

Personas:	Produktionsleiter/Teamleiter	Werker
User Stories:	Ich, als Produktions-/Teamleiter, möchte auf einen Blick die wichtigsten Kennzahlen zu den Rüstzeiten sehen, die Performance der einzelnen Arbeitsplätze überblicken und weitere produktionsrelevante Informationen erhalten.	Ich, als Werker, möchte vor allem die aktuelle Rüstzeit im Vergleich zur vorgegebenen Rüstzeit sehen.

Kennzahlen	Absoluter Vergleich zwischen Soll- und Ist-RüstzeitenRelativer Vergleich zwischen Soll- und Ist-RüstzeitenAnzahl der erreichten Soll-Rüstzeiten im betrachteten Zeitraum
Visualisierungsprinzipien	Auswahl des Arbeitsplatzes: Filter bzw. Datenschnitt Vergleich von Soll/Ist-Zeiten absolut: Balkendiagramm und Kennzahlen-Feldern Relative Abweichung von Soll- zu Ist-Rüstzeiten: Liniendiagramm (zur Verlaufsdarstellung im betrachteten Zeitraum) Anzahl der erreichten Soll-Rüstzeiten: TachometerAbweichung von Soll zu Ist-Rüstzeiten relativ: Kennzahl in Prozent Weitere Informationen: aktueller Arbeitsschritt und Zielmenge je Arbeitsschritt
Visualisierungstechniken	Betonung der wichtigsten Kennzahlen durch farbliches Hervorheben Grafische Darstellung in Balken-, Liniendiagrammen bzw. mit ‚Hilfe des Tachometers zur AufmerksamkeitsorientierungAbbildung weiterer Informationen in Wertetabellen
Information-Seeking Mantra	Power BI ermöglicht im Allgemeinen einen einfachen und schnellen Zugriff auf weitere Daten oder Inhalte Filterung je Arbeitsplatz bezieht sich auf alle Dashboard-Elemente, wodurch ein schnell ein Fokus gelegt werden kannGewünschte Kennzahlen werden immer sowohl mit absoluten Zahlen als auch mit visuellen Darstellungen abgebildet In jede Grafik kann bei Bedarf herangezoomt werden Wertetabelle ermöglicht eine sofortige Arbeitsplatz-spezifische Detailansicht
Visualisierungspipeline	User/PersonaVisualisierungssystem

5       Prototypisierung des Visualisierungskonzeptes

Nachfolgend wird das Visualisierungskonzept praktisch anhand von Testdaten aus dem FORCAM MES in Power BI umgesetzt. Daraus soll ein allgemeines Dashboard entstehen, welches die zuvor beschriebenen Visualisierungsarten und UX-Kriterien berücksichtigt. Außerdem wird ein separates Dashboard für die Persona „Werker“ entwickelt. Abbildungen 6 und 7 stellen das allgemeine Dashboard dar, welches vor allem von den Personas „Produktionsleiter“ und „Teamleiter“ genutzt wird. 

Wie in Abbildung 6 zu sehen ist, kann zwischen den verschiedenen Arbeitsplätzen gefiltert werden. Der dargestellte Arbeitsplatz „R_WP_04“ weist keine Abweichung von Soll- zu Ist-Rüstzeit auf. Daher ist die relative Abweichung von null Prozent grün hinterlegt. Somit ist im gezeigten Liniendiagramm kein Ausschlag zu sehen. Durch das Balkendiagramm wird der Vergleich bildlich veranschaulicht. Die Farbgebung wurde dabei an die Hinterlegung der KPI-Visuals angepasst. Das Tachometer in der linken unteren Ecke beweist, dass bei allen 14 Rüstvorgängen die Soll-Vorgabe erreicht wurde. Zusätzlich werden die an diesem Arbeitsplatz ausgeführten Arbeitsschritte aufgelistet, sodass sichtbar ist welche Vorgänge stattfinden. Die rechts unten gezeigte Wertetabelle gibt außerdem die absoluten Werte zur Istzeit, Sollzeit, Zielmenge (in Stk.) und Abweichung, sowie die bereits erwähnte relative Abweichung wieder. 

Abbildung 7 zeigt die Daten von Arbeitsplatz „R_WP_05“. Aufgrund der längeren Ist-Rüstzeit entstehen Abweichungen im Liniendiagramm. Dies wird auch anhand der rot markierten relativen Abweichung deutlich. Außerdem zeigt das Tachometer, dass nur drei von 17 Rüstvorgängen in der vorgegebenen Zeit erfüllt wurden.

In Abbildung 8 ist das Dashboard der Persona „Werker“ zu sehen. Dieses ist eine vereinfachte Darstellung der allgemeinen Version. Hierbei werden die Visualisierungen nur auf die für die Persona relevanten Inhalte reduziert. Hierbei ist zu sehen, dass die vorgegebene Rüstzeit überschritten wurde.

6       Fazit und Ausblick

Neben einer allgemeinen Definition zu UX und UI, konnte im vorliegenden Blogbeitrag basierend auf theoretischen Erkenntnissen ein praktisches Visualisierungskonzept entwickelt und angewandt werden. Speziell mit Hilfe der aus dem Requirements Engineering stammenden Technik der Persona-Entwicklung, wurden individualisierte Dashboards mit unterschiedlichen Inhalten realisiert. Neben einem allgemeinen Dashboard, welches zahlreiche Kennzahlen und Visualisierungsformen in einem Visualisierungskonzept vereint, wurde auch ein vereinfachtes Dashboard vorgestellt. 

Im Anschluss an diesen Beitrag folgt ein Video, in welchem die Umsetzung des Visualisierungskonzeptes in Power BI erklärt wird. Hierbei werden die letztendlichen Use-Case-Daten aus dem FORCAM-MES verwendet. 

7       Literaturverzeichnis

Alomari, Hakam W./Ramasamy, Vijayalakshmi/Kiper, James D./Potvin, Geoff (2020). A User Interface (UI) and User eXperience (UX) evaluation framework for cyberlearning environments in computer science and software engineering education. Heliyon 6 (5), e03917. https://doi.org/10.1016/j.heliyon.2020.e03917.

Bácsi, Sándor/Mezei, Gergely (2018). Towards a Visualization of Multi-level Metamodeling Techniques. In: Proceedings of the 13th International Conference on Software Technologies, 13th International Conference on Software Technologies, Porto, Portugal, 26.07.2018 – 28.07.2018. SCITEPRESS – Science and Technology Publications, 355–362.

Bevan, N.; Carter, J.; Harker, S. (2015): ISO-9241-11 Revised: What Have We Learnt About Usability Since 1998?. In Kurosu, M. (Hrsg.): Human Computer Interaction: Design and Evaluation. HCI 2015. Lecture Notes in Computer Science. 9169. Auflage. Switzerland. Springer. S. 143- 151.

DIN EN ISO 9241. DIN EN ISO 9241, 2020. Berlin.

Essmiller, K.; Asino, T.I.; Ibukun, A.; Alvarado-Albertorio, F.; Chaivisit, S.; Do, T.; Kim, Y. (2020): Exploring mixed reality based on self-efficacy and motivation of users. Research in Learning Technology. 28. DOI: https://doi.org/10.25304/rlt.v28.2331.

Garon, M.; Boulet, P.O.; Doiron, J.P; Beaulieu, L.; Lalonde, J.F. (2016): Real-time high resolution 3D data on the HoloLens. In 2016 IEEE International Symposium on Mixed and Augmented Reality (ISMAR-Ad-junct). pp. 189-191. IEEE. DOI: 10.1109/ISMAR-Adjunct.2016.0073.

Gebhardt, Nicolas (2020). Methodische Entwicklung von Visualisierungen als Arbeitswerkzeuge in der Produktentwicklung. Berlin, Heidelberg, Springer Berlin Heidelberg.

Groß, Dominik (Hg.) (2007). Vom Bild zur Erkenntnis? Visualisierungskonzepte in den Wissenschaften ; [basiert auf dem ersten interdisziplinären Thementag Wissenschaftsgeschichte, den das Aachener Kompetenzzentrum für Wissenschaftsgeschichte (AKWG) am 14. Juni 2007 an der RWTH Aachen ausgerichtet hat. Kassel, Kassel Univ. Press.

Hassenzahl, M.; Eckoldt, K.; Thielsch, M.T. (2009): User Experience und Experience Design – Konzepte und Herausforderungen. In Brau, H.; Diefenbach, S.; Hassenzahl, M.; Kohler, K.; Koller, F.; Peissner, M.; Petrovic, K.; Thielsch, M.; Ullrich, D.; Zimmermann, D. (Hrsg.): Tagungsband UP09. Stuttgart. Fraunhofer Verlag. S. 233-237.

Kleindienst, Bernd (2017). Performance Measurement und Management. Wiesbaden, Springer Fachmedien Wiesbaden.

Kriglstein, Simone/Rinderle-Ma, Stefanie (2013). A Visualizitation Concept for High-Level Comparison of Process Model Versions.

Myers, Brad A./Rosson, Mary Beth (1992). SURVEY ON USER INTERFACE PROGRAMMING.

Oulasvirta, Antti/Dayama, Niraj Ramesh/Shiripour, Morteza/John, Maximilian/Karrenbauer, Andreas (2020). Combinatorial Optimization of Graphical User Interface Designs. Proceedings of the IEEE 108 (3), 434–464. https://doi.org/10.1109/JPROC.2020.2969687.

Pamparău, C.; Vatavu, R. D. (2020): A Research Agenda Is Needed for Designing for the User Experience of Augmented and Mixed Reality: A Position Paper. In 19th International Conference on Mobile and Ubiquitous Multimedia (MUM 2020). November 22–25. 2020. Essen. Germany. ACM. New York. NY. USA. pp. 323-325. DOI: https://doi.org/10.1145/3428361.3432088

Pangestuti, Dwitika Diah/Fachriannoor, Fachriannoor/Kusumo, Dana S./Sabariah, Mira Kania/Alimin, Achmad (2017). Analysis and Implementation of User Interface of Smart Drive System Using Goal-Directed Design Method. Procedia Computer Science 116, 492–499. https://doi.org/10.1016/j.procs.2017.10.073.

Partsch, Helmuth A. (2010). Requirements-Engineering systematisch. Berlin, Heidelberg, Springer Berlin Heidelberg.

Preim, B.; Dachselt, R. (2015): Interaktive Systeme: Band 2: User Interface Engineering, 3D-Interaktion, Natural User Interfaces. Springer-Vieweg-Verlag. DOI: https://doi.org/10.1007/978-3-642-45247-5

Reuter, Christian (2018). Sicherheitskritische Mensch-Computer-Interaktion. Wiesbaden, Springer Fachmedien Wiesbaden.

Roto, V.; Law, E.; Vermeeren, A.; Hoonhout, J. (2011): User experience white paper: Bringing clarity to the concept of user experience. Result from Dagstuhl Seminar on Demarcating User Experience. Finnland.

Roto, Virpi/Lee, Ming/Pihkala, Kari/Castro, Brenda/Vermeeren, Arnold/Law, Effie/Väänänen-Vainio-Mattila, Kaisa/Hoonhout, Jettie/Obrist, Marianna (2021). ALL ABOUT UX. Information for user experience professionals. Online verfügbar unter http://www.allaboutux.org/ux-definitions (abgerufen am 12.12.21).

Ulrich, Thomas A./Boring, Ronald L./Al Rashdan, Ahmad (2019). Visualization Strategy and Human-Machine Interface Development of a Data Driven Condition Monitoring System for Maintenance.

Villegas, Maria L./Giraldo, William J./Collazos, César A. (2017). Roadmap for the Development of the User Interface in Interactive Systems. In: Andrés Solano/Hugo Ordoñez (Hg.). Advances in Computing. Cham, Springer International Publishing, 557–571.

Wellenreuther, Günter/Zastrom, Dieter (2005). Automatisieren mit SPS. Theorie und Praxis.