Interaktive Netzwerkvisualisierung - Analyse, Design und Optimierung für verbesserte Nutzerinteraktion

NETVIZ untersucht, wie die Darstellung und Interaktion einer Netmap angepasst werden können, damit Benutzer Netzwerkstrukturen besser verstehen und analysieren können.

Übersicht des interaktiven NETVIZ-Prototyps
Der entwickelte Prototyp zeigt Netzwerkgeräte, Hosts und Verbindungen in einer interaktiven Netmap.

Ausgangslage

Der Lightweight Network Explorer stellt technische Netzwerke in einer interaktiven Netmap dar. Die Analyse zeigte jedoch mehrere Probleme bei der Darstellung und Bedienung. Bei grösseren Netzwerkgraphen geht schnell die Übersicht verloren. Knotentypen und Statusinformationen sind nicht immer klar unterscheidbar und die Auswahl im Graphen stimmt nicht durchgehend mit der angezeigten Detailansicht überein. Zusätzlich müssen wichtige Geräteinformationen teilweise zuerst in mehreren Bereichen gesucht werden.

Zielsetzung

Ziel des Projekts war es, verschiedene Ansätze für die Weiterentwicklung der Netmap zu untersuchen und daraus einen interaktiven Prototyp zu entwickeln. Im Fokus standen die verständliche Strukturierung des Netzwerkgraphen, die Darstellung der Knotentypen und Statusinformationen, der Zugriff auf relevante Detailinformationen sowie die Interaktion zwischen Graph und Detailansicht.

Als grundlegender Ansatz wurden zusammengehörige Geräte und Hosts mithilfe von Compound Nodes hierarchisch gruppiert. Weitere Ansätze wurden zuerst als Lo-Fi-Prototypen untersucht und anschliessend in einem gemeinsamen Code-Prototyp zusammengeführt. Eine Umfrage und moderierte Usability-Tests zeigten, welche Ansätze verständlich waren und an welchen Stellen der Prototyp noch angepasst werden musste.

Netzwerk gruppieren
                            
                            Zusammengehörige Geräte und Hosts werden innerhalb übergeordneter Knoten
                            gruppiert. Die einzelnen Bereiche können ein- und ausgeklappt werden.
                            Dadurch bleibt der Aufbau des Netzwerks sichtbar, während der dargestellte
                            Detailgrad angepasst werden kann.
                        
Informationen klar darstellen
                            
                            Knotentypen, Statusinformationen und ausgewählte Elemente werden klarer
                            voneinander unterschieden. Die Suche, der Netzwerkgraph und die Detailansicht
                            wurden zudem stärker miteinander verbunden, damit ausgewählte Geräte leichter
                            gefunden und untersucht werden können.
                        
Ansätze mit Benutzern überprüfen
                            
                            In einer ersten Umfrage wurden verschiedene Darstellungen und Detailstufen
                            miteinander verglichen. Anschliessend wurde der überarbeitete Prototyp in
                            moderierten Usability-Tests anhand typischer Aufgaben untersucht.

Ergebnisse

Die Umfrage zeigte, dass die Compound-Node-Darstellung gegenüber dem klassischen Netzwerkgraphen deutlich bevorzugt wurde. Besonders für den ersten Überblick, das Auffinden von Geräten und das Nachvollziehen von Verbindungen wurde die gruppierte Darstellung als hilfreich bewertet. Bei der Detailstufe gab es keine vollständig eindeutige Lösung. Die vollständig eingeklappte Darstellung wurde zwar am häufigsten gewählt, einzelne Teilnehmende wollten jedoch bereits zu Beginn mehr Details sehen.

Der weiterentwickelte Prototyp enthält unter anderem:

eine hierarchische Gruppierung von Standorten, Netzwerkgeräten und Hosts
mehrere Detailstufen für die Darstellung des Netzwerkgraphen
eine einheitliche Darstellung der Knotentypen mit einer Legende
eine Suche, welche gefundene Geräte direkt im Graphen sichtbar macht
eine klarer strukturierte Detailansicht mit wichtigen Geräteinformationen
eine deutlichere Unterscheidung zwischen Auswahl, Status und Warnungen

Die Usability-Tests zeigten, dass die Suche für viele Teilnehmende eine wichtige Hilfe bei der Navigation war. Die Compound-Node-Struktur wurde grundsätzlich verstanden. Bei eingeklappten Bereichen war jedoch nicht immer direkt sichtbar, dass sie weitere Geräte enthalten. Auch beim Vergleich von Geräten, bei der Auswahl von Kanten und bei einzelnen Interaktionen wurden weitere Verbesserungsmöglichkeiten sichtbar.

Die Ergebnisse wurden verwendet, um den Prototyp weiter anzupassen. Das Projekt zeigt damit, wie eine hierarchische Strukturierung, eine klarere Darstellung und besser abgestimmte Interaktionen das Verständnis und die Analyse von Netzwerkstrukturen unterstützen können. Als nächster Schritt könnte der Prototyp vollständig in den Lightweight Network Explorer integriert und mit grösseren Netzwerken untersucht werden.

Technische Schlüsselbegriffe

Netzwerkvisualisierunginteraktive Darstellung technischer Netzwerke
Compound Nodeshierarchische Gruppierung zusammengehöriger Knoten
Cytoscape.jsBibliothek für die Darstellung und Interaktion mit Graphen
TypeScriptProgrammiersprache des entwickelten Prototyps
User-Centered DesignEntwicklung anhand von Anforderungen und Rückmeldungen der Benutzer
Usability-TestsÜberprüfung des Prototyps anhand konkreter Aufgaben

Kund:in

FHNW IMVS
Luc Heitz
Institut für Mobile und Verteilte Systeme (IMVS)

Team

Ryan Hillhouse
Dominik Luder

Betreuung
Thekla Müller
Luc Heitz