Studienarbeit – Konzipierung und Umsetzung einer mobilen Dokumentation für GoPro Hero3

gopro_header

Seit einigen Monaten schon berichten wir hier auf MobDok über Möglichkeiten, Technische Dokumentation für mobile Endgeräte zu erstellen. Heute zeigen wir Euch eine eigene Umsetzung, die im Rahmen einer Studienarbeit entstanden ist – eine mobile Dokumentation als Web-App für die GoPro Hero3.

Aufgabenstellung

Ziel der Studienarbeit im Rahmen der Veranstaltung Media-Engineering war die Konzeption und Umsetzung von E-Learning-Anwendungen oder Technischer Dokumentation für das Internet und für mobile Endgeräte. Die Studenten konnten in Absprache mit dem Dozenten die Projektinhalte sowie Themenschwerpunkte selbst wählen.

Projektthema

Der Schwerpunkt der Projektarbeit liegt auf der Konzeption und Umsetzung einer Technischen Dokumentation für mobile Endgeräte wie Smartphones und Tablets. Diese mobile Dokumentation wird als Web-App umgesetzt (Was war das nochmal? – Hier geht’s zum Artikel Die Web-App). Als Projektgegenstand, der in der mobilen Dokumentation beschrieben wird, dient eine GoPro-Kamera.

gopro-hero3plus-camera-black-edition

Quelle Computer-Bild.de

Ausgangssituation

Das vorhandene Benutzerhandbuch der GoPro wird mit der Kamera als kleines Booklet (Maße ca. 8,5cm x 9,2cm) mitgeliefert. Zudem wird das Benutzerhandbuch auf der GoPro-Website als PDF zum Download angeboten ( Benutzerhandbuch als PDF).

Die GoPro ist ein Produkt, bei dem eine mobile Dokumentation einen echten Kundenmehrwert darstellt. Die Kamera wird hauptsächlich bei Outdoor-Aktivitäten eingesetzt, bei denen das Benutzerhandbuch meist nicht am Körper oder im Rucksack verstaut ist – stattdessen ist das Smartphone stetiger Begleiter und meist griffbereit dabei. Steht man nun irgendwo im Nirgendwo und möchte eine Kameraeinstellung anpassen, kann das ohne Benutzerhandbuch zu einer nervigen Angelegenheit werden. Mit einer mobilen Dokumentation entsteht hier ein klarer Mehrwert: Der Anwender kann in diesem Fall schnell auf die benötigten Informationen per Smartphone zurückgreifen.

Von GoPro wird bereits eine App zur Steuerung der Kamera vom Smartphone aus angeboten (bspw. Funktionen wie Aufnahme starten oder Aufnahme beenden). Mit der GoPro App stünde daher schon eine Plattform bereit, in der eine mobile Dokumentation integriert werden könnte.

Projektschwerpunkte

Die Konzeption und Umsetzung der mobilen Dokumentation verteilt sich auf vier Schwerpunkte:

  • Responsive Webdesign
  • Dynamische Inhalte
  • 3D-Modell
  • Informationsvermittlung

Diese werden im Folgenden kurz erläutert, bevor Ihr Euch das Projektergebnis (am Ende des Beitrags) anschauen könnt.

Responsive Webdesign

responsive_schema_mobdok

Die als Web-App umgesetzte mobile Dokumentation soll auf allen mobilen Endgeräten, auf der sie angezeigt wird, optimal dargestellt werden. Technisch bedeutet das, dass sich alle Elemente und Medien (Layout, Texte, Bilder, Videos, etc.) an die entsprechende Bildschirmgröße anpassen müssen. Die automatische Anpassung der Elemente und Medien ist mit HTML5, CSS3 und JavaScript umgesetzt.

Der Vollständigkeit halber wird neben der optimierten Darstellung auf Smartphones und Tablets eine Version für größere Bildschirme wie Desktop-PCs oder Laptops angeboten. Diese stellt die mobile Dokumentation als Website dar.

Folgende Abbildung zeigt eine Seite der Web-App als Smartphone-/ Tablet- und Website-Version.

responsive_example_mobdok

Dynamische Inhalte

Die Inhalte der mobilen Dokumentation sollen nicht direkt in den Quellcode der HTML-Seiten geschrieben sondern dynamisch nach Bedarf in die HTML-Seite geladen werden. Die dynamische Anzeige der Inhalte ist mit jQuery AJAX realisiert. Mit jQuery AJAX werden die Inhalte aus einem XML-Dokument in die HTML-Seiten eingelesen. Für alle, die mehr über das Thema dynamische Inhalte erfahren möchten, sei  dieser Artikel empfohlen.

Dynamische Inhalte erfüllen gängige Anforderungen aus der Praxis: Wiederverwendung von Inhalten, effizientes Sprachmanagement sowie Prozessautomatisierung und –standardisierung.

