Eine gute Usability ist kein Zufall: TREX als Best-Practice des MDZ Fokus Mensch (2/4)

In dem ersten Beitrag der Reihe „Eine gute Usability ist kein Zufall: TREX als Best-Practice des MDZ Fokus Mensch“ haben wir uns damit beschäftigt, dass es bei der Entwicklung neuer digitaler Lösungen nicht ausreicht, auf bestehende Interaktionsarchitekturen und bewährte Interaktionselemente und -gesten zurückzugreifen, um eine gute Usability zu erhalten. Jede Anwendung profitiert davon, wenn bereits zu Beginn der Konzeption der Nutzungskontext umfangreich analysiert wird. Denn all diese Informationen tragen dazu bei, eine für die jeweilige Lösung maßgeschneiderte Interaktionslogik zu entwickeln, die den Nutzerinnen und Nutzern dabei hilft, das, was sie mit der Lösung erreichen wollen, effizient und ohne Umwege umzusetzen.

Auch bei der Entwicklung der Interaktionsarchitektur für TREX, dem Trendexplorer des Mittelstand-Digital Zentrums Fokus Mensch, haben wir uns daher zunächst ausführlich mit dessen Nutzungskontext beschäftigt. TREX macht in einem Netzwerk sichtbar, wie verschiedene Organisationen der deutschen IT-Branche miteinander in Verbindung stehen und ermöglicht es nachzuvollziehen, wie intensiv diese sich mit bestimmten Digitalisierungsthemen auf ihrer Website auseinandersetzen (in Form von Nennungen in Texten) oder wie verbreitet diese Themen ganz generell in diesem organisationalen Netzwerk der deutschen IT-Branche sind. Die Ergebnisse der Nutzungskontextanalyse von TREX finden sich im ersten Teil der Artikelreihe.

Heute zeigen wir im zweiten Teil der Artikelreihe das Vorgehen auf, mit dem wir ausgehend von einem ersten Grobkonzept von TREX (siehe Abbildung 1: Grobkonzept von TREX) schrittweise einen auf den entsprechenden Nutzungskontext, die Nutzerinnen und Nutzer sowie deren Aufgaben ausgerichteten ersten Prototyp entwickelt haben

Die Nutzungsszenarien

In mehreren Iterationen haben wir das erste Grobkonzept von TREX (siehe Abbildung 1) schrittweise überarbeitet. Hierzu haben wir uns zunächst an den zentralen Nutzungsszenarien von TREX orientiert: Die Nutzerinnen und Nutzer möchten TREX verwenden, um sich darüber zu informieren, ob und wie häufig bestimmte „Konzepte“ (Begriffe und Schlagwörter, wie beispielsweise konkrete Digitalisierungsthemen, die die Interessengebiete von Unternehmen, Wissenschaftlerinnen und Wissenschaftlern abbilden) auf den Websites der Organisationen des Netzwerks zu einem bestimmten Zeitpunkt genannt wurden. Zusätzlich könnten auch jeweils Vergleiche von verschiedenen Zeitpunkten interessant sein, um mögliche Veränderungen hinsichtlich der Nennungshäufigkeit dieser Konzepte nachvollziehen zu können. Des Weiteren könnte es für die Nutzerinnen und Nutzer auch von Interesse sein zu vergleichen, wie häufig verschiedene Konzepte zum gleichen Zeitpunkt auf den Websites genannt werden. 

Ein konkretes Beispiel für die Nutzung könnte sein, dass Wissenschaftlerinnen und Wissenschaftler aus dem Fachbereich der positiven Psychologie herausfinden wollen, ob Resilienz, also die psychologische Widerstandsfähigkeit gegenüber negativen Ereignissen, ein Thema ist, mit welchem sich Unternehmen 2023 auf ihren Websites auseinandergesetzt und darüber geschrieben haben und ob diese Auseinandersetzung drei Jahre später zu- oder abgenommen hat.

Es ergeben sich somit vier verschiedene zentrale Nutzungsszenarien für TREX:

