Einfach zugreifen: Mobile Dokumentation mit einer Hilfe-App

Aus der Definition entstanden für die Umsetzung der Hilfe-App folgende Eckpunkte

• Nutzungskonzept: Ersatz für nach­schlageorientierte PDF-Anleitungen, daher zunächst eine direkte Konvertierung der Daten nach HTML5 mit Volltextsuche, Navigationsverzeichnis und Berücksichtigung von Ein-/Aufklappbereichen, so genannten Progressive Disclosure; Bereitstellung eines „App-Feelings“ für den Nutzer, das über den Favoriten-Link in Form einer URL für den Web-Browser des Geräts hinausgeht; der Benutzer soll ohne Umwege zu einer Dokumentation in seiner Sprache gelangen; Nachschlagen soll als Nutzungskonzept beibehalten werden.
• Eingangskanal: Aus Kostengründen keine multimedialen Erweiterungen, eine Option für die künftige Einbindung von Videos ist aber vorzusehen.
• Interaktion: Nutzung mit Android und Apple iOS, unter anderem auch mit „Pinch-to-Zoom“, dem Vergrößern durch eine Wischgeste.
• Format: Nutzung des HTML5-Formats als Ergebnis der Konvertierung von Dateien aus Adobe FrameMaker und dem HTML-Konverter WebWorks ePublisher.
• Medium: Nutzung auf beliebigen Bildschirmgrößen, daher responsive Webdesign erforderlich.
• Zugriffskontrolle und Bibliotheks­funktion: Freier Zugriff, Auswahl einer Dokumentation auf Basis der Produktbezeichnung.
• Ort (Zugriff): Meist keine lokale Datenhaltung nötig, da Gerätenutzung nur mit aktivem WLAN sinnvoll; Datenhaltung auch wegen Entwicklungskosten eingespart.
• Digitale Benutzerassistenz/Kontext­sensitivität: Bislang nicht als Anwendungsfall definiert.

Von der Dokumentation zur App

Gemeinsam mit dem Kunden entschied sich itl für eine schlanke, Browser-nahe Lösung. Eine native Programmierung war jedoch für eine bessere Kontrolle der Dokumentanzeige und auf Grund des geplanten Zugriffskonzepts unumgänglich. Der Zugriff auf die bereits vorhandenen PDF-Dateien der Anleitungen sollte als preiswerte Version einer Offline-Datenhaltung weiterhin möglich sein. Herausforderungen waren auch folgende Punkte: 

• eine möglichst einfache Berücksichtigung potenziell aller Sprachen (die Betriebssysteme Android und iOS unterstützen mehr als sechzig Sprachen)
• eine möglichst einfache Update- und Ergänzungsmöglichkeit für beliebige Anleitungen, ohne die App selbst aktualisieren zu müssen

Durch den Fokus auf den schnellen und einfachen Zugriff kam die Idee, die vom Nutzer auf dem mobilen Endgerät eingestellte Systemsprache auszulesen und für die Anleitungsauswahl mit auszuwerten.

Eigenschaften der Anwendung

Die App besteht aus dem downloadbaren Teil im App-Store und dem Backend auf einem Web-Server von Gigaset. Dort liegen sämtliche Anleitungen. Die App selbst enthält nur wenige Informationen, die aufgerufen werden, wenn keine Internetverbindung besteht. Die Anleitungen sind also nur mit einer aktiven Internetverbindung aufrufbar.

Obwohl die nativ programmierten Funktionen möglichst gering gehalten wurden, ergaben sich komplexe Anforderungen für eine möglichst optimale App-gemäße User Experience. 

Um die Auswahl der Sprache zu vereinfachen, liest die App die im System eingestellte Sprache aus und sendet die Information mit der Anfrage der gewählten Anleitung an den Webserver. Der Server verarbeitet die Anfrage mit einem hinterlegten Sprachmapping. Durch das Mapping kann die Technische Redaktion eine eigene Zuordnung zwischen verschiedenen Sprachen konfigurieren, falls eine bestimmte Sprache nicht unterstützt wird. Die Standardsprache ist Englisch.

Eine Übersicht über die App und ihre Funktionen zeigt Abbildung 2. Der Benutzer soll die App und ihre Funktionen in guter Erinnerung behalten. Daher wurden folgende Anforderungen ins Visier genommen:

1. Verhalten des Off-Canvas-Menüs, des seitlichen Navigationsmenüs
2. Produktauswahl mit Live-Filter und Historie der aufgerufenen Anleitungen
3. Zurück-Funktion (Zurück-Schaltfläche bei Android-Geräten) und/oder Beendigung der App
4. Anzeige der HTML-Anleitungen in responsive Design, integriert in der App

1. Off-Canvas Menü

Das Übersichts-Icon ruft das Off-Canvas-Menü auf und definiert die grundlegende Bedienung der App. Das Menü enthält neben juristischen Informationen auch den Link auf die Webseite zum Download der PDF-Anleitungen. Da die App automatisch mit der Startseite zur Produktauswahl beginnt, muss ein Anwender das Menü nicht unbedingt verwenden.

2. Startseite und Produktauswahlliste

Beim Öffnen der App gelangt der Benutzer direkt auf die Produktauswahlliste. Sie enthält ein einfaches Suchfeld, das mit einem Live-Filter ausgestattet ist → Abb. 03. Nach jedem Tastendruck wird die Liste der Fundstellen sofort aktualisiert und nicht zutreffende Elemente ausgeblendet. Außerdem findet der Benutzer am Anfang der Liste die drei zuletzt aufgerufenen Betriebsanleitungen, also Historie. 
 

