Het Spotlight-element stelt je in staat de aandacht van de kijker op een specifiek gebied van een stap te vestigen door alles buiten het gedefinieerde spotlightgebied te dimmen. Alle gebieden buiten het spotlightgebied worden gedimmd. Momenteel kan het helderheidsniveau van het gedimde gebied niet worden aangepast.
Spotlight voor scenario's uit de echte wereld
| Scenario | Aanbevolen configuratie |
|---|---|
| Een gebruiker begeleiden om op een specifieke knop te klikken in een productdemo | Rechthoekige vorm, op maat om de knop te bedekken |
| Een icoon of statusindicator markeren | Cirkelvorm, op maat van het icoon |
| Aandacht vestigen op een navigatiemenu of een zijbalkitem | Rechthoekige vorm, die het menugebied bedekt |
| Focussen op een formulierveld tijdens een onboarding-walkthrough | Rechthoekige vorm, uitgelijnd met het invoergebied |
Een spotlight-element toevoegen
Hoe je spotlight toevoegt aan een stapsgewijze handleiding
- Navigeer naar de stap waarin je een spotlight wilt toevoegen.
- Scroll in het rechterpaneel naar het gedeelte Elementen toevoegen .
- Klik op Spotlight. Als er al één of meer spotlight-elementen zijn toegevoegd, klik dan op Nieuw toevoegen om een ander toe te voegen.
- Gebruik het oogpictogram rechtsboven in het Spotlight-paneel om de zichtbaarheid van de spotlight voor de eindgebruiker aan te zetten. Verborgen spotlights zijn niet zichtbaar in de gepubliceerde Flo, maar kunnen op elk moment weer zichtbaar worden.
- Schakel de schakelaar 'Andere elementen verbergen ' in om tijdelijk alle andere elementen op de huidige stap te verbergen terwijl je de spotlight configureert. Andere elementen zijn tijdelijk verborgen en worden niet verwijderd.
- Voer in het Naamveld een beschrijvend label in voor het spotlight-element.
- Kies onder Vormeen vorm uit het keuzemenu:
- Rechthoek - het meest geschikt voor het markeren van knoppen, formuliervelden, panelen of horizontale UI-regio's.
- Cirkel - geschikt voor iconen, avatars of cirkelvormige UI-componenten.
- Klik op Toepassen om het spotlight-element op te slaan.
Hoe voeg je spotlightvideo / interactieve demo toe
- Navigeer naar de stap waarin je een spotlight wilt toevoegen.
- Scroll in het rechterpaneel naar het gedeelte Elementen toevoegen .
- Klik op Spotlight. Als er al één of meer spotlight-elementen zijn toegevoegd, klik dan op Nieuw toevoegen om een ander toe te voegen.
- Gebruik het oogpictogram rechtsboven in het Spotlight-paneel om de zichtbaarheid van de spotlight voor de eindgebruiker aan te zetten. Verborgen spotlights zijn niet zichtbaar in de gepubliceerde Flo, maar kunnen op elk moment weer zichtbaar worden.
- Schakel de schakelaar 'Andere elementen verbergen ' in om tijdelijk alle andere elementen op de huidige stap te verbergen terwijl je de spotlight configureert. Andere elementen zijn tijdelijk verborgen en worden niet verwijderd.
- Voer in het Naamveld een beschrijvend label in voor het spotlight-element (bijv.
Spotlight - Submit Button,Spotlight - Navigation Menu). - Voer in het Starttijdveld de tijdstempel in waarop de spotlight zou moeten verschijnen.
- In het Eindtijdveld voer je de tijdstempel in waarop de spotlight zou moeten verdwijnen.
- Om een exact frame te selecteren, gebruik je de optie Select exact frame (15 fps). Gebruik de pijltjesknoppen om frame voor frame te navigeren, of voer direct een framenummer in. Klik op Selecteer om te bevestigen of Annuleren om af te doen.
- Kies onder Vormeen vorm uit het keuzemenu:
- Rechthoek - het meest geschikt voor het markeren van knoppen, formuliervelden, panelen of horizontale UI-regio's.
- Cirkel - geschikt voor iconen, avatars of cirkelvormige UI-componenten.
- Klik op Toepassen om het spotlight-element op te slaan.
Beheer van spotlight-elementen
Eenmaal toegevoegd worden spotlight-elementen weergegeven in het Spotlight-paneel, waarbij elk de naam van de spotlight en de stap waarop het wordt toegepast wordt weergegeven.
- Voeg een extra spotlight toe - Klik bovenaan het paneel op Voeg nieuw toe om een extra spotlight-element te configureren.
- Bewerk een spotlight - Klik op een willekeurige spotlight in de lijst om het configuratiepaneel te openen, waar naam, stap en vorm kunnen worden aangepast. Klik op Toepassen om wijzigingen op te slaan, Annuleren om terug te keren naar het Spotlight-paneel, of op het Verwijderen-icoon om het te verwijderen.
- Verwijder een spotlight - Beweeg met de muis over een spotlight in de lijst om het driepuntmenu te onthullen. Klik erop en selecteer Verwijderen om het spotlight-element permanent te verwijderen.
Best practices
- Gebruik beschrijvende namen - Label elke spotlight duidelijk zodat ze makkelijker te herkennen en te beheren zijn, vooral wanneer meerdere spotlights over verschillende stappen worden toegepast.
- Verbergen in plaats van verwijderen - Schakel tijdelijk spotlights uit die niet nodig zijn in plaats van ze te verwijderen. Dit behoudt de configuratie voor toekomstig gebruik.
- Herschal en herpositioneer na het aanbrengen - Zorg ervoor dat de spotlight precies het bedoelde gebied op het doek bedekt.
- Gebruik spotlights spaarzaam - Vermijd het aanbrengen van spotlights over te veel opeenvolgende stappen om hun effectiviteit te behouden.
- Preview na het aanbrengen - Controleer of het gedimde gebied andere essentiële scherminhoud niet verbergt.