1. Ausgabe einer Netzwerkansicht, die die Verlinkungen zwischen den Websites von Unternehmen, Verbänden oder Fachmagazinen zeigt.
2. Ausgabe einer Netzwerkansicht, die die Nennungshäufigkeit eines Konzepts für jede Website zu einem Zeitpunkt visualisiert.
3. Ausgabe einer Netzwerkansicht, die die Nennungshäufigkeit mehrerer Konzepte für jede Website zu einem Zeitpunkt visualisiert.
4. Ausgabe einer Netzwerkansicht, die die Nennungshäufigkeit eines Konzepts für jede Website zu mehreren Zeitpunkten visualisiert.

Ausgehend von diesen drei Nutzungsszenarien haben wir nach und nach den ersten Grobentwurf von TREX in Figma überarbeitet. Hierzu haben wir uns wiederholt im Team zusammengefunden und Anforderungen an die Interaktionsarchitektur diskutiert, erste Ideen festgehalten (siehe Abbildung 2: Einblick in die Überarbeitungsarbeit des Projektteams) und schrittweise den ersten Entwurf eines Prototyps für TREX entwickelt.

Die Prototypentwicklung für TREX

Schritt 1: Suchanfrage-Builder

Im ersten Schritt der Prototypentwicklung stand im Fokus, wie Nutzerinnen und Nutzer bei ihren Suchanfragen die Konzepte und Zeitpunkte festlegen. Dabei handelt es sich um die zentralste Funktion von TREX, da sie es ermöglicht, die Nennungshäufigkeit von Konzepten in den Organisationen zu bestimmten Zeitpunkten zu visualisieren. Anhand der oben genannten Nutzungsszenarien haben wir daher zunächst herausgearbeitet, wie sich die Konzepte und Zeitpunkte, die bei den Suchanfragen von Interesse sein könnten, intuitiv aus- und abwählen sowie kombinieren lassen. 

Im ersten Grobentwurf konnten im linken oberen Bereich die Konzepte über Freitextfelder hinzugefügt werden und für jedes Konzept eine Farbe zur Visualisierung der Knotenpunkte im Netzwerk (Organisationen, die auf der Website das Konzept benennen) ausgewählt werden. Zu jedem Konzept war zudem ein Datum als Default vorgegeben, welches sich über ein Drop-Down ändern ließ (siehe Abbildung 1). In der ersten Überarbeitung wurde schrittweise ein interaktiver Suchanfrage-Builder für die verschiedenen Nutzungszenarien entwickelt, bei dem Konzepte und Zeitpunkte getrennt voneinander für die Suchanfrage ausgewählt werden (siehe Abbildung 3: Der Suchanfrage-Builder). Die Entscheidung, die Auswahl der Konzepte von der Auswahl der Zeitpunkte zu trennen, wurde getroffen, um die Nutzerinnen und Nutzer dabei zu unterstützen, die Anwendungsmöglichkeiten von TREX zu erkennen und die Exploration dieser Möglichkeiten anzuregen. Der Suchanfragen-Builder hat folgende Elemente und Prinzipien:

