Das Spotlight-Element ermöglicht es Ihnen, die Aufmerksamkeit des Betrachters auf einen bestimmten Bereich eines Schrittes zu lenken, indem Sie alles außerhalb des definierten Spotlight-Bereichs dimmen. Alle Bereiche außerhalb des Scheinwerferbereichs werden gedimmt. Derzeit kann die Helligkeit des gedimmten Bereichs nicht angepasst werden.
Spotlight für reale Szenarien
| Szenario | Empfohlene Konfiguration |
|---|---|
| Einen Nutzer anleiten, in einer Produktdemo auf einen bestimmten Button zu klicken | Rechteckige Form, so dimensioniert, dass sie den Knopf bedeckt |
| Hervorheben eines Symbols oder Statusindikators | Kreisform, entsprechend dem Symbol angepasst |
| Aufmerksamkeit auf ein Navigationsmenü oder einen Element in der Seitenleiste lenken | Rechteckige Form, die den Menübereich abdeckt |
| Fokussierung auf ein Formularfeld während eines Onboarding-Walkthroughs | Rechteckige Form, ausgerichtet auf den Eingabebereich |
Hinzufügen eines Spotlight-Elements
Wie man Spotlight zu einer Schritt-für-Schritt-Anleitung hinzufügt
- Navigiere zu dem Schritt, zu dem du ein Spotlight hinzufügen möchtest.
- Im rechten Fensterfeld scrollen Sie zum Abschnitt Elemente hinzufügen .
- Klicken Sie auf Spotlight. Wenn bereits ein oder mehrere Spotlight-Elemente hinzugefügt wurden, klicken Sie auf Neue hinzufügen , um ein weiteres einzufügen.
- Verwenden Sie das Augensymbol oben rechts im Spotlight-Panel, um die Sichtbarkeit des Spotlights für den Endnutzer zu aktivieren. Versteckte Scheinwerfer sind im veröffentlichten Flo nicht sichtbar, können aber jederzeit wieder sichtbar gemacht werden.
- Aktiviere den Schalter "Andere Elemente ausblenden ", um alle anderen Elemente im aktuellen Schritt vorübergehend auszublenden, während du den Spotlight konfigurierst. Andere Elemente sind vorübergehend versteckt und werden nicht gelöscht.
- Im Namensfeld geben Sie ein beschreibendes Label für das Spotlight-Element ein.
- Wählen Sie unter Formeine Form aus dem Dropdown-Menü:
- Rechteck – am besten geeignet, um Buttons, Formularfelder, Panels oder horizontale UI-Bereiche hervorzuheben.
- Kreis – geeignet für Symbole, Avatare oder kreisförmige UI-Komponenten.
- Klicken Sie auf Anwenden , um das Spotlight-Element zu speichern.
Wie man ein Spotlight-Video / interaktive Demo hinzufügt
- Navigiere zu dem Schritt, zu dem du ein Spotlight hinzufügen möchtest.
- Im rechten Fensterfeld scrollen Sie zum Abschnitt Elemente hinzufügen .
- Klicken Sie auf Spotlight. Wenn bereits ein oder mehrere Spotlight-Elemente hinzugefügt wurden, klicken Sie auf Neue hinzufügen , um ein weiteres einzufügen.
- Verwenden Sie das Augensymbol oben rechts im Spotlight-Panel, um die Sichtbarkeit des Spotlights für den Endnutzer zu aktivieren. Versteckte Scheinwerfer sind im veröffentlichten Flo nicht sichtbar, können aber jederzeit wieder sichtbar gemacht werden.
- Aktiviere den Schalter "Andere Elemente ausblenden ", um alle anderen Elemente im aktuellen Schritt vorübergehend auszublenden, während du den Spotlight konfigurierst. Andere Elemente sind vorübergehend versteckt und werden nicht gelöscht.
- Im Namensfeld geben Sie eine beschreibende Bezeichnung für das Spotlight-Element ein (z. B.
Spotlight - Submit Button,Spotlight - Navigation Menu). - Im Startzeit-Feld geben Sie den Zeitstempel ein, bei dem das Scheinwerferlicht erscheinen sollte.
- Im Feld "Endzeit" geben Sie den Zeitstempel ein, bei dem das Scheinwerferlicht verschwinden sollte.
- Um einen exakten Frame auszuwählen, nutze die Option "Exaktes Bild auswählen" (15 fps). Verwenden Sie die Pfeiltasten, um Bild für Bild zu navigieren, oder geben Sie direkt eine Bildnummer ein. Klicken Sie auf Auswählen , um zu bestätigen, oder auf Stornieren , um abzuwerfen.
- Wählen Sie unter Formeine Form aus dem Dropdown-Menü:
- Rechteck – am besten geeignet, um Buttons, Formularfelder, Panels oder horizontale UI-Bereiche hervorzuheben.
- Kreis – geeignet für Symbole, Avatare oder kreisförmige UI-Komponenten.
- Klicken Sie auf Anwenden , um das Spotlight-Element zu speichern.
Verwaltung von Spotlight-Elementen
Nach dem Hinzufügen werden die Spotlight-Elemente im Spotlight-Panel aufgelistet, wobei jedes den Namen des Spotlights und den angewandten Schritt anzeigt.
- Fügen Sie einen weiteren Spotlight hinzu – Klicken Sie oben im Panel auf Hinzufügen , um ein zusätzliches Spotlight-Element zu konfigurieren.
- Spotlight bearbeiten – Klicken Sie auf einen beliebigen Spotlight in der Liste, um das Konfigurationsfeld zu öffnen, in dem Name, Schritt und Form geändert werden können. Klicken Sie auf Anwenden , um Änderungen zu speichern, auf Abbrechen , um zum Spotlight-Fenster zurückzukehren, oder auf das Löschen-Symbol , um sie zu löschen.
- Lösche ein Spotlight – Fahre mit der Maus über ein Spotlight in der Liste, um das Drei-Punkte-Menü anzuzeigen. Klicken Sie darauf und wählen Sie Löschen , um das Spotlight-Element dauerhaft zu entfernen.
Best Practices
- Verwenden Sie beschreibende Namen – Beschriften Sie jeden Scheinwerfer deutlich, damit er leichter zu erkennen und zu verwalten ist, besonders wenn mehrere Scheinwerfer über verschiedene Schritte verteilt sind.
- Verstecken statt löschen – Deaktiviere vorübergehend Scheinwerfer, die nicht benötigt werden, anstatt sie zu löschen. Dies bewahrt die Konfiguration für die zukünftige Nutzung.
- Nach dem Auftragen neu dimensionieren und neu positionieren – Stellen Sie sicher, dass der Scheinwerfer den vorgesehenen Bereich auf der Leinwand genau abdeckt.
- Verwenden Sie Spotlights sparsam – Vermeiden Sie es, Spotlights über zu viele aufeinanderfolgende Schritte anzubringen, um ihre Wirksamkeit zu erhalten.
- Vorschau nach Anwendung – Überprüfen Sie, ob der gedimmte Bereich keine weiteren wichtigen Inhalte auf dem Bildschirm verdeckt.