Interaktive 3D-Anleitungen erstellen
„Learning by doing“ ist manchmal gar nicht so einfach, wenn das Objekt für das Doing nicht vorhanden ist. Vielleicht hat der Kunde oder die Kundin es noch gar nicht gekauft oder ist gerade erst dabei, es aufzubauen. Vielleicht ist es zu groß oder zu unhandlich für eine Demonstration; oder vielleicht müsste man es gar zerstören, um den inneren Aufbau zu zeigen. Genauso wie 3D-Grafiken auf Basis von CAD-Daten häufig zum Einsatz kommen, wenn ein Produkt nur umständlich zu fotografieren ist, so können interaktive 3D-Anwendungen beim Lernen mit Produkten helfen, die nicht unmittelbar zur Verfügung stehen.
Wie ich in einem früheren Artikel umrissen habe, können interaktive 3D-Webanwendungen auf Basis von WebGL und JavaScript hier einen großen Mehrwert gegenüber Grafiken und Videos bieten. Der Nutzer oder die Nutzerin werden in die Lage versetzt, direkt mit dem Produkt oder Lerngegenstand zu interagieren, im eigenen Tempo und mit den eigenen Prioritäten. Die alte Maxime „Show, don’t tell“ wird noch einen Schritt weitergedacht.
Dennoch gibt es auf dem Weg zu einer guten und verständlichen 3D-Anleitung viele Fallstricke. Nicht alles, was technisch möglich ist, ist auch didaktisch sinnvoll.
Eine Technologie, viele Möglichkeiten
Für einen ersten Eindruck über die Bandbreite der Möglichkeiten dieser Technik lohnt sich ein Blick auf die Demoseiten verschiedener Anbieter. Das bereits im letzten Artikel vorgestellte Babylon.js fokussiert sich in seinen Beispielen vor allem auf die technischen Möglichkeiten. In der Galerie von Verge3D findet sich von Produktkonfiguratoren über Lernmaterialien bis hin zu kleinen Videospielen eine Fülle von Anwendungsfällen. Cadasio ist ein Online-Tool, das sich auf die Erstellung von 3D-Inhalten auf Basis vorhandener CAD-Daten spezialisiert hat. Auf der Demoseite gibt es daher viele Produktbeschreibungen und Montageanleitungen.
Die Demoseite von Verge3D zeigt eine Vielzahl von Anwendungsfällen.
Schnell wird klar, dass die Technologie viele sehr kreative Lösungen erlaubt. Hier besteht allerdings die Gefahr, sich von den Möglichkeiten vereinnahmen zu lassen und das eigentliche Ziel, die Wissensvermittlung, aus den Augen zu verlieren. Ein guter Ausgangspunkt ist daher folgender Gedanke: Wir haben mit 3D-Darstellungen und 3D-Animationen bereits sehr gute Werkzeuge, um Wissen über Produkte und Zusammenhänge zu vermitteln. Welchen Mehrwert bietet uns eine interaktive 3D-Webanwendung gegenüber diesen Formaten? Das bedeutet, um welche konkreten Funktionen dieser Technologie wollen wir unsere 3D-Anleitungen erweitern, um sie aufzuwerten?
Als Ausgangspunkt dieser Überlegung können uns hier zwei alte Bekannte dienen: Beschreibende und anleitende Informationen. Viele der Beispiele auf den Demoseiten lassen sich, sofern sie Wissen vermitteln, einer dieser beiden Kategorien zuordnen. Dabei fällt vor allem bei beschreibenden Darstellungen schnell der Reiz und der Mehrwert eines 3D-Objektes auf, das sich drehen lässt und in das hineingezoomt werden kann.
Interaktive 3D-Produktbeschreibungen
Ein klassisches Beispiel ist ein interaktives 3D-Objekt, das mit Annotationen versehen ist. Diese Annotationen bezeichnen die einzelnen Bestandteile des Objekts, entweder indem die Bezeichnung direkt angefügt ist oder indem mit nummerierten Bezugslinien und einer Legende gearbeitet wird. Bei dem Objekt muss es sich dabei nicht unbedingt um ein Produkt im engeren Sinne handeln. Auch der Aufbau eines Gebäudes oder eines Campus-Geländes kann so zum Beispiel beschrieben werden.
Interaktive Produktbeschreibung eines Ventilators. Die Annotationen können angeklickt werden. Das Objekt lässt sich frei drehen und es kann herangezoomt werden.
Der vermeintliche Vorteil, mit einer interaktiven 3D-Darstellung mehrere Bilder aus verschiedenen Perspektiven zu ersetzen und die Nutzerin alles frei erkunden zu lassen, birgt aber auch Risiken. Solche 3D-Darstellungen dürfen trotz ihrer Freiheiten nicht mit Anmerkungen überfrachtet werden.
Eine weitere Herausforderung ist die Kamera. In der Regel hat die Kamera einen festen Drehpunkt bzw. ein Zentrum, um das sie rotiert und an das herangezoomt wird. Bei ausladenden Objekten lassen sich Komponenten, die weiter weg von diesem Zentrum liegen, dann schwierig ansteuern. Erlaubt man beim Drehen und Zoomen zu viele Freiheiten, kann es außerdem passieren, dass die Nutzerin sich in eine ungünstige Perspektive manövriert, aus der sie nicht wieder herausfindet. Hier hat es sich daher etabliert, Rotation und Zoom schon von vornherein in einer sinnvollen Weise einzuschränken.
Eine zusätzliche Möglichkeit ist es, über Buttons vordefinierte Kameraperspektiven anzubieten. Diese Funktion lässt sich auch dazu nutzen, bestimmte Bereiche gezielt vorzustellen und zu beschreiben. Steuert man auf diese Weise mehrere Perspektiven hintereinander an, lässt sich eine geführte Einweisung erstellen. Hierbei die richtige Balance zwischen Freiheit und Nutzerführung zu finden, ist essenziell für eine gelungene, interaktive 3D-Anleitung.
Interaktive Produktbeschreibung eines Bürostuhls. Über die Miniaturansichten oben links lassen sich verschiedene Kameraperspektiven ansteuern.
Neben diesen Grundfunktionen lässt sich eine interaktive 3D-Darstellung noch mit einer Reihe von Möglichkeiten erweitern. Im oben gezeigten Beispiel des Ventilators gibt es neben den Annotationen links noch 3 Schaltflächen. Die oberste Schaltfläche schaltet den Ventilator ein und aus: Der Propeller beginnt sich zu drehen und der Korb schwenkt nach links und rechts. Die Schaltfläche darunter öffnet den Korb und zieht ihn in einer Explosionsdarstellung auseinander. Setzt man solche Möglichkeiten sinnvoll ein, lassen sich so weitere Eigenschaften und Zusammenhänge eines Produkts darstellen. Aber auch hier gilt es, stets abzuwägen und die Darstellung nicht mit zu vielen Informationen zu überfrachten. Die letzte Schaltfläche ergänzt beispielsweise die ersten beiden, indem sie es erlaubt, die Annotationen ein- und auszublenden, falls diese während der Animation stören sollten.
Explosionsdarstellung des Ventilators. Die Explosionsdarstellung lässt sich über den mittleren Button auf der linken Seite steuern.
Interaktive 3D-Instruktionen
Alle diese technischen Möglichkeiten lassen vermuten, dass sich interaktive 3D-Darstellungen auch für anleitende Informationen eignen müssen. In der Tat gibt es einige Beispiele, die dies umsetzen, doch ein empfehlenswerter Standard hat sich noch nicht etabliert.
Dies liegt daran, dass sich ein Mehrwert gegenüber einer 3D-Animation, die als lineares, also durchgängiges Video abgespielt wird, nicht so leicht finden lässt. Gehen wir beispielsweise von der Montage eines Möbels aus, dann müssen wir während dieser Montage an verschiedenen Bereichen des Möbels arbeiten und diese also auch bei der Darstellung in einer Anleitung in den Fokus nehmen. Freie Kontrolle über die Kamera läuft dieser Anforderung entgegen. Auch die Reihenfolge der Montageschritte ist meist vorgegeben. Zwar sind auch bei einer Montage bisweilen Entscheidungen zu treffen, aber ein freies Erkunden wie bei einer Produktbeschreibung ist in der Regel nicht sinnvoll.
Eine angeleitete Montage benötigt also vorgegebene Kameraperspektiven und eine vorgegebene Reihenfolge, in der diese Perspektiven angesteuert werden. Alles Eigenschaften, die ein lineares Video bereits mitbringt, egal ob es am realen Objekt gefilmt oder als 3D-Animation erstellt wurde.
Eine nachfolgende Überlegung wäre nun, die einzelnen Schritte der Anleitung zu separieren, der Nutzerin also immer nur einen Handlungsschritt zu zeigen und sie dann eigenständig über Schaltflächen den nächsten Schritt ansteuern zu lassen; mit den technischen Möglichkeiten von Web3D und JavaScript ist das problemlos möglich.
Aber hier vergisst man leicht, dass solche Anleitungen, die aus einzelnen Videoclips bestehen, die die Nutzerin über Steuerelemente nacheinander abspielt, bereits seit vielen Jahren existieren und keine Erfindung des Web3D sind.
Doch genau diese Art von Nutzererfahrung ist es, die interaktive 3D-Anleitungen aktuell zumeist nachstellen, wenn sie versuchen, anleitende Informationen zu vermitteln. Der einzige Unterschied besteht lediglich darin, dass das Objekt noch zusätzlich in jedem Moment frei gedreht und gezoomt werden kann. Dabei fällt allerdings auf, dass sich die freie Kamerakontrolle und die vorgegebenen Kameraperspektiven auch in die Quere kommen können. Wenn die Autorin der interaktiven 3D-Anleitung eine bestimmte Perspektive für sinnvoll erachtet, die Nutzerin diese aber jederzeit verlassen kann und möglicherweise nicht zurückfindet, kann das der Verständlichkeit eher schaden als nutzen.
Interaktive 3D-Anleitung für einen Tischventilator. Die einzelnen Schritte können über die Steuerelemente oder die Zeitleiste unten abgespielt werden. Die Kamera lässt sich frei drehen.
Damit sind wir wieder bei der Ausgangsfrage: Welchen Mehrwert können wir einer anleitenden 3D-Animation geben, indem wir sie mit Web3D-Techniken umsetzen?
Für die Kamera heißt das zum Beispiel, dass wir eine Balance finden müssen zwischen den Vorteilen einer von der Autorin vorgegebenen Perspektive und der freien Kamerakontrolle. Am Beispiel der Montage eines Regals wurde versucht, dies umzusetzen. Ähnlich wie im Beispiel des blauen Tischventilators in der Abbildung oben navigiert die Nutzerin über Steuerelemente Schritt für Schritt durch die Montage. Anders als beim Tischventilator lässt sich die Kamera aber nicht immer frei drehen. An bestimmten Schritten wird die Kameraperspektive vorgegeben und zudem in ihrer Bewegung eingeschränkt.
Zusätzlich erhält die Nutzerin bei manchen Schritten die Möglichkeit, zwischen 2 Perspektiven umzuschalten, einer Gesamtansicht von weiter weg und einer Nahansicht des Bereichs, an dem gerade gearbeitet wird. Dadurch bleibt eine Interaktivität erhalten und die Nutzerin kann sich leichter orientieren. Gleichzeitig wird verhindert, dass die Kamera in eine ungünstige Perspektive gedreht wird. Auch das zuvor erwähnte Problem eines einzelnen Kamera-Drehpunkts wird beseitigt. Die Kamera ist immer ideal ausgerichtet, kann aber trotzdem noch von der Nutzerin gesteuert werden.
Interaktive 3D-Anleitung eines Regals. Über den Button unten rechts kann zwischen zwei Ansichten umgeschaltet werden.
Eine weitere, kreative Idee, die Nutzerin in die Montage interaktiv einzubinden, zeigt das Beispiel des Zusammenbaus eines Papp-Nashorns. Statt die Montage über separate Steuerelemente zu durchlaufen, muss die Nutzerin hier die einzelnen Papp-Elemente anklicken, um die entsprechende Animation auszulösen. Das Beispiel ist simpel, demonstriert aber, wie einzelne Möglichkeiten von Web3D-Darstellungen gezielt genutzt werden können.
Zusammenbau eines Nashorns aus Pappe. Damit die Animation weitergeht, muss auf das schwebende Papp-Teil links geklickt werden.
Generell bietet die Web3D-Technologie noch viele weitere Möglichkeiten. Bei beschreibenden Informationen sind im Bereich der Technischen Kommunikation bei Produktbeschreibungen oder allgemein im Bildungsbereich im großen Feld der Infografiken viele Dinge möglich. Hier existieren sowohl etablierte Lösungen als auch zahlreiche kreative Ideen. Bei anleitenden Informationen ist etwas mehr Vorsicht geboten. Hier sollte stets die Frage im Mittelpunkt stehen, welchen Nutzen eine bestimmte Funktion für die Verständlichkeit hat. Einzelne Möglichkeiten der Technologie gezielt einzusetzen ist stets besser als ein Effektspektakel um seiner selbst willen.
