Die meisten von Ihnen sind sicherlich schon dem ein oder anderen Simplified User Interface (SUI) begegnet. Angefangen in der Marketingkommunikation haben sich SUIs im letzten Jahrzehnt auch in andere Fachgebiete weiterverbreitet und stellen eine attraktive Alternative zu herkömmlichen Screenshots dar. Heute sind sie zunehmend im Einsatz, wenn es darum geht, Nutzerinnen und Nutzer einen ersten Überblick über eine neue Software zu verschaffen oder neue Funktionen vorzustellen. Bekannte Unternehmen wie TechSmith, Dropbox, Adobe und viele weitere greifen hier oft auf SUIs zurück (Abb. 01). Aber auch in Software-Tutorials finden sich SUIs immer häufiger.
Abb. 01 SUI-Beispiele bekannter Unternehmen: Dropbox Feature Vorstellung (l.), Snagit Tooltip (r.). Quelle https://www.dropbox.com/features/https://www.techsmith.de/learn/tutorials/snagit/einstellungen/
Simplified User Interfaces zeichnen sich durch ihren stark reduzierten Detailgrad aus. Alle visuellen Informationen, die nicht unmittelbar notwendig sind, werden in einfache geometrische Formen verwandelt oder komplett entfernt. Nur die für den Arbeitsschritt relevanten Elemente oder solche, die zur Orientierung dienen, bleiben bestehen. Durch den stark reduzierten Detailgrad der Abbildungen soll die Aufmerksamkeit der Betrachterinnen und Betrachter schneller auf das Wesentliche gelenkt werden. [1] [2]
Eine Alternative zu SUIs stellen bekannte visuelle Signalisierungstechniken dar, wie die farbliche Hervorhebung relevanter Bereiche oder das Einfügen von Rahmen und Pfeilen (Abb. 02). Die Effektivität dieser Techniken ist bereits durch einige Studien bewiesen worden. [3] [4] Während bei diesen Signalisierungen die relevanten Bereiche farblich hervorgehoben werden, geschieht die Aufmerksamkeitslenkung bei SUIs durch das umgekehrte Prinzip. Da alles Irrelevante verblasst oder entfernt wird, stechen die relevanten Bereiche stärker hervor und ziehen dadurch die Aufmerksamkeit auf sich.
Abb. 02 Screenshot-Designvarianten im Vergleich; Simplified User Interface (l.), signalisierter Screenshot (M.) und unbearbeiteter Screenshot (r.). Quelle Pia Bsdurrek; GIMP
Aufwändige Erstellung
Nicht zu bestreiten ist jedoch ein wesentlicher Nachteil der SUI-Designtechnik: der Erstellungsaufwand. Während man einen herkömmlichen Screenshot mit nur einem Klick oder Tastendruck erzeugen kann, ist mit der Kreation eines SUIs deutlich mehr Aufwand verbunden. Für die Erstellung eines SUIs gibt es zwei Wege: die automatische Erzeugung über eine kommerzielle Software oder die Eigenkreation mit jedem beliebigen Grafikprogramm. Für beide Varianten muss jedoch in einem ersten Schritt ein Screenshot der Benutzeroberfläche erstellt werden. Mit kommerzieller Software wie Snagit kann man diesen mit nur wenigen Klicks hochladen und daraus automatisch ein SUI kreieren lassen. Die Gestaltung kann dabei individuell angepasst werden, beispielsweise der Grad der Reduzierung oder die Farbgebung. Je nach Komplexität des hochgeladenen Screenshots ist jedoch unter Umständen viel händische Nachbearbeitung notwendig, um zu einem zufriedenstellenden Ergebnis zu gelangen.
Als Alternative ist auch jedes bekannte Grafikprogramm verwendbar, um SUIs komplett von Hand zu gestalten. Zu bedenken sind hier der erhöhte Zeitaufwand und die notwendigen Vorkenntnisse in der Gestaltungssoftware. Nutzt man ein vektorbasiertes Grafikprogramm, bietet sich der Vorteil, dass das SUI nach der Gestaltung beliebig skalierbar ist und sich so ideal für die Verwendung in verschiedenen Größen auf verschiedenen Endgeräten eignet. Verpixelte Darstellungen nach der Skalierung von herkömmlichen Screenshots sind damit passé. Ebenso bieten vektorbasierte SUIs die Möglichkeit, sie zu animieren und als kurze GIFs oder ganze Videos einzusetzen. Aber auch darüber hinaus weist diese Designtechnik für Screenshots eine Reihe von relevanten Vorteilen für Technische Redakteurinnen und Redakteure auf.
Hohe Wiederverwendbarkeit
Einer der großen Vorteile liegt wohl in der Wiederverwendbarkeit von SUI-Grafiken. Die Herausforderung, Inhalte in der Technischen Kommunikation stets aktuell zu halten, kennen wohl die meisten. Besonders bei Abbildungen kann der Aufwand hierfür enorm sein. Bereits in der Softwareentwicklung, aber auch später bei Updates kommt es immer wieder zu Änderungen an der Benutzeroberfläche. Elemente kommen hinzu, verändern ihre Position oder werden entfernt, Bezeichnungen von Buttons oder in Menüs werden angepasst. Jedes Mal müssen dann unter Umständen die Screenshots in der Technischen Dokumentation neu erstellt und ggf. neu mit Auszeichnungen zur Signalisierung versehen werden. SUIs zeigen sich hier enorm vorteilhaft. [1] [2] Durch ihre starke Detailreduktion entfällt ein Großteil dieses Aufwands. Alle irrelevanten Elemente werden in einem SUI sowieso nicht dargestellt, müssen somit also auch bei Änderungen nicht angepasst und ausgetauscht werden. Auch für die Darstellung der Software in verschiedenen Betriebssystemen kann unter Umständen dasselbe SUI genutzt werden.
Schnellere Lokalisierung
Aber nicht nur hier zeigen sich SUIs langlebiger. Einen weiteren, zum Teil enormen Verwaltungsaufwand bedeutet es, Technische Dokumentationen in viele Sprachen zu übersetzen und dabei alle Abbildungen stets aktuell zu halten. Bei jeder Änderung an der Benutzeroberfläche müssen von allen Sprachversionen neue Screenshots erstellt und ausgetauscht werden. Die Detailreduktion der SUIs wirkt sich hier ebenfalls arbeitserleichternd aus. [1] [2] Da Text zu großen Teilen sowieso nicht in SUIs dargestellt wird, muss dieser bei Änderungen auch nicht ausgetauscht werden. Betrifft eine Änderung doch einmal eine relevante, dargestellte Bezeichnung, ist der Anpassungsaufwand um einiges geringer. Denn bei der Verwendung von SUIs hat man – je nach gewähltem Grafikprogramm – nur eine Grafikdatei, die alle Sprachversionen in verschiedenen Ebenen enthalten kann. Somit muss nur diese eine Datei angepasst werden, anstatt die Software zu öffnen und in jeder Sprachversion einen neuen Screenshot zu erzeugen. Somit kommt es auch hier zu einer enormen Ersparnis an Zeit und Organisationsaufwand.
Einfacherer Datenschutz
Als letzter Vorteil ist noch das Thema Datenschutz zu nennen. Auf Screenshots von Benutzeroberflächen sind oft persönliche Daten oder Benutzerkonten sichtbar. Diese können zwar durch Nachbearbeitung des Screenshots unkenntlich gemacht werden, dies wirkt jedoch oft unprofessionell oder ablenkend. Alternativ werden Beispiel-Accounts mit erfundenen Benutzerdaten angelegt, um den Datenschutz nicht zu verletzen. Dies ist jedoch mit zusätzlichem Aufwand verbunden. Da für den Arbeitsschritt irrelevante Daten in einem SUI sowieso entfernt oder in simple Formen umgewandelt werden, entfällt auch hier der Aufwand und ein ästhetischeres Gesamtbild entsteht [2].
Erkenntnisse der Forschung
Trotz der wachsenden Beliebtheit und vieler Vorteile der Designtechnik wurde jedoch bisher nicht überprüft, wie effektiv Simplified User Interfaces sich im praktischen Einsatz zeigen, vor allem im Vergleich zu herkömmlichen Screenshots oder bekannten Signalisierungstechniken, die mit weniger Erstellungsaufwand verbundenen sind. Bieten SUIs „nur“ Vorteile für Technische Redakteurinnen und Redakteure bei der Erstellung von technischen Informationsprodukten? Oder auch für die Nutzerinnen und Nutzer? Können diese überhaupt effektiv mit Abbildungen in der SUI-Designtechnik arbeiten oder behindert die Detailreduktion das Verständnis? Eine Forschungsstudie an der Hochschule Merseburg hat sich diesen Fragestellungen gewidmet. [5]
Konzept der Studie
Um die Effektivität von Simplified User Interfaces zu untersuchen, wurde eine Eyetracking-Studie mit 49 Probandinnen und Probanden im Usability-Labor der Hochschule Merseburg durchgeführt. Mit Eyetracking können die genauen Blickbewegungen von Probandinnen und Probanden aufgezeichnet werden, während sie beispielsweise Aufgaben am Computer bearbeiten. Dies ermöglicht es, zu analysieren, wie ein Stimulus betrachtet und damit gearbeitet wird.
Der Aufbau der Studie gliederte sich in zwei kurze Fragebögen und zwei Hauptaufgaben. Die beiden Hauptaufgaben umfassten einen Orientierungstest sowie die Bearbeitung eines Software-Tutorials des Bildbearbeitungsprogrammes GIMP. Um die Effektivität von SUIs gegenüber anderen Abbildungsarten zu untersuchen, wurde das Material der beiden Hauptaufgaben in drei Versionen erstellt. Während das Layout und der textliche Inhalt bei allen Versionen identisch waren, unterschieden sich die Versionen bei der enthaltenen Abbildungsart. Die erste Version enthielt SUIs, die zweite Version visuell signalisierte Screenshots, bei denen die relevanten Bereiche durch einen roten Rahmen hervorgehoben wurden. Die dritte Version enthielt hingegen unbearbeitete Screenshots. Die Probandinnen und Probanden wurden zu Beginn der Studie per Zufall in drei Gruppen aufgeteilt. Jede der Gruppen arbeitete im Folgenden mit nur einer dieser Abbildungsvarianten.
Unterstützung bei der Orientierung?
Ein Software-Tutorial hat neben Abbildungen normalerweise auch schriftlich verfasste Aufgabenstellungen. Der Text kann einen wesentlichen Einfluss darauf haben, wie häufig und intensiv die Abbildungen betrachtet werden. Steht die gesamte relevante Information bereits im Text, wird die Abbildung eventuell gar nicht benötigt oder kaum beachtet. Um die drei Abbildungsvarianten SUI, signalisierter Screenshot und unbearbeiteter Screenshot unabhängig vom Einfluss möglicher Aufgabenbeschreibungen untersuchen zu können, wurde als erste Hauptaufgabe ein Orientierungstest durchgeführt. Hier wurden den Probandinnen und Probanden nacheinander mehrere unterschiedlich komplexe Abbildungen präsentiert, die einen Teil der Benutzeroberfläche von GIMP zeigten. Auf jedem Bild sollte so schnell wie möglich ein bestimmter Parameter oder Wert identifiziert werden. Hierfür wurde vor jedem Bild eine Frage eingeblendet, die dann mithilfe des nachfolgenden Bildes beantwortet werden sollte. Ziel der Aufgabe war es festzustellen, wie man sich in der jeweiligen Abbildungsvariante orientieren und relevante Elemente identifizieren kann. Die Methode des Eyetrackings ist hier besonders nützlich, da damit exakt ermittelt werden kann, wie schnell der gesuchte relevante Bereich identifiziert wurde.
Die Ergebnisse des Orientierungstests zeigen auf den ersten Blick ein eindeutiges Ergebnis. Die SUI-Gruppe konnte die gesuchten Bereiche in den Abbildungen durchschnittlich dreimal schneller identifizieren als die Gruppe, die mit unbearbeiteten Screenshots gearbeitet hat. Den nahezu identischen Vorteil zeigt jedoch auch die Gruppe mit den signalisierten Screenshots. Die Gruppe hat nahezu gleich schnell gearbeitet wie die SUI-Gruppe. Damit konnten sich beide Abbildungsvarianten klar gegen die unbearbeiteten Screenshots durchsetzen.
Bei näherer Betrachtung der einzelnen Abbildungen kommt es jedoch zu einem differenzierteren Ergebnisbild. Bei einer stark strukturierten Abbildung wie einem Listenmenü (Abb. 03, oben) zeigt sich der klare Vorteil für SUIs und signalisierte Screenshots. Der gesuchte Parameter im unteren Bildbereich wird nahezu sofort und am intensivsten fixiert. Währenddessen wird bei der Variante des unbearbeiteten Screenshots deutlich sichtbar, wie der Blick der Probandinnen und Probanden die gesamte Liste hinabgleitet, bevor die gesuchte Lösung gefunden wird. Wird als Stimulus eine Abbildung der gesamten Benutzeroberfläche betrachtet (Abb. 03, unten), zeigt sich jedoch ein abgeschwächtes Bild. Zwar gibt es bei der Variante ein paar irrelevante Fixierungen zusätzlich im Bereich oben links, die Intensität der Unterschiede ist jedoch nicht so ausgeprägt wie beim einfachen Listenmenü.
Abb. 03 Heat Map Darstellung der Ergebnisse des Orientierungstests von zwei der gestellten Aufgaben. Je röter der Bereich, desto intensiver wurde der Bereich fixiert. Quelle Pia Bsdurrek
Simplified User Interfaces und signalisierte Screenshots sind demnach hilfreicher bei größeren und stark strukturierten Abbildungen wie einem Listenmenü. Hier ist die Blickrichtung bereits durch die Struktur des Bildes vorgegeben, und relevante Details fallen durch die Reduzierung des Irrelevanten noch schneller ins Auge. Bei detailreichen Abbildungen wie einer ganzen Benutzeroberfläche konnte dieser Vorteil gegenüber unbearbeiteten Screenshots nicht festgestellt werden. Hier gibt das Bild keine Struktur vor, und SUIs zeigen sich nur genauso hilfreich wie alle anderen Abbildungsvarianten. Der gesuchte Bereich ist hier vermutlich zu klein und unauffällig, so dass er auch durch die Detailreduktion (oder Signalisierung) nicht mehr hervorsticht. Für die Praxis liefert dies einen Hinweis darauf, dass SUIs nicht bei sehr kleinen oder kontrastarmen Abbildungen eingesetzt werden sollten. Hier bietet die Reduzierung der Details keinen Vorteil und ist schlecht erkennbar. Kontrastreichere visuelle Signalisierungstechniken könnten in diesen Fällen besser geeignet sein.
Wie effektiv sind SUIs in Tutorials?
Um den Einsatz von SUIs im Vergleich zu anderen Abbildungsvarianten im realen Anwendungskontext zu untersuchen, wurde als zweite Hauptaufgabe der Studie die Bearbeitung eines Software-Tutorials gewählt. Aufgabe war es, im Bildbearbeitungsprogramm GIMP ein Poster aus zwei Fotos, Text und mit diversen Effekten zu gestalten. Die Arbeitsschritte hierfür gliederten sich in mehrere Handlungssequenzen, bestehend aus verschiedenen Handlungsanweisungen, Resultatangaben und Abbildungen. Auch hier wurde mit Material gearbeitet, das sich lediglich hinsichtlich der Abbildungsart unterschied (Abb. 04). Alle Abbildungsarten wurden an den identischen Stellen im Tutorial platziert und zeigten jeweils einen identischen Ausschnitt der Software-Benutzeroberfläche.
Abb. 04 Das Software-Tutorial mit den drei unterschiedlichen Abbildungsvarianten: SUI (l.), signalisierte Screenshots (M.), unbearbeitete Screenshots (r.). Quelle Pia Bsdurrek
Für diese Aufgabe gab es kein Zeitlimit, und es konnte individuell durch das Tutorial navigiert werden. Analysiert und verglichen werden sollte hier, wie viel Zeit zur Bearbeitung der drei Tutorialvarianten benötigt und wie viele Fehler dabei gemacht wurden. Eyetracking ermöglicht es zudem herauszufinden, wie viel Zeit im Tutorial im Vergleich zur Software verbracht wurde und wie oft zwischen beidem hin und her gesprungen wurde. Außerdem kann ermittelt werden, wie lange und wie oft die Abbildungen im Tutorial im Vergleich zum Text betrachtet wurden.
Die Auswertung der Bearbeitung des Tutorials zeigt ein etwas anderes Bild als der Orientierungstest. Die Gruppe, die mit signalisierten Screenshots gearbeitet hat, war im Durchschnitt etwa 15 Sekunden schneller pro Aufgabe als die beiden anderen Gruppen. Simplified User Interfaces können ihre Vorteile bei der praktischen Arbeit mit dem Tutorial demnach nicht ganz so gut zur Geltung bringen. Nahezu identisch wie mit unbearbeiteten Screenshots wird mit ihnen etwas langsamer gearbeitet als mit signalisierten Screenshots. Die Abbildungsvariante wirkt sich jedoch nicht auf die Anzahl an korrekt gelösten Aufgaben aus. Mit SUIs signalisierten und unbearbeiteten Screenshots wurden jeweils gleich viele Fehler bei der Bearbeitung des Tutorials gemacht. Demnach kann mit allen drei Varianten gleich korrekt, mit signalisierten Screenshots dabei jedoch etwas schneller gearbeitet werden.
In den weiteren Eyetracking-Analysen hat sich zudem gezeigt, dass signalisierte Screenshots das Lesen des Tutorials beschleunigen. SUIs zeigen hierfür ebenfalls Tendenzen, wenn auch weniger stark ausgeprägt. Dadurch, dass die relevanten Informationen in den Bildern den Leserinnen und Lesern schneller ins Auge springen als bei unbearbeiteten Screenshots, können diese schneller mit dem Text abgeglichen und verarbeitet werden. Die roten Hervorhebungen der signalisierten Screenshots stechen hier noch mehr hervor als ein SUI, so dass dieser Prozess möglicherweise noch stärker beschleunigt wird. Diese hervorstechenden roten Signalisierungen führen zudem dazu, dass weniger Zeit in der Software benötigt wird. Aufgrund der Signalisierungen im Tutorial können die gesuchten Elemente in der Software schneller identifiziert und abgeglichen werden. SUIs zeigen sich hier nicht vorteilhaft. Ein Grund dafür könnte sein, dass die Abbildungen im Tutorial klein und kontrastarm gestaltet sind und somit den eigentlichen Orientierungsvorteil von SUIs abschwächen. Durch die Reduzierung der Details entfallen hilfreiche Infos, die Nutzerinnen und Nutzer benötigen, um einen Abgleich zwischen Tutorial und Software herzustellen.
Persönliche Einschätzungen
Die Probandinnen und Probanden wurden am Ende der Studie nach ihren persönlichen Einschätzungen zum Tutorial und ihrer jeweiligen Abbildungsvariante gefragt. Hier hat sich gezeigt, dass alle Varianten als ähnlich ansprechend und hilfreich zum Lösen der Aufgaben bewertet wurden. Das Tutorial wurde zwar als sehr leicht zu bearbeiten eingeschätzt, jedoch waren für alle drei Gruppen die Abbildungen notwendig zum Lösen der Aufgaben.
Gezielt einsetzen
Insgesamt haben sich Simplified User Interfaces als effektiv für die Orientierung gezeigt. Bei der Entscheidung für den Einsatz der Designvariante sollte jedoch genau geprüft werden, ob sie sich für den jeweiligen Kontext und die Nutzungsumstände eignet. Beispiele hierfür können sein, dass die jeweiligen Abbildungen relativ groß und kontraststark dargestellt werden. Ebenso eignen sich SUIs gut, wenn keine unmittelbare Handlungsausführung notwendig ist. Tooltipps oder Vorstellungen neuer Features einer Software können hier sinnvolle Einsatzbereiche sein.
Für die Verwendung in einem Software-Tutorial sollte der Einsatz von SUIs individuell abgewogen werden. Für den Abgleich zwischen Tutorial und Benutzeroberfläche in der Software können kontrastreichere Signalisierungstechniken wie rote Umrahmungen unter Umständen einfacher erkennbar sein. Mit SUIs kann jedoch genauso korrekt gearbeitet werden. Zudem überzeugen sie durch die einfachere Lokalisierung und Wiederverwendbarkeit. Wenn eine Softwaredokumentation in viele Sprachen übersetzt wird oder es viele Änderungen an der Benutzeroberfläche gibt, können die individuell anpassbaren SUIs zu erheblichen Zeit- und Kosteneinsparungen für Technische Redakteurinnen und Redakteure führen. Viele Texte müssen nicht mehr übersetzt und Abbildungen müssen seltener ausgetauscht werden. Daher kann es sich lohnen, individuell abzuwägen, wo in der Dokumentation SUIs sinnvoll eingesetzt werden können, damit sich der Aufwand bei der Erstellung lohnt. Ein Beispiel für einen sinnvollen Einsatz von SUIs könnten auch Bereiche in der Technischen Dokumentation sein, in denen bestimmte relevante Elemente identifiziert und grundlegende Orientierung in der Software gegeben werden sollen.
Links und Literatur zum Artikel
[1] Bollen, A./Saremba, L. (2020): Einfach gestalten. In: technische kommunikation, H. 5, S. 11–16.
[2] Bollen, A. (2019): Simplified graphics: Meet the new design style for technical communication. www.linkedin.com/pulse/simplified-graphics-meet-new-design-style-technical-anton-bollen/
[3] Mayer, R. E. (2021): Multimedia Learning, 3. Auflage, Cambridge University Press, Cambridge.
[4] Meng, M. (2019): Effects of Visual Signaling in Screenshots: An Eye Tracking Study, In: Technical Communication, 66(4), S. 396–411.
[5] Bsdurrek, P./Meng, M. (2024): Simply Effective? Simplified User Interfaces in Software Tutorials. Erscheint im: Journal of Technical Writing and Communication. DOI: 10.1177/00472816241262221