3. Zurück-Funktion

Android und iOS unterscheiden sich bei ihren Vorgaben für eine Zurück-Funktion. Android-Geräte haben dafür eine eigene Schaltfläche. Nach einigen Tests einigten sich die Projektbeteiligten auf zwei unterschiedliche Implementierungen. Auch wenn die Implementierungen in Android und iOS eine History-Funktion für die in der App aufgerufenen Seiten besitzen, kann in der Android-Version detaillierter navigiert und die App beendet werden. Dieses Vorgehen entspricht der unterschiedlichen Erwartungskonformität bei beiden Plattformen.

4. Anzeige der HTML-Anleitungen

Die Anleitungen werden als Online-Hilfen im HTML5-Format auf dem Server in den jeweiligen Sprachen abgelegt und von der App in den integrierten Webview geladen. Horizontales Scrollen ist durch Responsive Design nicht nötig, vertikales Scrollen ist möglich. Auch die Pinch-to-Zoom-Funktion wird unterstützt. Der Nutzer kann bestimmte Details schneller heranzoomen, wie zum Beispiel Gerätebeschriftung in einer Grafik. Die weiteren Funktionen hat Gigaset unabhängig mithilfe des Konverters bestimmt: Volltextsuche je Anleitung, Breadcrumbs und Progressive Disclosure. Die Umsetzung der Hilfe zeigt Abbildung 4.
 

Technische Umsetzung und Werkzeuge

Die Hilfe-App von Gigaset verwendet den Ansatz einer Hybrid App: native Programmierung und Einsatz von Webtechnologie. Damit gemeint ist eine HTML-Anzeige über ein integriertes Web-view mit zusätzlichem CSS und JavaScript. Ein Webview bietet die gleichen Möglichkeiten wie ein normaler Webbrowser, um Inhalte anzuzeigen. In diesem Fall fehlen allerdings Elemente wie Adressleiste oder Schaltflächen für die Navigation.

Die eigentliche Bedienung der Anleitung ist, wie sämtliche Inhalte der App selbst, komplett in HTML und JavaScript umgesetzt. Die Trennung der Inhalte vom nativen App-Teil bietet einen großen Vorteil: Aktualisierungen, zusätzliche Anleitungen oder Designanpassungen müssen nicht über den jeweiligen App-Store und dessen Kontrollmechanismen laufen.

Die Online-Hilfen werden von der Technischen Redaktion mit dem Konvertierungswerkzeug „ePublisher“ von WebWorks erstellt – von Adobe FrameMaker nach HTML. Als Grundlage dient die in Adobe FrameMaker erstellte Print-Version der Dokumentationen, der Single-Source-Ansatz zeigt hierbei seinen Mehrwert.

Chancen und Grenzen

Die aktuelle Version der Hilfe-App bietet einige Verbesserungsmöglichkeiten, deren Umsetzung allerdings finanzielle Grenzen hat. Die Erfahrung von itl ist, dass jede noch so kleine Funktion zu einem großen Anwendungsfall werden kann, der wiederum als Nebeneffekt weitere Funktionen erfordert, um die Gebrauchstauglichkeit zu erreichen. Das kann man oft nicht vorab spezifizieren, sondern erlebt es erst beim Testen.

Usability Design und „Geschmacksdesign“ unterliegen dabei unterschiedlichen Denk- und Herangehensweisen. Design als Geschmackssache kann enorm viel Zeit kosten, wird es nicht exakt spezifiziert. Auf Grund der innovativen, neuen Technik ergeben sich viele (Änderungs-) Wünsche erst durch das Zeigen von Ergebnissen. Ein so genanntes Wireframing, also ein sehr früher Entwurf, ist oft nur für das geschmackliche Design sinnvoll. Was für einen Benutzer tatsächlich geeignet ist, ergibt sich erst beim Test der implementierten Funktionen. Hier zeigt sich der große Vorteil der Entwicklung für Android-Geräte. Einen Prototyp zu erstellen, ist wesentlich einfacher als für Apple-Geräte. Deshalb der Tipp: Immer erst mit der Android-Entwicklung starten.

Insgesamt besitzt die Lösung eine für das Projektbudget erstaunliche Funktionalität und Usability. Der Gesamtaufwand lag bislang bei 10 bis 15 Personentagen, je nachdem welchen Aspekt man als projektspezifischen oder grundlegenden Lernaufwand ansehen möchte. Die Mindestanforderungen für ein solches Projektteam sind erfahrungsgemäß ein Projektmanager mit einem Blick für Usability, ein Android- und Webentwickler sowie ein iOS-Entwickler. Jeder Entwickler sollte sich mit den Vorgehensweisen auskennen, die für das jeweilige Betriebssystem typisch sind. Nur so lassen sich die systemspezifischen Erwartungen erfüllen.

Anwendungsfall mobile Dokumentation

Die mobile Dokumentation hält in immer mehr Bereichen Einzug. Aus diesem Grund hat die tekom auf der vergangenen Jahrestagung wieder zehn Anwendungsfälle vorgestellt. Dieser Fall beschäftigt sich damit, wie ein Hersteller von Telefonen mit Hilfe einer App seine Produkte besser erklärt.

Quelle: technische kommunikation 02/16.
Zur tekom Website