Erklärvideos für das Kundenportal: ein Video je Bereich, alle aus einem Guss
Kurze Hilfevideos aus dem Videostudio für jeden Punkt in der Seitenleiste des Kundenportals, dazu ein Willkommensvideo für den ersten Besuch. Jedes Video sagt in rund einer Minute, wofür der Bereich da ist, was man dort sieht und wie man die zwei wichtigsten Dinge macht. Später sitzen die Videos in der Hilfe-Leiste rechts und erscheinen von selbst, wenn jemand neu ist oder lange nicht da war.
45 bis 60 s je Bereich1920 × 1080Stimme Peter SternDu-FormPortal-Look dunkel15 Videos, Prototyp Leads
1. Was gebaut wird
Zwei Sorten Videos, gleiche Machart. Grundlage ist die Seitenleiste von SimGym, unserem Teststudio mit allen Bereichen. Welche Bereiche ein Kunde sieht, hängt an seinen Modulen und seiner Branche. Deshalb bleibt das Willkommensvideo bei den Dingen, die jeder hat.
| Nr. | Video | Gruppe | Wer es sieht | Textquelle | Stand |
|---|---|---|---|---|---|
| 0 | Willkommen im Kundenportal Startseite mit Zahlenleiste und „Jetzt dran“, Seitenleiste mit drei Gruppen, Suche, Hilfe-Leiste, Einstellungen (Passwort, Darstellung). Nennt Leads und die Website-Pflege nur als Beispiel, keine Module. | Einstieg | alle | uebersicht.kunde.md | nach dem Prototyp |
| 1 | Leads: Anfragen von der Website bearbeiten | Kunden gewinnen | Standard | leads.kunde.md | Prototyp, wird jetzt gebaut |
| 2 | Postfach: WhatsApp, Messenger und Instagram in einem Posteingang | Kunden gewinnen | Modul | postfach.kunde.md | offen |
| 3 | Cockpit: automatische WhatsApp-Nachrichten, Einwilligungen, Versände | Kunden gewinnen | Schalter je Kunde Fitness, Physio, Golf | cockpit.kunde.md | offen |
| 4 | Empfehlungen: Scouts, Einladungen, Prämien einlösen | Kunden gewinnen | Modul Fitness, Physio, Golf | scouting.kunde.md | offen, Werbevideo vorhanden |
| 5 | KI-Berater: Gespräche, häufigste Fragen, Anfragen daraus | Kunden gewinnen | Standard | chatbot.kunde.md | offen |
| 6 | Kursplan: Kurse, Zeiten, Beschreibungen pflegen | Website | Standard Fitness, Physio, Golf | kursplan.kunde.md | offen |
| 7 | Öffnungszeiten & Feiertage | Website | Standard | zeiten.kunde.md | offen |
| 8 | News: Meldungen und Aktionen auf die Website bringen | Website | Standard | news.kunde.md | offen |
| 9 | Team: Fotos, Namen, Rollen | Website | Standard | team.kunde.md | offen |
| 10 | Kundenstimmen: Aussagen mit Foto oder Video, Listen für die Website | Website | Standard | kundenstimmen.kunde.md | offen |
| 11 | Partner: Logos, Adressen, Kategorien | Website | Standard | partner.kunde.md | offen |
| 12 | Webstatistik: Besucher, Herkunft, vom Besuch zur Anfrage | Website | Standard, mit Hostname | webstats.kunde.md | Video vom 02.10. vorhanden (hell, nachgebaut, 64 s); neu im Serienschema |
| 13 | Verträge: Online-Abschlüsse und Vertrags-PDF | Verwaltung | Modul Vertragsverkauf | vertraege.kunde.md | offen |
| 14 | Platzstatus & Wetter: Ampeln, Platzwart-Handys | Website | nur Golf | noch keine Anleitung | zuletzt, Anleitung zuerst schreiben |
| 15 | Bestellungen: Käufe aus dem SIMsales-Shop | Kunden gewinnen | nur mit Shop | noch keine Anleitung | zuletzt |
Hilfe & Anleitungen und Einstellungen bekommen kein eigenes Video, sie kommen im Willkommensvideo vor. Die Zahl der Videos wächst mit dem Portal: neuer Bereich, neue Anleitung, neues Video.
2. Das Serienschema: so sehen alle Videos gleich aus
Ein Video, fünf Absätze, immer in derselben Reihenfolge: Wofür ist das (Alltagssituation, dann der Name des Bereichs) · Was du siehst (Totale der echten Seite, Markierungen fallen auf das Wort) · Handgriff eins · Handgriff zwei (Zeiger klickt, die Oberfläche reagiert) · Dein Vorteil und Abspann („Mehr dazu in der Anleitung“).
Länge: 100 bis 130 Wörter, 45 bis 60 Sekunden. Das Willkommensvideo darf 75 Sekunden haben.
Das echte Portal, nie nachgebaut
Jede Ansicht ist ein Abbild der laufenden Portalseite von SimGym in genau dem Zustand, den der Sprecher gerade nennt (Liste, Chip aktiv, Anfrage offen, Status gesetzt, Notiz gespeichert). Aufgenommen über den Support-Login, Daten per Schnittstelle gegen Beispieldaten getauscht, nichts erreicht die Datenbank. Bewegt werden nur Kamera, Ebenen, Markierungen, Tipp-Ring und Zeiger. Ändert sich die Oberfläche, werden die Abbilder neu aufgenommen, die Szenen bleiben.
Look: Portal-Farben, dunkel
Hintergrund, Flächen, Schrift und Akzent sind die Variablen des Portals im Nachtmodus (SIM Klassik: Hintergrund #0C0F16, Flächen #121722 und #181E2B, Akzent SIM-Blau, Sora und Hanken Grotesk). Die Portal-Abbilder entstehen ebenfalls im Dunkelmodus. Dunkel, weil die Videos dann in beiden Portal-Modi wie ein Film wirken statt wie ein weißer Kasten, weil weiße Schrift auf dunklem Grund klein besser lesbar bleibt und weil es deine eigene Ansicht ist. Hell wäre eine Zeile Variablen und ein neuer Abbild-Lauf.
Lesbar im kleinen Fenster
In der Hilfe-Leiste ist das Video nur rund 408 px breit, ein Fünftel der Bildbreite. Regeln: Alles, was gelesen werden muss, steht in der Schritt-Spalte oder als Schlagwort, mindestens 56 px im Bild. Portaltexte zeigt nur die nahe Kamera (Maßstab 1,6 bis 2,5), nie die Totale allein. Das Bild erklärt sich ohne Ton, denn im Studio läuft der Rechner oft stumm. Und: nie zwei Bewegungen gleichzeitig.
Ton und Stimme
Peter Stern, Du-Form, Tempo wie bisher. Musik warm und leise (-34 LUFS), setzt mit Absatz zwei ein und wird im Abspann etwas lauter. Geräusche entstehen aus den Animationen (Klick, Plopp, Wisch). Gleiche Musik und gleicher Schlusston in allen Videos, so klingt die Serie zusammen.
Text aus der Anleitung
Sprechtext und Video sagen dasselbe wie die Anleitung des Bereichs (hub/hilfe/<bereich>.kunde.md: die Zeile „kurz“, der Abschnitt „Wofür ist das?“ und die ersten Schritte). Begriffe wörtlich aus der Oberfläche (Chips, Knöpfe, Felder). Wer eine Anleitung ändert, prüft das Video. Ein geänderter Absatz kostet rund 6 Credits und schiebt alle Bilder von selbst mit.
Eine Vorlage, viele Videos
Aus dem Leads-Prototyp wird die Vorlage _studio/vorlage-portal/: Titelkarte, Schritt-Spalte, Browserfenster, Abspann, Abbild-Skript mit Support-Login und Beispieldaten. Jedes weitere Video braucht dann nur noch Sprechtext, Abbilder seines Bereichs und die Wortanker. Projektname portal-<bereich>-erklaervideo, Dateien portal-<bereich>.mp4 und -poster.webp.
3. Prototyp: Leads
Gezeigt am echten Portal von SimGym im Dunkelmodus. Namen, Anfragen und Notizen sind Beispieldaten, die über die Schnittstelle in die echte Seite eingespielt werden (Lisa Brandt, Jonas Weber, Miriam Koch und andere aus unserem Personensatz, Formulare Terminanfrage, Chatbot-Anfrage, Beratungsanfrage wie bei SimGym). Zeiten geschätzt mit 0,43 s je Wort, rund 55 Sekunden.
| Nr. | Zeit | Sprechtext | Was man sieht | Bildereignis auf das Wort |
|---|---|---|---|---|
| 1 | 0 bis 11 | Jemand füllt auf deiner Website ein Formular aus. Sekunden später steht die Anfrage hier: im Bereich Leads. Egal ob Probetraining, Kontakt oder Chat. | Titelkarte Leads. Links ein Handy mit dem echten Kontaktformular von simgym.de, rechts fährt das Portal herein, die neue Zeile erscheint oben in der Liste. | Handy auf Website, Portal auf Sekunden, neue Zeile auf hier, Seitenleiste markiert auf Leads, drei Stichworte auf Probetraining, Kontakt, Chat |
| 2 | 11 bis 24 | Du siehst auf einen Blick, wer sich gemeldet hat, über welches Formular und wann. Neue Anfragen sind hervorgehoben. Die Chips oben zeigen, in welchem Schritt jede Anfrage steckt: Neu, Kontaktiert, Termin, Gewonnen. | Totale der Leads-Seite, Kamera auf die Tabelle. Spalten werden markiert, dann die Chip-Zeile. | Spalte Person auf wer, Formular auf Formular, Eingang auf wann, hervorgehobene Zeilen auf hervorgehoben, Kamera auf die Chips bei Chips, je Chip ein Wort |
| 3 | 24 bis 35 | Ein Klick auf eine Zeile öffnet die Anfrage. Rechts stehen alle Angaben. Hast du angerufen, klickst du auf Kontaktiert. Ist ein Termin vereinbart, auf Termin. | Schritt-Spalte „1 Anfrage öffnen“. Zeiger klickt die Zeile, rechts öffnet sich die Anfrage. Kamera auf den Schrittbalken, zwei Klicks, die Schritte leuchten. | Klick auf Klick, Detail auf öffnet, Markierung Angaben auf Angaben, Klick auf Kontaktiert, Klick auf Termin |
| 4 | 35 bis 47 | Was ihr besprochen habt, schreibst du als Notiz dazu. So weiß dein ganzes Team, was schon gelaufen ist. Und mit dem Haken Probetraining wahrgenommen hältst du den Erfolg fest. | Schritt-Spalte „2 Notiz und Haken“. Text erscheint im Feld, Speichern, die Notiz steht mit Namen darunter. Dann der Haken. | Tippen ab Notiz, gespeichert auf Team, Haken auf wahrgenommen |
| 5 | 47 bis 56 | Keine Zettel, kein Suchen im Postfach. Keine Anfrage bleibt liegen. Mehr dazu steht in der Anleitung, gleich hier in der Hilfe. | Drei Schlagwörter groß, dann der Abspann mit Symbol, Satz und Hinweis auf die Anleitung. | Schlagwörter auf Zettel, Postfach, liegen, Abspann auf Mehr, Hinweis auf Hilfe |
Bewusst nicht im Video: Export, Anonymisieren, Löschen, CSV-Export, Standort-Spalte und der Hinweis auf frühere Anfragen. Das steht in der Anleitung, im Video wären es zu viele Dinge für eine Minute.
4. Später: Einbau und Tracking (Skizze, eigener Auftrag im Hub)
- Platz: oben in der Hilfe-Leiste jedes Bereichs das passende Video mit Vorschaubild, darunter wie bisher die Anleitung. Abspielen per Tipp, mit Ton, Vollbild möglich. Dateien unter
hub/public/portal/videos/, rund 5 bis 8 MB je Video. - Automatisch zeigen: beim ersten Login überhaupt das Willkommensvideo als Fenster über der Startseite, einmal, wegklickbar. Beim ersten Besuch eines Bereichs öffnet sich die Hilfe-Leiste mit dem Video. Wer länger als 60 Tage nicht da war, bekommt das Willkommensvideo noch einmal angeboten, später eine Fassung „Was neu ist“.
- Merken und zählen: neue Tabelle je Konto (Video, gesehen am, wie weit geschaut, Anlass). Dazu Ereignisse im Portal-Audit für Start und Ende. In der Zentrale steht an der Kundenakte, wie viele Videos das Team gesehen hat. Support-Logins zählen nicht. Grundlage gibt es schon: letzter Login je Konto und das Portal-Audit.
- Schalter: unter Einstellungen „Videos nicht automatisch zeigen“.
- Aufwand Hub: grob ein Tag, erst wenn die Videos da sind. Bis dahin liegen sie auf der Übersichtsseite des Videostudios.
5. Entscheidungen, die ich von dir brauche
6. Aufwand
- Stimme: rund 100 ElevenLabs-Credits je Video, alle 16 zusammen rund 1.600 (etwa 0,5 % des Monatskontingents).
- Bauen: Prototyp und Vorlage in dieser Sitzung. Danach ein bis zwei Videos je Sitzung: Abbilder des Bereichs, Sprechtext, Anker, Sichtprüfung jeder Szene. Rendern rund 30 Sekunden je Video.
- Pflege: Textänderung ein Absatz (rund 6 Credits, Bilder wandern mit), Oberfläche geändert ein Abbild-Lauf, Szenen bleiben.
Ton kann ich nur messen, nicht anhören. Das Urteil über Stimme, Tempo und Länge bleibt bei dir.