Eine Demo zeigt das Produkt bei der Arbeit

Unser Planer, das Modell, das aus einer Website Szenen macht, hatte eine natürliche Vorliebe. Die Startseite ist auf den meisten Websites die reichste Seite, also baute er dort die meisten Szenen. Für einen Werbefilm kann das passen. Für eine Demo oder ein Tutorial nicht, denn das Publikum will das Produkt bei der Arbeit sehen.

Am deutlichsten sahen wir das an unserem eigenen Produkt. Die Startseite von pagetovid.com enthält ein Demo-Video und eine Filmgalerie, also filmte eine Demo von PageToVid vor allem Video im Video. Unsere automatische Qualitätsprüfung gab ihr rund 45 von 100 Punkten, und sie hatte recht: Der Film war unruhig und erklärte nichts.

Unser erster Versuch war ein Rat: die nützlichen Seiten der App bevorzugen. Der nächste Render verbrachte trotzdem drei oder vier Szenen auf der Startseite. Ein Rat verliert, wenn die bequeme Lösung direkt daneben liegt, also wurden daraus Regeln, die der Planer im Demo- und Tutorial-Modus befolgen muss:

• höchstens eine Szene auf der Startseite, und nur als Eröffnungseinstellung
• jede weitere Bildschirmszene kommt aus der App selbst: Erstellen, Dashboard, Editor, Ergebnisse
• gehen die App-Seiten aus, nimmt der Film eine Animation, nie eine zweite Startseiten-Einstellung
• jede Szene nutzt die genaue Adresse einer Seite, nie nur die Wurzel der Website

Der Weg ist konkret: in der App ankommen, die wichtigste Aktion ausführen, das Ergebnis zeigen. Eine feste Regel mit klarem Plan B schlägt jeden freundlichen Hinweis.

Das zweite Problem war die Größe. Bildschirmszenen zeigten die ganze Seite, also Text, der zu klein zum Lesen war, besonders in einem Hochformatfilm auf dem Handy. Jetzt fährt jede Szene, die auf einen Abschnitt zielt, genau in den Bereich, über den die Stimme spricht.

Der Rekorder scrollt diesen Abschnitt ins Bild, hält ihn ruhig und merkt sich seinen Umriss. Die Kamerafahrt selbst passiert danach in der Video-Engine, so bleiben Aufnahme und Regie getrennt. Ein kleiner Button bekommt einen kräftigen Zoom, ein ganzer Abschnitt einen sanften, und beide bleiben innerhalb der Seite. Der Zoom gleitet hinein und steht dann still, damit Text nie flimmert, und er bleibt scharf, weil der Bildschirm mit dreifacher Pixeldichte aufgenommen wird.

Für jede Bildschirmszene nennt der Planer jetzt den Abschnitt oder das Element, um das es geht. Eine ganzseitige Einstellung ohne diese Angabe gilt als Fehler.

Viele Produkte liegen hinter einer Anmeldung, und ein Film über ein Login-Formular ist keine Demo. Unsere Antwort ist eine kleine Browser-Erweiterung, die Bridge. Sie funktionierte schon, aber nur für Leute, die sie aus unserem Quellcode laden konnten. Am 3. Juli wurde sie zum Download auf unserer Erweiterungsseite, von Anfang an auf pagetovid.com eingestellt.

Wer das Konto besitzt, meldet sich wie gewohnt im eigenen Browser an, und die Erweiterung übergibt diese Sitzung an unseren Rekorder. Der öffnet dann jede Seite dieser Website bereits angemeldet, und ein Tutorial kann das echte Dashboard und den echten Editor zeigen. Mit einer Sitzung soll der Planer genau diese inneren Seiten zeigen und nie eine Anmeldeseite.

Ohne Sitzung gilt das Gegenteil: Der Film bleibt auf öffentlichen Seiten. Das haben wir mit drei Schutzmechanismen garantiert:

• der Seitenleser bietet Pfade für Anmeldung, Registrierung, Konto oder Dashboard nie als Seiten zum Filmen an
• zeigt eine Seite während der Aufnahme ein Passwortfeld oder nur eine Anmeldekarte, wechselt der Rekorder zur Hauptseite und zu einem anderen Abschnitt
• der Planer soll nur öffentliche Seiten zeigen

Am selben Tag bekamen die Untertitel einen weichen dunklen Hintergrund hinter jedem Satz, und Zahlenbeschriftungen übernehmen die Schriftfarbe des Themes, damit Text auf hellen wie auf dunklen Websites lesbar bleibt.

Eine Demo beginnt jetzt mit einer einzigen Eröffnungseinstellung und geht dann ins Produkt: das Erstellformular, der Editor, das Ergebnis. Der Text im Bild ist lesbar, weil die Kamera zu ihm hingeht. Und liegt ein Produkt hinter einer Anmeldung, kann der Film trotzdem sein Inneres zeigen, sobald die Person, der das Konto gehört, die Tür öffnet.

Das Prinzip passt in eine Zeile: Eine Demo zeigt das Produkt, wie es funktioniert. Wie Teams Demo- und Tutorial-Filme einsetzen, siehst du auf der Seite mit Anwendungsfällen, oder probier es mit deiner eigenen App.