Die Inhalte, die durch jQuery AJAX in die HTML-Seiten eingelesen werden, stammen aus einem strukturiertem XML-Dokument. In der Praxis können solche strukturierte XML-Dokumente aus einem Content-Management-System (CMS) exportiert werden. Genauer betrachtet stellt das jQuery-AJAX-Script, das die Inhalte aus dem XML-Dokument ausliest, eine Schnittstelle zwischen CMS und mobiler Dokumentation dar. Nachfolgende Abbildung skizziert den Prozess bzw. die Schnittstelle, über welche Schritte die Inhalte aus dem CMS in die HTML-Seiten der mobilen Dokumentation gelangen.

cms_schnittstelle_mobdok

 

3D-Modell

3D-Modelle können in der Technischen Dokumentation sinnvoll eingesetzt werden. Neben der reinen Darstellung des Produktes können dem 3D-Modell Funktionen mitgegeben werden. In der mobilen Dokumentation wird ein 3D-Modell als interaktives Inhaltsverzeichnis eingesetzt. Das interaktive Inhaltsverzeichnis soll das herkömmliche, hierarchische Inhaltsverzeichnis ablösen und die Informationsrecherche interessanter gestalten. Das 3D-Modell bildet die Kamera ab, alle für den Anwender relevanten Bereiche sind gelb markiert und verlinkt. Benötigt der Anwender zu einem Bereich eine Information, kann er diesen wählen und wird zu den Informationen weitergeleitet. Durch das 3D-Modell als interaktives Inhaltsverzeichnis wird gleich zu Beginn der Verwendung der mobilen Dokumentation der Spieltrieb des Anwenders geweckt und dadurch das Interesse an der Dokumentation selbst gesteigert.

Das 3D-Modell ist mit der WebGL-Technologie umgesetzt. Wer sich damit noch nicht so gut auskennt, erhält  hier einen Überblick über WebGL  im Allgemeinen und  hier eine Beschreibung, wie ein 3D-Modell für den Einsatz im Internet-Browser erstellt werden kann.

Folgende Abbildung zeigt das 3D-Modell mit gelb markierten Bereichen, die auf weiterführende Informationen verlinken.

cad_mobdok

Informationsvermittlung

Ein eher theoretischer Teil der Umsetzung bezieht sich auf die Form der Informationsvermittlung. Durch mobile Endgeräte ergeben sich erweiterte Möglichkeiten, Informationen zu vermitteln. Neben den aus dem Print-Bereich gewohnten Bild-Text-Kombinationen können Videos, Animationen, auditive Elemente oder 3D-Modelle verwendet werden.

Welche Art der Informationsvermittlung sich am besten eignet, muss möglichst objektiv ermittelt werden. Dabei spielt die Zielgruppe sowie das Produkt an sich eine sehr wichtige Rolle. Es kann nicht pauschal gesagt werden, wann sich beispielsweise ein Video am besten eignet.

Mit Hilfe der Kriterienmethode nach Schober wurde das aktuelle Benutzerhandbuch der GoPro-Kamera analysiert. Die Analyse zeigt optionale Möglichkeiten zur aktuellen, verbalen Informationsvermittlung und begründet diese anhand definierter Kriterien.

Zudem hilft diese Analyse, die zeitlichen sowie finanziellen Aufwände zur Erstellung einer mobilen Dokumentation relativ genau zu planen, was auch für Entscheidungsträger von großer Bedeutung ist.

Ergebnis

Das Ergebnis stellt die mobile Dokumentation auf der Displaygröße des Apple iPhone 6 dar (falls die Web-App im schwarzen Rahmen links nicht gleich angezeigt wird, müsst Ihr die Seite aktualisieren, dann sollte es funktionieren). Über das 3D-Modell gelangt man zu den weiterführenden Informationen. Der mittlerweile für Apps typische Menü-Button befindet sich oben rechts. Dieser stellt eine Ergänzung zum interaktiven Inhaltsverzeichnis dar.
Wer die Web-App am eigenen Smartphone oder Tablet betrachten möchte, kann entweder den folgenden QR-Code scannen oder über die URL gopro.bplaced.net die Web-App öffnen.
qrcode

Hinweise

  1. Der Fokus des Projekts lag auf der Konzeption und technischen Umsetzung der mobilen Dokumentation, daher wurde keine inhaltliche oder sprachliche Optimierung vorgenommen. Die textlichen Informationen stammen aus dem aktuellen Benutzerhandbuch.
  2. An einigen Stellen werden Videos verwendet. Diese ersetzen Texte und Text-Bild-Kombinationen aus der aktuellen Anleitung. Die Videos sind nicht repräsentativ. In einer echten Anwendung würden diese nach definierten Qualitätsansprüchen, didaktischem Konzept, CD-Vorgaben, etc. … erstellt werden.
  3. Falls das 3D-Modell nicht dargestellt wird oder ein Fehler beim Laden des 3D-Modells gemeldet wird, muss die WebGL-Funktion im Browser aktiviert werden. Eine Anleitung für die wichtigsten Browser findet Ihr hier: WebGL im Browser aktivieren

 

Im Artikel wurden nur die Schwerpunkte betrachtet, falls der ein oder andere noch Fragen zur Konzeption oder Umsetzung der Web-App hat, kann uns natürlich gerne kontaktieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.