Wie nehme ich eine UI-Übersicht mit HappyRecorder auf?

Dieser Artikel zeigt dir, wie du eine UI-Übersicht (den Typ Beschreibende Anleitung) mit der HappyRecorder Chrome-Erweiterung aufnimmst und anschließend bearbeitest. Der Typ Schritt-für-Schritt-Anleitung wird hier nicht behandelt, da dieser eine anklickbare Anleitung mit animierter Durchführung erzeugt.

Wofür eine UI-Übersicht gut ist

Eine UI-Übersicht erklärt alles auf einem einzelnen Bildschirm, ohne den Nutzer durch eine Aufgabe zu führen. Du bleibst auf einer Seite, klickst auf die Elemente, die du beschreiben möchtest, und HappyRecorder verwandelt jedes in einen beschrifteten Tooltip. Der Leser öffnet den Artikel und bekommt den kompletten Bildschirm an einem Ort erklärt: Was macht jeder Button, was bedeutet jedes Feld, wo geht es weiter?

Nutze das für Orientierungsseiten. Ein Dashboard, ein Einstellungsbildschirm, ein Editor. Überall dort, wo ein Nutzer etwas öffnet und denkt "Was schaue ich mir da an?". Die Schritt-für-Schritt-Anleitung ist das Gegenteil: Nutze das, wenn es eine Aufgabe von Anfang bis Ende zu erledigen gibt.

Eine Sache, die wichtig ist zu wissen: Die UI-Übersicht ist die gleiche Aufnahme, die später deine In-App-Produkttouren antreibt. Nimm jetzt eine saubere Übersicht auf und du baust gleichzeitig die Tour, die du später in deiner App ausführen wirst.

Wie du eine aufnimmst

Öffne die HappyRecorder-Erweiterung, wähle Beschreibende Anleitung und tippe einen Titel ein, bevor du noch etwas anderes machst. Wähle dann die Gruppe in deinem Help Center aus, wo der Artikel landen soll. Du musst das nicht tun, aber dein zukünftiges Ich wird dir dafür danken, wenn du es gleich ordnest.

Jetzt klickst du dich durch den Bildschirm. Für jedes Element, das du klickst, liest HappyRecorder die zugrunde liegende ID und das DOM-Element aus (du wirst einen roten Rahmen darum sehen) und schreibt eine kurze Beschriftung, die beschreibt, was es tut. Du erzählst kein Video nach. Du zeigst auf Dinge, eins nach dem anderen, und lässt den Recorder den Kontext hinter jedem Klick erfassen.

Du brauchst kein Audio für eine UI-Übersicht. Audio ergänzt Schritt-für-Schritt-Anleitungen mit pro-Schritt-Kontext, aber eine Beschreibende Anleitung liest den Bildschirm selbst, also skip es.

Wenn du den Bildschirm abgedeckt hast, stoppe die Aufnahme und klicke auf hochladen. Warte, bis jeder Schritt "Fertig" anzeigt und grün wird, bevor du den Tab wechselst oder schliesst. Das vollständige Hochladen ist wichtig. Unterbrech es zu früh und die generierte Übersicht kann unvollständig herauskommen.

Wie du sie nach der Aufnahme bearbeitest

Jeder aufgenommene Artikel gibt dir einen visuellen Schritt-Editor zusätzlich zum normalen Text-Editor, damit du reparieren kannst, was der Recorder erfasst hat, ohne neu aufzunehmen. Öffne den Artikel, gehe zum Tab Schritte, und du siehst jedes erfasste Element mit seiner automatisch geschriebenen Beschriftung. Überarbeite jede Beschriftung, die daneben liegt. Lösche einen Schritt, den du nicht brauchst.

Um sensible Daten zu verbergen, verpixle sie in einem Schritt und HappyRecorder wendet die Verpixelung auf jeden Schritt an, der sie zeigt. Dein eigener Name in der oberen Leiste, ein Kundendatensatz, eine E-Mail-Adresse: verpixle einmal, weg überall.

Du kannst auch einen einzelnen Screenshot aus der Übersicht herausgreifen und in den Artikel-Body einfügen. Rechtsklick auf den Schritt, den du möchtest, und füge diesen Screenshot inline ein. Das ist hilfreich, wenn ein Leser tief im Artikel ist und genau sehen muss, wo ein bestimmter Button sitzt, ohne nach oben zu scrollen.

Wie du sie aktuell hältst, wenn sich die UI ändert

Wenn sich deine UI ändert, aktualisiere die erfassten Bildschirme vom Tab Schritte mit dem Screenshot-Button (aktuell in Beta). HappyRecorder öffnet die Seite, vergleicht die Live-UI mit den Elementen, die es während der Aufnahme erfasst hat, und tauscht jeden Bildschirm aus, der sich geändert hat. Wenn sich nichts geändert hat, passiert nichts.

Damit das funktioniert, brauchst du eine Login-Daten, die unter Einstellungen, Verbundene Produkte gespeichert sind. Das ist das Konto, das HappyRecorder nutzt, um die Seite zu erreichen und sie zu überprüfen. Im Moment aktualisierst du jeden Bildschirm einzeln. Weil das Beta ist, erwarte gelegentliche Spezialfälle, und schreib uns, wenn etwas falsch aussieht.

Tipps, die Zeit sparen

Entscheide, wo du anfangen möchtest, bevor du den Recorder öffnest. Wenn du die Erweiterung öffnest, einen Titel eingibst und dann das Fenster schliesst, um woanders zu navigieren, wird der Titel nicht übernommen. Kopiere deinen Titel zuerst, damit du ihn schnell einfügen kannst, falls das passiert.

Wenn du auf ein Element klickst, klick lieber auf die ganze Reihe oder Karte, statt auf ein winziges Stück davon. Das Ergebnis sieht mehr danach aus, was der Nutzer tatsächlich auf dem Bildschirm sieht. Wenn die Sache wirklich nur ein Icon ist, klick das Icon.

Halte die Aufnahme ungefähr 16:9. Wenn du ein schmales oder quadratisches Panel in einem riesigen Monitor aufnimmst, kommt die generierte Grafik in der gleichen komischen Form heraus. Ein normales Breitbild-Browserfenster gibt dir ein sauberes Ergebnis.

Behandle es ruhig. Das ist kein Loom und niemand schaut dir in Echtzeit bei der Aufnahme zu. Nimm dir Zeit zu entscheiden, was du anklicken und was du beschreiben möchtest. Es gibt keine Zeitbegrenzung.