Simplified User Interface Grafiken: Anleitung für Anfänger

Wir zeigen Ihnen heute, wie SUI-Grafiken helfen können, neue User mit neuen und komplexen Interfaces und Workflows vertraut zu machen. SUI steht für Simplified User Interface. Diese Grafiken liefern also eine vereinfachte Darstellung einer Benutzeroberfläche. Der Hintergrund: Zu viele Informationen auf einmal können die User überlasten und lenken von den wesentlichen Funktionen und wichtigen Details ab.

Softwareprodukte werden außerdem häufig aktualisiert. Diese regelmäßigen Updates sowie die zugehörigen Lokalisierungsprozesse machen die Dokumentation technischer Inhalte sehr aufwendig. Wie können wir diesen Herausforderungen gerecht werden, ohne ständig alle Inhalte immer wieder anpassen zu müssen?

Wie wäre es, wenn Sie die visuellen Elemente so gestalten könnten, dass die Orientierung leicht ist und selbst bei UI-Änderungen keine Anpassung der Bilder notwendig ist?

Wir möchten Ihnen eine Design-Technik vorstellen, die wir bei TechSmith benutzen: Die Erstellung von SUI-Grafiken.

SUI (Simplified User Interface): Was steckt dahinter?

Vereinfachte PowerPoint Oberfläche als Beispiel für eine SUI-Grafik

Vereinfachte PowerPoint Oberfläche als Beispiel für eine SUI-Grafik

Eine SUI-Grafik liefert einen visuellen Überblick einer Softwareoberfläche, lässt aber unwichtige Elemente weg und verwendet vereinfachte Formen.

Nur die Elemente bleiben sichtbar, die zur Orientierung und zum Verständnis unbedingt notwendig sind. Die SUI-Grafiken geben nur eine visuelle Hilfestellung, um die Anleitungen besser nachverfolgen zu können.

So sieht der Leser genau, was wichtig ist und wird nicht durch unnötige Details abgelenkt.

Einfacher ist besser!

SUI-Grafiken folgen der bekannten Formel K.I.S.S. („Keep it simple, Stupid!“): Systeme funktionieren erfahrungsgemäß besser, wenn überflüssige und zu komplexe Details vermieden werden. Wenn Grafiken auf das Wesentliche reduziert werden, können die Lernenden sich auf die wichtigsten Informationen konzentrieren und verstehen die Zusammenhänge besser.

Josh Cavalier, ein E-Learning Experte beschreibt die kognitive Belastung als „Informationsmenge, die vom Gehirn verarbeitet werden kann…“.

Wenn Sie alles weglassen, was Ihr Publikum nur ablenken würde, reduzieren Sie diese kognitive Belastung und helfen den Lesern, sich auf das Wichtige zu konzentrieren.

Vereinfachte Softwareansicht mit nur einem im Detail dargestellten Menüpunkt.

Vereinfachte Softwareansicht mit nur einem im Detail dargestellten Menüpunkt.

In einem kürzlich veröffentlichten Blogartikel von der Interaction Design Foundation wird erklärt, wie Anwender sich allein auf die Informationen konzentrieren, die für sie im Moment gerade nützlich sind. Das gilt sowohl für das Produktdesign als auch für Anleitungen und Dokumentationsmaterialien. Wenn es für die Konsumenten nicht klar verständlich ist, wie ein Produkt benutzt wird, welche Vorteile es bietet oder wie ein Produkt ein bestimmtes Problem lösen kann, dann werden sie mit den Materialien nur schwer zurecht kommen.

SUI-Grafiken berücksichtigen diese Fakten: Wenn in der Hilfedokumentation vereinfachte Oberflächen gezeigt werden, bekommen die Leser wirklich nur die notwendigen Informationen, um das Produkt erfolgreich handhaben und damit effizient arbeiten zu können.

Aktualisierung von Inhalten

Gestalten Sie Materialien, die länger aktuell bleiben. Eine kurze Umfrage beim STC Technical Communication Summit zeigte, dass die Aktualisierung von Trainingsinhalten eine der größten Herausforderungen für technische Kommunikationsexperten ist. Das macht Sinn, wenn wir Software als Beispiel nehmen: Updates kommen in immer kürzeren Abständen heraus und es werden häufig neue Funktionen hinzugefügt. Mit jeder neuen Funktion und den damit verbundenen Interface-Anpassungen müssen auch die Anleitungen immer wieder aktualisiert werden. Das bedeutet viel Arbeitsaufwand für das Dokumentationsteam, auch wenn es sich nur um kleine Änderungen handelt. Welche Alternativen gibt es für technische Redakteure?

Vereinfachte Interface-Grafiken spielen eine wichtige Rolle in der Dokumentationsstrategie. Wenn eine Schaltfläche entfernt oder eine neue Funktion ergänzt wird, ist das für die Anwender sehr verwirrend, wenn das neue Detail nicht im richtigen Screenshot zu sehen ist. Eine vereinfachte Interface-Grafik bleibt oft länger und über mehrere Versionen und Updates aktuell, weil die Softwareoberfläche abstrahiert dargestellt wird. Technische Kommunikationsexperten nutzen diese Darstellungsmethode, um visuelle Inhalte über einen längeren Zeitraum hinweg in den Dokumentationsmaterialien nutzen zu können. SUI-Grafiken können sogar mehrfach in ähnlichen Szenarios verwendet werden.

Schnellere Lokalisierung von Inhalten