• #-Icon: Über das #-Icon können Nutzerinnen und Nutzer Themen bzw. Konzepte für ihre Suchanfrage auswählen. Das Symbol wurde bewusst gewählt, da Hashtags aus sozialen Medien bekannt dafür sind, Inhalte zu bestimmten Themen zu bündeln. Dadurch lässt sich die Funktion der Konzeptauswahl schnell und intuitiv erkennen. Hinter dem Icon werden bereits vorbereitete Konzepte angezeigt, die per Klick ausgewählt oder wieder entfernt werden können. Zusätzlich können Nutzerinnen und Nutzer über den „+“-Button eigene Konzepte nach ihren individuellen Interessen hinzufügen. Werden mehrere Konzepte ausgewählt, werden diese in unterschiedlichen Farben hinterlegt, damit sie leichter unterschieden werden können. Diese Farbcodierung wird auch im Netzwerk übernommen: Organisationen, die die ausgewählten Konzepte zu dem festgelegten Zeitpunkt auf ihren Webseiten nennen, werden entsprechend eingefärbt.
• Kalender-Icon: Über das Kalender-Icon können Nutzerinnen und Nutzer Zeitpunkte für ihre Suchanfrage festlegen. Das Symbol wurde bewusst gewählt, da ein Kalender allgemein mit Zeit und Terminen verbunden wird und die Funktion dadurch leicht erkennbar ist. Neue Zeitpunkte lassen sich über den „+“-Button hinzufügen. Werden mehrere Zeitpunkte ausgewählt, werden diese in unterschiedlichen Farben hinterlegt, damit sie leichter voneinander unterschieden werden können. Diese Farbcodierung wird auch im Netzwerk übernommen: Organisationen, die das ausgewählte Konzept zu den festgelegten Zeitpunkten auf ihren Webseiten nennen, werden entsprechend eingefärbt.
• Prinzip zur Kombination von Konzepten und Zeitpunkten: Bei einer Suchanfrage können entweder mehrere Konzepte und ein Zeitpunkt oder mehrere Zeitpunkte und ein Konzept ausgewählt werden. Eine Kombination von mehreren Konzepten und Zeitpunkten für eine Suchanfrage ist nicht möglich und wird eingeschränkt, indem die Option, weitere Konzepte bzw. Zeitpunkte auszuwählen, ausgegraut wird.
• Prinzip zur Unterstützung der Interpretation der Suchanfrageergebnisse: Bei einer Suchanfrage baut sich schrittweise ein Satz auf, der die Auswahl der Konzepte und Zeitpunkte widerspiegelt und dadurch die dadurch die vorgenommenen Einstellungen verbalisiert. Dieser Satz, die sogenannte Anfrageinterpretation, befindet sich oberhalb der Auswahlmöglichkeit der Konzepte und Zeitpunkte.

Die Zusammenhänge zwischen verschiedenen Anfragen im Suchanfrage-Builder und den entsprechenden Netzwerkdarstellungen sind in Abbildung 4 (TREX bei der Auswahl mehrerer Konzepte und eines Zeitpunkts) und Abbildung 5 (TREX bei der Auswahl eines Konzepts und mehrerer Zeitpunkte) ersichtlich.

Schritt 2: Konzepttrendanalyse

Im zweiten Schritt der Prototypentwicklung stand die Visualisierung des zeitlichen Verlaufs von Konzeptnennungen im Fokus, die sogenannte Konzepttrendanalyse. Neben der Darstellung der Konzeptnennungen auf den Websites einzelner Unternehmen sollte es mit dieser möglich sein, die Häufigkeit der Nennung bestimmter Konzepte auch im Gesamtnetzwerk, also über alle Organisationen hinweg, nachzuvollziehen. Für die Konzepttrendanalyse wurde ein Zeitstrahl entwickelt, mit dem die Entwicklungen und Veränderungen der Konzeptnennungen über einen bestimmten Zeitraum sichtbar gemacht werden können. Im ersten Grobentwurf wurden die Häufigkeiten der Nennungen für jedes Konzept getrennt in einem eigenen Zeitstrahl dargestellt (siehe Abbildung 1).

In der ersten überarbeiteten Version wurde als Konzepttrendanalyse eine Leiste entwickelt, die die zeitliche Entwicklung der Nennungshäufigkeit eines oder mehrerer Konzepte in Form eines Liniendiagramms visualisiert. Dadurch können Nutzerinnen und Nutzer Veränderungen und Trends über einen bestimmten Zeitraum hinweg leichter nachvollziehen und verschiedene Konzepte miteinander vergleichen. Die Leiste hat folgende Elemente und Prinzipien:

• Die x-Achse zeigt den Zeitraum, für den die Nennungshäufigkeiten dargestellt werden (in Abbildung 4: Januar 2023 bis August 2025). 
• Die y-Achse zeigt die Anzahl der Webpages der Organisationen, auf denen die Konzepte genannt werden (siehe Abbildung 4)
• Prinzip der Liniendarstellung: Wenn nur ein Konzept ausgewählt wurde, wird im Diagramm eine graue Linie angezeigt. Diese Linie wird an den ausgewählten Zeitpunkt(en) durch Fähnchen markiert, die mit dem jeweiligen Zeitpunkt beschriftet sind. Die Fähnchen übernehmen dabei die Farbcodierung der Zeitpunkte aus dem Suchanfrage-Builder (siehe Abbildung 5). Werden mehrere Konzepte ausgewählt, wird für jedes Konzept eine separate farbige Linie dargestellt. Die Farben entsprechen dabei jeweils der Farbcodierung der Konzepte aus dem Suchanfrage-Builder (siehe Abbildung 4).