Wer Trainings- und Informationsinhalte erstellt, der weiß wie zeitaufwendig und teuer die Lokalisierung der Materialien sein kann, wenn für jede Sprache und jedes kulturelle Umfeld neue Screenshots und Grafiken angefertigt werden müssen. Die Lokalisierung von Einführungsmaterialien und Grafiken ist keine triviale Sache, wenn ein Unternehmen weltweit erfolgreich sein will. Wie Day Translations das formuliert, sollten wir alle „..die Meinung revidieren, dass Englisch die universelle Geschäftssprache ist.“ Es ist ungeheuer wichtig, für unterschiedlichen Kundengruppen Inhalte bereitzustellen, die im wahrsten Sinne des Wortes „ansprechend“ sind, d.h. in der richtigen Sprache vorliegen.

Die meisten technischen Redakteure wissen, wie viel Aufwand es bedeutet, Screenshots für alle Sprachversionen zu erstellen. Wenn statt sprachspezifischer Bilder SUI-Grafiken verwendet werden, wird diese Aufgabe viel einfacher. Die gleiche Grafik kann in allen lokalisierten Texten integriert werden. Zusätzliche Erklärungen können im Grafiktitel oder in Beschriftungen gegeben werden.

Dieselbe Simplified User Interface Grafik wird sowohl in der englischen als auch der deutschen Sprachversion verwendet.

Dieselbe Simplified User Interface Grafik wird sowohl in der englischen als auch der deutschen Sprachversion verwendet.

So werden vereinfachte Grafiken erstellt

Eine vereinfachte (SUI) Grafik ist leichter erstellt als gedacht. Wir finden es am einfachsten, mit einem echten Screenshot anzufangen und diesen in eine vereinfachte Grafik umzuwandeln. Dazu brauchen Sie eine Screencapture und eine Bildbearbeitungssoftware.

Bei TechSmith benutzen wir natürlich unser Snagit, da es einige ausschlaggebende Funktionen für zum Vereinfachen der Grafiken besitzt. Andere Bildberbeitungsprogramme können aber ebenfalls eingesetzt werden. 

 

Schritt 1: Machen Sie einen Screenshot.

Mit Snagit können Sie eine Bildschirmaufnahme der Software machen und diese dann im Editor öffnen, um daraus eine SUI-Grafik zu erstellen. Bearbeiten Sie die Aufnahme so, dass genau der richtige Bereich im Bild ist und das Bild die gewünschten Abmessungen hat.

Screenshot einer Webseite

Screenshot einer Webseite

Schritt 2: Vereinfachen Sie den Screenshot.

Wenn der Screenshot aufgenommen sind, geht es an die Simplifizierung der Grafik. In diesem Schritt werden zunächst alle nicht relevanten Menüs, Schaltflächen und Tool-Tipps entfernt, um die Grafik weniger kompliziert zu machen und auf das Wesentliche zu reduzieren. Snagit 2019 bietet hierzu zwei einfache Möglichkeiten mit dem neuen Werkzeug Vereinfachen.

Nachdem Sie das Werkzeug Vereinfachen in der Bearbeitungsleiste ausgewählt haben, wird eine Auswahl grafischer Elemente angezeigt, die speziell zum Vereinfachen von Bildschirmaufnahmen geeignet sind. Die Farbpalette für diese Elemente wird automatisch aus den Farben des Bilds erstellt, sodass alles visuell zusammenpasst.

 

Mit Snagit 2019 kann man Grafiken auch automatisch vereinfachen. Aktivieren Sie die Funktion „Automatisch vereinfachen“ und Snagit durchläuft eine optischen Zeichenerkennung, analysiert dabei die Formen und Text im Screenshot und ersetzt diese automatisch mit passenden SUI-Elementen. Die einzelnen Elemente können angepasst, verändert und verschoben werden um genau den Look zu erreichen, den Sie sich wünschen.

Schauen Sie sich das folgende Tutorial an, um das Werkzeug Vereinfachen genauer kennenzulernen.

 

Schritt 3: Speichern Sie Ihr Werk.

Wenn Sie fertig sind, speichern Sie Ihre Datei als .png oder .jpg, die Sie dann in Ihre Dokumentation einfügen können. Speichern Sie Ihr fertiges Bild auf jeden Fall zusätzlich als .snag Datei. Das ist das Snagit Projektdateiformat. Die .snag Dateien können Sie jederzeit wieder bearbeiten und ändern. Das spart Ihnen viel Zeit, wenn Sie Ihr Design aktualisieren und ändern wollen. 

Bonus Tipp: Vergeben Sie ein Kennzeichen (ein sogenanntes „Tag“), um Ihr Bild in der Snagit Bibliothek immer schnell wiederzufinden.

Die wichtigsten Vorteile der SUI-Grafiken

Die zwei wichtigsten Vorteile der SUI-Grafiken in technischen Dokumentationen sind: Erstens, diese Grafiken lockern die Anleitungen optisch auf und erleichtern den Benutzern die Orientierung. Zweitens können diese Grafiken den Aufwand minimieren, Screenshots immer wieder aktualisieren oder lokalisieren zu müssen.

Die Integration von SUI-Grafiken sollte daher als Stilmittel für die technische Kommunikation berücksichtigt werden. Selbst einige wenige Grafiken machen schon einen deutlichen Qualitätsunterschied.

Wenn Sie Snagit noch nicht kennen, laden Sie sich die kostenlose Testversion noch heute herunter und fangen Sie an, eigene SUI-Grafiken zu erstellen.