Schritt 3: Preset-Karussell und Anfrage-Ergebnis-Trennung

Im dritten Schritt der Prototypenentwicklung wurde eine Funktion entwickelt, die Nutzerinnen und Nutzern themenspezifisch sinnvolle, vorab zusammengestellte Kombinationen aus Konzepten und Zeitpunkten, sogenannte Presets, zur Verfügung stellt. Ziel war es, einen schnellen Einstieg in die Nutzung von TREX zu ermöglichen, verschiedene Nutzungsmöglichkeiten zu demonstrieren und gleichzeitig einen einfachen thematischen Zugang zu interessanten Fragestellungen im Themengebiet der Digitalisierung zu schaffen.

Während in den ersten beiden Entwicklungsschritten der Suchanfrage-Builder, die Anfrageinterpretation sowie die Konzepttrendanalyse direkt im Netzwerkbereich dargestellt wurden (siehe Abbildung 4 und Abbildung 5), wurde im Rahmen der Entwicklung der Preset-Funktion entschieden, diese Bereiche visuell stärker voneinander zu trennen. Der Suchanfrage-Builder und die Konzepttrendanalyse wurden dabei räumlich von der Netzwerkansicht getrennt, während die Anfrageinterpretation weiterhin direkt im Netzwerkbereich sichtbar blieb.

Diese Entscheidung sollte Nutzerinnen und Nutzern dabei helfen, klarer zwischen ihrer Eingabe beziehungsweise Fragestellung bei der Nutzung von TREX und den daraus resultierenden Ergebnissen zu unterscheiden. Durch die Anfrage-Ergebnis-Trennung wird deutlicher, welche Suchanfrage gestellt wurde und wie die dargestellten Ergebnisse interpretiert werden können. Zudem unterstützt sie dabei, interaktive Elemente von TREX von nicht-interaktiven Darstellungen abzugrenzen.

Im oberen Bereich von TREX entstand so ein Karussell mit integriertem Suchanfrage-Builder, in dem zwischen verschiedenen Presets gewechselt werden kann. Innerhalb der Presets können Konzepte und Zeitpunkte weiterhin über die zuvor beschriebenen Mechanismen ausgewählt oder entfernt werden. Zusätzlich besteht die Möglichkeit, bestehende Presets anzupassen oder eigene Presets zu erstellen und zu speichern.

Unterhalb des Preset-Bereichs wird das Netzwerk in einem eigenen visuell hervorgehobenen Abschnitt dargestellt. Die Netzwerkansicht verändert sich dynamisch entsprechend der Einstellungen, die im Preset-Bereich vorgenommen werden. Die Anfrageinterpretation bleibt oberhalb des Netzwerks sichtbar und passt sich automatisch an die ausgewählten Konzepte und Zeitpunkte an. Unter dem Netzwerkbereich befindet sich ein weiterer visuell hervorgehobener Abschnitt, in dem die Konzepttrendanalyse dargestellt wird. 

Mit diesem dritten Schritt haben wir die erste Iteration der Prototypentwicklung von TREX abgeschlossen. Das Ergebnis ist in Abbildung 6 (Finale Prototypentwurf der ersten Iteration) abgebildet.

Ausblick auf Teil 3 der Artikelreihe

Lesen Sie im dritten Teil unserer Artikelreihe „TREX als Best-Practice des MDZ Fokus Mensch“, welche Erkenntnisse eine erste Analyse der Usability des TREX-Prototyps geliefert hat. Außerdem geben wir exklusive Einblicke in die Learnings, die wir als Projektteam aus dem interdisziplinären Projekt mitnehmen, welche Empfehlungen wir Start-ups sowie kleinen und mittleren Unternehmen für die Entwicklung einer Interaktionsarchitektur digitaler Lösungen geben und wie es mit dem Projekt weitergeht.